// landing.jsx — full landing page

const { useState, useEffect, useRef } = React;

function Landing({ go }) {
  // smooth scroll to anchor on hash change
  useEffect(() => {
    const handle = () => {
      const id = location.hash.replace('#', '');
      if (!id) return;
      const el = document.getElementById(id);
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 100;
        window.scrollTo({ top: y, behavior: 'smooth' });
      }
    };
    handle();
    window.addEventListener('hashchange', handle);
    return () => window.removeEventListener('hashchange', handle);
  }, []);

  return (
    <main className="page-enter">
      <Hero go={go} />
      <TrustBar />
      <FitsFeature go={go} />
      <EdLineup go={go} />
      <PeLineup go={go} />
      <HowItWorks />
      <WhyHerman />
      <Testimonials />
      <ScienceNote />
      <FAQ />
      <ClosingCTA go={go} />
    </main>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  HERO
// ────────────────────────────────────────────────────────────────────────────
function Hero({ go }) {
  return (
    <section style={{
      position: 'relative',
      paddingTop: 72,
      paddingBottom: 96,
      overflow: 'hidden',
    }}>
      {/* Soft ambient glow */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 700px 420px at 78% 30%, color-mix(in oklab, var(--brand-yellow) 55%, transparent), transparent 70%)',
        pointerEvents: 'none', zIndex: 0,
      }} />
      <div className="container hero-grid" style={{
        position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 64,
        alignItems: 'center',
      }}>
        <div>
          <Eyebrow>For men, by U.S. doctors</Eyebrow>
          <h1 style={{
            marginTop: 22,
            fontSize: 'clamp(48px, 6.8vw, 92px)',
            lineHeight: 1.18,
            letterSpacing: '-0.018em',
          }}>
            Better sex,
            <br/>
            <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>handled quietly.</em>
          </h1>
          <p style={{
            marginTop: 44, fontSize: 18.5, lineHeight: 1.55,
            color: 'var(--ink-dim)', maxWidth: 520,
          }}>
            Doctor-prescribed treatments for ED and premature ejaculation —
            shipped to your door in unmarked packaging. No clinic visits,
            no insurance, no awkward conversations.
          </p>
          <div className="hero-cta-row" style={{ marginTop: 36, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <button onClick={() => go('quiz')} style={btn.big}>
              See if you qualify
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
            </button>
            <div style={{ fontSize: 13, color: 'var(--ink-mute)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <TrustIcon name="clock" size={14} />
              Takes 3 minutes · No clinic visit · No insurance
            </div>
          </div>
          <div className="hero-trust-row" style={{
            marginTop: 48, display: 'flex', alignItems: 'center', gap: 22,
            paddingTop: 26, borderTop: '1px solid var(--line)',
          }}>
            <RatingStars />
            <div style={{ fontSize: 13, color: 'var(--ink-dim)' }}>
              <strong style={{ color: 'var(--ink)' }}>4.8 / 5</strong> · 12,400+ verified members
            </div>
          </div>
        </div>

        {/* Right column — floating pills composition */}
        <HeroComposition />
      </div>
    </section>
  );
}

function HeroComposition() {
  return (
    <div className="hero-art" style={{
      position: 'relative', height: 560,
      display: 'grid', placeItems: 'center',
    }}>
      {/* Concentric arcs */}
      <svg viewBox="0 0 600 600" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        opacity: 0.4,
      }}>
        {[180, 240, 300].map((r, i) => (
          <circle key={r} cx="300" cy="300" r={r}
                  fill="none" stroke="var(--line-strong)" strokeDasharray={i === 1 ? '2 6' : '0'} />
        ))}
      </svg>

      {/* Floating pills — real photography (already shot at 3D angle, no rotate needed) */}
      <div style={{ position: 'absolute', top: '4%',   left: '8%',  animation: 'float 7s ease-in-out infinite' }}>
        <PillYellow size={130} />
      </div>
      <div style={{ position: 'absolute', top: '12%',  right: '4%', animation: 'float 9s -2s ease-in-out infinite' }}>
        <PillBlue size={120} />
      </div>
      <div style={{ position: 'absolute', bottom: '6%', left: '4%',  animation: 'float 8s -4s ease-in-out infinite' }}>
        <PillArt kind="yellowSquare" size={100} />
      </div>
      <div style={{ position: 'absolute', bottom: '10%', right: '8%', animation: 'float 10s -1s ease-in-out infinite' }}>
        <PillArt kind="lightBlueSquare" size={95} />
      </div>

      {/* Center FITS hero — no card chrome; let the natural shadow do the work */}
      <div style={{
        position: 'relative', zIndex: 2,
        animation: 'float 6s ease-in-out infinite',
        display: 'grid', placeItems: 'center',
      }}>
        <PillFits size={230} />
        <div style={{
          marginTop: 16,
          padding: '6px 14px',
          background: 'color-mix(in oklab, var(--brand-yellow) 38%, transparent)',
          color: 'var(--ink)',
          border: '1px solid color-mix(in oklab, var(--brand-yellow) 65%, transparent)',
          borderRadius: 999,
          fontSize: 10.5, letterSpacing: '.18em', textTransform: 'uppercase',
          whiteSpace: 'nowrap',
        }}>New · FITS 3-in-1</div>
      </div>

      <style>{`
        @keyframes float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
      `}</style>
    </div>
  );
}

function RatingStars() {
  return (
    <div style={{ display: 'flex', gap: 2 }}>
      {[0,1,2,3,4].map(i => (
        <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill="var(--accent)" stroke="none">
          <path d="M12 2l3 7h7l-5.5 4.5L18.5 21 12 16.5 5.5 21l2-7.5L2 9h7z"/>
        </svg>
      ))}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  FITS feature
// ────────────────────────────────────────────────────────────────────────────
function FitsFeature({ go }) {
  return (
    <section id="fits" style={{
      position: 'relative',
      padding: '120px 0',
      background: 'linear-gradient(180deg, var(--bg) 0%, var(--bg-elev) 45%, var(--bg) 100%)',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      overflow: 'hidden',
    }}>
      {/* Decorative grid */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0)',
        backgroundSize: '32px 32px',
        opacity: 0.4, maskImage: 'radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent)',
      }} />
      <div className="container" style={{ position: 'relative' }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 60px' }}>
            <Eyebrow>Introducing FITS</Eyebrow>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 18, lineHeight: 1.1 }}>
              One tablet.
              <br/>
              <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>Three problems solved.</em>
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.6, color: 'var(--ink-dim)' }}>
              FITS is our flagship 3-in-1 formulation — pairing a vasodilator with a
              serotonergic agent and an arousal compound. ED, premature ejaculation,
              and desire, in a single discreet daily.
            </p>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div className="fits-card" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64,
            alignItems: 'center',
            background: 'var(--surface)',
            border: '1px solid var(--line)',
            borderRadius: 'var(--r-xl)',
            padding: 56,
            boxShadow: 'var(--shadow-lg)',
          }}>
            <div style={{ display: 'grid', placeItems: 'center' }}>
              <div style={{ position: 'relative' }}>
                <div style={{
                  position: 'absolute', inset: -40,
                  background: 'radial-gradient(circle, color-mix(in oklab, var(--brand-yellow) 65%, transparent), transparent 65%)',
                  filter: 'blur(20px)',
                }} />
                <div style={{ position: 'relative' }}>
                  <PillFits size={260} />
                </div>
              </div>
              <div style={{
                marginTop: 24, padding: '6px 12px',
                background: 'color-mix(in oklab, var(--brand-yellow) 38%, transparent)',
                color: 'var(--ink)',
                border: '1px solid color-mix(in oklab, var(--brand-yellow) 70%, transparent)',
                borderRadius: 999,
                fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase',
                whiteSpace: 'nowrap',
              }}>Coming this week</div>
            </div>

            <div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '4px 10px', borderRadius: 999,
                background: 'color-mix(in oklab, var(--brand-yellow) 35%, transparent)',
                color: 'var(--ink)',
                fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase',
                whiteSpace: 'nowrap',
              }}>● New · Launching this week</div>
              <h3 style={{ fontSize: 44, marginTop: 14, lineHeight: 1.02 }}>
                FITS <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>3-in-1</em>
              </h3>
              <p style={{
                marginTop: 14, fontSize: 16.5, lineHeight: 1.6,
                color: 'var(--ink-dim)',
              }}>
                A single daily tablet engineered for performance, control, and confidence.
                For men who don't want to choose.
              </p>

              <div className="fits-triplet" style={{
                display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
                marginTop: 28,
              }}>
                {[
                  { h: 'ED', s: 'Reliable, on-demand firmness — without timing your night.' },
                  { h: 'PE', s: 'Better control. Lasting confidence.' },
                  { h: 'Arousal', s: 'Restores desire and presence in the moment.' },
                ].map(b => (
                  <div key={b.h} style={{
                    padding: 18,
                    border: '1px solid var(--line)',
                    borderRadius: 'var(--r-md)',
                    background: 'var(--surface-2)',
                  }}>
                    <div style={{
                      fontFamily: 'var(--serif)', fontSize: 22, fontStyle: 'italic',
                      color: 'var(--accent)',
                    }}>{b.h}</div>
                    <div style={{ marginTop: 8, fontSize: 13, color: 'var(--ink-dim)', lineHeight: 1.5 }}>{b.s}</div>
                  </div>
                ))}
              </div>

              <div style={{ display: 'flex', gap: 12, marginTop: 32, alignItems: 'center', flexWrap: 'wrap' }}>
                <button onClick={() => go('pdp', { productId: 'fits' })} style={btn.solid}>
                  Reserve FITS — from $59/mo
                </button>
                <button onClick={() => go('quiz')} style={btn.outline}>
                  See if FITS is right for me
                </button>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  ED Lineup
