/* =========================================================
   ALLEGEDLY — App composition
   Sections rendered in order. Reaches into window for shared
   components (Alg, FN, Redact, Marquee, CountUp, Magnet, SKU,
   Eyebrow, HR) and interactives (VerificationLoop, Calculator,
   Quiz, DisloyaltyFlow, StickerStudio, WallOfDisloyalty).
   ========================================================= */

const { useState: uSt, useEffect: uEf, useRef: uRf } = React;

const NOTE = "Everyone else says their products work. We say 'allegedly' — then we prove it. Or we don't. Either way, you'll know.";

/* ----- 01. COVER ----- */
function Cover() {
  return (
    <section className="s-dark" data-screen-label="01 Cover" data-zone="HERO">
      <div className="grid-bg"></div>
      <div className="scan"></div>
      <div className="noise"></div>
      <div className="diag" style={{top:-40, right:-80}}>ALLEGEDLY</div>

      <div className="wrap" style={{minHeight:'92vh', display:'flex', flexDirection:'column', justifyContent:'center', position:'relative', zIndex:1}}>
        <Eyebrow><span className="bar-mark" style={{marginRight:6}}>*</span>CASE FILE ALG-2024-001 / CLEARANCE: ANGEL / STATUS: PRE-LAUNCH</Eyebrow>

        <h1 className="h-mega reveal" data-d="1" style={{margin:'16px 0 20px'}}>
          ALLEG<span style={{color:'var(--silver)'}}>—</span><br/>EDLY
        </h1>

        <div className="row reveal" data-d="2" style={{marginBottom:24}}>
          <span className="zip">★ Napkin Stage</span>
          <span className="zip ghost">Cognitive Enhancement Co.</span>
          <span className="zip ghost">Est. 2024</span>
          <span className="stamp" style={{marginLeft:8}}>CLASSIFIED</span>
        </div>

        <p className="disp reveal" data-d="3" style={{maxWidth:780, fontStyle:'italic', opacity:0.85}}>
          The world's first adaptogenic company that actually <Redact>verifies</Redact> its claims<Alg note={NOTE}/>
        </p>

        <FN>Everyone else says their products work. We say "allegedly" — and then we prove it. Or we don't. Either way, you'll know. That's the difference.</FN>

        <div className="row reveal" data-d="5" style={{marginTop:36, gap:14}}>
          <Magnet as="a" className="btn red" href="#ask">become an angel</Magnet>
          <Magnet as="a" className="btn ghost" href="#quiz">take the intake</Magnet>
        </div>

        <div style={{position:'absolute', bottom:32, left:'var(--gutter)', right:'var(--gutter)'}} className="between">
          <span className="t-data" style={{fontSize:9, opacity:0.25}}>SCROLL ↓</span>
          <span className="t-data" style={{fontSize:9, opacity:0.25}}>DOC ALG-2024-001 · v3.1</span>
        </div>
      </div>
    </section>
  );
}

/* ----- 02. MARQUEE — top ----- */
function MarqueeHero() {
  const items = [
    <span><span className="redact shown" style={{background:'transparent', color:'inherit', padding:0}}>actually verified</span>&nbsp;adaptogens</span>,
    <span style={{fontStyle:'italic', fontFamily:"'Instrument Serif', serif"}}>"prove it"</span>,
    <span>The disloyalty program</span>,
    <span><em style={{fontStyle:'italic', fontFamily:"'Instrument Serif', serif"}}>Allegedly™</em></span>,
    <span>not evaluated by the FDA</span>,
    <span>open the case file</span>,
  ];
  return <Marquee items={items} variant="red" />;
}

/* ----- 03. MANIFESTO ----- */
function Manifesto() {
  return (
    <section className="s-dark" data-screen-label="02 Manifesto" data-zone="MANIFESTO">
      <div className="grid-bg"></div>
      <div className="wrap">
        <Eyebrow n="02">Mission statement</Eyebrow>

        <h2 className="disp reveal" data-d="1" style={{maxWidth:860, marginTop:16}}>
          The <span className="strike">$465 billion</span> coffee industry is selling people a drug that makes them <em>worse</em><Alg note="Caffeine is a psychoactive stimulant. The dependency cycle was engineered. We have nothing personal against your barista."/>
        </h2>

        <div className="spread" style={{marginTop:40}}>
          <div className="case-block reveal" data-d="2">
            <span className="case-num">01</span>
            <span className="case-label">What we believe</span>
            <p className="case-body">Adaptogens compound. They have been used for 3,000 years. The science is real. Nobody in the modern supplement industry has built a feedback loop that proves it.</p>
          </div>
          <div className="case-block reveal" data-d="3">
            <span className="case-num">02</span>
            <span className="case-label">What we are building</span>
            <p className="case-body">The replacement for caffeine. The only company that will measure the difference on every subscriber, every 30 days.</p>
          </div>
          <div className="case-block reveal" data-d="4">
            <span className="case-num">03</span>
            <span className="case-label">What we promise</span>
            <p className="case-body">To prove our claims with structured data. Or to admit when we cannot. The footnote on every marketing line on this page is a feature.</p>
          </div>
        </div>

        <div className="reveal" data-d="5" style={{marginTop:32}}>
          <p className="arr" style={{fontSize:12, color:'var(--silver)', opacity:1}}>
            We're building the replacement — and we're the only ones who'll verify it
          </p>
        </div>
      </div>
    </section>
  );
}

