/* ============== SUBPAGE CONTENT — RENDERED INSIDE CONSOLE SCREEN ============== */

function SectionFrame({ kicker, title, eyebrow, children, footer }) {
  return (
    <div className="sec-frame">
      {eyebrow && <div className="sec-eyebrow">{eyebrow}</div>}
      {title && (
        <h2 className="sec-title">
          {kicker && <span className="sec-kicker">{kicker}</span>}
          {title}
        </h2>
      )}
      <div className="sec-body">{children}</div>
      {footer && <div className="sec-footer">{footer}</div>}
    </div>
  );
}

function LiveSiteSlide({ url, label, soon }) {
  if (soon) {
    return (
      <SectionFrame eyebrow="◆ LIVE SITE" kicker="◇" title="LAUNCHING SOON">
        <div className="live-slide">
          <div className="live-url-big">{label || 'Coming soon'}</div>
          <div className="live-desc">This wire isn't open yet. Come back in a few days.</div>
          <div className="live-chip soon" style={{marginTop: 20}}>
            <span className="led"></span>
            <span className="live-label">STATUS</span>
            <span className="live-url">Launching soon <span className="arr">◌</span></span>
          </div>
        </div>
      </SectionFrame>
    );
  }
  return (
    <SectionFrame eyebrow="◆ LIVE SITE" kicker="◇" title="VISIT THE LIVE SITE">
      <div className="live-slide">
        <div className="live-url-big">{label}</div>
        <div className="live-desc">The real product lives on its own wire. Everything on this arcade is a portfolio snapshot.</div>
        <a className="live-cta" href={url} target="_blank" rel="noopener">
          <span className="lc-lbl"><span className="lc-k">▸ OPEN</span>{label}</span>
          <span className="lc-arr">↗</span>
        </a>
      </div>
    </SectionFrame>
  );
}

/* ========== SURGEON ========== */
const SURGEON_SLIDES = {
  intro: (
    <SectionFrame eyebrow="◆ VENTURE 01 · CONTENT AGENCY" kicker="◇ INTRO">
      <div className="venture-intro">
        <div className="venture-logo venture-logo--light">
          <img src="assets/surgeon-logo.png" alt="The Content Surgeon logo" />
        </div>
        <h2 className="big-hero">THE<br/><em>CONTENT</em><br/>SURGEON.</h2>
        <p className="lede">India's only content agency built exclusively for surgeons.</p>
        <p className="body">Content writing, strategy and marketing that turns operating-room expertise into patient trust and referrals — without ever sounding like a marketing agency.</p>
        <div className="meta-row">
          <div className="m"><span className="k">CLASS</span><strong>STRATEGIST · EDITORIAL</strong></div>
          <div className="m"><span className="k">BASED</span><strong>MUMBAI, INDIA</strong></div>
          <div className="m"><span className="k">BUILT FOR</span><strong>SURGEONS ONLY</strong></div>
        </div>
      </div>
    </SectionFrame>
  ),
  diagnosis: (
    <SectionFrame eyebrow="◆ 01 / DIAGNOSIS" kicker="◇" title="WHAT WE FIX">
      <p className="body-lg">Surgeons are trusted with lives. Yet online, they sound like every other clinic — generic blogs, stock photos, and silence between them.</p>
      <p className="body">The Content Surgeon is the fix. We write, structure and publish content that reflects the precision of the surgery room, so patients find you, trust you, and refer you.</p>
      <div className="stat-grid-inline">
        <div className="sc"><div className="v">01</div><div className="k">INDUSTRY</div><div className="s">surgeons only</div></div>
        <div className="sc"><div className="v">IN</div><div className="k">BASED</div><div className="s">Mumbai, India</div></div>
        <div className="sc"><div className="v">3</div><div className="k">ENGAGEMENTS</div><div className="s">retainer · project · sprint</div></div>
      </div>
    </SectionFrame>
  ),
  services: (
    <SectionFrame eyebrow="◆ 02 / PROCEDURES" kicker="◇" title="WHAT WE DO">
      <div className="svc-grid">
        <div className="svc"><div className="n">◇ 01</div><h3>Content Writing</h3><p>Blogs, articles, patient education. Medically accurate, written for humans.</p></div>
        <div className="svc"><div className="n">◇ 02</div><h3>Content Strategy</h3><p>A 90-day plan rooted in what your patients actually search for.</p></div>
        <div className="svc"><div className="n">◇ 03</div><h3>SEO</h3><p>Technical + editorial SEO so your name shows up before your competitors'.</p></div>
        <div className="svc"><div className="n">◇ 04</div><h3>Social Content</h3><p>Short-form social built for LinkedIn and Instagram without the cringe.</p></div>
        <div className="svc"><div className="n">◇ 05</div><h3>Website Copy</h3><p>Clinic websites that read like you'd trust them with surgery.</p></div>
        <div className="svc"><div className="n">◇ 06</div><h3>Patient Education</h3><p>Pre-op, post-op, explainer content your patients actually read.</p></div>
      </div>
    </SectionFrame>
  ),
  method: (
    <SectionFrame eyebrow="◆ 03 / METHOD" kicker="◇" title="HOW IT WORKS">
      <div className="method-list">
        <div className="ml"><span className="n">I</span><strong>Specialty first.</strong><span>We only write for surgeons. We speak your specialty's language before we write your copy.</span></div>
        <div className="ml"><span className="n">II</span><strong>Medical accuracy, always.</strong><span>Every piece is checked against clinical accuracy — nothing ships that you wouldn't say in a consultation.</span></div>
        <div className="ml"><span className="n">III</span><strong>Patient-first voice.</strong><span>We write the way your patients listen — not the way SEO blogs think they should.</span></div>
        <div className="ml"><span className="n">IV</span><strong>Operational, not sporadic.</strong><span>We treat content like a schedule, not a side project. Cadence, QA, measurable vitals.</span></div>
      </div>
    </SectionFrame>
  ),
  live: <LiveSiteSlide url="https://www.thecontentsurgeon.com/" label="thecontentsurgeon.com" />,
};

