/* The Ghost website — home page.
   Nine sections: hero, problem, two ways in, result, system, client voice,
   The Analogue Thinker, Sarra, final action.
   Section, FinalAction and the rest come from WebParts.jsx. */

function Hero() {
  return (
    <Section dark style={{ paddingBottom: 100 }}>
      <div className="gw-wrap gw-grid gw-grid--hero">
        <div className="gw-measure">
          <div className="gw-kicker" style={{ color: "var(--ink-4)" }}>The Ghost.</div>
          <FitHeading level={1} max={96} style={{ margin: "32px 0 0" }} lines={[
            "You win in the room.",
            <span style={{ color: "var(--crimson)" }}>The page loses it.</span>,
          ]} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 23, lineHeight: 1.5, color: "var(--paper-2)", maxWidth: "44ch", margin: "34px 0 40px" }}>
            I find the idea your name should carry, then ghostwrite the body of work that makes it stick.
          </p>
          <div className="gw-actions" style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
            <EditorialButton href="known-for-something.html">Find what I should be known for</EditorialButton>
            <a href="ghostwriting.html" style={{ display: "inline-flex", alignItems: "center", minHeight: 48, padding: "0 26px", border: "1px solid var(--paper-2)", color: "var(--paper-0)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", textDecoration: "none" }}>See the ghostwriting</a>
          </div>
          <div style={{ fontFamily: "var(--font-typewriter)", fontSize: 15, color: "var(--ink-4)", marginTop: 44, borderTop: "1px solid var(--ink-2)", paddingTop: 20 }}>
            The ghost behind senior UK founders and specialists.
          </div>
        </div>
        <ArtefactSlot ratio="4 / 5" className="gw-hero-art"
          src="assets/photos/sarra-portrait-crop.jpg"
          alt="Sarra at her desk under a single lamp, looking directly at the camera against a near-black room" />      </div>
    </Section>
  );
}

function VibeCheckPane() {
  return (
    <Section style={{ paddingTop: 0, paddingBottom: 0, background: "var(--crimson)" }}>
      <div className="gw-vibe-band">
        <div className="gw-wrap gw-vibe-pane">
          <div>
            <div className="gw-kicker" style={{ color: "rgba(251,248,242,0.72)" }}>Start here</div>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(30px, 2.8vw, 42px)", lineHeight: 1.08, color: "var(--paper-0)", margin: "16px 0 0", maxWidth: "22ch" }}>
              Book a Vibe Check.
            </h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 19, lineHeight: 1.5, color: "rgba(251,248,242,0.86)", margin: "14px 0 0", maxWidth: "38ch" }}>
              Bring the thing you cannot get onto the page.<br />We break it, and you leave with the shape of it either way.
            </p>
          </div>
          <div className="gw-vibe-pane-act">
            <div className="gw-vibe-meta">
              {["20 minutes", "Free", "No deck"].map((m) => <span key={m}>{m}</span>)}
            </div>
            <a href="book.html" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minHeight: 56, padding: "0 32px", background: "var(--paper-0)", color: "var(--crimson)", fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.18em", textTransform: "uppercase", textDecoration: "none", whiteSpace: "nowrap" }}>Book a Vibe Check</a>
          </div>
        </div>
      </div>
    </Section>
  );
}