// ────────────────────────────────────────────────────────────────────────────
function EdLineup({ go }) {
  const products = [CATALOG.sildenafil, CATALOG.tadalafil];
  return (
    <section id="ed" style={{ padding: '120px 0' }}>
      <div className="container">
        <Reveal>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
            gap: 32, flexWrap: 'wrap', marginBottom: 56,
          }}>
            <div style={{ maxWidth: 580 }}>
              <Eyebrow>ED treatments</Eyebrow>
              <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', marginTop: 16, lineHeight: 1.02 }}>
                Two ways to get
                <br/>
                <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>your reliability back.</em>
              </h2>
            </div>
            <p style={{ maxWidth: 380, color: 'var(--ink-dim)', fontSize: 16, lineHeight: 1.55 }}>
              Both medications work the same way — relaxing blood vessels for stronger,
              more reliable erections. Pick by lifestyle, not severity.
            </p>
          </div>
        </Reveal>

        <div className="ed-lineup" style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24,
        }}>
          {products.map((p, i) => (
            <Reveal key={p.id} delay={i * 120}>
              <ProductCard product={p} onSelect={() => go('pdp', { productId: p.id })} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductCard({ product, onSelect }) {
  const cheapest = Math.round(fromPricePerMonth(product.id));
  return (
    <div onClick={onSelect}
         className="product-card"
         style={{
           position: 'relative',
           background: 'var(--surface)',
           border: '1px solid var(--line)',
           borderRadius: 'var(--r-xl)',
           padding: 36,
           display: 'grid', gridTemplateColumns: '1fr 180px', gap: 24,
           alignItems: 'center',
           cursor: 'pointer',
           transition: 'transform .25s ease, border-color .25s ease, box-shadow .25s ease',
         }}
         onMouseEnter={(e) => {
           e.currentTarget.style.transform = 'translateY(-3px)';
           e.currentTarget.style.borderColor = 'var(--line-strong)';
           e.currentTarget.style.boxShadow = 'var(--shadow-lg)';
         }}
         onMouseLeave={(e) => {
           e.currentTarget.style.transform = '';
           e.currentTarget.style.borderColor = 'var(--line)';
           e.currentTarget.style.boxShadow = '';
         }}>
      <div>
        <div style={{
          fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase',
          color: 'var(--ink-mute)',
        }}>{product.indication}</div>
        <h3 style={{ fontSize: 38, marginTop: 8 }}>
          {product.name}
        </h3>
        <p style={{
          marginTop: 6, color: 'var(--accent)', fontStyle: 'italic',
          fontFamily: 'var(--serif)', fontSize: 18,
        }}>{product.tagline}</p>
        <p style={{
          marginTop: 14, color: 'var(--ink-dim)', fontSize: 14, lineHeight: 1.55,
        }}>{product.description}</p>
        <div style={{
          marginTop: 22, display: 'flex', alignItems: 'baseline', gap: 8,
          paddingTop: 18, borderTop: '1px solid var(--line)',
        }}>
          <span style={{ fontSize: 12, color: 'var(--ink-mute)' }}>From</span>
          <span style={{ fontFamily: 'var(--serif)', fontSize: 32, lineHeight: 1 }}>${cheapest}</span>
          <span style={{ fontSize: 13, color: 'var(--ink-dim)' }}>/ month</span>
          <span style={{
            marginLeft: 'auto',
            color: 'var(--accent)', fontSize: 13.5,
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            View plans
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
          </span>
        </div>
      </div>
      <div className="pill-slot" style={{ display: 'grid', placeItems: 'center' }}>
        <PillArt kind={product.pill} size={160} />
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  PE Lineup
// ────────────────────────────────────────────────────────────────────────────
function PeLineup({ go }) {
  const p = CATALOG.sertraline;
  const cheapest = Math.round(fromPricePerMonth('sertraline'));
  return (
    <section id="pe" style={{
      padding: '120px 0',
      background: 'var(--bg-elev)',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="container">
        <Reveal>
          <div style={{ maxWidth: 720, marginBottom: 56 }}>
            <Eyebrow>Premature ejaculation</Eyebrow>
            <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', marginTop: 16, lineHeight: 1.02 }}>
              The longest minutes
              <br/>
              <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>of your life — earned.</em>
            </h2>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="pe-card" style={{
            display: 'grid', gridTemplateColumns: '1.2fr 200px 1fr', gap: 40,
            alignItems: 'center',
            background: 'var(--surface)',
            border: '1px solid var(--line)',
            borderRadius: 'var(--r-xl)',
            padding: 48,
          }}>
            <div>
              <h3 style={{ fontSize: 36 }}>{p.name} <span style={{ color: 'var(--ink-mute)', fontSize: 22 }}>25mg</span></h3>
              <p style={{
                marginTop: 8, color: 'var(--accent)', fontStyle: 'italic',
                fontFamily: 'var(--serif)', fontSize: 18,
              }}>{p.tagline}</p>
              <p style={{ marginTop: 14, color: 'var(--ink-dim)', fontSize: 14.5, lineHeight: 1.6 }}>
                {p.description} Clinically used off-label to extend time-to-climax
                by 2–4× in published studies.
              </p>
            </div>
            <div className="pill-slot" style={{ display: 'grid', placeItems: 'center' }}>
              <PillSertraline size={170} />
            </div>
            <div style={{ display: 'grid', gap: 14 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontSize: 12, color: 'var(--ink-mute)' }}>From</span>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 38, lineHeight: 1 }}>${cheapest}</span>
                <span style={{ fontSize: 13, color: 'var(--ink-dim)' }}>/ month</span>
              </div>
              <div style={{ display: 'grid', gap: 6 }}>
                {['3, 6, or 12-month supply', 'Daily 25mg dose', 'Free physician consult'].map(b => (
                  <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, color: 'var(--ink-dim)' }}>
                    <TrustIcon name="check" size={14} />{b}
                  </div>
                ))}
              </div>
              <button onClick={() => go('pdp', { productId: 'sertraline' })}
                      style={{ ...btn.solid, justifySelf: 'start', marginTop: 4 }}>
                See Sertraline plans →
              </button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  How it works
// ────────────────────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: '01', h: 'Take the assessment', s: 'A 3-minute medical questionnaire. Build your treatment plan based on your goals.' },
    { n: '02', h: 'Checkout & review',   s: 'Complete checkout. A U.S.-licensed physician reviews your assessment within 24 hours \u2014 refunded if not approved.' },
    { n: '03', h: 'Free 2-day shipping', s: 'Once approved, your medication ships same-day from our partner pharmacy in plain, unmarked packaging.' },
  ];
  return (
    <section id="how" style={{ padding: '120px 0' }}>
      <div className="container">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', marginBottom: 56 }}>
            <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', lineHeight: 1.02 }}>
              How it works
            </h2>
            <p style={{ color: 'var(--ink-dim)', maxWidth: 420, fontSize: 15.5, lineHeight: 1.55 }}>
              From assessment to first dose in under a week.
              No clinic visits. No insurance. No middlemen.
            </p>
          </div>
        </Reveal>
        <div className="steps-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div style={{
                padding: 32,
                border: '1px solid var(--line)',
                borderRadius: 'var(--r-lg)',
                background: 'var(--surface)',
                height: '100%',
              }}>
                <div style={{
                  fontFamily: 'var(--serif)', fontStyle: 'italic',
                  fontSize: 56, color: 'var(--accent)', lineHeight: 0.8,
                }}>{s.n}</div>
                <h3 style={{ fontSize: 26, marginTop: 28 }}>{s.h}</h3>
                <p style={{ marginTop: 12, color: 'var(--ink-dim)', fontSize: 14.5, lineHeight: 1.6 }}>{s.s}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  Why HermanRx
// ────────────────────────────────────────────────────────────────────────────
function WhyHerman() {
  const items = [
    { ic: 'rx',     h: 'Licensed U.S. pharmacy', s: 'Your medication is dispensed from a state-licensed compounding pharmacy in the U.S. — not a marketplace.' },
    { ic: 'doctor', h: 'U.S.-based physicians',  s: 'Board-certified doctors review every assessment. You can message yours any time, no appointment needed.' },
    { ic: 'box',    h: 'Discreet packaging',     s: 'Plain, unmarked. No mentions of treatment or condition anywhere on the box.' },
    { ic: 'shield', h: 'HIPAA-compliant care',   s: 'Your health information is encrypted, never sold, and visible only to your care team.' },
    { ic: 'card',   h: 'No insurance needed',    s: 'One flat membership covers your doctor, prescription, and shipping. No claims, no surprises.' },
    { ic: 'lock',   h: 'Cancel anytime',         s: 'Pause, change dose, or cancel in a tap. No contracts, no calls to retention reps.' },
  ];
  return (
    <section style={{
      padding: '120px 0',
      background: 'var(--bg-elev)',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="container">
        <Reveal>
          <div style={{ maxWidth: 720, marginBottom: 64 }}>
            <Eyebrow>Why HermanRx</Eyebrow>
            <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', marginTop: 16, lineHeight: 1.02 }}>
              The standard
              <br/>
              <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>men's care deserves.</em>
            </h2>
          </div>
        </Reveal>
        <div className="why-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          border: '1px solid var(--line)', borderRadius: 'var(--r-lg)',
          background: 'var(--surface)', overflow: 'hidden',
        }}>
          {items.map((it, i) => (
            <Reveal key={it.h} delay={(i % 3) * 80}>
              <div style={{
                padding: 32,
                borderRight: (i % 3 !== 2) ? '1px solid var(--line)' : 'none',
                borderBottom: i < 3 ? '1px solid var(--line)' : 'none',
                minHeight: 220,
              }}>
                <TrustIcon name={it.ic} size={26} />
                <h3 style={{ fontSize: 22, marginTop: 22, fontFamily: 'var(--serif)' }}>{it.h}</h3>
                <p style={{ marginTop: 10, color: 'var(--ink-dim)', fontSize: 14, lineHeight: 1.55 }}>{it.s}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  Testimonials
// ────────────────────────────────────────────────────────────────────────────
function Testimonials() {
  const reviews = [
    { q: "Took me five minutes to sign up, and the package arrived two days later in a box that looked like a phone case. Wife had no idea — and now there's nothing to know.", a: 'Marcus, 38', loc: 'Austin, TX', plan: 'Tadalafil 5mg daily' },
    { q: "I'd been avoiding the conversation with my doctor for two years. The HermanRx assessment let me get the meds without the room-temperature handshake.", a: 'David, 44', loc: 'Brooklyn, NY', plan: 'Sildenafil 100mg' },
    { q: "The 12-month plan is genuinely a steal. I was paying $30/pill at the pharmacy before — now it works out to under a dollar a day.", a: 'James, 51', loc: 'San Diego, CA', plan: 'Tadalafil 2.5mg daily' },
  ];
  return (
    <section style={{ padding: '120px 0' }}>
      <div className="container">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
            <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', lineHeight: 1.02 }}>
              From the
              <br/>
              <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>members' room.</em>
            </h2>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <RatingStars />
              <div style={{ fontSize: 13, color: 'var(--ink-dim)' }}>
                <strong style={{ color: 'var(--ink)' }}>4.8 / 5</strong> from 3,200+ reviews
              </div>
            </div>
          </div>
        </Reveal>
        <div className="reviews-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {reviews.map((r, i) => (
            <Reveal key={i} delay={i * 100}>
              <figure style={{
                margin: 0, padding: 32,
                border: '1px solid var(--line)',
                borderRadius: 'var(--r-lg)',
                background: 'var(--surface)',
                height: '100%',
                display: 'flex', flexDirection: 'column', gap: 18,
              }}>
                <RatingStars />
                <blockquote style={{
                  margin: 0, padding: 0,
                  fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.3,
                  letterSpacing: '-.005em',
                }}>"{r.q}"</blockquote>
                <figcaption style={{
                  marginTop: 'auto', paddingTop: 18,
                  borderTop: '1px solid var(--line)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                  gap: 12,
                }}>
                  <div>
                    <div style={{ fontWeight: 500, fontSize: 14 }}>{r.a}</div>
                    <div style={{ color: 'var(--ink-mute)', fontSize: 12.5 }}>{r.loc}</div>
                  </div>
                  <div style={{
                    fontSize: 11, color: 'var(--ink-mute)',
                    fontFamily: 'var(--mono)', letterSpacing: '.04em',
                    textAlign: 'right', maxWidth: 130,
                  }}>{r.plan}</div>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  Science note — short editorial block
// ────────────────────────────────────────────────────────────────────────────
function ScienceNote() {
  return (
    <section style={{
      padding: '100px 0',
      background: 'var(--bg-elev)',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="container">
        <Reveal>
          <div className="science-grid" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 60, alignItems: 'center',
          }}>
            <div>
              <Eyebrow>The science, briefly</Eyebrow>
              <h2 style={{ fontSize: 'clamp(34px, 4vw, 52px)', marginTop: 16, lineHeight: 1.02 }}>
                Same molecules.
                <br/>
                <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>Without the markup.</em>
              </h2>
            </div>
            <div style={{ color: 'var(--ink-dim)', fontSize: 16, lineHeight: 1.65, columns: 2, columnGap: 32 }}>
              <p>Sildenafil and tadalafil are PDE5 inhibitors — the same active ingredients as Viagra and Cialis. The patents expired. The medicine didn't.</p>
              <p style={{ marginTop: 12 }}>We work directly with a state-licensed pharmacy to bring you FDA-approved generics at a fraction of brand pricing. No middlemen, no insurance markups.</p>
              <p style={{ marginTop: 12 }}>Every order includes a U.S. physician consultation, ongoing care, and free 2-day shipping — handled discreetly, on your schedule.</p>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  FAQ
// ────────────────────────────────────────────────────────────────────────────
function FAQ() {
  const faqs = [
    { q: 'Do I need a prescription?', a: 'Yes — and we handle it. After you complete checkout, a licensed U.S. physician reviews your assessment and writes the prescription if appropriate. No clinic visit, no separate fee.' },
    { q: 'How fast does it ship?', a: 'Free 2-day shipping. After checkout, a U.S.-licensed physician reviews your assessment within 24 hours. Once approved, your order ships the same day from our partner pharmacy and arrives in 2 days.' },
    { q: 'What does the package look like?', a: 'Plain, unmarked brown box. No HermanRx branding, no mention of the medication or condition. Even the return address is generic.' },
    { q: 'How is this priced vs. my local pharmacy?', a: 'Most members save 60–85% versus brand-name pricing. Our 12-month plans can land below $1 per dose for sildenafil, with no insurance required.' },
    { q: 'Can I pause or cancel?', a: 'Yes, any time from your dashboard. No retention calls, no penalties. If you cancel, you keep any medication already shipped.' },
    { q: 'Do you take insurance?', a: 'No — and that\'s by design. Insurance markups and prior authorizations are why men\'s health pricing is so opaque. Our flat membership replaces all of that.' },
    { q: 'Is my information private?', a: 'Yes. HermanRx is HIPAA-compliant. Your health data is encrypted, never sold, and visible only to your care team.' },
    { q: 'What if my treatment isn\'t approved?', a: 'If a physician determines a treatment isn\'t safe or appropriate for you, you\'re fully refunded — no questions, no fees. We\'ll suggest next steps if there\'s a different option that fits.' },
  ];
  const [open, setOpen] = useState(0);

  return (
    <section id="faq" style={{ padding: '120px 0' }}>
      <div className="container">
        <Reveal>
          <div className="faq-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'flex-start' }}>
            <div style={{ position: 'sticky', top: 140 }}>
              <Eyebrow>Frequently asked</Eyebrow>
              <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', marginTop: 16, lineHeight: 1.02 }}>
                The questions
                <br/>
                <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>men ask.</em>
              </h2>
              <p style={{ marginTop: 22, color: 'var(--ink-dim)', fontSize: 15, lineHeight: 1.6 }}>
                Don't see yours? Email <a href="#" onClick={(e)=>e.preventDefault()} style={{ color: 'var(--accent)' }}>support@hermanrx.com</a> —
                we reply within a few hours.
              </p>
            </div>

            <div style={{ borderTop: '1px solid var(--line)' }}>
              {faqs.map((f, i) => {
                const isOpen = open === i;
                return (
                  <div key={f.q} style={{ borderBottom: '1px solid var(--line)' }}>
                    <button onClick={() => setOpen(isOpen ? -1 : i)}
                            style={{
                              all: 'unset', cursor: 'pointer',
                              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                              width: '100%', padding: '22px 4px',
                              gap: 24,
                            }}>
                      <span style={{
                        fontFamily: 'var(--serif)', fontSize: 22,
                        color: isOpen ? 'var(--accent)' : 'var(--ink)',
                        transition: 'color .2s ease',
                      }}>{f.q}</span>
                      <span style={{
                        display: 'inline-block', width: 22, height: 22,
                        position: 'relative', flexShrink: 0,
                        transform: isOpen ? 'rotate(45deg)' : 'none',
                        transition: 'transform .25s ease',
                      }}>
                        <span style={{ position: 'absolute', inset: 0, margin: 'auto', width: 14, height: 1.2, background: 'var(--ink-dim)' }}/>
                        <span style={{ position: 'absolute', inset: 0, margin: 'auto', width: 1.2, height: 14, background: 'var(--ink-dim)' }}/>
                      </span>
                    </button>
                    <div style={{
                      maxHeight: isOpen ? 240 : 0,
                      overflow: 'hidden',
                      transition: 'max-height .35s ease',
                    }}>
                      <p style={{
                        padding: '0 4px 22px',
                        color: 'var(--ink-dim)', fontSize: 15.5, lineHeight: 1.65,
                        maxWidth: 640,
                      }}>{f.a}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
//  Closing CTA
// ────────────────────────────────────────────────────────────────────────────
function ClosingCTA({ go }) {
  return (
    <section style={{
      position: 'relative',
      padding: '140px 0',
      background: 'linear-gradient(180deg, var(--bg) 0%, var(--bg-elev) 100%)',
      borderTop: '1px solid var(--line)',
      overflow: 'hidden',
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 600px 300px at 50% 80%, color-mix(in oklab, var(--brand-yellow) 60%, transparent), transparent 70%)',
        pointerEvents: 'none',
      }} />
      <div className="container" style={{ position: 'relative', textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
        <Reveal>
          <Eyebrow>Ready when you are</Eyebrow>
          <h2 style={{
            fontSize: 'clamp(44px, 6vw, 80px)', marginTop: 22, lineHeight: 1.1,
            letterSpacing: '-.018em',
          }}>
            Take three minutes.
            <br/>
            <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>Reclaim everything else.</em>
          </h2>
          <p style={{ marginTop: 26, fontSize: 17, color: 'var(--ink-dim)', lineHeight: 1.55 }}>
            A short, doctor-designed assessment. Approved orders ship free 2-day in plain, unmarked packaging.
          </p>
          <div style={{ marginTop: 36, display: 'inline-flex', flexDirection: 'column', gap: 12, alignItems: 'center' }}>
            <button onClick={() => go('quiz')} style={{ ...btn.big, padding: '20px 36px', fontSize: 16 }}>
              See if you qualify
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
            </button>
            <div style={{ fontSize: 12.5, color: 'var(--ink-mute)' }}>
              3 minutes · Free · 100% confidential
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Landing });
