// fairfarms.com — footer on ink
const { Seal, CertBadge } = window.FF;

function Footer() {
  const cols = [
    { h: 'Products', l: ['Black pepper', 'Red pepper', 'White pepper', 'Spice range', 'Foodservice formats'] },
    { h: 'Trade', l: ['Buyer portal', 'Spec sheets', 'Certificates', 'Incoterms & lead times', 'Sample requests'] },
    { h: 'Company', l: ['Our farmers', 'Traceability', 'Social report 2026', 'News', 'Contact'] },
  ];
  return (
    <footer className="ff-on-ink" style={{ background: 'var(--ff-ink)', color: 'var(--ff-paper)', borderTop: '2px solid var(--ff-pepper)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-10) var(--space-6) var(--space-6)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr repeat(3, 1fr)', gap: 'var(--space-8)' }}>
          <div>
            <Seal size={56} colour="paper" assetBase="../../" />
            <p style={{ margin: 'var(--space-4) 0 0', maxWidth: '32ch', font: 'var(--type-body-sm)', color: 'rgba(247,242,232,0.72)' }}>
              Fair Farms Co. Ltd — Phnom Penh, Cambodia. Packing and export of Kampot pepper
              and Cambodian spice.
            </p>
            <p style={{ margin: '12px 0 0', font: 'var(--type-mono)', fontSize: 12, color: 'rgba(247,242,232,0.5)' }}>
              www.fair-farms.com · +855 __ ___ ___
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <h3 style={{ margin: '0 0 var(--space-4)', font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(247,242,232,0.5)' }}>{c.h}</h3>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.l.map((l) => (
                  <li key={l}><a href="#" style={{ font: 'var(--type-body-sm)', color: 'rgba(247,242,232,0.86)', textDecoration: 'none' }}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-9)', paddingTop: 'var(--space-6)', borderTop: '1px solid rgba(247,242,232,0.16)' }}>
          <CertBadge name="Fair for Life" art="assets/certifications/fair-for-life-mark.png" number="Partner since 2018" date="Audit 25 May 2026" height={36} assetBase="../../" />
          <CertBadge name="USDA NOP Organic" number="7880187533" date="6 February 2026" height={36} assetBase="../../" />
          <CertBadge name="EU Organic · TRACES" number="2018-848TC" date="Ecocert" height={36} assetBase="../../" />
          <CertBadge name="Kampot Pepper PGI" number="Registered packager" date="KPPA" height={36} assetBase="../../" />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-6)', marginTop: 'var(--space-6)', paddingTop: 'var(--space-4)', borderTop: '1px solid rgba(247,242,232,0.16)', font: 'var(--type-meta)', color: 'rgba(247,242,232,0.5)' }}>
          <span>© 2026 Fair Farms Co. Ltd</span>
          <span style={{ display: 'flex', gap: 'var(--space-4)' }}><a href="#" style={{ color: 'inherit' }}>English</a><a href="#" style={{ color: 'inherit' }}>Français</a><a href="#" style={{ color: 'inherit', fontFamily: 'var(--ff-font-khmer)' }}>ខ្មែរ</a></span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;