/* ----- 04. PROBLEM ----- */
function Problem() {
  const items = [
    { n:'01', t:'CAFFEINE IS A DEPENDENCY LOOP', d:'Jittery energy, anxiety, crash. Repeat. The "boost" is just withdrawal relief.', fn:'But sure, keep telling yourself that third espresso is "self-care."'},
    { n:'02', t:'NOBODY VERIFIES ANYTHING', d:'The $13.5M-funded market leader runs open-label consumer perception surveys with 133 paid participants. That\'s the gold standard. In this industry, allegedly IS the standard.', fn:'We read their FDA disclaimer so you don\'t have to. "Results are self-reported and may not be representative of all users." Cool. Very scientific. Very allegedly.'},
    { n:'03', t:'THE REAL SOLUTIONS ARE UNVERIFIED', d:'Adaptogens regulate, not stimulate. They compound. They work. But no modern company has built the measurement system to prove it.', fn:'Until now. But we can\'t legally say that. So we built the system and let the data talk. Allegedly.'},
  ];

  return (
    <section className="s-light" data-screen-label="03 Problem" data-zone="THE PROBLEM">
      <div className="wrap">
        <Eyebrow n="03">The problem</Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:760}}>
          Three things wrong with the entire category<Alg note="We could keep going. This is the polite version."/>
        </h2>

        <div style={{marginTop:48, display:'flex', flexDirection:'column', gap:'clamp(28px,5vw,52px)'}}>
          {items.map((it, i) => (
            <div key={it.n} className="offset reveal" data-d={i+2}>
              <div style={{display:'flex', alignItems:'flex-start', gap:'clamp(14px,2vw,24px)'}}>
                <span className="t-sans" style={{fontSize:'clamp(40px,7vw,72px)', color:'var(--silver)', lineHeight:0.9, flex:'0 0 auto'}}>{it.n}</span>
                <div style={{flex:1, paddingTop:'clamp(6px,1vw,12px)'}}>
                  <div className="t-sans" style={{fontSize:'clamp(18px,3vw,28px)', letterSpacing:'0.04em', lineHeight:1.1, marginBottom:10}}>{it.t}</div>
                  <p className="body-mono" style={{maxWidth:560, marginTop:0}}>{it.d}</p>
                  <FN>{it.fn}</FN>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- 05. WHY NOW — ticker-tape spec sheet, not 3-up metric cards ----- */
function WhyNow() {
  const sigs = [
    { id:'SIG/01', label:'MARKET PULL',  value:'$1.6B', sub:'+18% YoY',         color:'var(--light)', body:'Adaptogen beverages, growing 18% YoY (NIQ, Feb 2026). TikTok dominated by #adaptogens + #sobriety. Gen Z cutting alcohol. The wave is here.' },
    { id:'SIG/02', label:'VALIDATION',   value:'$50-100M', sub:'Thesis revenue', color:'var(--orange)',body:'Thesis (our direct comp) hit this revenue on personalized nootropics. $13.5M raised. Unilever Ventures, Kevin Love. Profitable before Series A.' },
    { id:'SIG/03', label:'GAP',          value:'ZERO',     sub:'Companies verifying', color:'var(--light)', body:'Adaptogen companies that verify their claims with structured customer follow-ups. The whole industry runs on allegedly. We make that the point.' },
  ];
  return (
    <section className="s-dark" data-screen-label="04 Why now" data-zone="WHY NOW">
      <div className="grid-bg"></div>
      <div className="scan"></div>
      <div className="wrap">
        <Eyebrow n="04">Timing</Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:680}}>
          Three signals converging<Alg note="And one of them is just an obvious gap that's been sitting there for a decade."/>
        </h2>

        <div className="spec-sheet">
          {sigs.map((s, i) => (
            <div key={s.id} className="row-line reveal" data-d={i+2} data-zone={`SIGNAL ${s.id}`}>
              <span className="sl-id">{s.id}</span>
              <span className="sl-label">{s.label}</span>
              <span className="sl-value" style={{color:s.color}}>{s.value}</span>
              <span className="sl-body">
                <span className="t-data" style={{display:'block', opacity:0.5, marginBottom:6}}>{s.sub}</span>
                {s.body}
              </span>
            </div>
          ))}
        </div>
        <FN>The culture is ready. The economics are proven. The verification gap is wide open. We're not predicting a wave. We're paddling into one that's already breaking.</FN>
      </div>
    </section>
  );
}

/* ----- 06. PRODUCT SKUs — horizontal scroll chapter ----- */
const SKU_PANELS = [
  { variant:'focus',  name:'CLARITY',  sub:'Focus',  color:'var(--teal)',   label:'01 / FOCUS',  ing:"Lion's Mane · Bacopa · Ginkgo · L-Theanine",  body:'Cognitive enhancement. Concentration. Flow states.', long:'Designed for the 9am to noon window. Stack of four well-studied nootropic adaptogens. Tested daily for 30 days; measured by the same intake instrument.' },
  { variant:'energy', name:'VITALITY', sub:'Energy', color:'var(--orange)', label:'02 / ENERGY', ing:'Cordyceps · Rhodiola · Eleuthero · Maca',     body:'Sustained drive. Energy without the crash.',         long:'Adaptogens that regulate, not stimulate. Cortisol-aware. Sub-caffeine without a substitute habit. The replacement for the 3pm espresso.' },
  { variant:'calm',   name:'BALANCE',  sub:'Calm',   color:'var(--purple)', label:'03 / CALM',   ing:'Ashwagandha · Reishi · Schisandra · Chamomile',body:'Stress reset. Resilience under pressure.',           long:'Evening protocol. Ashwagandha-led. Modulates the HPA axis. The version of "self-care" that has a measurement instrument on the back of it.' },
];

function HorizontalSkus() {
  const stageRef = uRf(null);
  const trackRef = uRf(null);

  uEf(() => {
    let st;
    let cancelled = false;
    const tryBoot = () => {
      if (cancelled) return;
      if (!window.gsap || !window.ScrollTrigger || !stageRef.current || !trackRef.current) {
        return setTimeout(tryBoot, 80);
      }
      // dedupe
      const existing = window.ScrollTrigger.getAll().filter(s => s.trigger === stageRef.current);
      existing.forEach(s => s.kill());
      const gsap = window.gsap;
      const ScrollTrigger = window.ScrollTrigger;
      const track = trackRef.current;
      const stage = stageRef.current;
      const panels = track.querySelectorAll('.sku-panel');
      const distance = () => track.scrollWidth - window.innerWidth;
      st = ScrollTrigger.create({
        trigger: stage,
        start: 'top top',
        end: () => '+=' + (track.scrollWidth - window.innerWidth + 200),
        pin: true,
        scrub: 0.6,
        invalidateOnRefresh: true,
        animation: gsap.to(track, { x: () => -distance(), ease: 'none' }),
      });
      panels.forEach((p) => {
        const can = p.querySelector('.sku-can');
        if (!can) return;
        gsap.to(can, {
          rotate: 6, yPercent: -3,
          ease: 'none',
          scrollTrigger: { trigger: stage, start: 'top top', end: () => '+=' + distance(), scrub: 0.6 },
        });
      });
      requestAnimationFrame(() => ScrollTrigger.refresh());
    };
    tryBoot();
    return () => { cancelled = true; if (st) st.kill(); };
  }, []);

  return (
    <div ref={stageRef} className="hsku-stage" data-zone="PRODUCT CHAPTER">
      <div ref={trackRef} className="hsku-track">
        {SKU_PANELS.map((s) => (
          <div key={s.name} className={`sku-panel sku-panel-${s.variant}`} data-zone={`SKU // ${s.name}`}>
            <div className="sku-panel-num">
              <span className="t-data">{s.label}</span>
              <span className="t-data" style={{opacity:0.4}}>SKU 0{SKU_PANELS.indexOf(s)+1} OF 03</span>
            </div>
            <div className="sku-panel-grid">
              <div className="sku-panel-mock">
                <div style={{maxWidth:320, width:'100%'}}>
                  <SKU variant={s.variant} name={s.name} sub={s.sub} ingredients={s.ing}/>
                </div>
              </div>
              <div className="sku-panel-info">
                <h3 className="sku-panel-name">{s.name}</h3>
                <p className="sku-panel-sub">"{s.body}"</p>
                <p className="sku-panel-long">{s.long}</p>
                <div className="sku-panel-ingredients">
                  <span className="t-data" style={{opacity:0.5, marginBottom:8, display:'block'}}>INGREDIENTS · 4 OF 4 CITED</span>
                  {s.ing.split('·').map((ing, j) => (
                    <span key={j} className="sku-ing-line">
                      <span className="t-data">{String(j+1).padStart(2,'0')}</span>
                      <span className="t-sans">{ing.trim()}</span>
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="hsku-progress">
        <span className="t-data">DRAG / SCROLL →</span>
      </div>
    </div>
  );
}

function Products() {
  return (
    <section className="s-dark" data-screen-label="05 Products" data-zone="THE PRODUCT">
      <div className="grid-bg"></div>
      <div className="wrap" style={{paddingBottom:0}}>
        <Eyebrow n="06">The product</Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:780}}>
          Three formulas. We prescribe two. <em>You measure the results.</em><Alg note="“Prescribe” used loosely. We are not doctors. We are an opinion in a can."/>
        </h2>
      </div>

      <HorizontalSkus />

      <div className="wrap" style={{paddingTop:'clamp(30px,4vw,60px)'}}>
        <div className="offset reveal" data-d="5" style={{maxWidth:720}}>
          <p className="t-serif" style={{fontSize:'clamp(18px,2.4vw,24px)', fontStyle:'italic', lineHeight:1.4}}>
            Intake quiz prescribes 2 of 3. The third becomes the upsell. 30 days later, we send a structured assessment so you can see what changed. <span className="red">Nobody else does this.</span>
          </p>
        </div>
      </div>
    </section>
  );
}

/* ----- 07. VERIFICATION LOOP — pinned cinematic ----- */
function Verification() {
  return (
    <section className="s-panel" data-screen-label="06 Verification" data-zone="THE LOOP">
      <div className="wrap" style={{paddingBottom:0}}>
        <Eyebrow n="07"><span style={{color:'var(--silver-bright)'}}>The competitive advantage nobody has</span></Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:720}}>
          The verification loop<Alg note="A small mechanical idea that becomes a moat once you have a thousand subscribers compounding data."/>
        </h2>
        <p className="body-mono reveal" data-d="2" style={{marginTop:14}}>
          Thesis runs compensated surveys with 133 paid people and calls it research. We measure every subscriber, every 30 days, structurally. The name "Allegedly" stops being a joke when we replace it with "Actually."
        </p>
      </div>

      <VerificationLoop />

      <div className="wrap" style={{paddingTop:'clamp(30px,4vw,60px)'}}>
        <div className="row reveal" data-d="1" style={{gap:14, marginBottom:24}}>
          <Magnet as="a" className="btn red" href="../accountability/index.html">browse the accountability db →</Magnet>
          <span className="t-data" style={{fontSize:10, opacity:0.45, alignSelf:'center'}}>92 PRODUCTS · 26 ADAPTOGENS · 1 PER DAY</span>
        </div>
        <FN>But until then, it is still allegedly. And we are fine with that. Because we built the system to find out.</FN>
      </div>
    </section>
  );
}

/* ----- 08. QUIZ ----- */
function QuizSection() {
  return (
    <section id="quiz" className="s-dark" data-screen-label="07 Quiz" data-zone="INTAKE QUIZ">
      <div className="grid-bg"></div>
      <div className="wrap">
        <Eyebrow n="08">Try the intake</Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:780}}>
          Four questions. Two prescriptions. <em>One upsell.</em><Alg note="This is a real working prototype of the actual intake flow. Real recommendation logic, demo content."/>
        </h2>
        <p className="body-mono reveal" data-d="2" style={{marginTop:14}}>
          The intake quiz feels clinical, not gimmicky. It gives the customer a structured baseline assessment AND determines which 2 of 3 SKUs to ship. Same instrument we use at day 30 for the verification.
        </p>

        <Quiz />
      </div>
    </section>
  );
}

/* ----- 09. COMP ----- */
function Comp() {
  return (
    <section className="s-dark" data-screen-label="08 Comp" data-zone="DIRECT COMP">
      <div className="grid-bg"></div>
      <div className="wrap">
        <Eyebrow n="09">Direct comparable</Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:760}}>
          They proved the model. <em>We'll prove the product.</em><Alg note="Thesis is the validation that this category supports a $50M+ DTC business."/>
        </h2>

        <div className="reveal" data-d="2" style={{marginTop:36, border:'1px solid var(--line)', padding:'clamp(20px,3vw,32px)', borderRadius:2, background:'var(--panel)'}}>
          <div className="between" style={{marginBottom:18}}>
            <p className="t-sans" style={{fontSize:'clamp(22px,3vw,32px)', letterSpacing:'0.04em'}}>THESIS</p>
            <span className="t-data" style={{fontSize:9, opacity:0.35}}>takethesis.com</span>
          </div>
          <div className="grid g-4" style={{marginBottom:16}}>
            <div className="metric"><div className="v teal">$50-100M</div><div className="l">EST. REVENUE</div></div>
            <div className="metric"><div className="v">$13.5M</div><div className="l">TOTAL RAISED</div></div>
            <div className="metric"><div className="v amber">$59/mo</div><div className="l">PRICE POINT</div></div>
            <div className="metric"><div className="v">4.6★</div><div className="l">6,500+ REVIEWS</div></div>
          </div>
          <p className="t-mono" style={{fontSize:11, opacity:0.4, lineHeight:1.85}}>Investors: Unilever Ventures, Kevin Love, Kate Bock, Redo Ventures, Alive VC. Partners: Dr. Andrew Huberman, Rich Roll. EBITDA-positive before Series A. Personalized quiz → subscription nootropics.</p>
        </div>

        <div className="grid g-2 reveal" data-d="3" style={{marginTop:20}}>
          <div style={{border:'1px solid var(--line)', padding:'clamp(16px,2.5vw,24px)', borderRadius:2}}>
            <div className="t-sans" style={{fontSize:14, letterSpacing:'0.08em', marginBottom:14, opacity:0.55}}>WHAT THESIS DOES WELL</div>
            <p className="arr">Personalization quiz (proven mechanic)</p>
            <p className="arr">Subscription at $59/mo (validated price)</p>
            <p className="arr">Profitable unit economics</p>
            <p className="arr">6,500+ reviews, 4.6 stars</p>
          </div>
          <div style={{border:'1px solid var(--silver)', padding:'clamp(16px,2.5vw,24px)', borderRadius:2, background:'oklch(56% 0.008 252 / 0.06)'}}>
            <div className="t-sans" style={{fontSize:14, letterSpacing:'0.08em', marginBottom:14, color:'var(--silver-bright)'}}>WHAT THESIS DOESN'T DO</div>
            <p className="arr" style={{color:'var(--light)', opacity:0.85}}>Verify claims <span style={{opacity:0.6}}>(133-person paid survey)</span></p>
            <p className="arr" style={{color:'var(--light)', opacity:0.85}}>Follow up at 30 days <span style={{opacity:0.6}}>(no measurement)</span></p>
            <p className="arr" style={{color:'var(--light)', opacity:0.85}}>Build proprietary efficacy data</p>
            <p className="arr" style={{color:'var(--light)', opacity:0.85}}>Have a real cultural brand identity</p>
          </div>
        </div>

        <FN>Thesis proved you can build a $50M+ business on personalized nootropics via subscription. We're not arguing with the model. We're adding the one thing they forgot: proof that it works.</FN>
      </div>
    </section>
  );
}

