/* =====================================================================
   CHAPTERS — the 10 chapters of the guide
===================================================================== */

const CHAPTERS = [
  { id: "intro",        num: "00",  title: "Start here" },
  { id: "niche",        num: "01",  title: "Find your niche" },
  { id: "brand",        num: "02",  title: "Your profile + visual brand" },
  { id: "style",        num: "03",  title: "What's your content style?" },
  { id: "hooks",        num: "04",  title: "The 3 hooks (stack them)" },
  { id: "outliers",     num: "05",  title: "The 5X Outlier Rule" },
  { id: "scripts",      num: "06",  title: "Script structures that work" },
  { id: "funnel",       num: "07",  title: "The 3 levels of funnel" },
  { id: "gamify",       num: "08",  title: "Gamifying reels (case study)" },
  { id: "series",       num: "09",  title: "Series + doubling down" },
  { id: "score",        num: "10",  title: "Score your next reel" },
  { id: "checklist",    num: "11",  title: "Your 30-day checklist" },
  { id: "cta",          num: "12",  title: "What's next" },
];

/* --------------------------------------------------------------------
   Individual chapters
-------------------------------------------------------------------- */

function ChIntro() {
  return (
    <section className="chapter is-hero" id="intro">
      <div className="eyebrow"><span className="eyebrow-line"/> Start here</div>
      <h2 className="chapter-title">Most creators don't need more effort. They need a <em>system</em>.</h2>
      <p className="chapter-lede">
        Everything in this guide is what I actually use with clients — including the one we grew from <strong>2 to 30,000 followers organically</strong>. No ads. No luck. Just a stack of small, proven moves.
      </p>

      <div className="grid-3" style={{marginTop: 24}}>
        <div className="card-flat">
          <div className="tag tag-ink">Read</div>
          <h4 className="subsub">Short chapters</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Each one hits one thing hard. Skim or go deep.</p>
        </div>
        <div className="card-flat">
          <div className="tag tag-accent">Play</div>
          <h4 className="subsub">Built-in tools</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Hook generator, script builder, viral-score calculator, niche finder.</p>
        </div>
        <div className="card-flat">
          <div className="tag tag-green">Apply</div>
          <h4 className="subsub">Checklists</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Tick off what you've actually done. Your progress saves.</p>
        </div>
      </div>

      <div className="callout">
        "Never throw spaghetti at the wall. Every reel is a decision — and every decision has a proven pattern behind it."
      </div>

      <div className="row" style={{marginTop: 32}}>
        <a className="btn btn-primary" href="#niche">Start with Chapter 1 →</a>
      </div>
    </section>
  );
}

function ChNiche() {
  return (
    <section className="chapter" id="niche">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 01</div>
      <h2 className="chapter-title">Your niche is a <em>foundation</em>, not a cage.</h2>
      <p className="chapter-lede">
        Every creator who blew up in the last 12 months posts about ONE thing — and 5-7 sub-things under it. That's it. The algorithm can't promote what it can't categorize.
      </p>

      <h3 className="sub">The foundation, the interior, the exterior.</h3>
      <p>Think of your personal brand like a house. Three parts:</p>

      <div className="grid-3">
        <div className="card">
          <span className="tag tag-ink">1 · Foundation</span>
          <h4 className="subsub">Your niche + sub-niches</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>One broad niche. 5-7 sub-niches under it. Every video = one sub-niche.</p>
        </div>
        <div className="card">
          <span className="tag tag-accent">2 · Interior</span>
          <h4 className="subsub">Your 3 content types</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Educational + Storytelling + Authority. Mix all three — never just one.</p>
        </div>
        <div className="card">
          <span className="tag tag-hot">3 · Exterior</span>
          <h4 className="subsub">Your visual brand</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>2-3 colors, 2-3 fonts, 2-3 visual styles. Applied to every single reel.</p>
        </div>
      </div>

      <h3 className="sub">Try it — build your niche stack below.</h3>
      <NicheFinder />
    </section>
  );
}