function Problem() {
  const beats = [
    "Your reputation is stored in other people's memory.",
    "Your public page speaks to peers instead of buyers.",
    "Credible but forgettable leaves price as the only comparison.",
  ];
  return (
    <Section>
      <div className="gw-wrap gw-grid gw-grid--problem">
        <ArtefactSlot className="gw-artefact" ratio="1 / 1" position="58% 50%"
          src="assets/photos/desk-index-cards.png"
          alt="A lamp-lit desk covered in index cards and redacted printouts, one card circled and underlined in red"
          note="every card on this desk is a job that arrived by memory." />
        <div className="gw-measure">
          <FitHeading level={2} max={72} style={{ margin: 0 }} lines={["The work keeps coming from people remembering you."]} />
          <div style={{ display: "flex", flexDirection: "column", gap: 0, marginTop: 48 }}>
            {beats.map((b, i) => (
              <div key={i} style={{ display: "flex", gap: 24, padding: "26px 0", borderTop: "var(--border-hair)", alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.22em", color: "var(--crimson)" }}>{String(i + 1).padStart(2, "0")}</span>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 23, lineHeight: 1.5, margin: 0, color: "var(--ink-1)", maxWidth: "40ch" }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

function TwoWaysIn({ onNav }) {
  return (
    <Section style={{ background: "var(--paper-1)" }}>
      <div className="gw-wrap">
        <div className="gw-kicker">2 ways in</div>
        <div className="gw-grid gw-grid--offers" style={{ marginTop: 52 }}>
          <OfferSpread number="01" kicker="Positioning" headline="Be known for something worth remembering."
            body="For senior experts who are excellent at the work but hard to describe. We find the idea your name should carry, the language that makes it clear and the body of work that proves it belongs to you."
            action="Explore Known for Something" href="known-for-something.html" note="this is where most people are stuck." />
          <OfferSpread number="02" kicker="Implementation" headline="Make the market say it back."
            body="For experts who want the thinking extracted, written and turned into a finished body of LinkedIn work in their own voice."
            action="Explore Ghostwriting" href="ghostwriting.html" note="you talk. it arrives written." />
        </div>
        <p style={{ fontFamily: "var(--font-typewriter)", fontSize: 15, lineHeight: 1.45, color: "var(--ink-2)", marginTop: 56, paddingTop: 24, borderTop: "var(--border-rule)", maxWidth: "72ch" }}>
          Every ghostwriting project includes the Known for Something foundation. The standalone offer is for people who want the position and plan without the writing service.
        </p>
      </div>
    </Section>
  );
}

function Result() {
  return (
    <Section>
      <div className="gw-wrap gw-measure">
        <FitHeading level={2} max={72} style={{ margin: 0 }} lines={["Same expert.", "Different position in the buyer's mind."]} />
        <div className="gw-grid gw-grid--result" style={{ marginTop: 56 }}>
          <ProofCase trade="Specialist consultant"
            headline="An existing client began paying her expert differently."
            facts={["Same service, same person, same delivery.", "The client read 3 months of posts.", "The next renewal came in at a higher rate, unprompted."]}
            interpretation="Nothing about the work changed. What changed was the position it occupied in the buyer's mind, and what that position was worth to them." />
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {[["Inbound", "from peers to buyers"], ["Renewal", "raised, unprompted"], ["Recall", "the idea quoted back"]].map(([n, s]) => (
              <div key={n} style={{ borderTop: "var(--border-hair)", padding: "22px 0" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 30, color: "var(--ink-0)" }}>{n}</div>
                <div style={{ fontFamily: "var(--font-typewriter)", fontSize: 15, color: "var(--ink-3)", marginTop: 6 }}>{s}</div>
              </div>
            ))}
            <MarginNote style={{ marginTop: 32 }}>the full analytics live on the <a href="ghostwriting.html">ghostwriting page</a>.</MarginNote>
          </div>
        </div>
      </div>
    </Section>
  );
}

function HowItWorks() {
  return (
    <Section dark>
      <div className="gw-wrap gw-measure">
        <div className="gw-kicker" style={{ color: "var(--ink-4)" }}>How the system works</div>
        <FitHeading level={2} max={72} style={{ margin: "28px 0 56px" }} lines={[
          "Positioning finds the idea.",
          <>Ghostwriting makes it <span style={{ color: "var(--crimson)" }}>stick.</span></>,
        ]} />
        <div className="gw-ledger" style={{ borderTop: "2px solid var(--paper-2)" }}>
          {[["Listen.", "Voice notes, calls and everything you have already said out loud."], ["Decide.", "The one idea worth owning and the buyer it belongs to."], ["Build.", "The body of work in your voice, published on a cadence you can keep."], ["Prove.", "The market begins quoting the idea back, and we read what moved."]].map(([t, b], i) => (
            <div key={t} style={{ paddingTop: 24, paddingRight: 24, borderRight: i < 3 ? "1px solid var(--ink-2)" : "none" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 56, lineHeight: 0.9, color: i < 2 ? "var(--crimson)" : "var(--ink-3)" }}>{String(i + 1).padStart(2, "0")}</div>
              <h5 style={{ fontFamily: "var(--font-display)", fontSize: 26, margin: "16px 0 12px" }}>{t}</h5>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.58, color: "var(--paper-2)", margin: 0 }}>{b}</p>
            </div>
          ))}
        </div>
        <p style={{ fontFamily: "var(--font-typewriter)", fontSize: 15, color: "var(--ink-4)", marginTop: 40 }}>
          Known for Something ends after Decide, with the position, the language and the body-of-work plan. Ghostwriting runs all four.
        </p>
      </div>
    </Section>
  );
}

function AuthorityShift() {
  return (
    <Section tint="var(--paper-1)">
      <div className="gw-wrap gw-grid gw-grid--result">
        <div className="gw-measure">
          <div className="gw-kicker">The authority shift</div>
          <FitHeading level={2} max={56} className="gw-h2--sm" style={{ margin: "26px 0 28px" }}
            lines={["Recognition moves", "onto the record."]} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 21, lineHeight: 1.55, color: "var(--ink-1)", maxWidth: "46ch", margin: 0 }}>
            You are already authoritative in person. The problem is that it only exists while you are in the room, in somebody else's memory, waiting to be recalled at the right moment.
          </p>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 21, lineHeight: 1.55, color: "var(--ink-1)", maxWidth: "46ch", margin: "22px 0 0" }}>
            Authority is reach that survives your absence: your judgement on the record, in language a buyer can repeat when you are nowhere near them.
          </p>
          <div style={{ marginTop: 36, borderTop: "var(--border-rule)", paddingTop: 22, display: "flex", flexDirection: "column", gap: 14 }}>
            {[["Before", "the work arrives when somebody remembers you."], ["After", "the record introduces you before you walk in."]].map(([t, b]) => (
              <div key={t} style={{ display: "flex", gap: 16, alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--crimson)", minWidth: 66 }}>{t}</span>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 19, color: "var(--ink-1)" }}>{b}</span>
              </div>
            ))}
          </div>
        </div>
        <figure style={{ margin: 0 }}>
          <div className="gw-rings">
            <div className="gw-ring gw-ring--outer">
              <span className="gw-ring-label" style={{ color: "var(--crimson)" }}>The market</span>
              <div className="gw-ring gw-ring--mid">
                <span className="gw-ring-label" style={{ color: "var(--ink-3)" }}>Your network</span>
                <div className="gw-ring gw-ring--inner">
                  <span className="gw-ring-label" style={{ color: "var(--ink-2)" }}>The room</span>
                  <div className="gw-ring-core">
                    <span style={{ display: "block", fontFamily: "var(--font-display)", fontSize: "clamp(22px, 2vw, 30px)", lineHeight: 1.1 }}>The idea worth owning</span>
                    <span style={{ display: "block", fontFamily: "var(--font-typewriter)", fontSize: 14, color: "var(--ink-4)", marginTop: 10 }}>said once, in a room</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <figcaption style={{ fontFamily: "var(--font-typewriter)", fontSize: 15, color: "var(--ink-3)", marginTop: 24 }}>
            the room is 4 people. the network is referral memory. the dashed ring is the record, and it is the only one that works while you are elsewhere.
          </figcaption>
        </figure>
      </div>
    </Section>
  );
}

function ClientVoice() {
  const featured = { quote: "Her ability to capture a brand's voice in compelling and captivating copy is inhuman.", name: "Lea Turner", role: "Founder, The HoLT", proof: "On the craft", photo: "assets/photos/faces/lea-turner.png" };
  const cards = [
    { quote: "It is still my voice, still my words. Just alchemised into something genuinely brilliant.", name: "Heni Fourie", role: "Identity coach", proof: "Voice accuracy", photo: "assets/photos/faces/heni-fourie.png" },
    { quote: "In less than an hour, she had me, and my tone, down to a T.", name: "Amy Ho", role: "Finance transformation", proof: "Voice capture", photo: "assets/photos/faces/amy-ho.jpeg" },
    { quote: "She doesn't just polish words. She transforms how you're perceived.", name: "Jacqueline Caldwell", role: "Visual content creator", proof: "Perception", photo: "assets/photos/faces/jacqueline-caldwell.png" },
    { quote: "New systems built that are saving me 12 hours a week.", name: "Simon Bostock", role: "Therapist and coach", proof: "Time back", photo: "assets/photos/faces/simon-bostock.jpeg" },
    { quote: "My reach has grown exponentially, my confidence has soared, and my focus is razor sharp.", name: "A. Marie Dingwall", role: "Systems and automation", proof: "Commercial movement", photo: "assets/photos/faces/a-marie-dingwall.jpeg" },
    { quote: "She delivered practical insights articulately so that listeners could take action. Best of all, it was a fun conversation.", name: "Michelle J Raymond", role: "B2B LinkedIn strategist", proof: "On the record", photo: "assets/photos/faces/michelle-j-raymond.png" },
  ];
  const face = (p) => (
    <span className="gw-face" aria-hidden="true">
      {p.photo ? <img src={p.photo} alt="" /> : String(p.name).split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase()}
    </span>
  );
  return (
    <Section dark>
      <div className="gw-wrap">
        <div className="gw-kicker" style={{ color: "var(--crimson)" }}>Client voice</div>
        <FitHeading level={2} max={64} className="gw-h2--sm" style={{ margin: "26px 0 48px", color: "var(--paper-0)" }}
          lines={["8 people, on the record about", <>the writing and the <span style={{ color: "var(--crimson)" }}>voice.</span></>]} />
        <div className="gw-voice-top">
          <VideoEmbed className="gw-voice-film" ratio="16 / 9"
            src="https://www.tella.tv/video/vid_cmmbztvys00lx04jyf8wodyr0/embed"
            title="Kris Ward on working with The Ghost"
            note="Kris Ward, in her own words."
            transcriptHref="#transcript" />
          <blockquote style={{ margin: 0, borderTop: "2px solid var(--crimson)", paddingTop: 26 }}>
            <div className="gw-kicker" style={{ color: "var(--crimson)", marginBottom: 20 }}>{featured.proof}</div>
            <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(28px, 2.6vw, 40px)", lineHeight: 1.16, color: "var(--paper-0)", margin: 0, textIndent: "-0.44em" }}>
              <span style={{ color: "var(--crimson)" }}>&ldquo;</span>{featured.quote}&rdquo;
            </p>
            <footer style={{ marginTop: 26, display: "flex", alignItems: "center", gap: 14 }}>
              {face(featured)}
              <span>
                <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--paper-0)" }}>{featured.name}</span>
                <span style={{ display: "block", fontFamily: "var(--font-body)", fontSize: 16, color: "var(--ink-4)", marginTop: 5 }}>{featured.role}</span>
              </span>
            </footer>
          </blockquote>
        </div>
        <div className="gw-voice-cards">
          {cards.map((q) => (
            <blockquote key={q.name} className="gw-voice-card">
              <div className="gw-kicker" style={{ color: "var(--crimson)" }}>{q.proof}</div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 19, lineHeight: 1.5, color: "var(--paper-1)", margin: 0, flex: "1 1 auto", textIndent: "-0.4em" }}>
                <span style={{ color: "var(--crimson)" }}>&ldquo;</span>{q.quote}&rdquo;
              </p>
              <footer style={{ display: "flex", alignItems: "center", gap: 13 }}>
                {face(q)}
                <span>
                  <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--paper-0)" }}>{q.name}</span>
                  <span style={{ display: "block", fontFamily: "var(--font-body)", fontSize: 15, color: "var(--ink-4)", marginTop: 4 }}>{q.role}</span>
                </span>
              </footer>
            </blockquote>
          ))}
        </div>
        <p style={{ fontFamily: "var(--font-typewriter)", fontSize: 15, color: "var(--ink-4)", marginTop: 40 }}>
          verbatim from LinkedIn recommendations. full text on <a href="https://www.linkedin.com/in/meetsarra/" target="_blank" rel="noopener" style={{ color: "var(--paper-1)" }}>Sarra's profile</a>.
        </p>
      </div>
    </Section>
  );
}