/* ----- 10. CALCULATOR ----- */
function CalcSection() {
  return (
    <section className="s-dark" data-screen-label="09 Calculator" data-zone="UNIT ECONOMICS">
      <div className="grid-bg"></div>
      <div className="wrap">
        <Eyebrow n="10">Run the napkin yourself</Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:780}}>
          Numbers that make angels lean forward<Alg note="Drag every slider. Try to break our model. It's robust."/>
        </h2>
        <p className="body-mono reveal" data-d="2" style={{marginTop:14}}>
          Industry standard LTV/CAC: 3-5x. Thesis estimated: 5-8x. Our model targets 10-16x — because zero-CAC channels and verification-driven retention compound. The math below is live. Move the sliders.
        </p>

        <Calculator />
      </div>
    </section>
  );
}

/* ----- 11. DISLOYALTY ----- */
function DisloyaltySection() {
  return (
    <section className="s-dark" data-screen-label="10 Disloyalty" data-zone="DISLOYALTY">
      <div className="grid-bg"></div>
      <div className="wrap">
        <Eyebrow n="11"><span style={{color:'var(--silver-bright)'}}>The disloyalty program</span></Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:820}}>
          Prove you tried someone else. <em>Get Allegedly free.</em><Alg note="The trojan horse of zero-CAC acquisition, dressed up as a brand stunt."/>
        </h2>
        <p className="body-mono reveal" data-d="2" style={{marginTop:14}}>
          Every competitor's customer is pre-qualified. They believe in adaptogens. They already pay for subscriptions. They consume daily. The free month closes the test. We convert at <span className="red">$0 CAC</span>.
        </p>

        <DisloyaltyFlow />

        <div className="spec-sheet reveal" data-d="3">
          {[
            {id:'D/01', label:'CAC',               a:'$45 avg', b:'$0',   desc:'100% reduction. Free first month for a verified competitor cancellation.'},
            {id:'D/02', label:'Conversion rate',   a:'2–4%',    b:'~40%', desc:'10–20× higher. Warm cohort, pre-qualified for adaptogen subscriptions.'},
            {id:'D/03', label:'First-month churn', a:'25–35%',  b:'~8%',  desc:'3–4× lower. Skin in the game. They already proved they switch.'},
          ].map(m => (
            <div key={m.label} className="row-line">
              <span className="sl-id">{m.id}</span>
              <span className="sl-label">{m.label}</span>
              <span className="sl-value red">{m.b}</span>
              <span className="sl-body">
                <span className="t-data" style={{display:'block', opacity:0.4, marginBottom:6, textDecoration:'line-through'}}>Paid playbook: {m.a}</span>
                {m.desc}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- 12. WALL OF DISLOYALTY ----- */
function WallSection() {
  return (
    <section className="s-panel" data-screen-label="11 Wall" data-zone="WALL OF DISLOYALTY">
      <div className="wrap">
        <Eyebrow n="12">The Wall of Disloyalty</Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:760}}>
          Operatives who switched sides<Alg note="Demo data. In production, this updates daily with anonymized defection records."/>
        </h2>
        <p className="body-mono reveal" data-d="2" style={{marginTop:14}}>
          A public leaderboard for the most prolific brand-switchers. Gamified social identity. People want to be seen leaving.
        </p>

        <WallOfDisloyalty />
      </div>
    </section>
  );
}

/* ----- 13. STICKER STUDIO ----- */
function StickerSection() {
  return (
    <section className="s-light" data-screen-label="12 Sticker Lab" data-zone="STICKER LAB">
      <div className="wrap">
        <Eyebrow n="13"><span style={{color:'var(--silver-bright)'}}>The Sticker</span></Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:820}}>
          Three cents per unit. <em>The most efficient marketing line item in CPG.</em><Alg note="Try the lab below. Drag the sticker onto the jar."/>
        </h2>
        <p className="body-mono reveal" data-d="2" style={{marginTop:14, opacity:0.7}}>
          Every case ships with vinyl "Allegedly" stickers. Intended use: stick them on competitor products. Photograph it. Post it. When someone slaps "Allegedly" on a Thesis jar, they're making a philosophical statement about the entire supplement industry. The product turns customers into activists.
        </p>

        <StickerStudio />
      </div>
    </section>
  );
}

