/* J&S FRG website — top sections: Nav, Hero, PressStrip, WhyBento */

/* ---- Sticky nav --------------------------------------------------- */
function Nav({ go }) {
  const links = ['Home', 'Capabilities', 'Research', 'Partners', 'FAQs'];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 60, background: 'rgba(14,15,18,0.72)', backdropFilter: 'blur(14px)', borderBottom: '1px solid rgba(246,244,239,0.07)' }}>
      <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 74 }}>
        <Wordmark />
        <nav className="frg-hide-tablet" style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {links.map((l) => (
            <a key={l} href={'#' + l.toLowerCase()} onClick={(e) => { e.preventDefault(); go(l.toLowerCase()); }}
              style={{ font: '600 14px var(--font-body)', color: FRG.muted, textDecoration: 'none' }}
              onMouseEnter={(e) => e.currentTarget.style.color = FRG.text}
              onMouseLeave={(e) => e.currentTarget.style.color = FRG.muted}>{l}</a>
          ))}
        </nav>
        <button onClick={trialInquiry} style={{ padding: '10px 22px', borderRadius: 999, background: 'transparent', border: '1px solid rgba(246,244,239,0.28)', color: FRG.text, font: '700 13px var(--font-body)', cursor: 'pointer' }}>Start a Trial</button>
      </Container>
    </header>
  );
}