/* ========== AI LABS ========== */
const AI_SLIDES = {
  intro: (
    <SectionFrame eyebrow="◆ VENTURE 02 · AI STUDIO" kicker="◇ INTRO">
      <div className="venture-intro">
        <div className="venture-logo venture-logo--light">
          <img src="assets/puro-logo.png" alt="Puro AI Labs logo" />
        </div>
        <h2 className="big-hero"><em>PURO</em><br/>AI LABS.</h2>
        <p className="lede">AI implementation for business owners.</p>
        <p className="body">Done-for-you AI systems and a live monthly workshop. The Studio builds. The Workshop teaches. Both turn "we should try AI" into shipped automations.</p>
        <div className="meta-row">
          <div className="m"><span className="k">CLASS</span><strong>ARCHITECT · AUTOMATON</strong></div>
          <div className="m"><span className="k">PRODUCTS</span><strong>STUDIO · WORKSHOP</strong></div>
          <div className="m"><span className="k">FOR</span><strong>OWNERS &amp; OPERATORS</strong></div>
        </div>
      </div>
    </SectionFrame>
  ),
  problem: (
    <SectionFrame eyebrow="◆ 01 / THE PROBLEM" kicker="◇" title="WHERE MOST OWNERS GET STUCK">
      <p className="body-lg">Every owner hears about AI every day. Very few actually ship something that makes their week easier.</p>
      <p className="body">The gap isn't interest — it's implementation. You don't need another course. You need someone to build the thing, wire it into your ops, and hand you the keys. Or, you need to sit in the room once a month and learn to build it yourself.</p>
      <p className="body">Puro AI Labs does both.</p>
    </SectionFrame>
  ),
  studio: (
    <SectionFrame eyebrow="◆ 02 / THE STUDIO" kicker="◇" title="DONE-FOR-YOU AI">
      <p className="body-lg">You tell us what's eating your week. We build the agent, automation, or internal tool that quietly removes it.</p>
      <div className="svc-grid">
        <div className="svc"><div className="n">◇ 01</div><h3>AI Audits</h3><p>A deep look at your ops — here's where AI pays back, here's where it won't.</p></div>
        <div className="svc"><div className="n">◇ 02</div><h3>Custom Agents</h3><p>Agents that read, write, triage, research and report — wired into your stack.</p></div>
        <div className="svc"><div className="n">◇ 03</div><h3>Workflow Automation</h3><p>The boring, repetitive multi-step workflows. Gone. Running on their own.</p></div>
        <div className="svc"><div className="n">◇ 04</div><h3>Ops Integration</h3><p>Your tools talk to each other without you in the middle copying and pasting.</p></div>
      </div>
    </SectionFrame>
  ),
  workshop: (
    <SectionFrame eyebrow="◆ 03 / THE WORKSHOP" kicker="◇" title="LIVE · ONCE A MONTH">
      <p className="body-lg">A monthly live workshop where business owners actually build AI things with us — not watch a deck about it.</p>
      <div className="method-list">
        <div className="ml"><span className="n">I</span><strong>Live, not recorded.</strong><span>We build in the room with you. Questions get answered in real time.</span></div>
        <div className="ml"><span className="n">II</span><strong>One workflow per session.</strong><span>Every month is one concrete thing you'll have running by the end.</span></div>
        <div className="ml"><span className="n">III</span><strong>No code required.</strong><span>If you can follow a recipe, you can build this.</span></div>
        <div className="ml"><span className="n">IV</span><strong>Built for owners.</strong><span>No engineers, no jargon, no demos that only run on stage.</span></div>
      </div>
    </SectionFrame>
  ),
  live: <LiveSiteSlide url="https://www.puroailabs.com/" label="puroailabs.com" />,
};

