// Landing page React components. All small, factored, share scope via window.

const Nav = () => (
  <nav className="nav">
    <div className="nav__brand">
      <img src="../../assets/wordmark-the-ghost.png" alt="the ghost" />
    </div>
    <div className="nav__links">
      <a className="nav__link">Voice audit</a>
      <a className="nav__link">The work</a>
      <a className="nav__link">Pricing</a>
      <a className="nav__link">Newsletter ↗</a>
    </div>
    <button className="nav__cta">Book a diagnosis →</button>
  </nav>
);

const Hero = () => (
  <section className="hero">
    <div className="hero__eyebrow">// VOICE ARCHAEOLOGY · LINKEDIN GHOSTWRITING · EST 2024</div>
    <h1 className="hero__headline">
      You're not <span className="strike">losing&nbsp;clients</span><br/>
      losing <span className="mark">clarity</span>.
    </h1>
    <p className="hero__sub">
      A voice expert and a sheet ghost diagnose what's actually broken
      in your writing, then write you on LinkedIn so it stops sounding
      like everyone else's beige.
    </p>
    <div className="hero__row">
      <button className="btn">Book a 30-min diagnosis →</button>
      <button className="btn btn--ghost">Read a sample audit ↗</button>
    </div>
    <img className="hero__ghost" src="../../assets/ghost-hero.png" alt="" />
    <div className="hero__meta">
      <span>NO. 04 / 2026</span>
      <span>·</span>
      <span>FOR FOUNDERS &amp; B2B OPERATORS</span>
      <span>·</span>
      <span>NEURODIVERGENT-CODED</span>
    </div>
  </section>
);

const Marquee = () => {
  const items = [
    "EMPOWER", "UNLEASH", "LEVERAGE", "JOURNEY",
    "AUTHENTIC", "SEAMLESS", "THOUGHT LEADER", "LEVEL UP", "GAME-CHANGER"
  ];
  const row = (
    <div className="marquee__track">
      {[...items, ...items, ...items].map((w, i) => (
        <span className="marquee__item" key={i}>
          <span className="marquee__strike">{w}</span>
          <span className="marquee__dot">●</span>
        </span>
      ))}
    </div>
  );
  return <div className="marquee">{row}</div>;
};

const Diagnosis = () => {
  const items = [
    { n: "01", t: "Buried hooks", b: "Three sentences of credentialing before the point. We move the punch to the first line and let the credentialing earn its place at the bottom — if it earns it at all." },
    { n: "02", t: "Borrowed cadence", b: "You're writing in someone else's rhythm. We listen back through your transcripts and find the lines you actually say out loud." },
    { n: "03", t: "Beige verbs", b: "Empower, unleash, leverage. We strike them out and write what you mean instead. Every word does work or it leaves the page." },
    { n: "04", t: "Centred takes", b: "Hot takes that nobody could disagree with. Real opinion has a shape; we sharpen yours until somebody pushes back." },
  ];
  return (
    <section className="diag">
      <div className="diag__head">
        <div>
          <div className="section-eyebrow">// THE DIAGNOSIS · WHAT'S BROKEN</div>
          <h2 className="section-h">Four things<br/>writing people<br/>do wrong.</h2>
        </div>
        <p className="section-lede">
          Your feed is not a personality problem. It's a structural one.
          Here are the four breaks we see in 90% of voice audits, named
          plainly, with the fix written next to the diagnosis.
        </p>
      </div>
      <div className="diag__list">
        {items.map((it) => (
          <div className="diag__item" key={it.n}>
            <div className="diag__num">{it.n}</div>
            <div>
              <div className="diag__title">{it.t}</div>
              <div className="diag__body">{it.b}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

const Pricing = () => (
  <section className="pricing">
    <div className="section-eyebrow">// THE WORK · MONTHLY RETAINERS</div>
    <h2 className="section-h">Pick your level<br/>of haunting.</h2>
    <div className="tiers">
      <Tier name="SHADOW" price="£1.4k" per="PER MONTH"
        bullets={["2 LinkedIn posts a week", "Quarterly voice transcript review", "Async only · 48h turnaround"]}
        cta="Start with Shadow" />
      <Tier name="HAUNTING" price="£3.2k" per="PER MONTH" recommended
        bullets={["4 LinkedIn posts a week", "Monthly 60-min voice session", "Carousel + newsletter included", "Editorial calendar"]}
        cta="Start with Haunting" />
      <Tier name="POSSESSION" price="£6.8k" per="PER MONTH"
        bullets={["Daily LinkedIn presence", "Weekly voice session", "Full editorial calendar", "Speaking-deck support"]}
        cta="Talk to us" />
    </div>
  </section>
);

const Tier = ({ name, price, per, bullets, cta, recommended }) => (
  <div className={"tier" + (recommended ? " tier--rec" : "")}>
    {recommended && <div className="tier__banner">RECOMMENDED</div>}
    <div className="tier__name">{name}</div>
    <div className="tier__price">{price}</div>
    <div className="tier__per">{per}</div>
    <ul className="tier__list">
      {bullets.map((b, i) => <li key={i}>{b}</li>)}
    </ul>
    <button className={"btn tier__cta " + (recommended ? "btn--ghost" : "")}>{cta} →</button>
  </div>
);

const PullQuote = () => (
  <section className="pq">
    <div className="pq__glyph">&ldquo;</div>
    <div className="pq__body">
      <div className="pq__text">
        I stopped sounding like a LinkedIn person and started sounding
        like the person my team actually has lunch with.
      </div>
      <div className="pq__attr">
        <img src="../../assets/ghost-hero.png" alt="" />
        <span>A. MENDEZ · FOUNDER, BACKLOG · CLIENT NO. 12</span>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="footer__grid">
      <div className="footer__head">
        Stop sounding<br/>like <span className="mark">everyone</span>.
      </div>
      <div className="footer__col">
        <h4>WORK</h4>
        <a>Voice audit</a>
        <a>Retainers</a>
        <a>Sample posts</a>
      </div>
      <div className="footer__col">
        <h4>WRITE</h4>
        <a>Newsletter ↗</a>
        <a>Skool community ↗</a>
        <a>HauntOS ↗</a>
      </div>
      <div className="footer__col">
        <h4>CONTACT</h4>
        <a>sarra@theghost.rocks</a>
        <a>For creative crisis only</a>
      </div>
    </div>
    <div className="footer__base">
      <span>© 2026 THE GHOST · SWINDON · EST 2024 · WWW.THEGHOST.HOUSE</span>
      <span>// NO EMOJI · NO EM-DASHES · NO BEIGE</span>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Marquee, Diagnosis, Pricing, Tier, PullQuote, Footer });