function InsightsPage({ onGo, onOpenPost }) {
  const D = window.DATA;
  const [filter, setFilter] = useState("All");
  const filters = ["All", "Strategy", "Performance", "SEO", "Creative", "Teardown", "Thinking", "Playbook"];
  const shown = filter === "All" ? D.posts : D.posts.filter(p => p.tag === filter);
  return (
    <>
      <section className="wrap">
        <div style={{padding: "clamp(40px, 6vw, 80px) 0 clamp(32px, 5vw, 60px)"}}>
          <Reveal><span className="hero__kicker">Insights · long-form</span></Reveal>
          <Reveal delay={80}>
            <h1 className="about-hero__title" style={{marginTop: 24, maxWidth: 1200}}>
              Notes from inside the <em>growth machine</em>.
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{color: "var(--fg-2)", fontSize: 18, maxWidth: 640, lineHeight: 1.55}}>
              Monthly essays on strategy, performance, SEO, and the craft of building brands that compound.
              Written for operators, read by founders.
            </p>
          </Reveal>

          <Reveal delay={200}>
            <div className="chips" style={{marginTop: 32}}>
              {filters.map((t) => (
                <button key={t} className={filter === t ? "is-active" : ""} onClick={() => setFilter(t)}>{t}</button>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <section>
        <div className="posts">
          {shown.map((p, i) => (
            <Reveal key={p.title} delay={i * 50} className={"post" + (p.feature ? " post--feature" : "")} as="div">
              <div className="post__img" onClick={() => onOpenPost(p)} />
              <div className="post__meta">
                <span>{p.tag}</span>
                <span>{p.date}</span>
              </div>
              <h3 className="post__title" onClick={() => onOpenPost(p)}>{p.title}</h3>
              <div className="post__read" onClick={() => onOpenPost(p)}>{p.read}</div>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="cta-big">
        <div className="wrap">
          <Reveal><h2 className="cta-big__title">Get the <em>monthly note.</em></h2></Reveal>
          <Reveal delay={120}>
            <p style={{fontSize: 18, maxWidth: 540, color: "color-mix(in oklab, var(--bg) 70%, transparent)", marginBottom: 32}}>
              One essay a month. No tips & tricks. No funnel hacks. Just sharp thinking about growth.
            </p>
          </Reveal>
          <Reveal delay={160}>
            <div className="cta-big__row">
              <div style={{display: "flex", gap: 0, alignItems: "stretch", border: "1px solid color-mix(in oklab, var(--bg) 40%, transparent)", borderRadius: 999, overflow: "hidden", background: "transparent", maxWidth: 480, width: "100%"}}>
                <input placeholder="your@email.com" style={{
                  flex: 1, background: "transparent", border: "none", padding: "14px 22px",
                  color: "var(--bg)", font: "inherit", fontSize: 14, outline: "none"
                }} />
                <button className="btn btn--primary" style={{borderRadius: 0, margin: 0}} onClick={() => alert("subscribe placeholder")}>
                  Subscribe <span className="arr">↗</span>
                </button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}

function PostPage({ post, onGo, onOpenPost }) {
  const D = window.DATA;
  const related = D.posts.filter(p => p.title !== post.title).slice(0, 3);

  // Generate reading progress
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const el = document.getElementById("article-body");
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = el.offsetHeight - window.innerHeight;
      const scrolled = Math.min(Math.max(-rect.top, 0), total);
      setProgress(total > 0 ? (scrolled / total) * 100 : 0);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [post.title]);

  return (
    <>
      {/* Reading progress */}
      <div style={{position: "fixed", top: 72, left: 0, right: 0, height: 2, zIndex: 45, background: "transparent"}}>
        <div style={{height: "100%", width: progress + "%", background: "var(--accent)", transition: "width .1s linear"}} />
      </div>

      <article>
        {/* Hero */}
        <section className="wrap">
          <div style={{padding: "clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 48px)"}}>
            <Reveal>
              <button className="post-back" onClick={() => onGo("insights")}>← All essays</button>
            </Reveal>
            <Reveal delay={80}>
              <div className="post-meta-row">
                <span className="post-meta-row__tag">{post.tag}</span>
                <span>·</span>
                <span>{post.date}</span>
                <span>·</span>
                <span>{post.read}</span>
              </div>
            </Reveal>
            <Reveal delay={160}>
              <h1 className="post-title">{post.title}</h1>
            </Reveal>
            <Reveal delay={220}>
              <div className="post-author">
                <div className="post-author__avatar">S</div>
                <div>
                  <div className="post-author__name">Stanzin</div>
                  <div className="post-author__role">Growth Partner · Bengaluru</div>
                </div>
              </div>
            </Reveal>
          </div>
        </section>

        {/* Feature image */}
        <section className="wrap">
          <Reveal>
            <div className="post-hero-img" />
          </Reveal>
        </section>

        {/* Body */}
        <section className="wrap">
          <div id="article-body" className="post-body">
            {/* TOC */}
            <aside className="post-toc">
              <div className="post-toc__label">On this page</div>
              <a href="#intro">Introduction</a>
              <a href="#plateau">Why brands plateau</a>
              <a href="#unlocks">The three unlocks</a>
              <a href="#unlock-1">1 · Offer clarity</a>
              <a href="#unlock-2">2 · Creative velocity</a>
              <a href="#unlock-3">3 · Retention math</a>
              <a href="#closing">Closing thought</a>
            </aside>

            {/* Article */}
            <div className="post-prose">
              <p className="post-lede">
                Every D2C founder I talk to hits the same wall around ₹40–50L MRR. Not because the market dries up — the market is fine — but because the system that got them to ₹50L is not the system that takes them to ₹2Cr.
              </p>

              <h2 id="intro">The pattern that repeats</h2>
              <p>
                I've seen this in six brands over the last two years. Same story each time: strong early traction on the back of a founder's personal network and a hot creative, then a slow grind where paid spend creeps up, ROAS drifts down, and the team starts talking about "brand" without quite knowing what they mean.
              </p>
              <p>
                The instinct is to spend more, test more, hire more. That almost never works. The bottleneck is rarely capacity — it's clarity.
              </p>

              <blockquote className="post-pull">
                The bottleneck is rarely capacity. It's clarity.
              </blockquote>

              <h2 id="plateau">Why most brands plateau at ₹50L</h2>
              <p>
                Three things happen simultaneously at this revenue band:
              </p>
              <ol className="post-ol">
                <li>The initial hero creative fatigues. Frequency climbs, CTR halves, CPM stays up.</li>
                <li>The easy customer segment is saturated. New audiences are more skeptical and need more convincing.</li>
                <li>The founder gets pulled into ops and stops doing the customer research that made the first message resonate in the first place.</li>
              </ol>
              <p>
                None of these are unsolvable. But they compound, and they compound against you.
              </p>

              <figure className="post-figure">
                <div className="post-figure__img" />
                <figcaption>Figure 1 · The classic ₹50L plateau — what spend, CAC, and ROAS look like in month 4 of the stall.</figcaption>
              </figure>

              <h2 id="unlocks">The three unlocks that matter</h2>
              <p>
                Over the last two years, the engagements that broke through all leaned on the same three moves — in roughly this order.
              </p>

              <h3 id="unlock-1">1 · Offer clarity</h3>
              <p>
                Before you touch ads, rewrite the offer. Most D2C brands are selling a product when they should be selling a decision. What are you making easier? What are you replacing? Why now?
              </p>
              <p>
                When Koyo rewrote the homepage headline from "Clinically-backed skincare" to "Three products. Ninety days. Skin you'll actually recognize." — LP conversion went from 1.8% to 3.4% in a week. Nothing else changed.
              </p>

              <h3 id="unlock-2">2 · Creative velocity</h3>
              <p>
                The brands that break out ship 8–12 new creatives a week, not 2. You don't need Cannes-grade work. You need enough at-bats to let the algorithm find your winners. Aim for 1 winner per 10 tests, and scale the winner hard.
              </p>
              <p>
                This is an ops problem more than a creative problem. Brief templates, a running hook library, an editor on retainer — that's the engine.
              </p>

              <h3 id="unlock-3">3 · Retention math</h3>
              <p>
                Paid economics change completely when your second purchase rate doubles. A brand at 20% repeat spending ₹800 CAC is a different business from a brand at 45% repeat spending ₹800 CAC — even if the top-of-funnel looks identical.
              </p>
              <p>
                Retention is not a separate channel. It's a multiplier on every other number. Fix it first, and the paid media problem becomes easier to solve.
              </p>

              <h2 id="closing">Closing thought</h2>
              <p>
                The ₹50L plateau is not a ceiling. It's a signal that the ad-creative-LP-offer chain you built in year one needs to be rebuilt for year two. The brands that accept this grow. The brands that keep spending their way out don't.
              </p>
              <p>
                If this is where you are right now, let's talk.
              </p>

              <div className="post-tags">
                {["D2C", "Growth", "Strategy", "CRO"].map(t => <span key={t}>{t}</span>)}
              </div>

              <div className="post-share">
                <span className="post-share__label">Share this essay</span>
                <div className="post-share__row">
                  <button>Twitter ↗</button>
                  <button>LinkedIn ↗</button>
                  <button>Copy link</button>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Author card */}
        <section className="wrap">
          <div className="post-author-card">
            <div className="post-author-card__avatar">S</div>
            <div>
              <div className="post-author-card__name">Stanzin</div>
              <p className="post-author-card__bio">Independent growth partner for D2C brands and B2B SaaS teams. Seven years inside growth functions. Currently consulting with six brands from Bengaluru.</p>
              <div className="post-author-card__cta">
                <button className="btn btn--ghost" onClick={() => onGo("about")}>About <span className="arr">→</span></button>
                <button className="btn btn--primary" onClick={() => onGo("contact")}>Work with me <span className="arr">↗</span></button>
              </div>
            </div>
          </div>
        </section>

        {/* Related */}
        <section className="section">
          <div className="wrap">
            <SectionHead num="· Keep reading" titleHtml="More <em>essays</em>." />
            <div className="posts" style={{border: "none"}}>
              {related.map((p, i) => (
                <Reveal key={p.title} delay={i * 50} className="post" as="div">
                  <div className="post__img" onClick={() => onOpenPost(p)} />
                  <div className="post__meta">
                    <span>{p.tag}</span>
                    <span>{p.date}</span>
                  </div>
                  <h3 className="post__title" onClick={() => onOpenPost(p)}>{p.title}</h3>
                  <div className="post__read" onClick={() => onOpenPost(p)}>{p.read}</div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        <section className="cta-big">
          <div className="wrap">
            <Reveal><h2 className="cta-big__title">Get the <em>monthly note.</em></h2></Reveal>
            <Reveal delay={120}>
              <div className="cta-big__row">
                <button className="btn btn--primary" onClick={() => onGo("contact")}>Subscribe ↗</button>
                <button className="btn btn--ghost" onClick={() => onGo("insights")}>All essays →</button>
              </div>
            </Reveal>
          </div>
        </section>
      </article>
    </>
  );
}

window.InsightsPage = InsightsPage;
window.PostPage = PostPage;