function ChBrand() {
  return (
    <section className="chapter" id="brand">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 02</div>
      <h2 className="chapter-title">Your profile is your <em>storefront</em>.</h2>
      <p className="chapter-lede">
        People decide in 5 seconds whether to follow you. Your profile has to answer: who are you, who do you help, what do I get?
      </p>

      <h3 className="sub">The 4-line bio framework</h3>
      <div className="bio-frame">
        <div className="bio-line">
          <span className="bio-num mono">01</span>
          <div><strong>What you do / who you help</strong><small>"I help coaches hit 10K followers without dancing."</small></div>
        </div>
        <div className="bio-line">
          <span className="bio-num mono">02</span>
          <div><strong>Credibility or proof</strong><small>"700M+ views generated for clients."</small></div>
        </div>
        <div className="bio-line">
          <span className="bio-num mono">03</span>
          <div><strong>What they get by following</strong><small>"Daily reel breakdowns + hook templates."</small></div>
        </div>
        <div className="bio-line">
          <span className="bio-num mono">04</span>
          <div><strong>CTA</strong><small>"↓ Free growth guide below."</small></div>
        </div>
      </div>

      <h3 className="sub">Wrong vs. right</h3>
      <div className="grid-2">
        <div className="card" style={{borderColor: "oklch(0.88 0.04 28)"}}>
          <span className="tag tag-hot">Wrong</span>
          <h4 className="subsub">Linktree · multi-link page</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Every extra option kills 50% of conversions. Don't give people 7 doors when you need them in one room.</p>
        </div>
        <div className="card" style={{borderColor: "oklch(0.88 0.06 155)"}}>
          <span className="tag tag-green">Right</span>
          <h4 className="subsub">One link, one destination</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Your best freebie, lead magnet, or call-booking page. Decide the ONE action.</p>
        </div>
      </div>

      <div className="grid-2" style={{marginTop: 16}}>
        <div className="card" style={{borderColor: "oklch(0.88 0.04 28)"}}>
          <span className="tag tag-hot">Wrong</span>
          <h4 className="subsub">Profile pic: group photo, far away, cluttered background</h4>
        </div>
        <div className="card" style={{borderColor: "oklch(0.88 0.06 155)"}}>
          <span className="tag tag-green">Right</span>
          <h4 className="subsub">Close-up of your face, solid background, branded colors</h4>
        </div>
      </div>

      <div className="callout">
        Your username + tagline + bio + PFP should feel like one sentence. If a stranger can't tell what you do in 5 seconds — rebuild it.
      </div>
    </section>
  );
}

function ChStyle() {
  return (
    <section className="chapter" id="style">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 03</div>
      <h2 className="chapter-title">Find your <em>default gear</em>.</h2>
      <p className="chapter-lede">
        You'll create all 3 content types — educational, storytelling, authority — but one of them comes naturally. Start there. Double down. Add the others later.
      </p>

      <ContentStyleQuiz />
    </section>
  );
}

