// The Ghost — manifesto, who, haunt os, refusals, quote, contact, footer

const MANIFESTO = [
  { n: "RULE / 01", t: "opinions, not oatmeal", p: "If the draft could have been written by anyone, it gets killed. A post without a spine isn't content; it's filler pretending to be content." },
  { n: "RULE / 02", t: "your voice or nothing", p: "I spend the first two weeks learning how you actually talk. Then I write until the drafts sound like you, not like the internet." },
  { n: "RULE / 03", t: "no committees", p: "One point of contact, one round of notes, one decision-maker. The moment a post goes to a five-person review it dies, so we'd rather publish honestly." },
  { n: "RULE / 04", t: "disclose the ghost", p: "You're paying a ghostwriter and I'm not hiding that. What I hide is the sweat: research, voice tuning, structure. The reader gets the clean version." },,
  { n: "RULE / 05", t: "AI stays in its lane", p: "I use AI the way a carpenter uses a sander: briefly, at the end, and never where the grain shows. First draft is always human." },
  { n: "RULE / 06", t: "if it's dull, i'll tell you", p: "The fastest way to ruin your audience's trust is to write a thing you don't care about. If a brief is boring I'll push back before the retainer, not after." },
];

function Manifesto() {
  return (
    <section className="manifesto" id="manifesto" data-screen-label="04 Manifesto">
      <div className="wrap">
        <h2>
          six rules<br/>
          I <em>will not</em> break,<br/>
          even for money.
        </h2>
        <div className="manifesto-list">
          {MANIFESTO.map((r, i) => (
            <div key={i} className="rule">
              <div className="rule-n">{r.n}</div>
              <h4>{r.t}</h4>
              <p>{r.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Who() {
  return (
    <section className="who" id="work" data-screen-label="05 Who I Write For">
      <div className="wrap who-grid">
        <div className="who-copy">
          <div className="eyebrow" style={{color: "rgba(245,242,236,0.8)", marginBottom: 16}}>Who I write for</div>
          <h2>
            the one who<br/>
            sounds <em>like nobody</em><br/>
            else in the room.
          </h2>
          <p>
            Founders with opinions. Execs tired of their ghostwriter writing
            like everyone else's ghostwriter. Operators who've seen the AI-slop
            wave and don't want to ride it.
          </p>
          <div className="who-stats">
            <div className="stat">
              <div className="val">150+</div>
              <div className="lbl">Clients since 2024</div>
            </div>
            <div className="stat">
              <div className="val">94%</div>
              <div className="lbl">Retainer renewal rate</div>
            </div>
            <div className="stat">
              <div className="val">0</div>
              <div className="lbl">Posts ghosted by AI</div>
            </div>
            <div className="stat">
              <div className="val">7</div>
              <div className="lbl">On waitlist · Q2 '26</div>
            </div>
          </div>
        </div>
        <div className="who-visual">
          <div className="card">
            <img src="assets/prospects.png" alt="Prospects: the one who stands out" />
            <div className="caption">Prospects</div>
          </div>
          <div className="card">
            <img src="assets/clients.png" alt="Clients: not lost in the crowd" />
            <div className="caption">Clients</div>
          </div>
        </div>
      </div>
    </section>
  );
}

const HAUNT_STEPS = [
  { n: "01", t: "the séance", d: "90-min discovery. You talk, I record, I ask the weird questions.", time: "wk 1" },
  { n: "02", t: "voice capture", d: "Async interview series: voice notes, Slack, old posts. I build a style-spec for you, not ChatGPT.", time: "wk 1 to 2" },
  { n: "03", t: "first haunt", d: "Three draft posts on the same topic, three angles. We kill two together.", time: "wk 2" },
  { n: "04", t: "the rhythm", d: "Weekly drafts land in your inbox Monday, published Tuesday. Or killed. Killing is fine.", time: "ongoing" },
  { n: "05", t: "the receipts", d: "Monthly readout: what worked, what didn't, what we'll steal back from your own replies.", time: "monthly" },
];

function HauntOS() {
  return (
    <section className="haunt" id="hauntos" data-screen-label="06 HauntOS">
      <div className="wrap haunt-inner">
        <div>
          <div className="eyebrow" style={{color: "var(--cyan)", marginBottom: 16}}>How it works</div>
          <h2>
            haunt<span className="accent">os</span>
          </h2>
          <p className="lede">
            My process, named something silly on purpose. Five steps that get your
            voice out of your head, onto the page, and into your readers' feeds
            without sounding like a LinkedIn ghost template.
          </p>
          <a href="#contact" className="btn btn-primary" style={{background: "var(--pink)", color: "var(--paper)"}}>
            Start the séance →
          </a>
        </div>
        <ol className="haunt-steps">
          {HAUNT_STEPS.map((s, i) => (
            <li key={i} className="haunt-step">
              <div className="n">{s.n}</div>
              <div>
                <div className="t">{s.t}</div>
                <div className="d">{s.d}</div>
              </div>
              <div className="time">{s.time}</div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

const REFUSALS = [
  "I won't write posts about topics you don't personally care about.",
  "I won't run a 47-post-a-month content factory with a team of freelancers you'll never meet.",
  "I won't use AI to draft in your voice. Ever.",
  "I won't let the draft go to a five-person committee and survive.",
  "I won't ghostwrite your book while also doing your LinkedIn. Pick one.",
  "I won't cold-pitch your ideas to journalists. I'm a ghost, not a PR.",
  "I won't add a ghost emoji to anything you publish. That one's mine.",
  "I won't work with more than 8 clients at once. That's the cap.",
];

function Refusals() {
  return (
    <section className="refusals" data-screen-label="07 Refusals">
      <div className="wrap">
        <h2>things I<br/><em>will not</em> do,<br/>even if asked nicely.</h2>
        <div className="refusal-list">
          {REFUSALS.map((r, i) => (
            <div key={i} className="refusal">
              <div className="x">✕</div>
              <p>{r}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="quote-block" data-screen-label="08 Quote">
      <div className="wrap">
        <blockquote>
          "I'm not competing on price. I'm not trying to.<br/>
          <em>It's also the only version of this work I'm willing to do.</em>"
        </blockquote>
        <div className="attr">
          <span className="line"></span>
          <span>Sarra Richmond</span>
        </div>
      </div>
    </section>
  );
}

const SERVICE_CHIPS = ["the glimpse", "the haunting", "the possession", "the cameo", "not sure yet"];

function Contact() {
  const [svc, setSvc] = React.useState("the glimpse");
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [company, setCompany] = React.useState("");
  const [msg, setMsg] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [err, setErr] = React.useState("");

  const submit = async (e) => {
    e.preventDefault();
    if (!name || !email || sending) return;
    setSending(true);
    setErr("");
    try {
      const res = await fetch("https://formspree.io/f/mojylznw", {
        method: "POST",
        headers: { "Accept": "application/json", "Content-Type": "application/json" },
        body: JSON.stringify({
          _subject: `New enquiry from ${name} — ${svc}`,
          name,
          email,
          company: company || "—",
          looking_for: svc,
          message: msg || "(no message)",
        }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        const data = await res.json().catch(() => ({}));
        setErr(data.error || "Something went wrong. Please email sarra@theghost.rocks directly.");
      }
    } catch (_) {
      setErr("Network error. Please email sarra@theghost.rocks directly.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="contact" id="contact" data-screen-label="09 Contact">
      <div className="wrap contact-inner">
        <div>
          <h2>let's <span className="accent">talk</span>.</h2>
          <p className="lede">
            I take on two new clients a quarter. Tell me what you want to be
            known for. If it's interesting, you'll hear back within 48 hours. If
            it's not, you'll still hear back, honestly.
          </p>
          <div className="contact-meta">
            <div className="row">
              <div className="k">Email</div>
              <div className="v">sarra@theghost.rocks</div>
            </div>
            <div className="row">
              <div className="k">Substack</div>
              <div className="v">newsletter.yourwords.work</div>
            </div>
            <div className="row">
              <div className="k">Response time</div>
              <div className="v">48h, usually sooner</div>
            </div>
            <div className="row">
              <div className="k">Q2 availability</div>
              <div className="v">2 spots · 7 on waitlist</div>
            </div>
          </div>
        </div>
        <form className="form" onSubmit={submit}>
          {sent ? (
            <div className="form-success">
              <div className="big">message <span className="accent">sent</span>.</div>
              <p style={{color: "rgba(245,242,236,0.7)", fontSize: 15}}>
                I'll read it on Monday with coffee. You'll hear back within 48 hours,
                including if it's a no.
              </p>
              <button type="button" className="submit" onClick={() => setSent(false)}>
                send another
              </button>
            </div>
          ) : (
            <>
              <div className="field">
                <label>You are</label>
                <input type="text" placeholder="Your name" value={name} onChange={e => setName(e.target.value)} />
              </div>
              <div className="field">
                <label>Reachable at</label>
                <input type="email" placeholder="you@company.com" value={email} onChange={e => setEmail(e.target.value)} />
              </div>
              <div className="field">
                <label>Company / title</label>
                <input type="text" placeholder="Optional" value={company} onChange={e => setCompany(e.target.value)} />
              </div>
              <div className="field">
                <label>Looking for</label>
                <div className="chip-row">
                  {SERVICE_CHIPS.map(c => (
                    <button
                      key={c}
                      type="button"
                      className={"chip" + (svc === c ? " on" : "")}
                      onClick={() => setSvc(c)}
                    >{c}</button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>What do you want to be known for?</label>
                <textarea placeholder="Two sentences is plenty." value={msg} onChange={e => setMsg(e.target.value)} />
              </div>
              <button type="submit" className="submit" disabled={!name || !email || sending}>
                {sending ? "sending…" : "send it →"}
              </button>
              {err && (
                <div style={{marginTop: 16, padding: "12px 14px", background: "rgba(233,25,125,0.12)", border: "1px solid rgba(233,25,125,0.35)", borderRadius: 10, color: "var(--paper)", fontSize: 14}}>
                  {err}
                </div>
              )}
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <>
      <div className="footer-mark-band">
        <div className="footer-mark" aria-hidden="true">
          <span>boo.</span>
          <img src="assets/ghostie.png" alt="" className="footer-mark-ghost" />
        </div>
      </div>
      <footer className="footer">
        <div className="wrap">
          <div className="footer-top">
            <div className="col brand">
              <a className="logo" href="#top">
                <GhostMark size={26} fill="var(--pink)" />
                <span>the ghost</span>
              </a>
              <p>Ghostwriting for people who'd rather sound like themselves than anyone else on the internet.</p>
            </div>
            <div className="col">
              <h5>Work</h5>
              <a href="#services">Services</a>
              <a href="#hauntos">HauntOS</a>
              <a href="#work">Clients</a>
              <a href="#manifesto">Manifesto</a>
            </div>
            <div className="col">
              <h5>Say hi</h5>
              <a href="mailto:sarra@theghost.rocks">sarra@theghost.rocks</a>
              <a href="https://www.linkedin.com/in/meetsarra/" target="_blank" rel="noopener">LinkedIn</a>
              <a href="https://newsletter.yourwords.work/" target="_blank" rel="noopener">Substack</a>
              <a href="#contact">Book a chat</a>
            </div>
          </div>
          <div className="footer-inner">
            <small>© The Ghost 2026 · Written by a human, obviously.</small>
            <small>Last drafted Tuesday · Earl Grey, no sugar.</small>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { Manifesto, Who, HauntOS, Refusals, Quote, Contact, Footer });