/* Ghostwriting — the implementation sales page. */

function GwPromise() {
  return (
    <Section>
      <div className="gw-wrap gw-grid gw-grid--problem">
        <ArtefactSlot className="gw-artefact" ratio="4 / 3" position="35% 50%"
          src="assets/photos/typewriter-ribbon.png"
          alt="Close detail of an old typewriter, black and red ribbon threaded across the typebars, blank paper in the carriage"
          note="you talk into the recorder. this is the rest of it." />
        <div className="gw-measure">
          <FitHeading level={2} max={72} style={{ margin: 0 }} lines={["Done for you, in your own voice."]} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 23, lineHeight: 1.5, color: "var(--ink-1)", maxWidth: "46ch", margin: "32px 0 0" }}>
            Every ghostwriting project starts with the Known for Something foundation, so we are not writing posts into a vacuum.<br /><br />First the position.<br />Then the body of work that proves it.
          </p>
          <div style={{ marginTop: 40 }}>
            {[["Voice notes are the input", "You speak. On a walk, between meetings, badly. That is enough."],
              ["Nothing publishes without you", "You approve every piece before it goes anywhere."],
              ["The library is yours", "An evergreen body of work you own outright, not rented posts."]].map(([t, b]) => (
              <div key={t} style={{ borderTop: "var(--border-hair)", padding: "22px 0" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 26, marginBottom: 8 }}>{t}</div>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.58, color: "var(--ink-2)", margin: 0, maxWidth: "46ch" }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

function GwPhases() {
  return (
    <Section dark>
      <div className="gw-wrap gw-measure">
        <div className="gw-kicker" style={{ color: "var(--ink-4)" }}>The finish line</div>
        <FitHeading level={2} max={72} style={{ margin: "28px 0 24px" }} lines={["3 to 6 months, then you have a body of work."]} />
        <p style={{ fontFamily: "var(--font-body)", fontSize: 20, lineHeight: 1.5, color: "var(--paper-2)", maxWidth: "56ch", margin: "0 0 56px" }}>
          This is not a retainer with no end. It is a project with a finish line, after which the library keeps working whether or not we carry on.
        </p>
        <div className="gw-ledger" style={{ borderTop: "2px solid var(--paper-2)" }}>
          {[["Foundation", "The Known for Something work: position, language, proof plan."],
            ["Extraction", "Interviews and voice notes. Your thinking, on the record."],
            ["Publication", "Written, approved and published in your voice, on schedule."],
            ["Handover", "The evergreen library, the angles that worked and what to do next."]].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 === 0 ? "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>
      </div>
    </Section>
  );
}

function GwProof() {
  const cases = [
    { index: "01", trade: "Fractional CMO · B2B, £1M to £10M", growth: 8, headline: "22.1k views on the post about hiring the wrong marketer.", views: [{ label: "22.1k", value: 22.1 }], facts: ["16,459 followers, up 1,215.", "210 posts published.", "Best post: 128 reactions."], interpretation: "8% growth is not the story. The story is which single post his buyers stopped scrolling for." },
    { index: "02", trade: "Senior ERP consultant · Director", growth: 18, headline: "Half the posts. 26.3k views on the best one.", views: [{ label: "26.3k", value: 26.3 }], facts: ["4,904 followers, up 733.", "60 posts, volume down 48%.", "Best post: 669 reactions."], interpretation: "Publishing less and reaching further is what happens when the position is settled before the writing starts." },
    { index: "03", trade: "Business development founder", growth: 77, headline: "165.6k views on a single post.", views: [{ label: "165.6k", value: 165.6 }, { label: "78.6k", value: 78.6 }, { label: "53k", value: 53 }], facts: ["5,775 followers, up 2,520.", "95 posts, 52 likes on average."], interpretation: "77% growth from a man who wins on relationships, finally doing it at scale." },
    { index: "04", trade: "Personal development mentor", growth: 93, headline: "3 posts over 77k views in 6 months.", views: [{ label: "88.7k", value: 88.7 }], facts: ["1,738 followers, up 837.", "49 posts, 90 likes on average.", "Best post: 511 reactions."], interpretation: "The smallest audience on this page and the highest engagement rate. Reach is not the same as fit." },
  ];
  return (
    <Section tint="var(--paper-1)">
      <div className="gw-wrap">
        <div className="gw-kicker">Proof, interpreted</div>
        <FitHeading level={2} max={72} style={{ margin: "28px 0 12px" }} lines={["4 cases."]} />
        <p style={{ fontFamily: "var(--font-typewriter)", fontSize: 15, color: "var(--ink-2)", margin: "0 0 52px" }}>
          numbers are shown with what moved and why. the bars are best-post views, scaled across all 4 cases so they compare honestly.
        </p>
        <div className="gw-grid gw-grid--split">
          {cases.map((c) => <ProofCase key={c.trade} viewsMax={165.6} {...c} />)}
        </div>
        <p style={{ fontFamily: "var(--font-typewriter)", fontSize: 15, color: "var(--ink-3)", marginTop: 40 }}>
          figures taken from client analytics exports, last 6 months. names withheld.
        </p>
      </div>
    </Section>
  );
}

function GwPrice() {
  return (
    <Section>
      <div className="gw-wrap gw-grid gw-grid--split">
        <PriceBlock label="The ghostwriting project" price="£2,000" terms={<>A month, plus VAT.<br />3 to 6 months, foundation included.<br />Then it stops.</>}
          includes={["The full Known for Something foundation", "Interviews and voice-note extraction", "Written, approved and published work in your voice", "The evergreen library, owned by you", "Performance read with commercial interpretation"]}
          footnote={<>£3,000 a month plus VAT adds the engagement work: daily commenting on 10 to 15 target accounts, curated connection requests, DM triage.<br /><br />Whole project £6,000 to £18,000.<br /><br />The price stays on the page.<br />No enquire-for-pricing.</>} />
        <div>
          <div style={{ borderTop: "var(--border-rule)", paddingTop: 24 }}>
            <Kicker>The comparison</Kicker>
            <div style={{ marginTop: 22 }}>
              {[
                { t: "A marketing hire", cost: "£45,000+ a year", note: "Plus employer costs and recruitment. They still cannot write in your voice.", w: 100 },
                { t: "An agency retainer", cost: "Open-ended", note: "No finish line, and the voice work never transfers to you.", w: null },
                { t: "A VA posting for you", cost: "Cheap", note: "And it reads like it. Scheduling is not writing.", w: 13 },
                { t: "Writing it yourself", cost: "Your delivery week", note: "The only hours you have are the billable ones.", w: null },
                { t: "The Ghost", cost: "£6,000 to £18,000", note: "Plus VAT, for the whole project. Then it stops and you keep the library.", w: 40, crimson: true },
              ].map((r) => (
                <div key={r.t} style={{ padding: "18px 0", borderBottom: "var(--border-hair)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 18 }}>
                    <span style={{ fontFamily: "var(--font-display)", fontSize: 22, color: r.crimson ? "var(--crimson)" : "var(--ink-0)" }}>{r.t}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: r.crimson ? "var(--crimson)" : "var(--ink-1)", whiteSpace: "nowrap" }}>{r.cost}</span>
                  </div>
                  <div aria-hidden="true" style={{ height: 10, marginTop: 12, background: "rgba(20,17,14,0.06)", border: r.w == null ? "1px dashed var(--ink-3)" : "none", boxSizing: "border-box" }}>
                    {r.w == null ? null : <span style={{ display: "block", height: "100%", width: `${r.w}%`, background: r.crimson ? "var(--crimson)" : "var(--ink-1)" }} />}
                  </div>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 17, color: "var(--ink-2)", marginTop: 10 }}>{r.note}</div>
                </div>
              ))}
            </div>
            <div style={{ fontFamily: "var(--font-typewriter)", fontSize: 14, color: "var(--ink-3)", marginTop: 16 }}>
              bars scaled against one year of a £45,000 salary. dashed means open-ended, which is the point.
            </div>
          </div>
          <MarginNote style={{ marginTop: 32 }}>cheaper than a hire. considerably less annoying.</MarginNote>
        </div>
      </div>
    </Section>
  );
}

function GwFaq() {
  const items = [
    { q: "How much of my time does this take?", a: "Voice notes and a monthly conversation. Most clients spend under an hour a month once we are running. The extraction is designed around a diary that is already full." },
    { q: "Will it actually sound like me?", a: "That is the only standard that matters. The first fortnight is calibration, and clients typically stop editing by the second week. If it does not sound like you, it does not publish." },
    { q: "Do I approve everything?", a: "Yes. Nothing goes out without your sign-off, and approval is built to take minutes rather than becoming a second job." },
    { q: "What if I have nothing to say?", a: "You have said it already, out loud, in meetings and on calls. The extraction exists because the thinking is there and the writing time is not." },
    { q: "Why is the Known for Something foundation included?", a: "Writing without a position produces credible, forgettable posts. The foundation decides what the body of work is for before we build it." },
    { q: "What happens at the end?", a: "You keep the library, the angles that worked and the plan. Some clients continue, some take it in-house. Both are a good outcome." },
    { q: "Do you work with my competitors?", a: "No. One client per position, per market." },
  ];
  return (
    <Section tint="var(--paper-1)">
      <div className="gw-wrap">
        <div className="gw-kicker">Questions</div>
        <div style={{ marginTop: 36 }}><FAQ items={items} /></div>
      </div>
    </Section>
  );
}

function Ghostwriting() {
  return (
    <div className="ghost-web" style={{ background: "var(--paper-0)" }}>
      <Header current="Ghostwriting" />
      <PageHero kicker="Implementation"
        headline={["Your idea has a name.", <>Now make the market <span style={{ color: "var(--crimson)" }}>say it back.</span></>]}
        lead="Done-for-you LinkedIn writing in your own voice, built on the Known for Something foundation."
        action="Book a Vibe Check" secondary="Start with positioning" secondaryHref="known-for-something.html" />
      <GwPromise />
      <GwPhases />
      <GwProof />
      <GwPrice />
      <GwFaq />
      <FinalAction headline="Bring the thing you cannot get onto the page."
        body="One call. We work out whether the missing piece is the position, the writing or both." />
      <Footer />
    </div>
  );
}

Object.assign(window, { Ghostwriting });