// Role-based landing pages — /for-creators, /for-agencies, /for-engineers, /for-ops.
//
// Each HTML shell sets window.__ROLE_ID__ to one of: 'creator' | 'agency' | 'eng' | 'ops'.
// This file reads that, renders a role-specific hero, the RoleTabs (preselected),
// the stories that match the persona, and the standard FinalCTA.

const ROLE_HEROS = {
  creator: {
    eyebrow: 'For solo creators · founders · indie hackers',
    h1Top:   'Ship a product on the weekend.',
    h1Em:    'Launch on Monday.',
    sub:     'You are the founder, designer, dev, marketer. Octodus is the team you can’t afford yet — in the same Telegram thread you’re already in.',
    storyIds: ['01', '05'],   // Michael, Nick
    bullets: [
      ['One subscription', '$50/seat · $15 credits to start · no card'],
      ['Voice note → 112 prompts', 'Like Michael, who shipped 6 Gumroad plugins'],
      ['Works while you sleep', 'Wakes up: “ran the cleanup at 3:14 AM.”'],
    ],
  },
  agency: {
    eyebrow: 'For agencies · studios · content shops',
    h1Top:   'Run 10+ clients.',
    h1Em:    'Double delivery. Same headcount.',
    sub:     'A junior team that never sleeps. Content pipelines, design loops, SEO blogs — across every client at once, each with its own memory and rules.',
    storyIds: ['06', '02'],   // Elena, Maya
    bullets: [
      ['Per-client memory & rules', 'Each thread is its own workspace'],
      ['Design iteration in chat', '16 revisions in an evening — like Maya’s pageant banner'],
      ['Senior output, senior rates', 'No new hires needed to scale to 10+ clients'],
    ],
  },
  eng: {
    eyebrow: 'For engineers · platform teams · solo CTOs',
    h1Top:   'Stop watching dashboards.',
    h1Em:    'Get receipts in chat.',
    sub:     'Octodus reads logs, diagnoses, drafts the script, runs it, sets the TTLs, and posts the before/after — before you wake up.',
    storyIds: ['03', '05'],   // Dan, Nick
    bullets: [
      ['Self-healing infra', 'Like Dan: 27 GB → 124 MB at 3:14 AM'],
      ['DNS diagnostics that don’t give up', 'Step-by-step until it’s really working'],
      ['OAuth-only integrations', 'No data lock-in. Revoke in one click.'],
    ],
  },
  ops: {
    eyebrow: 'For ops · programs · partnerships',
    h1Top:   'Five orgs. One deadline.',
    h1Em:    'No project manager.',
    sub:     'Pre-call briefings, paperwork chasing, schedule alignment — all from chat mentions and dropped docs. The coordinator your team can’t afford to hire.',
    storyIds: ['04'],         // Ana
    bullets: [
      ['Cross-org coordination', 'Like Ana: ₽18M grant across 5 partners'],
      ['Pre-call briefs at 17:00', 'Reads the doc, makes the brief, reminds the team'],
      ['Lives where the work happens', 'No new tool to adopt — it’s in your chat'],
    ],
  },
};