function ChHooks() {
  return (
    <section className="chapter" id="hooks">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 04</div>
      <h2 className="chapter-title">The first 3 seconds <em>decide everything</em>.</h2>
      <p className="chapter-lede">
        It doesn't matter how good the rest of your reel is — if nobody stays past second three, nobody sees the value. The top 1% of creators stack three hook types in one video.
      </p>

      <h3 className="sub">The 3 types of hooks</h3>

      <div className="grid-3" style={{marginBottom: 40}}>
        <div className="card">
          <span className="tag tag-accent">Hook 01</span>
          <h4 className="subsub">Verbal</h4>
          <p style={{fontSize: 14, color: "var(--muted)", marginBottom: 10}}>What they HEAR in the first 3 seconds.</p>
          <div className="mono" style={{fontSize: 13, color: "var(--ink)"}}>"Not to flex, but I'm pretty good at social media."</div>
        </div>
        <div className="card">
          <span className="tag tag-hot">Hook 02</span>
          <h4 className="subsub">Written</h4>
          <p style={{fontSize: 14, color: "var(--muted)", marginBottom: 10}}>What they READ on screen in the first 3 seconds.</p>
          <div className="mono" style={{fontSize: 13, color: "var(--ink)"}}>"The hack that changed everything"</div>
        </div>
        <div className="card">
          <span className="tag tag-green">Hook 03</span>
          <h4 className="subsub">Visual</h4>
          <p style={{fontSize: 14, color: "var(--muted)", marginBottom: 10}}>What they SEE in the first 3 seconds.</p>
          <div className="mono" style={{fontSize: 13, color: "var(--ink)"}}>Split-screen: before vs. after transformation.</div>
        </div>
      </div>

      <h3 className="sub">See the stack in action</h3>
      <p>Same reel idea. Three hooks working together.</p>

      <div className="hook-stack-demo">
        <ReelMockup
          hookText={`<em>Not to flex,</em><br/>but I'm<br/>pretty good at<br/>social media.`}
          caption="Verbal hook + written hook + visual of analytics dashboard in BG = 3x the stopping power."
        />
        <div className="hook-stack-lines">
          <div className="hs-line"><span className="tag tag-accent">Verbal</span><span>"Not to flex, but I'm pretty good at social media marketing."</span></div>
          <div className="hs-line"><span className="tag tag-hot">Written</span><span>"How I got reels from this → to this"</span></div>
          <div className="hs-line"><span className="tag tag-green">Visual</span><span>Dashboard in background showing 0 → 30K graph</span></div>
          <div className="hs-line"><span className="tag tag-ink">Result</span><span>3 reasons to NOT scroll in the first second.</span></div>
        </div>
      </div>

      <h3 className="sub">20 proven hooks — tap to roll.</h3>
      <HookGenerator />
    </section>
  );
}

function ChOutliers() {
  return (
    <section className="chapter" id="outliers">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 05</div>
      <h2 className="chapter-title">The <em>5X Outlier Rule</em>.</h2>
      <p className="chapter-lede">
        Stop guessing. Find hooks that are already virally proven — then adapt them for your niche. This is the exact research system the top 1% of creators use every month.
      </p>

      <div className="card callout-math">
        <div className="math-line">
          <span className="math-label">An outlier is:</span>
          <span className="math-eq mono">VIEWS ≥ 5 × FOLLOWER&nbsp;COUNT</span>
        </div>
        <p style={{marginTop: 14, color: "var(--muted)", fontSize: 14}}>
          If a creator with 10K followers has a reel with 50K+ views — that's a 5X outlier. It went viral once. It has a <strong style={{color: "var(--ink)"}}>dramatically higher chance</strong> of working again.
        </p>
      </div>

      <h3 className="sub">The 3 research methods</h3>

      <div className="method">
        <div className="method-num mono">01</div>
        <div>
          <h4 className="subsub">Creator Research</h4>
          <p>Find the best accounts in your niche. Sort their reels by views (use the <span className="mono">SortFeed</span> Chrome extension). Save every hook that follows the 5X rule.</p>
        </div>
      </div>

      <div className="method">
        <div className="method-num mono">02</div>
        <div>
          <h4 className="subsub">Keyword Research</h4>
          <p>Instagram Explore → search your sub-niche → Reels tab. Scroll. Save outliers. Then search different angles: occupation titles, problems, transformations.</p>
        </div>
      </div>

      <div className="method">
        <div className="method-num mono">03</div>
        <div>
          <h4 className="subsub">The Recommendation Goldmine</h4>
          <p>After Methods 1 & 2, your algorithm is now trained on your niche. The Reels tab will surface <em>hidden gems</em> you'd never find through search. This is where the best hooks live.</p>
        </div>
      </div>

      <div className="callout">
        Do all hook research on Instagram — it's the hardest platform to go viral on. If a hook worked there, it'll work anywhere.
      </div>

      <h3 className="sub">Adapt — don't copy</h3>
      <div className="adapt-table">
        <div className="adapt-row adapt-head">
          <div>Original viral hook</div>
          <div>→</div>
          <div>Adapted for your niche</div>
        </div>
        <div className="adapt-row">
          <div>"Not to flex, but I'm pretty good at photography."</div>
          <div className="mono">→</div>
          <div>"Not to flex, but I'm pretty good at social media marketing."</div>
        </div>
        <div className="adapt-row">
          <div>"How I got my reels from this to this in 30 days."</div>
          <div className="mono">→</div>
          <div>"How I got my client from 2 to 30K in 25 days."</div>
        </div>
        <div className="adapt-row">
          <div>"Smart couple vs. dumb couple buying a house."</div>
          <div className="mono">→</div>
          <div>"Smart creator vs. dumb creator when it comes to posting."</div>
        </div>
      </div>
    </section>
  );
}

