// The Ghost — nav, hero, problem, services
// Shared style objects are named to avoid collisions across Babel scripts.

function GhostMark({ size = 28, fill = "currentColor" }) {
  // Uses the brand ghostie.png
  return (
    <img
      src="assets/ghostie.png"
      width={size}
      height={size}
      alt=""
      aria-hidden="true"
      style={{display: "block", objectFit: "contain"}}
    />
  );
}

function Nav({ onOpenTweaks }) {
  return (
    <nav className="nav" data-screen-label="nav">
      <div className="wrap nav-inner">
        <a className="logo" href="#top">
          <GhostMark size={28} />
          <span>the ghost</span>
        </a>
        <div className="nav-links">
          <a href="#work">Work</a>
          <a href="#services">Services</a>
          <a href="#manifesto">Manifesto</a>
          <a href="#hauntos">HauntOS</a>
          <a href="#contact" className="btn btn-ghost" style={{padding: "8px 16px", fontSize: 14}}>Book a chat</a>
        </div>
      </div>
    </nav>
  );
}

const HEADLINES = [
  { a: "your words.", b: "not theirs." },
  { a: "ghostwritten.", b: "still yours." },
  { a: "no slop.", b: "no filler." },
];

function Hero({ headlineIdx }) {
  const h = HEADLINES[headlineIdx] || HEADLINES[0];
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="wrap hero-grid">
        <div>
          <div className="pill" style={{marginBottom: 28}}>
            <span style={{width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", display: "inline-block"}}/>
            accepting 2 new clients · Q2 2026
          </div>
          <h1 className="display hero-headline">
            <span className="line1">{h.a}</span>
            <span className="line2">{h.b}</span>
          </h1>
          <p className="hero-sub">
            I ghostwrite for founders and execs who sound like nobody else, and
            want it to stay that way. No AI slop. No borrowed voice. No "in today's
            fast-paced landscape."
          </p>
          <div className="hero-cta">
            <a href="#contact" className="btn btn-primary">Start a conversation →</a>
            <a href="#services" className="btn btn-ghost">What I do</a>
          </div>
          <div className="hero-meta">
            <div>Est. 2024</div>
            <div>Based in the UK</div>
            <div>150+ clients</div>
          </div>
        </div>
        <div className="hero-visual">
          <img src="assets/sare-portrait.png" alt="Portrait of the ghostwriter" />
          <div className="tag">Sarra</div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ["ghostwriting", "with a spine", "opinionated prose", "no em-dash abuse", "no AI slop", "yours, actually"];
  const doubled = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {doubled.map((t, i) => (
          <React.Fragment key={i}>
            <span className={i % 3 === 1 ? "accent" : ""}>{t}</span>
            <span className="dot">✦</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

const FINGERPRINTS = [
  { phrase: "in today's fast-paced landscape", count: "×14,212,908" },
  { phrase: "delve into", count: "×9,887,410" },
  { phrase: "it's not just X, it's Y", count: "×7,104,555" },
  { phrase: "the hidden truth about", count: "×5,620,001" },
  { phrase: "here's the kicker", count: "×4,201,700" },
  { phrase: "game-changer", count: "×3,998,210" },
];

function Problem() {
  return (
    <section className="problem" data-screen-label="02 Problem">
      <div className="wrap">
        <div className="problem-head">
          <h2>
            the ghostwriter<br/>
            fingerprints<br/>
            <em>nobody talks about.</em>
          </h2>
          <p>
            You can feel them. So can your readers. Every LinkedIn post written
            by a robot has the same tells, and prospects have started skipping
            anything that smells like them. Here's a partial list.
          </p>
        </div>
        <div className="fingerprints">
          <div className="fp-image">
            <img src="assets/ghostwriter-fingerprints.jpg" alt="The ghostwriter fingerprints nobody talks about" />
          </div>
          <div className="fp-list">
            {FINGERPRINTS.map((f, i) => (
              <div key={i} className="fp-item">
                <span className="idx">{String(i+1).padStart(2,"0")}</span>
                <span className="phrase">"{f.phrase}"</span>
                <span className="count">{f.count}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  {
    num: "TIER / 01",
    title: "the glimpse",
    tagline: "for the curious",
    blurb: "Fast clarity for founders and lean teams. Your voice extracted, profiled, and delivered in 48 hours. The starting point for everything.",
    deliverables: ["48-hour turnaround", "Brand Voice Profile", "3 voice anchors + 1 AI prompt"],
    price: "£895",
    unit: "one-off",
    cta: "Summon the glimpse",
    href: "tier-glimpse.html",
    flag: "Start here",
  },
  {
    num: "TIER / 02",
    title: "the haunting",
    tagline: "for the serious",
    blurb: "The full system for content consistency. Everything in the glimpse, expanded. Channel guidance. Competitor contrast. AI calibration. What most companies actually need.",
    deliverables: ["5-day delivery", "PDF + Notion system", "10 before/after rewrites + 3 AI prompts"],
    price: "£2,450",
    unit: "one-off",
    cta: "Start the haunting",
    href: "tier-haunting.html",
    flag: "Most chosen",
  },
  {
    num: "TIER / 03",
    title: "the possession",
    tagline: "for the team",
    blurb: "Full implementation across people, process, and AI. Custom GPT. Team onboarding. 30 days support. For companies where the voice has to scale without slipping.",
    deliverables: ["10-day delivery", "Custom GPT / Claude project", "Team onboarding + 30 days support"],
    price: "£5,500",
    unit: "one-off",
    cta: "Begin possession",
    href: "tier-possession.html",
    flag: "Best value at scale",
  },
  {
    num: "TIER / 04",
    title: "the cameo",
    tagline: "for the one-off",
    blurb: "Board letter. Investor update. The op-ed nobody else in-house can nail. I write it, then vanish.",
    deliverables: ["1 piece, start to finish", "Discovery call + drafts", "2 rounds of notes", "Delivered in 7 days"],
    price: "from £1,900",
    unit: "per piece",
    cta: "Read more",
    href: "tier-cameo.html",
    flag: null,
  },
];

function Services() {
  return (
    <section className="services" id="services" data-screen-label="03 Services">
      <div className="wrap">
        <div className="services-head">
          <div>
            <div className="eyebrow">What I do</div>
            <h2>four ways to <em>find</em> your voice.</h2>
          </div>
          <p>
            Three productised systems, plus a cameo lane. Pick the depth you
            need. All of them end in the same place: your writing sounding like
            you, not the internet.
          </p>
        </div>
        <div className="service-grid service-grid--4">
          {SERVICES.map((s, i) => (
            <article key={i} className={"service-card" + (s.flag === "Most chosen" ? " is-featured" : "")}>
              {s.flag && <div className={"flag" + (s.flag === "Most chosen" ? " flag--hot" : "")}>{s.flag}</div>}
              <div className="num">{s.num}</div>
              <h3>{s.title}</h3>
              <div className="tagline">{s.tagline}</div>
              <p>{s.blurb}</p>
              <ul className="deliverables">
                {s.deliverables.map((d, j) => <li key={j}>{d}</li>)}
              </ul>
              <div className="price">
                <span className="big">{s.price}</span>
                <span className="lbl">{s.unit}</span>
              </div>
              <a href={s.href} className="service-cta">{s.cta} →</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GhostMark, Nav, Hero, Marquee, Problem, Services, HEADLINES });