/* ========== LAZZZY ========== */
const LAZY_SLIDES = {
  intro: (
    <SectionFrame eyebrow="◆ VENTURE 03 · WEB APP" kicker="◇ INTRO">
      <div className="venture-intro">
        <div className="venture-logo venture-logo--blue">
          <img src="assets/lazzzy-logo-sq.png" alt="LazzzyHustler logo" />
        </div>
        <h2 className="big-hero"><em>LAZZZY</em><br/>HUSTLER.</h2>
        <p className="lede">Find your blue ocean.</p>
        <p className="body">An AI-assisted career counselor for the post-AI world. You feed it your context — your skills, your constraints, the market you want to play in — and it routes you toward the unique blue ocean no one else is running at.</p>
        <p className="body">Started as a creator alter-ego. Pivoted into a tool. The Tomorrow Tribe's passion project — pre-revenue, in development, currently a team of one.</p>
        <div className="meta-row">
          <div className="m"><span className="k">CLASS</span><strong>NAVIGATOR · SCOUT</strong></div>
          <div className="m"><span className="k">STATUS</span><strong>IN DEVELOPMENT</strong></div>
          <div className="m"><span className="k">FOR</span><strong>POST-AI OPERATORS</strong></div>
        </div>
      </div>
    </SectionFrame>
  ),
  manifesto: (
    <SectionFrame eyebrow="◆ 01 / MANIFESTO" kicker="◇" title="EVERY RED OCEAN IS HIDING A BLUE ONE.">
      <p className="body-lg">Post-AI, every generic skill is a race to the bottom. The only durable edge is the one that fits <em>you</em> — your context, your leverage, your quiet advantages.</p>
      <p className="body">Most career advice is generic because the person giving it doesn't know your parameters. A model that does — one trained on your actual context — can point you at angles you'd never find on your own.</p>
      <p className="body">LazzzyHustler isn't another productivity newsletter. It's a decision tool: you describe where you are, what you want, and what you bring. It returns the blue-ocean angle closest to your leverage.</p>
    </SectionFrame>
  ),
  formats: (
    <SectionFrame eyebrow="◆ 02 / HOW IT WORKS" kicker="◇" title="YOUR CONTEXT IN. YOUR OCEAN OUT.">
      <div className="svc-grid">
        <div className="svc"><div className="n">◇ STEP 01</div><h3>Context Intake</h3><p>You describe your skills, constraints, goals, and the market you're trying to win in. No fluff, no quizzes.</p></div>
        <div className="svc"><div className="n">◇ STEP 02</div><h3>Leverage Audit</h3><p>The tool isolates your unique leverage — what you can do that most can't — and weighs it against current market demand.</p></div>
        <div className="svc"><div className="n">◇ STEP 03</div><h3>Blue-Ocean Mapping</h3><p>It cross-references your context with where markets are uncontested, using a decision doctrine informed by real operator experience.</p></div>
        <div className="svc"><div className="n">◇ STEP 04</div><h3>Route Options</h3><p>You get two or three career / product angles with enough detail to test them, not a generic list of "jobs to consider".</p></div>
      </div>
    </SectionFrame>
  ),
  status: <LiveSiteSlide soon label="LazzzyHustler" />,
};

