/* Who is The Ghost — the About page, updated for the new offer model. */

function WhoBody() {
  return (
    <Section>
      <div className="gw-wrap gw-grid gw-grid--problem">
        <ArtefactSlot className="gw-artefact" ratio="4 / 5"
          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 className="gw-measure">
          <FitHeading level={2} max={72} style={{ margin: 0 }} lines={["I am Sarra.", "The Ghost is the arrangement."]} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 23, lineHeight: 1.5, color: "var(--ink-1)", maxWidth: "48ch", margin: "32px 0 0" }}>
            20 years spent finding out how people actually sound, then writing it down so the market can hear it. Not an agency, not a team of juniors working from a brief.<br /><br />One writer, a small number of clients, and a recorder.
          </p>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 20, lineHeight: 1.58, color: "var(--ink-1)", maxWidth: "52ch", margin: "24px 0 0" }}>
            The people I work with are excellent at the work and hard to describe. They win in the room and lose it on the page.<br /><br />My job is to find the idea their name should carry, then build the body of work that makes it stick.
          </p>
          <p style={{ fontFamily: "var(--font-typewriter)", fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: "52ch", margin: "32px 0 0" }}>
            you bring the expertise. i hold the page.
          </p>
        </div>
      </div>
    </Section>
  );
}

function WhoHow() {
  return (
    <Section tint="var(--paper-1)">
      <div className="gw-wrap">
        <div className="gw-kicker">How the work is arranged</div>
        <div className="gw-grid gw-grid--offers" style={{ marginTop: 52 }}>
          <OfferSpread number="01" kicker="Positioning" headline="Known for Something."
            body="The standalone positioning project. The idea your name should carry, the language that makes it clear and the plan that proves it."
            action="Explore Known for Something" href="known-for-something.html" />
          <OfferSpread number="02" kicker="Implementation" headline="Ghostwriting."
            body="The writing service that turns the position into a finished body of work in your own voice."
            action="Explore Ghostwriting" href="ghostwriting.html" />
        </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" }}>
          Positioning finds the idea. Ghostwriting makes it stick.<br />Every ghostwriting project includes the foundation, so the writing is never done into a vacuum.
        </p>
      </div>
    </Section>
  );
}

function WhoBeliefs() {
  const beliefs = [
    ["Said out loud beats perfect in your head.", "The version of you that talks is the one worth publishing. Everything after that is transcription and judgement."],
    ["1 idea, held properly, beats 10 explained badly.", "A buyer can only carry 1 thing about you. Choosing it is the work."],
    ["Proof is interpretation, not a wall of numbers.", "Reach means nothing on its own. What moved, and why, is the only report worth reading."],
    ["Nothing publishes without you.", "It is your name. You see everything first, always."],
  ];
  return (
    <Section dark>
      <div className="gw-wrap gw-measure">
        <div className="gw-kicker" style={{ color: "var(--ink-4)" }}>What I actually believe</div>
        <div style={{ marginTop: 44 }}>
          {beliefs.map(([t, b], i) => (
            <div key={t} style={{ borderTop: i === 0 ? "2px solid var(--paper-2)" : "1px solid var(--ink-2)", padding: "28px 0" }}>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 34, lineHeight: 1.1, margin: 0, maxWidth: "30ch" }}>{t}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.58, color: "var(--paper-2)", margin: "14px 0 0", maxWidth: "58ch" }}>{b}</p>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function WhoElsewhere() {
  return (
    <Section>
      <div className="gw-wrap gw-grid gw-grid--split">
        <div className="gw-measure">
          <div className="gw-kicker">Elsewhere</div>
          <FitHeading level={2} max={64} className="gw-h2--sm" style={{ margin: "28px 0 24px" }} lines={["I write under my own name too."]} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 20, lineHeight: 1.5, color: "var(--ink-1)", maxWidth: "48ch", margin: "0 0 32px" }}>
            The Analogue Thinker is my own publication: stories, notebooks, attention and creative practice. It is where you can hear my voice rather than a client's.
          </p>
          <EditorialButton variant="secondary" href="analogue-thinker.html">Read The Analogue Thinker</EditorialButton>
        </div>
        <ArtefactSlot ratio="16 / 9" position="65% 50%"
          src="assets/photos/pen-on-page.png"
          alt="A gold-nibbed fountain pen resting on a sheet of cream laid paper, one small red circle pencilled on the line beneath it" />
      </div>
    </Section>
  );
}

function WhoIsTheGhost() {
  return (
    <div className="ghost-web" style={{ background: "var(--paper-0)" }}>
      <Header current="Who is The Ghost" />
      <PageHero kicker="Who is The Ghost"
        headline={["The ghost behind senior", "UK founders and specialists."]}
        lead="One writer, a recorder and a small number of clients who are excellent at the work and tired of losing it on the page."
        action="Book a Vibe Check" />
      <WhoBody />
      <WhoHow />
      <WhoBeliefs />
      <WhoElsewhere />
      <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." />
      <Footer />
    </div>
  );
}

Object.assign(window, { WhoIsTheGhost });