/* global React */ const { useState: useAi } = React; // ==================================================================== // Shared chrome for AI screens // ==================================================================== function AIChrome({ step, total = 6, label, children, footer, hideStep }) { const { MScreen, MTopBar } = window.M; return ( SKIP} /> {children} ); } // AI question card — sage-bordered, editorial, never chat-bubble function AIQuestion({ children }) { return (

1TO1 AI

{children}

); } // User answer — soft eyebrow + italic serif, treated as a quote function AIAnswered({ answer }) { return (

YOUR ANSWER

"{answer}"

); } function AITextarea({ value, onChange, placeholder, rows = 3 }) { return (

onChange(e.target.value)} rows={rows} placeholder={placeholder}
      className="field" style={{ marginTop: 12, fontSize: 15, lineHeight: 1.55, padding: 14, fontFamily: "var(--sans)" }}/>
  );
}

function SkipAILink() {
  return (
    <div style={{ textAlign: "center", padding: "8px 0 0" }}>
      <button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.1em", cursor: "pointer" }}>
        SKIP THE AI · WRITE IT MYSELF
      </button>
    </div>
  );
}

function PrimaryBtn({ children, onClick, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      width: "100%", height: 52, borderRadius: 999,
      background: disabled ? "var(--surface-3)" : "var(--accent)",
      color: disabled ? "var(--text-3)" : "#0E0D0B",
      border: "none", fontFamily: "var(--sans)", fontSize: 15, fontWeight: 600,
      cursor: disabled ? "not-allowed" : "pointer",
    }}>{children}</button>
  );
}

function GhostBtn({ children, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: "100%", height: 48, borderRadius: 999,
      background: "transparent", border: "1px solid var(--border)",
      color: "var(--text)", fontFamily: "var(--sans)", fontSize: 14.5, fontWeight: 500,
      cursor: "pointer", marginTop: 10,
    }}>{children}</button>
  );
}

// ====================================================================
// C1 — What you do · CONVERSATION
// ====================================================================
function AIWhatYouDo_Q() {
  const { MStickyCTA } = window.M;
  const [a1, setA1] = useAi("");
  const [a2, setA2] = useAi("");
  const [a3, setA3] = useAi("");
  const ready = a1.trim() && a2.trim() && a3.trim();

return (
    <AIChrome step={1} label="What you do" footer={
      <MStickyCTA>
        <PrimaryBtn disabled={!ready}>Draft my section</PrimaryBtn>
        <SkipAILink/>
      </MStickyCTA>
    }>
      <div style={{ padding: "8px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>01 / 06 · WHAT YOU DO</div>
        <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.08, letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "pretty" }}>
          Tell me what you're <span className="serif-i" style={{ color: "var(--accent)" }}>known for.</span>
        </h1>
        <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text-2)", marginTop: 12 }}>
          A few quick questions, then I'll draft your section. You can edit anything I write.
        </p>

<AIQuestion>In one sentence, what's the most important problem you solve for your clients?</AIQuestion>
        <AITextarea value={a1} onChange={setA1} placeholder="Take a breath. Plain English."/>

{a1.trim() && (
          <>
            <AIQuestion>Who is that for, specifically?</AIQuestion>
            <AITextarea value={a2} onChange={setA2} placeholder="Be specific — the more concrete, the better."/>
          </>
        )}

{a2.trim() && (
          <>
            <AIQuestion>What makes you different from someone else who does roughly the same thing?</AIQuestion>
            <AITextarea value={a3} onChange={setA3} placeholder="Honest, not boastful."/>
          </>
        )}
      </div>
    </AIChrome>
  );
}

