// VibeAlchemy Marketing · How it works

const STAGES_DEEP = [
  {
    n: '01',
    name: 'Frame',
    time: '~ 1 min · check-in at end',
    tagline: 'Lock the opportunity: who, what, and why now.',
    what: 'You give it a blurb. A sentence, a paragraph, whatever you have. It reads it, fills in the gaps, and confirms what kind of business this is, who it\'s for, and what you actually meant. Anything inferred is shown back for you to correct.',
    why: 'Every downstream stage works from this brief. If the framing is off, the rest of the pipeline answers the wrong question. The check-in is where you fix that before the heavy work runs.',
    deliverable: 'A framed brief. Your idea, restated and structured for the rest of the pipeline.',
    excerpt: (
      <div>
        <div><span className="ex-label">Type of business: </span><span className="ex-val">B2B SaaS</span></div>
        <div><span className="ex-label">Intended customer: </span><span className="ex-val">Independent dental practices in the US</span></div>
        <div style={{ marginTop: 10 }}>
          <span className="ex-label">Restated:</span><br />
          <span className="ex-val">A voice AI receptionist for dental practices — handles intake calls and insurance verification, replacing 1–2 receptionist roles per practice.</span>
        </div>
      </div>
    ),
  },
  {
    n: '02',
    name: 'Research',
    time: '~ 3 min · check-in if drift',
    tagline: 'Find the customers and what they actually want.',
    what: 'The system goes out and learns about the people who would use this and the market they\'re in: what they already say, what they\'re trying to do, what they currently use.',
    why: 'Without grounding in real signal, every downstream conclusion is a guess. This stage makes sure the rest of the pipeline argues from evidence.',
    deliverable: 'Customer and market intelligence.',
    excerpt: (
      <div>
        <div><span className="ex-label">Pain theme 1: </span><span className="ex-val">"Front desk burnout — 60% turnover yearly."</span></div>
        <div><span className="ex-label">Pain theme 2: </span><span className="ex-val">"Patients hang up after 90 seconds on hold."</span></div>
        <div><span className="ex-label">Pain theme 3: </span><span className="ex-val">"Insurance verification eats 4 hrs / day per FTE."</span></div>
        <div style={{ marginTop: 10 }}><span className="ex-label">Bottoms-up TAM: </span><span className="ex-val">~ 195k independent practices × $480/mo</span></div>
      </div>
    ),
  },
  {
    n: '03',
    name: 'Analyse',
    time: '~ 4 min · longest stage',
    tagline: 'Size the market, score the moat, work out the unit economics.',
    what: 'With the customer and market clear, the system stress-tests the strategic depth: competitive position, what would defend the business at scale, and whether the economics actually work.',
    why: 'Most ideas fall apart here. A great market with no defensibility is a flag. A defensible position with broken economics is a different problem. Each gets named.',
    deliverable: 'Market Intelligence document.',
    excerpt: (
      <div>
        <div className="row" style={{ gap: 12, marginBottom: 8 }}>
          <span className="ex-label">CAC</span><span className="ex-val">$1,180</span>
          <span className="ex-label">LTV</span><span className="ex-val">$8,640</span>
          <span className="ex-label">Payback</span><span className="ex-val">7.4 mo</span>
        </div>
        <div><span className="ex-label">Moat: </span><span className="ex-val">Insurance-payer data integrations · medium</span></div>
        <div><span className="ex-label">Incumbents: </span><span className="ex-val">3 named, all general-purpose</span></div>
      </div>
    ),
  },
  {
    n: '04',
    name: 'Challenge',
    time: '~ 3 min',
    tagline: 'Three skeptics try to break the idea before you do.',
    what: 'Three adversarial perspectives go after the idea. Each is built to find what would break it. The objections that come back are the ones you\'d otherwise discover were wrong six months in.',
    why: 'Every other stage tries to build the case for the idea. This stage exists to look for what would break it. The contrast is the point.',
    deliverable: 'Red Team Report.',
    excerpt: (
      <div>
        <div><span className="ex-label" style={{ color: 'var(--ember)' }}>Objection 1:</span></div>
        <div className="ex-val" style={{ marginBottom: 8 }}>"Practices that would switch are also the ones most likely to be acquired by DSOs in 18 months."</div>
        <div><span className="ex-label" style={{ color: 'var(--ember)' }}>Objection 2:</span></div>
        <div className="ex-val">"HIPAA voice-recording compliance is an ongoing tax, not a one-time cost."</div>
      </div>
    ),
  },
  {
    n: '05',
    name: 'Decide',
    time: '~ 1 min',
    tagline: 'A clear verdict, with the reasoning you can defend.',
    what: 'The system synthesizes everything into a clear verdict: Pursue, Sharpen, Pivot, or Rethink. The reasoning comes with it. What\'s most likely to make it work, what\'s most likely to break it, and where to go if the idea didn\'t survive in its current form.',
    why: 'The verdict alone is worthless without the reasoning that supports it. Every claim ties back to evidence from earlier stages. The call is one you can defend.',
    deliverable: 'Decision Memo, with a Pivot Map when the verdict isn\'t a clean Pursue.',
    excerpt: (
      <div>
        <div className="row" style={{ gap: 12, marginBottom: 10 }}>
          <span className="memo-verdict-pill cond">Sharpen</span>
          <span className="ex-val" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22 }}>72 / 100</span>
        </div>
        <div className="ex-val">Key insight: market and product are real; defensibility hinges on payer data partnerships closing before competitors catch up.</div>
      </div>
    ),
  },
];