/* ---- Phone mockup (J&S Field app) --------------------------------- */
function PhoneMockup() {
  return (
    <div style={{ width: 320, borderRadius: 46, padding: 11, background: 'linear-gradient(160deg, #2a2c31, #16171b)', boxShadow: '0 40px 90px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(246,244,239,0.06)' }}>
      <div style={{ borderRadius: 36, background: '#111216', overflow: 'hidden', position: 'relative', paddingBottom: 2 }}>
        {/* status bar */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 26px 8px', color: FRG.text }}>
          <span style={{ font: '700 15px var(--font-body)', fontVariantNumeric: 'tabular-nums' }}>8:28</span>
          <div style={{ position: 'absolute', left: '50%', top: 13, transform: 'translateX(-50%)', width: 92, height: 26, borderRadius: 999, background: '#000' }} />
          <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><Icon name="signal" size={15} color={FRG.text} /><Icon name="wifi" size={15} color={FRG.text} /><Icon name="battery-full" size={17} color={FRG.text} /></span>
        </div>
        {/* app header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 18px 14px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <span style={{ width: 34, height: 34, borderRadius: 999, overflow: 'hidden' }}><Photo tone="people" ratio="1/1" radius={999} /></span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 999, background: 'rgba(246,244,239,0.08)', color: FRG.text, font: '600 12px var(--font-body)' }}><Icon name="sprout" size={13} color={FRG.gold} /> 2026 Season</span>
          </div>
          <span style={{ display: 'inline-flex', gap: 12 }}><Icon name="message-square" size={17} color={FRG.muted} /><Icon name="clipboard-list" size={17} color={FRG.muted} /><Icon name="bell" size={17} color={FRG.muted} /></span>
        </div>
        {/* white card */}
        <div style={{ margin: '4px 12px 16px', background: '#fff', borderRadius: 18, padding: '16px 16px 18px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ padding: '5px 11px', borderRadius: 999, background: '#F2EEE4', font: '600 11px var(--font-data)', color: '#0E0F12' }}>TRIAL-26-0417</span>
            <Icon name="chevron-down" size={16} color="#8a8378" />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '13px 0 3px' }}>
            <Icon name="flask-conical" size={19} color={FRG.redDeep} />
            <span style={{ font: 'var(--fw-display) 19px var(--font-display)', textTransform: 'uppercase', letterSpacing: '-0.01em', color: '#0E0F12' }}>Starter Fertility</span>
          </div>
          <div style={{ color: '#6b665d', fontSize: 13 }}>RCBD · 4 reps · 3 sites</div>
          <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
            <div style={{ flex: 1, background: '#F7F4EC', borderRadius: 10, padding: '10px 12px' }}><div style={{ font: '600 10px var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8378' }}>Yield lift</div><div style={{ font: 'var(--fw-display) 20px var(--font-display)', color: FRG.redDeep, fontVariantNumeric: 'tabular-nums' }}>+6.8</div></div>
            <div style={{ flex: 1, background: '#F7F4EC', borderRadius: 10, padding: '10px 12px' }}><div style={{ font: '600 10px var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8378' }}>Avg Moisture</div><div style={{ font: 'var(--fw-display) 20px var(--font-display)', color: '#0E0F12', fontVariantNumeric: 'tabular-nums' }}>15.5%</div></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* floating label bubble with pointer */
function FloatBubble({ label, top, left, right, delay = 0 }) {
  return (
    <div className="frg-hide-tablet" style={{ position: 'absolute', top, left, right, display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 10, background: 'rgba(30,31,36,0.92)', border: '1px solid rgba(246,244,239,0.10)', font: '700 12px var(--font-body)', color: FRG.text, boxShadow: '0 8px 24px rgba(0,0,0,0.4)', animation: `frgFloat 6s ease-in-out ${delay}s infinite` }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background: FRG.red }} /> {label}
    </div>
  );
}
function IconBubble({ name, top, left, right, delay = 0 }) {
  return (
    <div className="frg-hide-tablet" style={{ position: 'absolute', top, left, right, width: 52, height: 52, borderRadius: 999, background: 'linear-gradient(160deg, #22242a, #131418)', border: '1px solid rgba(246,244,239,0.10)', display: 'grid', placeItems: 'center', boxShadow: '0 10px 26px rgba(0,0,0,0.45)', animation: `frgFloat 7s ease-in-out ${delay}s infinite` }}>
      <Icon name={name} size={22} color={FRG.text} />
    </div>
  );
}

/* ---- Hero --------------------------------------------------------- */
function Hero({ go }) {
  return (
    <section id="home" style={{ position: 'relative', overflow: 'hidden', paddingTop: 40, paddingBottom: 40 }}>
      {/* top radial */}
      <div style={{ position: 'absolute', top: -140, left: '50%', transform: 'translateX(-50%)', width: 900, height: 460, background: 'radial-gradient(closest-side, rgba(246,244,239,0.10), transparent)', pointerEvents: 'none' }} />
      <Container style={{ position: 'relative', textAlign: 'center' }}>
        <h1 style={{ margin: '0 auto', maxWidth: 900, fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '-0.015em', lineHeight: 0.95, fontSize: 'clamp(2.75rem, 9vw, 7.5rem)', color: FRG.text }}>
          Innovation <span style={{ color: FRG.red }}>Fortified.</span>
        </h1>
        <p style={{ margin: '24px auto 0', maxWidth: 620, fontSize: 19, lineHeight: 1.55, color: FRG.muted }}>
          We deliver and implement independent, third-party research protocols for corn and soybean crop-input manufacturers — sited, planted, scored, and returned as clean, harvest-data ready.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
          <CTAButton size="lg" onClick={trialInquiry}>Start a Trial</CTAButton>
        </div>

        {/* hero visual — hidden on mobile so the top of the page reads cleanly */}
        <div className="frg-hide-mobile" style={{ position: 'relative', height: 560, marginTop: 30 }}>
          {/* red identity glow behind phone */}
          <div style={{ position: 'absolute', top: 90, left: '50%', transform: 'translateX(-50%)', width: 620, height: 380, background: 'radial-gradient(closest-side, rgba(200,16,46,0.30), transparent 72%)', filter: 'blur(6px)' }} />
          {/* corn growth-stage backdrop */}
          <img src="../../assets/photos/corn-growth-stages-white.png" alt="" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height: '78%', objectFit: 'fill', opacity: 0.22, pointerEvents: 'none' }} />
          {/* trend line through the growth stages */}
          <svg viewBox="0 0 1180 560" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible' }}>
            <path id="trendPath" d="M7 486 L97 421 L179 408 L231 382 L366 336 L538 263 L694 134 L897 95 L1100 99" fill="none" stroke="rgba(217,56,64,0.85)" strokeWidth="2.5" vectorEffect="non-scaling-stroke" />
            {[[7,486],[97,421],[179,408],[231,382],[366,336],[538,263],[694,134],[897,95],[1100,99]].map(([cx, cy], i) => (
              <circle key={i} cx={cx} cy={cy} r="4" fill="#0E0F12" stroke="rgba(217,56,64,0.9)" strokeWidth="2" vectorEffect="non-scaling-stroke" />
            ))}
            <defs>
              <filter id="beadGlow" x="-400%" y="-400%" width="900%" height="900%">
                <feGaussianBlur stdDeviation="5" result="b" />
                <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
              </filter>
            </defs>
            <g filter="url(#beadGlow)">
              <circle r="8" fill="#3FB94F" opacity="0.5" />
              <circle r="3.4" fill="#C4F8CD" />
              <animateMotion dur="12s" repeatCount="indefinite" rotate="auto" calcMode="linear">
                <mpath href="#trendPath" />
              </animateMotion>
            </g>
          </svg>
          {/* phone */}
          <div style={{ position: 'absolute', top: 40, left: '50%', transform: 'translateX(-50%)', zIndex: 3 }}><PhoneMockup /></div>
          {/* bubbles */}
          <FloatBubble label="Replicated" top={90} left="20%" delay={0} />
          <FloatBubble label="Independent" top={210} right="16%" delay={1.2} />
          <FloatBubble label="Randomized" top={330} left="24%" delay={0.6} />
          <IconBubble name="bar-chart-3" top={200} left="12%" delay={0.3} />
          <IconBubble name="flask-conical" top={340} right="22%" delay={0.9} />
          <IconBubble name="map-pin" top={110} right="10%" delay={1.5} />
          <IconBubble name="sprout" top={430} right="30%" delay={0.4} />
        </div>
      </Container>
    </section>
  );
}