/* ========== ABOUT ========== */
const ABOUT_SLIDES = {
  intro: (
    <SectionFrame eyebrow="◆ ABOUT · THE FOUNDER">
      <div className="venture-intro venture-intro--portrait">
        <img
          className="player-mugshot"
          src="assets/puro-mugshot-cut.png"
          alt="Purandhar 'Puro' Gopalakrishnan"
          aria-hidden="true"
        />
        <h2 className="big-hero">PURANDHAR<br/>'PURO'<br/><em>GOPALAKRISHNAN.</em></h2>
        <p className="lede">Founder. Operator. Multi-venture builder.</p>
        <p className="body">Three ventures. One player. I run The Content Surgeon and Puro AI Labs, and I'm building LazzzyHustler — a tool that helps people find their blue ocean in a post-AI world. All three rhyme: help people route to their unique leverage and compound it.</p>
        <div className="meta-row">
          <div className="m"><span className="k">BASED</span><strong>MUMBAI, INDIA</strong></div>
          <div className="m"><span className="k">CLASS</span><strong>OPERATOR</strong></div>
          <div className="m"><span className="k">MODE</span><strong>ONLINE</strong></div>
        </div>
      </div>
    </SectionFrame>
  ),
  story: (
    <SectionFrame eyebrow="◆ 01 / STORY" kicker="◇" title="HOW I GOT HERE">
      <p className="body-lg">I started writing before I started building. Years of editorial work taught me one thing: the best products fail when their story doesn't.</p>
      <p className="body">The Content Surgeon came out of that — a content agency for surgeons who deserved better than generic clinic marketing. Puro AI Labs followed when I realized the same owners who needed better content also needed better systems. LazzzyHustler is the passion project — started as a creator alter-ego, pivoted into a tool that helps people find their blue ocean when every generic skill is becoming a commodity.</p>
      <p className="body">Three ventures, one thesis: the future belongs to the operators who can find their unique leverage and compound it — writing, shipping, and automating at the same time.</p>
    </SectionFrame>
  ),
  skills: (
    <SectionFrame eyebrow="◆ 02 / SKILLS" kicker="◇" title="WHAT I DO ALL DAY">
      <div className="skill-grid">
        <div className="sk"><span>01</span><strong>WRITING</strong><small>editorial · positioning · voice</small></div>
        <div className="sk"><span>02</span><strong>STRATEGY</strong><small>content · ops · business</small></div>
        <div className="sk"><span>03</span><strong>AI</strong><small>agents · automations · tools</small></div>
        <div className="sk"><span>04</span><strong>SYSTEMS</strong><small>leverage · workflows · design</small></div>
      </div>
    </SectionFrame>
  ),
  now: (
    <SectionFrame eyebrow="◆ 03 / NOW" kicker="◇" title="WHAT I'M DOING THIS MONTH">
      <div className="method-list">
        <div className="ml"><span className="n">◇</span><strong>Running The Content Surgeon.</strong><span>10-person team. ₹7L+/month in MRR. Shipping content for surgeons across India.</span></div>
        <div className="ml"><span className="n">◇</span><strong>Running Puro AI Labs.</strong><span>Just launched. Building Studio engagements. Hosting the monthly Workshop.</span></div>
        <div className="ml"><span className="n">◇</span><strong>Building LazzzyHustler.</strong><span>Pre-revenue. Shaping the blue-ocean decision tool nights and weekends.</span></div>
        <div className="ml"><span className="n">◇</span><strong>Reading more than I write.</strong><span>Business, behavioral science, and systems theory.</span></div>
      </div>
    </SectionFrame>
  ),
};

/* ========== JOURNEY ========== */
const JOURNEY_SLIDES = {
  intro: (
    <SectionFrame eyebrow="◆ MISSION LOG">
      <div className="venture-intro">
        <h2 className="big-hero">MISSION<br/><em>LOG.</em></h2>
        <p className="lede">A short story, in chapters.</p>
        <p className="body">I've been a writer, an editor, a solo freelancer, an agency founder, and an AI operator — usually in that order, sometimes in parallel. Here's the short version.</p>
      </div>
    </SectionFrame>
  ),
  y1: (
    <SectionFrame eyebrow="◆ CH.01 · BEFORE" kicker="◇" title="WRITING IN OTHER PEOPLE'S ROOMS">
      <p className="body-lg">Staff writing. Editing. Freelance. Years of pressing send on other people's words taught me how the internet actually reads.</p>
      <p className="body">The lesson: voice beats volume. Specificity beats scale. Founders who sound like founders win — the rest sound like everyone else.</p>
    </SectionFrame>
  ),
  y2: (
    <SectionFrame eyebrow="◆ CH.02 · THE SURGEON" kicker="◇" title="BUILDING A NICHE WORTH OWNING">
      <p className="body-lg">The Content Surgeon started as a niche idea: serve only surgeons, become the best at it.</p>
      <p className="body">Most agencies try to serve everyone and end up sounding like nobody. I picked one industry, learned its vocabulary, and stopped pitching outside it. It worked.</p>
    </SectionFrame>
  ),
  y3: (
    <SectionFrame eyebrow="◆ CH.03 · THE LAB" kicker="◇" title="AI STOPPED BEING OPTIONAL">
      <p className="body-lg">Around the time LLMs stopped being a novelty, I started building agents into my own ops. Clients asked how. Puro AI Labs is the answer.</p>
      <p className="body">The Studio is what we build for owners who want it done. The Workshop is what we teach to owners who want to build it themselves.</p>
    </SectionFrame>
  ),
  y4: (
    <SectionFrame eyebrow="◆ CH.04 · NEXT" kicker="◇" title="BUILDING IN PUBLIC, FINALLY">
      <p className="body-lg">After years of ghostwriting for other people's brands, I'm building one of my own.</p>
      <p className="body">LazzzyHustler is the creator arm — what I've learned about leverage, systems, and running a portfolio of small bets. Newsletter issue zero drops soon.</p>
    </SectionFrame>
  ),
};

