/* J&S FRG website — bottom sections: Partners, TrustedGrid, SneakPeek, FAQ, FinalCTA, Footer */

/* ---- Trusted by (moving logo carousel) ---------------------------- */
const FRG_LOGOS = [
  { src: '../../assets/logos/amvac.png', alt: 'AMVAC', maxH: 70 },
  { src: '../../assets/logos/valent.png', alt: 'Valent', maxH: 76 },
  { src: '../../assets/logos/calcium-products.png', alt: 'Calcium Products', maxH: 52 },
  { src: '../../assets/logos/lallemand.png', alt: 'Lallemand', maxH: 70 },
  { src: '../../assets/logos/heads-up-logo.png', alt: 'Heads Up', maxH: 66 },
];
function LogoChip({ src, alt, maxH, transparent }) {
  return (
    <div className="frg-logo-chip" style={{ flex: '0 0 auto', width: 210, height: 100, borderRadius: 14, background: transparent ? 'transparent' : '#F6F4EF', display: 'grid', placeItems: 'center', padding: transparent ? '0 8px' : '0 22px' }}>
      <img src={src} alt={alt} style={{ maxHeight: maxH, maxWidth: '100%', objectFit: 'contain' }} />
    </div>
  );
}
function LogoTrack({ copy }) {
  const set = [...FRG_LOGOS, ...FRG_LOGOS];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 28, paddingRight: 28, flex: '0 0 auto' }} aria-hidden={copy ? 'true' : undefined}>
      {set.map((l, i) => <LogoChip key={i} {...l} />)}
    </div>
  );
}
function TrustedBy() {
  return (
    <section id="partners" style={{ paddingBottom: 120, overflow: 'hidden' }}>
      <Container>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <Pill>Trusted by</Pill>
          <Headline size={40} style={{ marginTop: 20, whiteSpace: 'nowrap' }} muted="partner with us">The brands that</Headline>
        </div>
      </Container>
      <div className="frg-marquee" style={{ position: 'relative' }}>
        <div className="frg-marquee-track">
          <LogoTrack />
          <LogoTrack copy />
        </div>
        <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: 140, background: 'linear-gradient(90deg,#0E0F12,transparent)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, width: 140, background: 'linear-gradient(270deg,#0E0F12,transparent)', pointerEvents: 'none' }} />
      </div>
    </section>
  );
}

/* ---- Trusted grid ------------------------------------------------- */
function TrustedGrid() {
  const photos = [
    '../../assets/photos/roots.jpg',
    '../../assets/photos/IMG_4663.jpg',
    '../../assets/photos/drone.webp',
    '../../assets/photos/DJ9A0026.jpg',
    '../../assets/photos/tassel.jpg',
    '../../assets/photos/rows.jpg',
    '../../assets/photos/canopy.jpg',
    '../../assets/photos/DJ9A0006.jpg',
    '../../assets/photos/sprayer.jpg',
  ];
  return (
    <section style={{ paddingBottom: 120 }}>
      <Container>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <Headline size={40} muted="the Corn Belt">Trusted across</Headline>
          <p style={{ margin: '16px auto 0', color: FRG.muted, font: '600 13px var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>Main Location · Williamsburg, Iowa</p>
        </div>
        <div className="frg-grid-photos">
          {photos.map((src, i) => (
            <div key={i} style={{ position: 'relative', width: '100%', aspectRatio: '4/3', borderRadius: 12, overflow: 'hidden' }}>
              <img src={src} alt="Field research" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ---- Sneak peek --------------------------------------------------- */
function SneakPeek({ go }) {
  return (
    <section style={{ paddingBottom: 120 }}>
      <Container style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <Pill>Behind the plots</Pill>
          <Headline align="left" size={44} style={{ marginTop: 20 }} muted="in action">See the research</Headline>
          <p style={{ margin: '20px 0 26px', color: FRG.muted, fontSize: 17, lineHeight: 1.6, maxWidth: '38ch' }}>A walkthrough of a season — siting, planting, scoring, and the report that lands on your desk.</p>
          <CTAButton onClick={() => go('research')}>Watch the walkthrough</CTAButton>
        </div>
        <div style={{ position: 'relative', borderRadius: 18, overflow: 'hidden', aspectRatio: '16/10' }}>
          <Photo tone="field" ratio="16/10" radius={18} style={{ position: 'absolute', inset: 0, height: '100%' }} label="2026 season walkthrough" />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(8,8,10,0.6))' }} />
          <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 66, height: 66, borderRadius: 999, background: FRG.redPill, display: 'grid', placeItems: 'center', boxShadow: '0 10px 30px rgba(200,16,46,0.5)' }}>
            <Icon name="play" size={26} color="#fff" />
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ---- FAQ accordion ------------------------------------------------ */
function FaqItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderRadius: 14, background: 'rgba(246,244,239,0.03)', border: '1px solid rgba(246,244,239,0.09)', overflow: 'hidden' }}>
      <button onClick={onToggle} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '20px 24px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
        <span style={{ font: '600 17px var(--font-body)', color: FRG.text }}>{q}</span>
        <span style={{ flex: '0 0 auto', transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 200ms var(--ease)' }}><Icon name="plus" size={20} color={FRG.muted} /></span>
      </button>
      <div style={{ maxHeight: open ? 200 : 0, transition: 'max-height 260ms var(--ease)', overflow: 'hidden' }}>
        <p style={{ margin: 0, padding: '0 24px 22px', color: FRG.muted, fontSize: 15, lineHeight: 1.6, maxWidth: '70ch' }}>{a}</p>
      </div>
    </div>
  );
}
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: 'What crops and trial types do you handle?', a: 'Field corn and soybean — fertility, crop protection, biologicals, seed treatments, and adjuvants. Efficacy, rate-response, tank-mix, and GLP-style replicated trials.' },
    { q: 'What do I receive at the end of a season?', a: 'An audit-ready dataset plus a formatted season report: trial design, treatment means, statistics, and field notes, formatted for your regulatory and marketing teams.' },
    { q: 'How early should we book capacity?', a: 'As early as possible. We book field capacity ahead of planting; the sooner we scope your protocol, the more siting and timing flexibility you have.' },
  ];
  return (
    <section id="faqs" style={{ paddingBottom: 120 }}>
      <Container style={{ maxWidth: 860 }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <Pill>FAQ</Pill>
          <Headline size={42} style={{ marginTop: 20 }} muted="Questions">Frequently Asked</Headline>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map((f, i) => <FaqItem key={i} {...f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />)}
        </div>
      </Container>
    </section>
  );
}

/* ---- Final CTA ---------------------------------------------------- */
function FinalCTA({ go }) {
  return (
    <section id="contact" style={{ position: 'relative', overflow: 'hidden', padding: '120px 0 130px' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 120% at 50% 130%, rgba(200,16,46,0.55), transparent 62%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 5, background: FRG.gold }} />
      <Container style={{ position: 'relative', textAlign: 'center' }}>
        <Headline size={56} highlight="Program">Start your 2027 field research</Headline>
        <p style={{ margin: '22px auto 34px', maxWidth: 520, color: FRG.muted, fontSize: 18, lineHeight: 1.55 }}>Tell us about your protocol and target geography. We’ll size the program and lock siting before planting.</p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center' }}>
          <CTAButton size="lg" onClick={trialInquiry}>Trial Inquiry</CTAButton>
        </div>
      </Container>
    </section>
  );
}

/* ---- Footer ------------------------------------------------------- */
function Footer() {
  const cols = [
    { h: 'Capabilities', items: ['Protocol setup', 'Trial design', 'Field execution', 'Data & analysis', 'Reporting'] },
    { h: 'Company', items: ['About', 'Research', 'Partners', 'Careers', 'Contact'] },
    { h: 'Crops', items: ['Corn', 'Soybeans'] },
  ];
  return (
    <footer style={{ borderTop: '1px solid rgba(246,244,239,0.08)', padding: '60px 0 36px', background: '#0B0C0E' }}>
      <Container className="frg-grid-4">
        <div>
          <Wordmark />
          <p style={{ margin: '18px 0 0', color: FRG.muted, maxWidth: '32ch', lineHeight: 1.5, fontSize: 14 }}>Independent third-party field research.</p>
          <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 8 }}>
            <span style={{ font: '700 11px var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.14em', color: FRG.faint }}>Division of</span>
            <img src="../../assets/logos/js-farm-supply-logo.png" alt="J&S Farm Supply" style={{ height: 56, width: 'auto', objectFit: 'contain', filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.5))' }} />
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ font: '700 11px var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.14em', color: FRG.red, marginBottom: 16 }}>{c.h}</div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map((it) => <li key={it}><a href="#top" style={{ color: FRG.muted, textDecoration: 'none', fontSize: 14 }}>{it}</a></li>)}
            </ul>
          </div>
        ))}
      </Container>
      <Container style={{ marginTop: 44, paddingTop: 22, borderTop: '1px solid rgba(246,244,239,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <span style={{ font: '600 12px var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.12em', color: FRG.faint }}>© 2026 J&amp;S Field Research Group</span>
        <span style={{ display: 'inline-flex', gap: 16 }}>
          {['mail','phone','globe'].map((n) => <Icon key={n} name={n} size={18} color={FRG.muted} />)}
        </span>
      </Container>
    </footer>
  );
}

Object.assign(window, { TrustedBy, TrustedGrid, SneakPeek, FAQ, FinalCTA, Footer });