function RoleHero({ role }) {
  const cfg = ROLE_HEROS[role];
  if (!cfg) return null;

  return (
    <section className="page-hero role-hero">
      <div className="container page-hero-body">
        <div className="eyebrow" data-reveal data-reveal-eager>{cfg.eyebrow}</div>
        <h1 data-reveal data-reveal-eager>
          {cfg.h1Top}<br/>
          <em>{cfg.h1Em}</em>
        </h1>
        <p className="page-hero-sub" data-reveal data-reveal-eager>{cfg.sub}</p>

        <div className="role-hero-bullets" data-stagger>
          {cfg.bullets.map((b, i) => (
            <div className="role-bullet" key={i} style={{ '--i': i }}>
              <span className="role-bullet-dot" />
              <div>
                <div className="role-bullet-k">{b[0]}</div>
                <div className="role-bullet-v">{b[1]}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="role-hero-ctas" data-reveal>
          <a className="btn btn-primary" href="https://calend.ly/emdx" target="_blank" rel="noopener">
            {Icons.telegram({ width: 18, height: 18 })} Hire octodus {Icons.arrow({ width: 16, height: 16 })}
          </a>
          <a className="btn btn-ghost" href="Stories.html">See more stories</a>
        </div>
      </div>

      <style>{`
        .role-hero { padding-bottom: 56px; }
        .role-hero .eyebrow {
          display: inline-flex; align-items: center; gap: 10px;
        }
        .role-hero .eyebrow::before {
          content: "";
          display: inline-block;
          width: 28px; height: 1px;
          background: var(--accent);
        }
        .role-hero-bullets {
          margin-top: 36px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
          max-width: 900px;
        }
        @media (max-width: 820px) { .role-hero-bullets { grid-template-columns: 1fr; } }
        .role-bullet {
          padding: 18px 18px 16px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 16px;
          display: flex;
          gap: 14px;
          align-items: flex-start;
        }
        .role-bullet-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: var(--accent-light);
          box-shadow: 0 0 8px var(--accent-tint-50);
          margin-top: 7px;
          flex-shrink: 0;
        }
        .role-bullet-k {
          font-size: 15px;
          font-weight: 600;
          color: var(--text);
          letter-spacing: -0.01em;
        }
        .role-bullet-v {
          margin-top: 2px;
          font-family: var(--font-mono);
          font-size: 11.5px;
          color: var(--text-muted);
          letter-spacing: 0.03em;
        }
        .role-hero-ctas {
          margin-top: 36px;
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        }
        .role-hero-ctas .btn { height: 52px; padding: 0 24px; font-size: 15.5px; }
      `}</style>
    </section>
  );
}

function RoleStories({ role }) {
  const cfg = ROLE_HEROS[role];
  if (!cfg) return null;
  const items = cfg.storyIds.map((n) => STORIES.find((s) => s.n === n)).filter(Boolean);

  return (
    <section className="role-stories">
      <div className="container">
        <header className="teaser-head" data-reveal>
          <div>
            <div className="eyebrow">Field stories · {role}</div>
            <h2>
              People like you.<br/>
              <em>Same coworker.</em>
            </h2>
          </div>
          <a className="teaser-cta" href="Stories.html">
            All stories {Icons.arrow({ width: 14, height: 14 })}
          </a>
        </header>

        <div className="role-stories-grid">
          {items.map((s) => (
            <a className="stt" key={s.n} href="Stories.html" style={{ '--accent-arm': s.accent }}>
              <div className="stt-frame">
                <div className="stt-head">
                  <span className="stt-num">{s.n} / 06</span>
                  <div className="stt-spark"><span /><span /><span /></div>
                </div>
                <div className="stt-metric">
                  <div className="stt-metric-val">{s.metric}</div>
                  <div className="stt-metric-unit">{s.unit}</div>
                </div>
                <h3 className="stt-headline">{s.title}</h3>
                <p className="stt-blurb">{s.blurb}</p>
                <div className="stt-author">
                  <div className="stt-avatar"><img src={s.avatar} alt={s.name} loading="lazy"/></div>
                  <div>
                    <div className="stt-name">{s.name}</div>
                    <div className="stt-role">{s.role}</div>
                  </div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        .role-stories {
          padding: 80px 0 100px;
          border-top: 1px solid var(--border);
        }
        .role-stories-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        @media (max-width: 760px) { .role-stories-grid { grid-template-columns: 1fr; } }
        .role-stories .stt-frame { padding: 26px 24px 22px; }
        .role-stories .stt-blurb {
          font-size: 14px;
          line-height: 1.55;
          color: var(--text-secondary);
          margin: 0 0 18px;
          text-wrap: pretty;
        }
      `}</style>
    </section>
  );
}

function RolePage() {
  const role = (typeof window !== 'undefined' && window.__ROLE_ID__) || 'creator';
  const cfg = ROLE_HEROS[role] || ROLE_HEROS.creator;
  const ctaHeading = {
    creator: <>One bot.<br/><em>The whole team.</em></>,
    agency:  <>Same headcount.<br/><em>Double delivery.</em></>,
    eng:     <>Stop firefighting.<br/><em>Start sleeping.</em></>,
    ops:     <>Coordinate everything.<br/><em>Manage nothing.</em></>,
  }[role];

  return (
    <>
      <SiteEffects />
      <SiteNav active={`for-${role}`} />
      <RoleHero role={role} />
      <RoleTabs initialRoleId={role} />
      <RoleStories role={role} />
      <FinalCTA
        heading={ctaHeading}
        sub="$15 of credits to start. No card. No setup call. Paste a message into Telegram and let Octodus get to work."
        ctaLabel="Hire octodus"
      />
      <SiteFooter />
      <SiteTweaks />
    </>
  );
}

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