// ====================================================================
// C2 — What you do · DRAFT REVIEW
// ====================================================================
function RevisionPills({ pills = ["Punchier", "Lead with credibility", "Shorter", "More direct", "Less corporate", "Try again"] }) {
  return (
    <div style={{ marginTop: 16, display: "flex", flexWrap: "wrap", gap: 8 }}>
      {pills.map(p => (
        <button key={p} className="mono" style={{
          padding: "8px 14px", borderRadius: 999,
          background: "transparent", border: "1px solid var(--border)",
          color: "var(--text-2)", fontSize: 11, letterSpacing: "0.06em",
          cursor: "pointer", textTransform: "uppercase",
        }}>{p}</button>
      ))}
    </div>
  );
}

function AIDraftCard({ children }) {
  return (
    <div style={{ marginTop: 14, padding: "22px 22px", background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 14 }}>
      <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>AS IT'LL APPEAR</div>
      <div style={{ marginTop: 12 }}>
        {children}
      </div>
    </div>
  );
}

function AIWhatYouDo_Draft() {
  const { MStickyCTA } = window.M;
  return (
    <AIChrome step={1} label="Draft" footer={
      <MStickyCTA>
        <PrimaryBtn>Use this version</PrimaryBtn>
        <div style={{ textAlign: "center", marginTop: 10 }}>
          <button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.1em", cursor: "pointer" }}>← BACK TO QUESTIONS</button>
        </div>
      </MStickyCTA>
    }>
      <div style={{ padding: "8px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>01 / 06 · DRAFT</div>
        <h2 style={{ font: "italic 400 24px/1 var(--serif)", color: "var(--accent)", margin: "14px 0 0", letterSpacing: "-0.005em" }}>What I do</h2>

<AIDraftCard>
          <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--text)" }}>
            Boutique commercial property practice. I act for small business owners purchasing first commercial premises and developers under $5M — the deals top-tier firms deprioritise but where the legal work most affects the outcome.
          </p>
          <p style={{ margin: "12px 0 0", fontSize: 13.5, lineHeight: 1.6, color: "var(--text-2)" }}>
            Eight years post-admission. Recently left Allens to go solo from Robina.
          </p>
        </AIDraftCard>

<div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", marginTop: 22 }}>REVISE</div>
        <RevisionPills/>

<button style={{ marginTop: 22, background: "transparent", border: "none", color: "var(--accent)", fontSize: 13, cursor: "pointer", padding: 0, fontFamily: "var(--sans)" }}>
          Edit text directly →
        </button>
      </div>
    </AIChrome>
  );
}

// ====================================================================
// C3 — Who you serve · CONVERSATION + DRAFT
// ====================================================================
function AIWhoServe_Q() {
  const { MStickyCTA } = window.M;
  const [a, setA] = useAi("");
  return (
    <AIChrome step={2} label="Who you serve" footer={
      <MStickyCTA>
        <PrimaryBtn disabled={!a.trim()}>Draft my archetypes</PrimaryBtn>
        <SkipAILink/>
      </MStickyCTA>
    }>
      <div style={{ padding: "8px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>02 / 06 · WHO YOU SERVE</div>
        <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.08, letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "pretty" }}>
          Who do you do your <span className="serif-i" style={{ color: "var(--accent)" }}>best work</span> for?
        </h1>

<AIQuestion>Tell me about your three favourite types of client. What do they have in common? What problem brings them to you?</AIQuestion>
        <AITextarea value={a} onChange={setA} rows={6} placeholder="Picture three real people. What kind of business, what stage, what's keeping them up at night?"/>
      </div>
    </AIChrome>
  );
}

function AIWhoServe_Draft() {
  const { MStickyCTA } = window.M;
  const archetypes = [
    { n: "01", t: "The first-time commercial buyer", d: "Business owner outgrowing leased premises, $1.5–4M deal, often nervous about contract terms." },
    { n: "02", t: "The under-$5M developer", d: "Two to ten lot subdivisions, mixed-use infill, time-pressured DA pathways." },
    { n: "03", t: "The accidental landlord", d: "Owner-occupiers selling the business but keeping the building, suddenly a commercial lessor." },
  ];
  return (
    <AIChrome step={2} label="Draft" footer={
      <MStickyCTA>
        <PrimaryBtn>Use these archetypes</PrimaryBtn>
        <div style={{ textAlign: "center", marginTop: 10 }}>
          <button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.1em", cursor: "pointer" }}>← BACK TO QUESTIONS</button>
        </div>
      </MStickyCTA>
    }>
      <div style={{ padding: "8px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>02 / 06 · DRAFT</div>
        <h2 style={{ font: "italic 400 24px/1 var(--serif)", color: "var(--accent)", margin: "14px 0 0", letterSpacing: "-0.005em" }}>Who I serve</h2>

<AIDraftCard>
          {archetypes.map((a, i) => (
            <div key={i} style={{ paddingTop: i === 0 ? 0 : 16, marginTop: i === 0 ? 0 : 16, borderTop: i === 0 ? "none" : "1px solid var(--border-soft)" }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--accent)" }}>{a.n}</div>
              <div className="serif" style={{ fontSize: 17, marginTop: 6, letterSpacing: "-0.005em" }}>{a.t}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: "var(--text-2)", marginTop: 6 }}>{a.d}</div>
            </div>
          ))}
        </AIDraftCard>

<div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", marginTop: 22 }}>REVISE</div>
        <RevisionPills pills={["Sharper", "Less jargon", "Add a fourth", "Combine 1 & 3", "Try again"]}/>

<button style={{ marginTop: 22, background: "transparent", border: "none", color: "var(--accent)", fontSize: 13, cursor: "pointer", padding: 0, fontFamily: "var(--sans)" }}>
          Edit each archetype directly →
        </button>
      </div>
    </AIChrome>
  );
}

// ====================================================================
// C4 — Recent wins · CONVERSATION + DRAFT
// ====================================================================
function AIWins_Q() {
  const { MStickyCTA } = window.M;
  const [a1, setA1] = useAi("");
  const [a2, setA2] = useAi("");
  return (
    <AIChrome step={3} label="Recent wins" footer={
      <MStickyCTA>
        <PrimaryBtn disabled={!a1.trim()}>Shape my wins</PrimaryBtn>
        <SkipAILink/>
      </MStickyCTA>
    }>
      <div style={{ padding: "8px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>03 / 06 · RECENT WINS</div>
        <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.08, letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "pretty" }}>
          What have you done <span className="serif-i" style={{ color: "var(--accent)" }}>lately?</span>
        </h1>

<AIQuestion>Tell me about a piece of work from the last year you're proud of. What happened, and why did it matter?</AIQuestion>
        <AITextarea value={a1} onChange={setA1} rows={5}/>

{a1.trim() && (
          <>
            <AIQuestion>One more?</AIQuestion>
            <AITextarea value={a2} onChange={setA2} rows={5}/>
            <div className="mono" style={{ marginTop: 8, fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)", textAlign: "right" }}>UP TO 3 WINS</div>
          </>
        )}
      </div>
    </AIChrome>
  );
}

<div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", marginTop: 22 }}>REVISE</div>
        <RevisionPills pills={["Tighter", "More specific", "Add numbers", "Less formal", "Try again"]}/>
      </div>
    </AIChrome>
  );
}