function ChScripts() {
  return (
    <section className="chapter" id="scripts">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 06</div>
      <h2 className="chapter-title">Scripts are <em>skeletons</em> — not miracles.</h2>
      <p className="chapter-lede">
        Every viral reel follows a pattern. Learn the patterns, and you'll never stare at a blank page again. Here are 3 of the highest-converting ones — filled in live.
      </p>

      <ScriptBuilder />

      <h3 className="sub">The 4-step template-ization process</h3>
      <ol className="steps-list">
        <li>
          <span className="step-num">1</span>
          <div>
            <strong>Find a viral outlier</strong> — 5X rule, in your niche or adjacent.
          </div>
        </li>
        <li>
          <span className="step-num">2</span>
          <div>
            <strong>Transcribe it</strong> — use <span className="mono">gettranscribe.ai</span>. Free. Takes 10 seconds.
          </div>
        </li>
        <li>
          <span className="step-num">3</span>
          <div>
            <strong>Templatize with ChatGPT</strong> — "Turn this transcript into a fill-in-the-blank template that works for any niche. Keep the structure."
          </div>
        </li>
        <li>
          <span className="step-num">4</span>
          <div>
            <strong>Save it</strong> — build a Google Doc of 10-15 proven templates. This library becomes your unfair advantage.
          </div>
        </li>
      </ol>
    </section>
  );
}