/* ========== COMMS ========== */
const COMMS_SLIDES = {
  intro: (
    <SectionFrame eyebrow="◆ COMMS">
      <div className="venture-intro">
        <h2 className="big-hero">FIND<br/><em>ME.</em></h2>
        <p className="lede">This arcade doesn't take coins.</p>
        <p className="body">No booking funnel, no email capture, no data collection. This is a portfolio. If you want to work with me, every venture has its own live site. If you just want to talk, here's where I hang out.</p>
      </div>
    </SectionFrame>
  ),
  channels: (
    <SectionFrame eyebrow="◆ 01 / CHANNELS" kicker="◇" title="WHERE I HANG OUT">
      <div className="svc-grid channels">
        <a className="svc" href="mailto:puro@thetomtribe.com">
          <div className="n">◇ 01</div><h3>Email</h3>
          <p>puro@thetomtribe.com</p>
          <span className="go">Open mail ↗</span>
        </a>
        <a className="svc" href="https://wa.me/917304219455" target="_blank" rel="noopener">
          <div className="n">◇ 02</div><h3>WhatsApp</h3>
          <p>+91 73042 19455 · fastest path to me.</p>
          <span className="go">Open chat ↗</span>
        </a>
        <a className="svc" href="https://www.instagram.com/puro_here/" target="_blank" rel="noopener">
          <div className="n">◇ 03</div><h3>Instagram</h3>
          <p>@puro_here · demos, teardowns, build logs.</p>
          <span className="go">Open profile ↗</span>
        </a>
        <a className="svc" href="https://x.com/puro_here" target="_blank" rel="noopener">
          <div className="n">◇ 04</div><h3>X / Twitter</h3>
          <p>@puro_here · DMs, threads, half-formed thoughts.</p>
          <span className="go">Open profile ↗</span>
        </a>
      </div>
    </SectionFrame>
  ),
  live: (
    <SectionFrame eyebrow="◆ 02 / LIVE SITES" kicker="◇" title="THE REAL PRODUCTS">
      <div className="ventures-live">
        <a className="venture-live" href="https://www.thecontentsurgeon.com/" target="_blank" rel="noopener">
          <span className="lv-num">◆ 01</span>
          <div className="lv-body">
            <strong>The Content Surgeon</strong>
            <span>Content solutions for surgeons.</span>
          </div>
          <span className="lv-go">thecontentsurgeon.com ↗</span>
        </a>
        <a className="venture-live" href="https://www.puroailabs.com/" target="_blank" rel="noopener">
          <span className="lv-num">◆ 02</span>
          <div className="lv-body">
            <strong>Puro AI Labs</strong>
            <span>AI implementation for business owners.</span>
          </div>
          <span className="lv-go">puroailabs.com ↗</span>
        </a>
        <div className="venture-live soon">
          <span className="lv-num">◆ 03</span>
          <div className="lv-body">
            <strong>LazzzyHustler</strong>
            <span>Launching soon.</span>
          </div>
          <span className="lv-go soon">Launching soon ◌</span>
        </div>
      </div>
    </SectionFrame>
  ),
};

const SLIDE_CONTENT = {
  SURGEON: SURGEON_SLIDES,
  AI: AI_SLIDES,
  LAZY: LAZY_SLIDES,
  ABOUT: ABOUT_SLIDES,
  JOURNEY: JOURNEY_SLIDES,
  COMMS: COMMS_SLIDES,
};

window.SLIDE_CONTENT = SLIDE_CONTENT;
window.SectionFrame = SectionFrame;