// ====================================================================
// C5 — Looking to meet · HYBRID (suggestions + confirm)
// ====================================================================
function AILookingFor() {
  const { MStickyCTA, Eyebrow } = window.M;
  const initial = [
    { t: "Commercial mortgage brokers", on: true },
    { t: "Accountants serving SMEs", on: true },
    { t: "Commercial real estate agents", on: true },
    { t: "Town planners", on: false },
    { t: "Quantity surveyors", on: false },
  ];
  const [items, setItems] = useAi(initial);
  const [extra, setExtra] = useAi("");
  const toggle = (i) => setItems(items.map((x, j) => j === i ? { ...x, on: !x.on } : x));
  return (
    <AIChrome step={4} label="Looking to meet" footer={
      <MStickyCTA>
        <PrimaryBtn>Continue</PrimaryBtn>
      </MStickyCTA>
    }>
      <div style={{ padding: "8px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>04 / 06 · LOOKING TO MEET</div>
        <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.08, letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "pretty" }}>
          Who would <span className="serif-i" style={{ color: "var(--accent)" }}>move things forward</span> for you?
        </h1>

<AIQuestion>Based on what you've said, you'd probably benefit from meeting these people. Which of them resonate?</AIQuestion>

<div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 10 }}>
          {items.map((x, i) => (
            <button key={i} onClick={() => toggle(i)} style={{
              padding: "13px 16px", borderRadius: 999,
              border: "1px solid " + (x.on ? "var(--accent)" : "var(--border)"),
              background: x.on ? "var(--accent-soft)" : "transparent",
              color: x.on ? "var(--accent)" : "var(--text-2)",
              cursor: "pointer", textAlign: "left",
              display: "flex", alignItems: "center", gap: 10,
              fontSize: 14, fontWeight: 500,
            }}>
              <span style={{ width: 18, height: 18, borderRadius: 9, border: "1.5px solid " + (x.on ? "var(--accent)" : "var(--border)"), display: "grid", placeItems: "center", flexShrink: 0 }}>
                {x.on && <svg width="10" height="10" viewBox="0 0 14 14" fill="none" stroke="var(--accent)" strokeWidth="2"><path d="M2 7l3 3 7-7"/></svg>}
              </span>
              {x.t}
            </button>
          ))}
        </div>