function ChFunnel() {
  return (
    <section className="chapter" id="funnel">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 07</div>
      <h2 className="chapter-title">Every reel belongs to <em>one of three levels</em>.</h2>
      <p className="chapter-lede">
        Most creators post only top-of-funnel content and wonder why they have 40K followers and zero clients. The fix: make reels for all three levels — on purpose.
      </p>

      <div className="funnel">
        {FUNNELS.map((f, i) => (
          <div key={f.level} className={"funnel-row funnel-row-" + i}>
            <div className="funnel-side">
              <div className="funnel-level mono">{f.level}</div>
              <h4 className="funnel-name">{f.name}</h4>
            </div>
            <div className="funnel-body">
              <div className="funnel-job"><span className="label">Job</span>{f.job}</div>
              <div className="funnel-content"><span className="label">Content</span>{f.content}</div>
              <div className="funnel-row-meta">
                <div><span className="label">Metric</span><div className="mono" style={{fontSize: 13}}>{f.metric}</div></div>
                <div><span className="label">How you win</span><div style={{fontSize: 13}}>{f.howToWin}</div></div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="callout">
        Rule of thumb: out of every 10 reels you post, aim for <strong>5 top-of-funnel, 3 middle, 2 bottom.</strong> That's the blend that grows followers AND revenue.
      </div>
    </section>
  );
}

function ChGamify() {
  return (
    <section className="chapter" id="gamify">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 08 · Case study</div>
      <h2 className="chapter-title">How I took a client from <em>2 to 30,000 followers</em> — all organic.</h2>
      <p className="chapter-lede">
        No ads. No shoutouts. No luck. One move: we stopped making content people <em>watched</em> and started making content people <em>played</em>.
      </p>

      <div className="gamify-hero card">
        <div className="gamify-stat">
          <div className="gamify-stat-num"><span>2</span><span className="mono" style={{color: "var(--muted)"}}>→</span><span>30K</span></div>
          <div className="gamify-stat-label mono">FOLLOWERS · ORGANIC</div>
        </div>
        <div>
          <h4 className="subsub">The mindset shift</h4>
          <p>Passive viewers scroll. Active participants watch to the end and comment. Every reel became a mini arcade game — the viewer was <em>inside</em> the video, predicting what came next.</p>
        </div>
      </div>

      <h3 className="sub">The 6 game mechanics we used</h3>
      <div className="gamify-grid">
        {GAME_MECHANICS.map((g, i) => (
          <div key={g.name} className="gamify-card">
            <div className="gamify-card-top">
              <span className="mono" style={{fontSize: 11, color: "var(--muted)"}}>Mechanic 0{i+1}</span>
              <span className="tag tag-ink">{g.subtitle}</span>
            </div>
            <h4 className="gamify-card-name">{g.name}</h4>
            <div className="gamify-hook">"{g.hook}"</div>

            <div className="gamify-example">
              {g.example.map((line, j) => (
                <div key={j} className="gamify-example-line">{line}</div>
              ))}
            </div>

            <div className="gamify-why">
              <span className="label" style={{marginBottom: 4}}>Why it hooks</span>
              {g.why}
            </div>

            <div className="gamify-template mono">
              <span className="label" style={{marginBottom: 4}}>Template</span>
              {g.template}
            </div>
          </div>
        ))}
      </div>

      <h3 className="sub">The psychology — why this works</h3>
      <div className="grid-3">
        <div className="card-flat">
          <div className="tag tag-accent">Dopamine</div>
          <h4 className="subsub">Prediction → reveal → reward</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Every question is an anticipation spike. Every answer is a hit. The brain stays in the loop.</p>
        </div>
        <div className="card-flat">
          <div className="tag tag-hot">Scorekeeping</div>
          <h4 className="subsub">"How many did I get right?"</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Viewers silently tally their correct guesses. That counter = watch-time glue.</p>
        </div>
        <div className="card-flat">
          <div className="tag tag-green">One more game</div>
          <h4 className="subsub">The arcade effect</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Short cycles prevent fatigue. The viewer thinks "just one more" — and finishes the whole reel.</p>
        </div>
      </div>

      <div className="callout">
        The viewer isn't watching your video. They're <em>in</em> it. That's the whole trick.
      </div>
    </section>
  );
}

function ChSeries() {
  return (
    <section className="chapter" id="series">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 09</div>
      <h2 className="chapter-title">Series give people a <em>reason to follow</em>.</h2>
      <p className="chapter-lede">
        Standalone reels give value. Series give people a reason to come back tomorrow. Every fastest-growing creator of the last year runs at least one series.
      </p>

      <div className="grid-3">
        <div className="card">
          <span className="tag tag-ink">Series 01</span>
          <h4 className="subsub">Daily Series</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>"Day 47 of posting daily until I hit 10K." Every reel opens with the day + goal + progress.</p>
          <div className="mono" style={{fontSize: 12, marginTop: 10, color: "var(--muted)"}}>Hard · rapid growth</div>
        </div>
        <div className="card">
          <span className="tag tag-accent">Series 02</span>
          <h4 className="subsub">Progress-Update Series</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>One big goal. Milestone-based episodes. "Launched a podcast — here's episode 3 of how."</p>
          <div className="mono" style={{fontSize: 12, marginTop: 10, color: "var(--muted)"}}>Sustainable · great arc</div>
        </div>
        <div className="card">
          <span className="tag tag-hot">Series 03</span>
          <h4 className="subsub">Lesson Series</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>"30 lessons by 30." Each episode = one standalone lesson under a unifying theme.</p>
          <div className="mono" style={{fontSize: 12, marginTop: 10, color: "var(--muted)"}}>Evergreen · brandable</div>
        </div>
      </div>

      <h3 className="sub">Doubling down — the 90-day multiplier</h3>
      <p>Once you've posted 50+ reels, you'll have outliers in your OWN account. Don't leave them alone — recreate them.</p>

      <div className="grid-3">
        <div className="card-flat">
          <h4 className="subsub">Method A · Value Variation</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Keep the hook + format. Swap only the specific info. "5 reel mistakes" → "5 caption mistakes".</p>
        </div>
        <div className="card-flat">
          <h4 className="subsub">Method B · Format Consistency</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Keep the visual format. Swap the topic. Your voice + editing become the recognizable thing.</p>
        </div>
        <div className="card-flat">
          <h4 className="subsub">Method C · Component Isolation</h4>
          <p style={{fontSize: 14, color: "var(--muted)"}}>Keep everything. Test different filming approaches on the same proven script.</p>
        </div>
      </div>

      <div className="callout">
        A 90-day doubling-down experiment = 12M views + 83K followers for one of the fastest-growing creators of the last year. You're not guessing — you're scaling what already worked.
      </div>
    </section>
  );
}

function ChScore() {
  return (
    <section className="chapter" id="score">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 10</div>
      <h2 className="chapter-title">Score your next reel <em>before you post it</em>.</h2>
      <p className="chapter-lede">
        Run every reel through this checklist before you hit publish. If you score under 65, fix the weakest link — don't post.
      </p>

      <ViralScore />
    </section>
  );
}

function ChChecklist() {
  return (
    <section className="chapter" id="checklist">
      <div className="eyebrow"><span className="eyebrow-line"/> Chapter 11</div>
      <h2 className="chapter-title">Your <em>first 30 days</em>.</h2>
      <p className="chapter-lede">
        Print this. Pin it. Do one thing a day. Your progress saves in your browser — come back anytime.
      </p>

      <Checklist items={FINAL_CHECKLIST} storageKey="ig-growth-checklist-v1" />
    </section>
  );
}

function ChCTA() {
  return (
    <section className="chapter" id="cta">
      <div className="final-cta">
        <div className="tag" style={{background: "rgba(201,150,58,0.18)", color: "#C9963A", borderColor: "rgba(201,150,58,0.35)", marginBottom: 24, display: "inline-flex"}}>
          Ready to apply this?
        </div>
        <h2>Let's build your <em>next 30K</em> together.</h2>
        <p>
          This guide is what I walk every new client through on day one. If you want me to personally build your hook bank, script library, and content system — the same one that took a client from 2 to 30K — it starts with one conversation.
        </p>

        {/* Primary CTA buttons */}
        <div className="hero-cta" style={{justifyContent: "center", marginBottom: 32}}>
          <a className="btn btn-primary" href="https://www.orcalynx.com/book" target="_blank" rel="noopener">
            Book a Free Strategy Call →
          </a>
          <a className="btn btn-ghost" href="https://wa.me/9779811015121" target="_blank" rel="noopener">
            💬 Send a WhatsApp
          </a>
        </div>

        {/* Secondary links */}
        <div style={{
          display: "flex",
          flexWrap: "wrap",
          gap: 12,
          justifyContent: "center",
          marginBottom: 48,
        }}>
          <a
            href="https://www.orcalynx.com"
            target="_blank"
            rel="noopener"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "10px 18px",
              borderRadius: 999,
              border: "1px solid rgba(201,150,58,0.3)",
              background: "rgba(201,150,58,0.07)",
              color: "#C9963A",
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.1em",
              textDecoration: "none",
              textTransform: "uppercase",
            }}
          >
            orcalynx.com ↗
          </a>
          <a
            href="https://www.orcalynx.com/results"
            target="_blank"
            rel="noopener"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "10px 18px",
              borderRadius: 999,
              border: "1px solid var(--line-2)",
              background: "var(--surface-2)",
              color: "var(--ink-2)",
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.1em",
              textDecoration: "none",
              textTransform: "uppercase",
            }}
          >
            View Client Results ↗
          </a>
          <a
            href="https://www.instagram.com/marketing.shekhar/"
            target="_blank"
            rel="noopener"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "10px 18px",
              borderRadius: 999,
              border: "1px solid var(--line-2)",
              background: "var(--surface-2)",
              color: "var(--ink-2)",
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.1em",
              textDecoration: "none",
              textTransform: "uppercase",
            }}
          >
            @marketing.shekhar ↗
          </a>
        </div>

        <div style={{paddingTop: 32, borderTop: "1px solid var(--line)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)"}}>
          Made with care by @marketing.shekhar · Orcalynx · 2026
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  CHAPTERS,
  ChIntro, ChNiche, ChBrand, ChStyle, ChHooks, ChOutliers,
  ChScripts, ChFunnel, ChGamify, ChSeries, ChScore, ChChecklist, ChCTA,
});