function AnalogueThinkerSection() {
  const essays = [
    { title: "How to recover your unedited voice in 3 steps", standfirst: "The version of you that talks is already good enough to publish.", date: "July 2026", category: "Voice and writing" },
    { title: "The thing you already said", standfirst: "Most of your best thinking has been spoken aloud and lost.", date: "June 2026", category: "Start here" },
    { title: "You did not lose your voice. You were taught out of it.", standfirst: "On school, work and the slow removal of how you actually sound.", date: "June 2026", category: "Myth and meaning" },
  ];
  return (
    <Section>
      <div className="gw-wrap">
        <div className="gw-grid gw-grid--split">
          <div className="gw-measure">
            <div className="gw-kicker">Sarra, under her own name</div>
            <FitHeading level={2} max={64} className="gw-h2--sm" style={{ margin: "28px 0 32px" }} lines={["The place where I write for myself."]} />
            <ArtefactSlot ratio="16 / 9" position="30% 50%"
              src="assets/photos/lamp-desk-notebook.png"
              alt="An open blank notebook and fountain pen on a dark desk under a single brass lamp, reading glasses and a red pencil beside them" />
          </div>
          <div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 20, lineHeight: 1.5, color: "var(--ink-1)", margin: "0 0 32px", maxWidth: "50ch" }}>
              Stories, notebooks and attention for people who work better with a notebook than a notification. It is not The Ghost's sales newsletter. It is where you can hear my own voice and see what a recognisable body of work looks like from the inside.
            </p>
            <EditorialButton variant="secondary" href="analogue-thinker.html">Read The Analogue Thinker</EditorialButton>
          </div>
        </div>
        <div className="gw-essays" style={{ marginTop: 72 }}>
          {essays.map((e) => <EssayCard key={e.title} {...e} />)}
        </div>
      </div>
    </Section>
  );
}