<Eyebrow>Anyone else?</Eyebrow>
        <input value={extra} onChange={(e) => setExtra(e.target.value)} placeholder="Type and press enter…" className="field" style={{ marginTop: 8, fontSize: 14, height: 44 }}/>

<SkipAILink/>
      </div>
    </AIChrome>
  );
}

// ====================================================================
// C6 — What you offer · HYBRID
// ====================================================================
function AIOffers() {
  const { MStickyCTA, Eyebrow } = window.M;
  const initial = [
    { t: "Free 20-min contract reviews", d: "For owners deciding whether a commercial purchase makes sense.", on: true },
    { t: "Intros to ~12 SE QLD brokers", d: "Relationship-based, no kickbacks.", on: true },
    { t: "Plain-English DA explainers", d: "For first-time developers.", on: false },
    { t: "Lease audits at cost", d: "For accidental landlords.", on: false },
  ];
  const [items, setItems] = useAi(initial);
  const toggle = (i) => setItems(items.map((x, j) => j === i ? { ...x, on: !x.on } : x));
  return (
    <AIChrome step={5} label="What you offer" footer={
      <MStickyCTA>
        <PrimaryBtn>Continue</PrimaryBtn>
      </MStickyCTA>
    }>
      <div style={{ padding: "8px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>05 / 06 · WHAT YOU OFFER</div>
        <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.08, letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "pretty" }}>
          What can you offer in <span className="serif-i" style={{ color: "var(--accent)" }}>return?</span>
        </h1>

<AIQuestion>Drawing from what you've shared about your work, here's what you could meaningfully offer. Confirm what fits.</AIQuestion>

<div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 10 }}>
          {items.map((x, i) => (
            <button key={i} onClick={() => toggle(i)} style={{
              padding: "14px 16px", borderRadius: 12,
              border: "1px solid " + (x.on ? "var(--accent)" : "var(--border)"),
              background: x.on ? "var(--accent-soft)" : "var(--surface)",
              color: "var(--text)", cursor: "pointer", textAlign: "left",
              display: "flex", alignItems: "flex-start", gap: 12,
            }}>
              <span style={{ width: 18, height: 18, marginTop: 2, borderRadius: 9, border: "1.5px solid " + (x.on ? "var(--accent)" : "var(--border)"), display: "grid", placeItems: "center", flexShrink: 0 }}>
                {x.on && <svg width="10" height="10" viewBox="0 0 14 14" fill="none" stroke="var(--accent)" strokeWidth="2"><path d="M2 7l3 3 7-7"/></svg>}
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 500, color: x.on ? "var(--accent)" : "var(--text)" }}>{x.t}</div>
                <div style={{ fontSize: 12.5, color: "var(--text-2)", marginTop: 4, lineHeight: 1.5 }}>{x.d}</div>
              </div>
            </button>
          ))}
        </div>