function HowItWorksPage() {
  return (
    <div className="page how-page">
      <PageHero
        eyebrow="HOW IT WORKS"
        headline="How a one-line idea becomes a Decision Memo."
        sub="Five stages. Three skeptics. One Decision Memo you can defend."
      />

      <section className="section-tight">
        <div className="wrap">
          {STAGES_DEEP.map((s) => (
            <div className="stage-deep" key={s.n}>
              <div className="stage-deep-side">
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'var(--gold)' }}>STAGE {s.n}</div>
                <div className="stage-deep-name">{s.name}</div>
                <div className="stage-deep-time">{s.time}</div>
              </div>
              <div>
                <div className="stage-deep-tagline">"{s.tagline}"</div>
                <p className="body" style={{ fontSize: 15, lineHeight: 1.6, marginBottom: 14 }}><strong style={{ color: 'var(--parchment)' }}>What it does · </strong>{s.what}</p>
                <p className="body" style={{ fontSize: 15, lineHeight: 1.6, marginBottom: 14 }}><strong style={{ color: 'var(--parchment)' }}>Why it matters · </strong>{s.why}</p>
                <div className="kv" style={{ marginTop: 18 }}>
                  <span className="k">YOU GET ↳</span>
                  <span className="v">{s.deliverable}</span>
                </div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--stone)', marginBottom: 8, textTransform: 'uppercase' }}>Example excerpt</div>
                <div className="stage-deep-excerpt">{s.excerpt}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Check-ins */}
      <Section eyebrow="CHECK-INS" headline="Where the system pauses to check in." sub="The system makes inferences from your blurb. It pauses at the moments where those inferences matter most." bg>
        <div className="col-2">
          <div className="stack stack-lg">
            <div>
              <div className="eyebrow gold" style={{ marginBottom: 8 }}>CHECK-IN · FRAMING</div>
              <h3 className="h3 serif">After framing.</h3>
              <p className="body" style={{ marginTop: 12 }}>Right after the system frames your idea. Did it get the business type, the intended customer, and the restated idea right? If yes, continue. If something's off, edit it inline and the system continues from there.</p>
            </div>
            <div>
              <div className="eyebrow gold" style={{ marginBottom: 8 }}>CHECK-IN · DRIFT</div>
              <h3 className="h3 serif">When something drifts.</h3>
              <p className="body" style={{ marginTop: 12 }}>Sometimes the analysis starts pointing somewhere different from where the framing said the idea was. The system catches that and pauses. Does this drift reflect what you actually mean, or should we keep the analysis on the original track?</p>
            </div>
            <div>
              <div className="eyebrow gold" style={{ marginBottom: 8 }}>CHECK-IN · STEERING (GUIDED)</div>
              <h3 className="h3 serif">Before each stage runs.</h3>
              <p className="body" style={{ marginTop: 12 }}>Before Research, Analyse, and Challenge kick off, the system shows what it's about to do and lets you steer. Tighten the customer, narrow the market, point at specific incumbents it should look at, whatever needs redirecting.</p>
            </div>
            <p className="body italic" style={{ fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--stone)' }}>Autonomous mode keeps the safety pauses (framing, drift) and skips the steering check-ins. Guided mode runs all of them. Founder tier and up.</p>
          </div>
          <div>
            {/* Stylized check-in card */}
            <div className="surface" style={{ padding: 22 }}>
              <div className="row-sb" style={{ paddingBottom: 14, borderBottom: '1px dashed var(--line-2)', marginBottom: 16 }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--gold)' }}>CHECK-IN · AFTER FRAMING</div>
                <span className="kbd">⌘ ↵</span>
              </div>
              <div className="stack stack-md">
                {[
                  ['Type of business', 'B2B SaaS'],
                  ['Intended customer', 'Independent dental practices · US'],
                  ['Restated', 'Voice AI receptionist — intake calls + insurance verification.'],
                ].map(([k, v], i) => (
                  <div key={i} style={{ padding: '12px 14px', background: 'var(--obsidian-2)', borderRadius: 3, borderLeft: '2px solid var(--gold)' }}>
                    <div className="mono mute2" style={{ fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 4 }}>{k}</div>
                    <div style={{ fontSize: 14, color: 'var(--parchment)' }}>{v}</div>
                  </div>
                ))}
              </div>
              <div className="row" style={{ gap: 10, marginTop: 18 }}>
                <a className="btn btn-primary btn-sm" onClick={(e) => e.preventDefault()}>Looks right — continue</a>
                <a className="btn btn-sm" onClick={(e) => e.preventDefault()}>Edit this</a>
              </div>
              <p className="mono mute2" style={{ fontSize: 10, marginTop: 12, letterSpacing: '0.08em' }}>Next: research is the longest stage — typically a few minutes.</p>
            </div>
          </div>
        </div>
      </Section>

      {/* Two modes */}
      <Section eyebrow="MODES" headline="Pick how involved you want to be." sub="Same pipeline. Two different cadences.">
        <div className="col-2">
          {[
            {
              name: 'Autonomous', tag: 'Set it. Read the verdict.',
              when: "When you want the validation pack without sitting through the run. Pauses only for safety: a framing confirm up front, drift detection mid-run.",
              what: 'The pipeline runs end-to-end. No steering check-ins. You come back to a finished Decision Memo.',
              avail: 'Validate and up',
            },
            {
              name: 'Guided', tag: 'You steer. The system checks in before each major stage.',
              when: 'When the idea is complex enough that your input mid-run matters. Sharpen the customer, redirect research, point at incumbents it should look at before assumptions get baked in.',
              what: 'Steering check-ins before Research, Analyse, and Challenge, plus the same safety pauses Autonomous gets.',
              avail: 'Founder and up',
            },
          ].map((m) => (
            <div className="surface" style={{ padding: 32 }} key={m.name}>
              <div className="eyebrow gold" style={{ marginBottom: 10 }}>{m.name.toUpperCase()}</div>
              <h3 className="h3 serif italic" style={{ marginBottom: 18 }}>"{m.tag}"</h3>
              <div className="kv" style={{ marginBottom: 12 }}><span className="k">WHEN</span><span className="v">{m.when}</span></div>
              <div className="kv" style={{ marginBottom: 12 }}><span className="k">WHAT</span><span className="v">{m.what}</span></div>
              <div className="kv"><span className="k">PLAN</span><span className="v" style={{ color: 'var(--gold)' }}>{m.avail}</span></div>
            </div>
          ))}
        </div>
        <p className="italic" style={{ fontFamily: 'var(--serif)', fontSize: 22, textAlign: 'center', marginTop: 40, color: 'var(--parchment-dim)' }}>Most founders start in Guided. Some never leave.</p>
      </Section>

      {/* Red team principle */}
      <Section eyebrow="THE RED TEAM PRINCIPLE" headline="Why skepticism has to be structural." sub="Most validation systems have a structural problem: the same model that builds the case for your idea also has to argue against it. Same neurons. Same context. The skeptical voice never gets full weight. We built around that." bg narrow>
        <div className="principle">
          <div className="principle-num">PRINCIPLE 01</div>
          <h3 className="h3 serif">One model can't be its own skeptic.</h3>
          <blockquote>Ask any LLM to evaluate an idea and argue against it in the same response. You'll get the case for it in detail and the case against it in three bullet points. Self-skepticism doesn't scale.</blockquote>
        </div>
        <div className="principle">
          <div className="principle-num">PRINCIPLE 02</div>
          <h3 className="h3 serif">Different perspectives find different failure modes.</h3>
          <blockquote>One critic flattens. Three independent perspectives, each with its own stake, find what each other miss. The rigor comes from how structurally different the three are, not from how skeptical any one of them is.</blockquote>
        </div>
        <div className="principle">
          <div className="principle-num">PRINCIPLE 03</div>
          <h3 className="h3 serif">Adversarial intent is structural, not a prompt.</h3>
          <blockquote>You can't fix this with nicer prompting. "Please be more critical" doesn't make a model adversarial. It makes it perform skepticism for a paragraph and then go back to building the case. The Red Team perspectives are wired with adversarial intent. Finding what would break the idea is the only job they have.</blockquote>
        </div>
        <p className="italic serif" style={{ fontSize: 26, textAlign: 'center', marginTop: 48, lineHeight: 1.3 }}>If you've ever asked an LLM to argue against your idea, you already know what's missing.</p>
      </Section>

      <FinalCTA headline="That's the system. Be one of the first 100 paying customers." sub="First 100 paying customers lock in 50% off year 1." />
    </div>
  );
}

window.HowItWorksPage = HowItWorksPage;