function AboutSarra() {
  return (
    <Section style={{ background: "var(--paper-1)" }}>
      <div className="gw-wrap gw-grid gw-grid--about">
        <ArtefactSlot className="gw-artefact" ratio="1 / 1" position="38% 50%"
          src="assets/photos/typewriter-desk.png"
          alt="A typewriter under a desk lamp with a redacted page in the carriage, a dictaphone and a stack of bound drafts" />
        <div className="gw-measure">
          <FitHeading level={2} max={64} className="gw-h2--sm" style={{ margin: 0 }} lines={["I am Sarra.", "The Ghost is the arrangement."]} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 20, lineHeight: 1.5, color: "var(--ink-1)", maxWidth: "50ch", margin: "28px 0 32px" }}>
            20 years spent finding out how people actually sound, then writing it down so the market can hear it. You bring the expertise. I hold the page.
          </p>
          <a href="who-is-the-ghost.html" style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-0)", borderBottom: "2px solid var(--crimson)", paddingBottom: 4 }}>Who is The Ghost</a>
        </div>
      </div>
    </Section>
  );
}

function FinalActionHome() {
  return (
    <FinalAction headline="Bring the thing you cannot get onto the page."
      body="We will work out whether the missing piece is the position, the writing or both." />
  );
}

function Home() {
  return (
    <div className="ghost-web" style={{ background: "var(--paper-0)" }}>
      <Header current="The Work" />
      <Hero />
      <VibeCheckPane />
      <Problem />
      <TwoWaysIn />
      <Result />
      <HowItWorks />
      <AuthorityShift />
      <ClientVoice />
      <AnalogueThinkerSection />
      <AboutSarra />
      <FinalActionHome />
      <Footer />
    </div>
  );
}

Object.assign(window, { Home });