/* ----- 14. ASK ----- */
function Ask() {
  const breakdown = [
    {p:'30%', desc:'Formulation + first production run (3 SKUs × 5K units)'},
    {p:'20%', desc:'Brand identity, packaging, e-commerce build'},
    {p:'20%', desc:'First 6 months customer acquisition'},
    {p:'10%', desc:'Disloyalty Program infrastructure + verification system'},
    {p:'10%', desc:'Legal, trademark, FDA compliance, contingency'},
    {p:'10%', desc:'Founder pay (we are not heroes)'},
  ];
  return (
    <section id="ask" className="s-dark" data-screen-label="13 The Ask" data-zone="THE ASK">
      <div className="grid-bg"></div>
      <div className="scan"></div>
      <div className="diag" style={{top:'-10%', left:'-10%', fontSize:'clamp(140px,30vw,360px)'}}>$150K</div>

      <div className="wrap" style={{position:'relative', zIndex:1}}>
        <Eyebrow n="14">The ask</Eyebrow>

        <div className="reveal" data-d="1" style={{marginTop:24}}>
          <p className="t-data" style={{fontSize:12, letterSpacing:'0.16em', opacity:0.3}}>ANGEL ROUND — FRIENDS, FAMILY &amp; BELIEVERS</p>
          <p className="h-mega" style={{color:'var(--light)', margin:'8px 0', fontSize:'clamp(72px, 18vw, 200px)'}}>$150K</p>
          <p className="t-data" style={{fontSize:11, opacity:0.3}}>SAFE NOTE · 90-DAY CLOSE</p>
        </div>

        <div className="reveal" data-d="3" style={{marginTop:48, display:'flex', flexDirection:'column', gap:0}}>
          {breakdown.map((b, i) => (
            <div key={i} className="between" style={{padding:'14px 0', borderBottom:'1px solid var(--line)'}}>
              <div className="row">
                <span className="t-sans" style={{fontSize:'clamp(24px,4vw,40px)', color:'var(--silver)', minWidth:80, lineHeight:1}}>{b.p}</span>
                <span className="t-mono" style={{fontSize:13, opacity:0.7}}>{b.desc}</span>
              </div>
              <span className="t-data" style={{fontSize:9, opacity:0.3}}>LINE 0{i+1}</span>
            </div>
          ))}
        </div>

        <div className="row reveal" data-d="5" style={{marginTop:36}}>
          <Magnet as="a" className="btn red" href="mailto:invest@allegedly.co">become an angel</Magnet>
          <Magnet as="a" className="btn ghost" href="#">read the full memo</Magnet>
        </div>

        <FN>This is the round where you get to say "I was early." Thesis raised $5.1M in their seed. We're asking for $150K to build everything they didn't — the verification loop, the Disloyalty Program, and a brand that people actually want to be seen holding. Allegedly.</FN>
      </div>
    </section>
  );
}