/* ---- Press / trust strip ------------------------------------------ */
function PressStrip() {
  const marks = ['SEED TREATMENT', 'CROP PROTECTION', 'BIOLOGICALS', 'LIQUID FERTILIZER', 'DRY FERTILIZER', 'FUNGICIDE', 'IN-FURROW LIQUID DELIVERY'];
  return (
    <section style={{ padding: '10px 0 70px' }}>
      <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
        {marks.map((m) => (
          <span key={m} style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.04em', fontSize: 22, color: 'rgba(246,244,239,0.22)' }}>{m}</span>
        ))}
      </Container>
    </section>
  );
}

/* ---- Mini illustrations for bento --------------------------------- */
function MiniDash() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 18 }}>
      <div style={{ height: '100%', borderRadius: 12, background: 'rgba(246,244,239,0.03)', border: '1px solid rgba(246,244,239,0.06)', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'flex', gap: 5 }}>{['#D93840','#E5C063','#4E7032'].map(c => <span key={c} style={{ width: 8, height: 8, borderRadius: 999, background: c }} />)}</div>
        <div style={{ display: 'flex', gap: 8, flex: 1 }}>
          <div style={{ flex: 1, background: 'rgba(246,244,239,0.04)', borderRadius: 8, padding: 8, display: 'flex', flexDirection: 'column', gap: 5 }}>
            {[0.8,0.6,0.7,0.5].map((w,i) => <span key={i} style={{ height: 5, width: `${w*100}%`, borderRadius: 4, background: 'rgba(246,244,239,0.12)' }} />)}
          </div>
          <div style={{ flex: 1, background: 'rgba(246,244,239,0.04)', borderRadius: 8, display: 'grid', placeItems: 'center' }}>
            <svg viewBox="0 0 80 40" width="82%"><polyline points="4,32 18,26 30,30 44,16 58,22 74,8" fill="none" stroke={FRG.red} strokeWidth="2.5" /></svg>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {[60,30,10].map((p,i) => (
            <div key={i} style={{ flex: 1, background: 'rgba(246,244,239,0.04)', borderRadius: 8, display: 'grid', placeItems: 'center', padding: 8 }}>
              <div style={{ width: 30, height: 30, borderRadius: 999, background: `conic-gradient(${FRG.red} ${p}%, rgba(246,244,239,0.12) 0)`, display: 'grid', placeItems: 'center' }}>
                <span style={{ width: 20, height: 20, borderRadius: 999, background: '#16171b', display: 'grid', placeItems: 'center', font: '700 8px var(--font-data)', color: FRG.text }}>{p}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
function MiniBars() {
  const bars = [0.5,0.75,0.4,0.9,0.6,0.8,0.55,0.7];
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 22, display: 'flex', alignItems: 'flex-end', gap: 8 }}>
      {bars.map((h,i) => <div key={i} style={{ flex: 1, height: `${h*100}%`, borderRadius: '4px 4px 0 0', background: i % 2 ? 'linear-gradient(180deg,#D93840,#8A0B20)' : 'rgba(246,244,239,0.14)' }} />)}
    </div>
  );
}

/* ---- Why bento ---------------------------------------------------- */
function WhyBento() {
  const cardBase = { position: 'relative', borderRadius: 18, background: FRG.card, border: FRG.cardBorder, overflow: 'hidden', minHeight: 300, display: 'flex', flexDirection: 'column' };
  const media = { position: 'relative', flex: 1, minHeight: 190 };
  const label = { padding: '18px 22px 22px', font: '700 17px var(--font-body)', color: FRG.text, textAlign: 'center' };
  return (
    <section id="capabilities" style={{ position: 'relative', paddingTop: 20, paddingBottom: 120 }}>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 200, background: 'radial-gradient(60% 100% at 50% 120%, rgba(200,16,46,0.55), transparent 70%)', pointerEvents: 'none' }} />
      <Container style={{ position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <Pill>Why J&amp;S</Pill>
          <Headline size={44} style={{ marginTop: 20 }} muted="choose J&amp;S">Why manufacturers</Headline>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 20 }}>
          <div style={cardBase}><div style={media}><MiniDash /></div><div style={label}>Replicated Trial Design</div></div>
          <div style={cardBase}><div style={media}><MiniBars /></div><div style={label}>Rate-Response &amp; Efficacy</div></div>
          <div style={cardBase}><div style={media}><Photo tone="dusk" ratio="16/11" radius={0} style={{ position: 'absolute', inset: 0, height: '100%', borderRadius: 0 }} label="Independent" /></div><div style={label}>Independent &amp; Unbiased</div></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 20 }}>
          <div style={{ ...cardBase, minHeight: 320 }}><div style={media}><MiniDash /></div><div style={label}>Harvest Data &amp; Reporting</div></div>
          <div style={{ ...cardBase, minHeight: 320 }}>
            <div style={media}>
              <img src="../../assets/photos/tractor-dusk.jpg" alt="Field trial at dusk" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={label}>Precision Equipped</div>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Nav, Hero, PressStrip, WhyBento, PhoneMockup });
