/* J&S FRG website — mid sections: WhatWeDeliver (modules), ProvenResults, Pricing */

/* ---- Module card -------------------------------------------------- */
function ModuleCard({ icon, stage, title, items, wide = false }) {
  return (
    <div style={{ position: 'relative', borderRadius: 22, background: FRG.moduleCard, border: FRG.cardBorder, padding: '26px 28px 30px', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 120, backgroundImage: 'radial-gradient(rgba(246,244,239,0.10) 1px, transparent 1.4px)', backgroundSize: '10px 10px', opacity: 0.5, pointerEvents: 'none' }} />
      <div style={{ position: 'relative' }}>
        <div style={{ width: 46, height: 46, borderRadius: 999, background: 'linear-gradient(160deg,#26282e,#14151a)', border: '1px solid rgba(246,244,239,0.14)', display: 'grid', placeItems: 'center', marginBottom: 34 }}>
          <Icon name={icon} size={22} color={FRG.text} />
        </div>
        <div style={{ font: '700 12px var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.14em', color: FRG.faint, marginBottom: 12 }}>{stage}</div>
        <h3 style={{ margin: '0 0 22px', fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '-0.01em', lineHeight: 1.0, fontSize: 30, color: FRG.text }}>{title}</h3>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, columns: wide ? 2 : 1, columnGap: 40 }}>
          {items.map((it, i) => <CheckItem key={i}>{it}</CheckItem>)}
        </ul>
      </div>
    </div>
  );
}

function WhatWeDeliver() {
  return (
    <section style={{ paddingTop: 120, paddingBottom: 120 }}>
      <Container>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Pill>What we deliver</Pill>
          <Headline size={44} style={{ marginTop: 20 }} muted="to report">From protocol to plot</Headline>
        </div>
        <div className="frg-stages" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          <div className="frg-reveal"><ModuleCard icon="clipboard-list" stage="Stage 01" title="Protocol Setup" items={['Protocol review & feasibility', 'Grower & site agreements', 'GPS-mapped plot selection', 'Soil characterization', 'Treatment map & labeling']} /></div>
          <div className="frg-reveal"><ModuleCard icon="layout-grid" stage="Stage 02" title="Trial Design" items={['RCBD, CRD & split-plot layouts', 'Randomization & replication', 'Untreated & standard checks', 'Plot dimensions to spec']} /></div>
          <div className="frg-reveal"><ModuleCard icon="sprout" stage="Stage 03" title="Field Execution" items={['Calibrated planting & application', 'Stand counts & phenology', 'Tissue & soil sampling', 'Disease, weed & insect ratings', 'In-season plot photography']} /></div>
        </div>
        <div className="frg-reveal" style={{ marginTop: 20 }}>
          <ModuleCard wide icon="file-check-2" stage="Stage 04" title="Data & Reporting" items={['Harvest dataset delivery', 'Formatted season report', 'Design, means & statistics', 'Field notes & observations', 'Environmental Data Delivery', 'Multi-year trend summaries']} />
        </div>
      </Container>
    </section>
  );
}

/* ---- Proven results (collage) ------------------------------------- */
function ProvenResults({ go }) {
  return (
    <section id="research" style={{ paddingTop: 40, paddingBottom: 120 }}>
      <Container style={{ textAlign: 'center' }}>
        <Headline size={64} muted="Client Access.">On-Site</Headline>
        <p style={{ margin: '28px auto 0', color: FRG.muted, fontSize: 20, lineHeight: 1.5, maxWidth: '58ch' }}>
          Walk the plots throughout the growing season and use the trial site for sales training.
        </p>
      </Container>
    </section>
  );
}

/* ---- Pricing / engagement ----------------------------------------- */
function Pricing({ go }) {
  const [plan, setPlan] = React.useState('season');
  const features = ['Dedicated field research lead', 'Full protocol implementation', 'In-season data collection & sampling', 'End of Season Data Set and Report'];
  return (
    <section style={{ position: 'relative', padding: '30px 0 130px', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(80% 60% at 50% 60%, rgba(200,16,46,0.16), transparent 70%)', pointerEvents: 'none' }} />
      <Container style={{ position: 'relative' }}>
        <div className="frg-grid-pricing" style={{ position: 'relative' }}>
        <div>
          <Pill>Plan</Pill>
          <Headline align="left" size={46} style={{ marginTop: 20 }} muted="Research Program">Plan your</Headline>
          <p style={{ margin: '22px 0 0', color: FRG.muted, fontSize: 16, lineHeight: 1.65, maxWidth: '42ch' }}>
            Pricing is per-protocol based on treatments, sites, and replication. Request a quote and we'll size it with you.
          </p>
        </div>
        <div style={{ position: 'relative', borderRadius: 24, background: 'linear-gradient(180deg,#1b1c21,#111216)', border: FRG.cardBorder, padding: '32px 34px 34px', boxShadow: '0 30px 70px rgba(0,0,0,0.5)' }}>
          <div style={{ position: 'absolute', top: -1, left: '20%', right: '20%', height: 90, background: 'radial-gradient(closest-side, rgba(246,244,239,0.12), transparent)', pointerEvents: 'none' }} />
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
            <span style={{ padding: '6px 16px', borderRadius: 999, background: 'rgba(246,244,239,0.08)', border: '1px solid rgba(246,244,239,0.14)', font: '700 12px var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.1em', color: FRG.text }}>Submit a Protocol</span>
          </div>
          <div style={{ textAlign: 'center' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 60, letterSpacing: '-0.02em', color: FRG.text, lineHeight: 1 }}>Custom</span>
          </div>
          <div style={{ textAlign: 'center', color: FRG.muted, fontSize: 13, marginTop: 8 }}>Scoped per protocol · treatments × sites × reps</div>
          {/* toggle */}
          <div style={{ display: 'flex', gap: 6, background: 'rgba(246,244,239,0.05)', borderRadius: 999, padding: 5, margin: '22px 0' }}>
            {[['season','Single-Season'],['multi','Multi-Year']].map(([k, lbl]) => (
              <button key={k} onClick={() => setPlan(k)} style={{ flex: 1, padding: '10px 0', borderRadius: 999, border: 'none', cursor: 'pointer', font: '700 13px var(--font-body)', background: plan === k ? FRG.redPill : 'transparent', color: plan === k ? '#fff' : FRG.muted }}>{lbl}</button>
            ))}
          </div>
          <ul style={{ listStyle: 'none', margin: '0 0 24px', padding: 0 }}>
            {features.map((f, i) => <CheckItem key={i}>{f}</CheckItem>)}
          </ul>
          <CTAButton size="lg" style={{ width: '100%', justifyContent: 'center' }} onClick={trialInquiry}>Trial Inquiry</CTAButton>
        </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { WhatWeDeliver, ProvenResults, Pricing });