/* ----- 15. RISKS ----- */
function Risks() {
  const items = [
    { n:'01', t:'WE\'RE PRE-EVERYTHING', d:'No revenue. No product on shelf. This is a napkin and a conviction.', fn:'Every company you admire was once a napkin. Thesis was a kitchen experiment. We are operatives with 80+ ingredients researched.'},
    { n:'02', t:'REGULATORY EDGES EXIST', d:'The provocative brand language is positioning. The actual products are 100% legal adaptogens.', fn:'We know the FDA line because we study it. We saved their warning letters to competitors. Preparedness is a moat.'},
    { n:'03', t:'BRAND POLARIZATION', d:'Not everyone will love us. Good.', fn:'Brands that try to please everyone end up on the clearance shelf at TJ Maxx between a lavender candle and a "Live Laugh Love" mug.'},
  ];
  return (
    <section className="s-light" data-screen-label="14 Risks" data-zone="RISKS">
      <div className="wrap">
        <Eyebrow n="15">Why you shouldn't invest</Eyebrow>
        <h2 className="disp reveal" data-d="1" style={{marginTop:16, maxWidth:760}}>
          Three real risks. <em>We are not hiding them.</em><Alg note="If anyone tells you their startup has no risks, run."/>
        </h2>

        <div style={{marginTop:40, display:'flex', flexDirection:'column', gap:'clamp(24px,4vw,40px)'}}>
          {items.map((it, i) => (
            <div key={it.n} className="offset reveal" data-d={i+2}>
              <div style={{display:'flex', alignItems:'flex-start', gap:'clamp(12px,2vw,20px)'}}>
                <span className="t-sans" style={{fontSize:'clamp(34px,5vw,52px)', color:'var(--silver)', lineHeight:0.9, flex:'0 0 auto'}}>{it.n}</span>
                <div style={{flex:1, paddingTop:'clamp(4px,0.6vw,8px)'}}>
                  <div className="t-sans" style={{fontSize:'clamp(16px,2.5vw,22px)', letterSpacing:'0.04em', lineHeight:1.1, marginBottom:8}}>{it.t}</div>
                  <p className="body-mono" style={{maxWidth:580, marginTop:0}}>{it.d}</p>
                  <FN>{it.fn}</FN>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- 16. MARQUEE — close ----- */
function MarqueeClose() {
  const items = [
    <span style={{fontStyle:'italic', fontFamily:"'Instrument Serif', serif"}}>"prove it"</span>,
    <span>or die trying</span>,
    <span style={{fontStyle:'italic', fontFamily:"'Instrument Serif', serif"}}>allegedly</span>,
    <span>we built the system to find out</span>,
    <span>$0.03 per sticker</span>,
    <span style={{fontStyle:'italic', fontFamily:"'Instrument Serif', serif"}}>actually</span>,
  ];
  return <Marquee items={items} variant="" speed="fast"/>;
}

/* ----- 17. CLOSE ----- */
function Close() {
  return (
    <section className="s-dark" data-screen-label="15 Close" data-zone="CLOSE">
      <div className="grid-bg"></div>
      <div className="scan"></div>
      <div className="diag" style={{top:'50%', left:'50%', transform:'translate(-50%,-50%) rotate(-8deg)', fontSize:'clamp(120px,30vw,360px)', opacity:0.018}}>ALLEGEDLY</div>

      <div className="wrap" style={{minHeight:'88vh', display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center', textAlign:'center', position:'relative', zIndex:1, gap:'clamp(20px,3vw,40px)'}}>
        <h2 className="h-mega reveal">
          ALLEG<span style={{color:'var(--silver)'}}>—</span><br/>EDLY
        </h2>
        <div style={{maxWidth:600}}>
          <p className="t-serif reveal" data-d="1" style={{fontSize:'clamp(18px,3vw,28px)', opacity:0.5}}>
            We're not asking you to believe us.
          </p>
          <p className="t-serif reveal" data-d="2" style={{fontSize:'clamp(18px,3vw,28px)', fontStyle:'italic', color:'var(--light)', marginTop:8, lineHeight:1.3, opacity:0.9}}>
            We're asking you to bet on the only adaptogenic company that will prove its own claims<Alg note="And if we can't, we'll be the only one that admits it."/>
          </p>
        </div>
        <p className="fn reveal" data-d="3" style={{marginTop:0}}>Or die trying. Allegedly.</p>
      </div>
    </section>
  );
}

/* ----- 18. FOOTER ----- */
function Footer() {
  return (
    <footer className="s-dark" style={{paddingTop:0, borderTop:'1px solid var(--line)'}}>
      {/* FDA-warning-letter style legal */}
      <div style={{background:'#000', borderBottom:'1px solid var(--line)'}}>
        <div className="wrap" style={{padding:'clamp(28px,4vw,48px) var(--gutter)', maxWidth:920}}>
          <div className="t-data" style={{fontSize:9, color:'var(--red)', opacity:0.7, marginBottom:18, letterSpacing:'0.22em'}}>★ LEGAL DISCLOSURES — READ THIS</div>
          <p className="t-mono" style={{fontSize:11, opacity:0.55, lineHeight:1.85, marginBottom:16}}>
            <strong style={{opacity:1, color:'var(--red)'}}>WARNING LETTER — MOCK FORMAT.</strong>
            &nbsp;These statements have not been evaluated by the Food and Drug Administration.
            The products and information described on this site are not intended to diagnose,
            treat, cure or prevent any disease. The information on this site is for educational
            purposes only and should not be considered medical advice. Please consult an
            appropriate healthcare professional before taking any supplement.
          </p>
          <p className="t-mono" style={{fontSize:11, opacity:0.55, lineHeight:1.85, marginBottom:16}}>
            <strong style={{opacity:1}}>RE: USE OF THE WORD "ALLEGEDLY."</strong>
            &nbsp;The footnote you have been seeing throughout this document is intentional. It is
            a feature of our brand voice and a structural commitment to verifiability. Where most
            companies omit this acknowledgement, we have made it the asterisk on every claim. We
            consider that the more honest position.
          </p>
          <p className="t-mono" style={{fontSize:11, opacity:0.55, lineHeight:1.85, marginBottom:16}}>
            <strong style={{opacity:1}}>RE: COMPETITOR REFERENCES.</strong>
            &nbsp;Thesis, AG1, Mud\Wtr, Four Sigmatic, Magic Mind and others referenced in this
            document are used for comparative purposes only. We respect their craft. We just plan
            to do one thing they don't.
          </p>
          <p className="t-mono" style={{fontSize:11, opacity:0.5, lineHeight:1.85}}>
            <strong style={{opacity:1}}>RE: FORWARD-LOOKING STATEMENTS.</strong>
            &nbsp;Projections in this document are estimates based on comparable companies and
            stated assumptions. They are not guarantees. Past performance of comparable companies
            is not indicative of future results of Allegedly Inc. This deck is not an offering of
            securities and is intended for informational purposes only. Allegedly.
          </p>
        </div>
      </div>

      <div className="wrap" style={{paddingTop:'clamp(32px,4vw,56px)', paddingBottom:'clamp(32px,4vw,56px)'}}>
        <div className="between" style={{flexWrap:'wrap', alignItems:'flex-end'}}>
          <div>
            <Logo size="lg" />
            <p className="t-data" style={{fontSize:9, opacity:0.3, marginTop:8, letterSpacing:'0.18em'}}>EST. 2024 · BROOKLYN · ALL RIGHTS UNVERIFIED</p>
          </div>
          <div className="t-data" style={{fontSize:9, opacity:0.3, textAlign:'right', lineHeight:1.9}}>
            <p>CASE NO. ALG-2024-001</p>
            <p>DOC V3.1</p>
            <p style={{marginTop:4, color:'var(--red)', opacity:0.5}}>* The footnote is the feature.</p>
          </div>
        </div>
      </div>

      <div className="classified-bar" style={{position:'static'}}>
        <div className="bar-inner">
          <span><span className="bar-mark">*</span> END OF BRIEFING</span>
          <span className="hide-sm">NOTHING IN THIS DOCUMENT CONSTITUTES FINANCIAL ADVICE</span>
          <span><span className="bar-mark">*</span> ALLEGEDLY</span>
        </div>
      </div>
    </footer>
  );
}

/* =========================================================
   App
   ========================================================= */
function App() {
  return (
    <>
      <Cover />
      <MarqueeHero />
      <Manifesto />
      <HR />
      <Problem />
      <WhyNow />
      <Products />
      <Verification />
      <QuizSection />
      <Comp />
      <CalcSection />
      <DisloyaltySection />
      <WallSection />
      <StickerSection />
      <Ask />
      <Risks />
      <MarqueeClose />
      <Close />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);