<SkipAILink/>
      </div>
    </AIChrome>
  );
}

// ====================================================================
// C7 — 90-day focus · CONVERSATION + DRAFT
// ====================================================================
function AIFocus_Q() {
  const { MStickyCTA } = window.M;
  const [a, setA] = useAi("");
  return (
    <AIChrome step={6} label="90-day focus" footer={
      <MStickyCTA>
        <PrimaryBtn disabled={!a.trim()}>Draft my focus</PrimaryBtn>
        <SkipAILink/>
      </MStickyCTA>
    }>
      <div style={{ padding: "8px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>06 / 06 · 90-DAY FOCUS</div>
        <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.08, letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "pretty" }}>
          What are you <span className="serif-i" style={{ color: "var(--accent)" }}>focused on</span> right now?
        </h1>

<AIQuestion>What would make this a great quarter for you? Be specific — a deal, a launch, a hire, a number.</AIQuestion>
        <AITextarea value={a} onChange={setA} rows={5} placeholder="The one thing you'd most want to talk about with the right person."/>
      </div>
    </AIChrome>
  );
}

{/* Live pull-quote preview */}
        <div style={{ marginTop: 14, padding: "26px 22px", background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 14, position: "relative" }}>
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>NOW · 90-DAY FOCUS</div>
          <div className="serif-i" style={{ fontSize: 19, lineHeight: 1.4, letterSpacing: "-0.005em", marginTop: 12, color: "var(--text)", textWrap: "pretty" }}>
            "{focus.slice(0, i)}<span style={{ color: "var(--accent)" }}>{highlight}</span>{focus.slice(i + highlight.length)}"
          </div>
          <div className="perf" style={{ marginTop: 18, marginBottom: 0 }}/>
        </div>

<Eyebrow>Highlight phrase</Eyebrow>
        <div style={{ marginTop: 8, padding: "10px 14px", background: "var(--surface)", border: "1px solid var(--accent)", borderRadius: 999, color: "var(--accent)", fontSize: 13, display: "inline-block" }}>
          {highlight}
        </div>
        <div style={{ marginTop: 6 }}>
          <button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 12, cursor: "pointer", padding: 0 }}>Change phrase →</button>
        </div>

<div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", marginTop: 22 }}>REVISE</div>
        <RevisionPills pills={["Punchier", "Less ambitious", "More direct", "Try again"]}/>
      </div>
    </AIChrome>
  );
}

// ====================================================================
// C8 — Completeness check
// ====================================================================
function AICompletenessCheck() {
  const { MStickyCTA, Eyebrow } = window.M;
  const sections = [
    { eyebrow: "WHAT I DO", body: "Boutique commercial property practice. I act for small business owners purchasing first commercial premises and developers under $5M." },
    { eyebrow: "WHO I SERVE", body: "First-time commercial buyers, under-$5M developers, accidental landlords." },
    { eyebrow: "RECENT WINS", body: "March 2026 — saved a $2.3M warehouse purchase. January 2026 — closed a 14-lot Burleigh subdivision." },
    { eyebrow: "LOOKING TO MEET", body: "Mortgage brokers, SME accountants, commercial agents." },
    { eyebrow: "WHAT I OFFER", body: "Free contract reviews. Intros to ~12 SE QLD brokers." },
    { eyebrow: "90-DAY FOCUS", body: "Building referral relationships with brokers and accountants who serve SME owners buying their first commercial premises." },
  ];
  return (
    <AIChrome label="Ready to publish?" hideStep footer={
      <MStickyCTA>
        <PrimaryBtn>Looks like me</PrimaryBtn>
        <button style={{ marginTop: 10, width: "100%", height: 44, borderRadius: 999, background: "transparent", border: "1px solid var(--border)", color: "var(--text-2)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", cursor: "pointer" }}>
          MAKE IT MORE ME
        </button>
      </MStickyCTA>
    }>
      <div style={{ padding: "8px 24px 24px" }}>
        <Eyebrow>Ready to publish?</Eyebrow>
        <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.08, letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "pretty" }}>
          Does this still sound like <span className="serif-i" style={{ color: "var(--accent)" }}>you?</span>
        </h1>
        <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text-2)", marginTop: 12, textWrap: "pretty" }}>
          We polished the language a bit. If anything sounds too corporate or not quite right, edit it now — your Meet Sheet should feel like you wrote it.
        </p>

<div style={{ marginTop: 22, background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 14, overflow: "hidden" }}>
          {sections.map((s, i) => (
            <button key={i} style={{
              width: "100%", padding: "16px 18px", textAlign: "left",
              background: "transparent", border: "none",
              borderBottom: i < sections.length - 1 ? "1px solid var(--border-soft)" : "none",
              color: "var(--text)", cursor: "pointer", display: "flex", alignItems: "flex-start", gap: 12,
            }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>{s.eyebrow}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text)", marginTop: 6, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{s.body}</div>
              </div>
              <span className="mono" style={{ fontSize: 10.5, letterSpacing: "0.1em", color: "var(--accent)", flexShrink: 0 }}>EDIT</span>
            </button>
          ))}
        </div>
      </div>
    </AIChrome>
  );
}

// ====================================================================
// C9 — Drafting state (writing your section)
// ====================================================================
function AIDrafting() {
  return (
    <AIChrome step={1} label="Drafting" footer={null}>
      <div style={{ padding: "8px 24px 24px" }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--accent)" }}>WRITING YOUR SECTION</div>
        <h2 style={{ font: "italic 400 24px/1 var(--serif)", color: "var(--accent)", margin: "14px 0 0", letterSpacing: "-0.005em" }}>What I do</h2>

<div style={{ marginTop: 14, padding: "22px 22px", background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 14, position: "relative", overflow: "hidden" }}>
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>AS IT'LL APPEAR</div>
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 10 }}>
            {[100, 92, 85, 60, 78, 40].map((w, i) => (
              <div key={i} style={{ height: 12, width: `${w}%`, borderRadius: 4, background: "linear-gradient(90deg, var(--surface-2) 0%, var(--accent-soft) 50%, var(--surface-2) 100%)", backgroundSize: "200% 100%", animation: `aiShimmer 1.6s ease-in-out infinite`, animationDelay: `${i*0.1}s` }}/>
            ))}
          </div>
        </div>

<div style={{ marginTop: 22, display: "flex", alignItems: "center", justifyContent: "center", gap: 10 }}>
          <div style={{ display: "flex", gap: 4 }}>
            {[0,1,2].map(i => <div key={i} style={{ width: 5, height: 5, borderRadius: 3, background: "var(--accent)", opacity: 0.4, animation: "aiDot 1.2s ease-in-out infinite", animationDelay: `${i*0.15}s` }}/>)}
          </div>
          <span className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>1TO1 AI · DRAFTING</span>
        </div>

window.AI = {
  AIWhatYouDo_Q, AIWhatYouDo_Draft,
  AIWhoServe_Q, AIWhoServe_Draft,
  AIWins_Q, AIWins_Draft,
  AILookingFor, AIOffers,
  AIFocus_Q, AIFocus_Draft,
  AICompletenessCheck, AIDrafting,
};