/* =====================================================================
   public.jsx — Landing, Profile, Question flow, Generating, Thank you, Footer
   ===================================================================== */

/* ---------------- Shared footer ---------------- */
function Footer() {
  return (
    <footer className="foot">
      <div className="foot__inner">
        <div className="foot__top">
          <div>
            <div className="foot__brand">The Freedom Filled<span className="reg">&reg;</span> Pathway Audit</div>
            <p className="foot__tag">A diagnostic from Tracy Harris Co. Peace, profit and presence, by design.</p>
          </div>
          <nav className="foot__links">
            <a href="#" onClick={e=>e.preventDefault()}>Privacy</a>
            <a href="#" onClick={e=>e.preventDefault()}>Terms</a>
            <a href="#" onClick={e=>e.preventDefault()}>Contact</a>
          </nav>
        </div>
        <div className="foot__bottom">
          <span>&copy; 2026 Tracy Harris Co. All rights reserved.</span>
          <span>Your answers are private and used only to generate your pathway.</span>
        </div>
      </div>
    </footer>
  );
}

/* ============================ LANDING ============================ */
function Landing({ go }) {
  const reveals = [
    { t: "Where freedom is leaking", d: "Whether the business is quietly taking too much from your energy, family and rest." },
    { t: "What's actually working", d: "Your real strengths, named, so you stop trying to fix what isn't broken." },
    { t: "Your pathway archetype", d: "The pattern your business is running, and what it predictably costs." },
    { t: "The next right move", d: "One stabiliser, a thirty-day repair, and the matched next step in Tracy's world." },
  ];
  return (
    <div className="screen">
      <TopBar right={<Btn variant="" onClick={() => go("profile")} icon="arrow">Start the audit</Btn>} onHome={() => go("landing")} />

      <section className="hero">
        <div className="hero__grid">
          <div className="hero__copy fadein">
            <span className="hero__pill"><span className="dot"></span>Private business diagnostic &middot; 6 minutes</span>
            <h1 className="hero__title">Find where your business is <em>leaking freedom</em>.</h1>
            <p className="hero__sub">{window.FFP.AUDIT.subhook} A personalised pathway map across eight dimensions of a freedom-filled business, with the one move that closes your biggest leak.</p>
            <div className="hero__actions">
              <Btn variant="" onClick={() => go("profile")} icon="arrow">Begin your audit</Btn>
              <Btn as="a" href="#how" variant="ghost">See how it works</Btn>
            </div>
            <dl className="hero__meta-row">
              <div className="hero__meta"><dt>Questions</dt><dd>24</dd></div>
              <div className="hero__meta"><dt>Dimensions</dt><dd>8</dd></div>
              <div className="hero__meta"><dt>Your report</dt><dd>Instant</dd></div>
            </dl>
          </div>
          <div className="hero__media">
            <img src="assets/images/tracy-portrait-2.jpg" alt="A calm, present business owner" />
            <div className="hero__media-tag">
              <div className="script">By design</div>
              <p>Not another quiz. A map of the business you're quietly trying to build.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" id="reveal">
        <div className="wrap">
          <div className="section__head">
            <p className="eyebrow">What the audit reveals</p>
            <span className="rule"></span>
            <h2 className="section__title">Clarity on what's working, and what's <em>quietly costing you</em>.</h2>
          </div>
          <div className="reveal-grid">
            {reveals.map((r, i) => (
              <div className="reveal-cell" key={i}>
                <span className="reveal-cell__n">0{i + 1}</span>
                <h3 className="reveal-cell__t">{r.t}</h3>
                <p className="reveal-cell__d">{r.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--ink" id="how">
        <div className="wrap">
          <div className="section__head">
            <p className="eyebrow">How it works</p>
            <span className="rule"></span>
            <h2 className="section__title">Three steps to your <em>pathway</em>.</h2>
          </div>
          <div className="steps">
            {[
              { n: "01", t: "Tell us where you are", d: "A few details about your business so the report speaks to your real situation, not a generic average." },
              { n: "02", t: "Answer 24 honest questions", d: "One at a time, no scoring on show. The more honest you are, the more useful the map." },
              { n: "03", t: "Get your pathway map", d: "Your score, your archetype, your biggest leak, and the exact next move that closes it." },
            ].map(s => (
              <div className="step" key={s.n}>
                <div className="step__n">{s.n}</div>
                <h3 className="step__t">{s.t}</h3>
                <p className="step__d">{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--elevated">
        <div className="wrap closing">
          <p className="eyebrow center">A note from Tracy</p>
          <span className="rule rule--center" style={{ margin: "16px auto 24px" }}></span>
          <h2 className="section__title">You don't have to choose between the business you want and the life you actually <em>live</em>.</h2>
          <p className="section__lead" style={{ maxWidth: "52ch", margin: "0 auto" }}>You can have both. By design. This audit is where we find out what's standing in the way, and what to do first.</p>
          <div style={{ marginTop: 36 }}>
            <Btn variant="" onClick={() => go("profile")} icon="arrow">Start the audit</Btn>
          </div>
          <div className="signoff">Xx Tracy</div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

/* ============================ PROFILE ============================ */
function Profile({ go, profile, setProfile }) {
  const { COUNTRIES, BUSINESS_STAGES, OFFER_TYPES, SOURCES } = window.FFP;
  const [errors, setErrors] = useState({});
  const set = (k, v) => setProfile(p => ({ ...p, [k]: v }));

  const validate = () => {
    const e = {};
    if (!profile.firstName.trim()) e.firstName = "Please add your first name.";
    if (!profile.email.trim()) e.email = "We need an email to send your report.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(profile.email)) e.email = "That email doesn't look quite right.";
    if (!profile.consent) e.consent = "Please tick to receive your report.";
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const submit = (ev) => { ev.preventDefault(); if (validate()) go("question"); };

  return (
    <div>
      <TopBar step="Step 1 of 2 &middot; Your details" onHome={() => go("landing")} />
      <div className="split">
        <aside className="split__aside">
          <div className="split__aside-photo"><img src="assets/images/tracy-lifestyle-desk.jpg" alt="" /></div>
          <div className="split__aside-inner">
            <p className="eyebrow">Before we begin</p>
            <h2>This makes your report <em>yours</em>, not a generic average.</h2>
            <p>A few details let the pathway speak to your real stage, offer and market. It takes about thirty seconds.</p>
            <div className="split__aside-marks">
              <div className="split__aside-mark"><Icon name="lock" size={17} /><span>Private. Used only to generate and send your pathway.</span></div>
              <div className="split__aside-mark"><Icon name="clock" size={17} /><span>The full audit takes about six minutes.</span></div>
              <div className="split__aside-mark"><Icon name="mail" size={17} /><span>Your report lands instantly, and in your inbox.</span></div>
            </div>
          </div>
        </aside>

        <main className="split__form">
          <form className="form-shell fadein" onSubmit={submit} noValidate>
            <p className="eyebrow" style={{ marginBottom: 10 }}>Your details</p>
            <h2 className="serif" style={{ fontSize: 30, color: "var(--ink-heading)", margin: "0 0 26px", lineHeight: 1.1 }}>Where should we send your pathway?</h2>

            <div className="field-row">
              <div className="field">
                <label className="field__label">First name <span className="field__req">*</span></label>
                <input className={"input" + (errors.firstName ? " input--error" : "")} value={profile.firstName} onChange={e => set("firstName", e.target.value)} placeholder="Leah" />
                {errors.firstName && <div className="field__error"><Icon name="alert" size={13} />{errors.firstName}</div>}
              </div>
              <div className="field">
                <label className="field__label">Last name <span className="opt">optional</span></label>
                <input className="input" value={profile.lastName} onChange={e => set("lastName", e.target.value)} placeholder="Marsh" />
              </div>
            </div>

            <div className="field">
              <label className="field__label">Email <span className="field__req">*</span></label>
              <input className={"input" + (errors.email ? " input--error" : "")} type="email" value={profile.email} onChange={e => set("email", e.target.value)} placeholder="you@yourbusiness.com" />
              {errors.email && <div className="field__error"><Icon name="alert" size={13} />{errors.email}</div>}
            </div>

            <div className="field">
              <label className="field__label">Country <span className="opt">optional</span></label>
              <select className="select" value={profile.country} onChange={e => set("country", e.target.value)}>
                <option value="">Select your country</option>
                {COUNTRIES.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>

            <div className="field">
              <label className="field__label">Business stage <span className="opt">optional</span></label>
              <div className="chip-set">
                {BUSINESS_STAGES.map(s => (
                  <button type="button" key={s.v} className="chip" aria-pressed={profile.businessStage === s.v} onClick={() => set("businessStage", profile.businessStage === s.v ? "" : s.v)}>{s.label}</button>
                ))}
              </div>
            </div>

            <div className="field">
              <label className="field__label">Offer type <span className="opt">optional</span></label>
              <div className="chip-set">
                {OFFER_TYPES.map(s => (
                  <button type="button" key={s.v} className="chip" aria-pressed={profile.offerType === s.v} onClick={() => set("offerType", profile.offerType === s.v ? "" : s.v)}>{s.label}</button>
                ))}
              </div>
            </div>

            <div className="field">
              <label className="field__label">How did you arrive? <span className="opt">optional</span></label>
              <div className="chip-set">
                {SOURCES.map(s => (
                  <button type="button" key={s.v} className="chip" aria-pressed={profile.source === s.v} onClick={() => set("source", profile.source === s.v ? "" : s.v)}>{s.label}</button>
                ))}
              </div>
            </div>

            <label className="consent">
              <input type="checkbox" checked={profile.consent} onChange={e => set("consent", e.target.checked)} />
              <span>Yes, send my personalised pathway report and the occasional note from Tracy. Unsubscribe anytime.</span>
            </label>
            {errors.consent && <div className="field__error" style={{ marginTop: -16, marginBottom: 16 }}><Icon name="alert" size={13} />{errors.consent}</div>}

            <div className="form-actions">
              <button type="button" className="q-back" onClick={() => go("landing")}><Icon name="arrowLeft" size={15} />Back</button>
              <Btn as="button" type="submit" variant="" icon="arrow">Begin the questions</Btn>
            </div>
          </form>
        </main>
      </div>
    </div>
  );
}

/* ============================ QUESTION FLOW ============================ */
function QuestionFlow({ go, answers, setAnswers }) {
  const { QUESTIONS, DIM } = window.FFP;
  const [i, setI] = useState(0);
  const q = QUESTIONS[i];
  const total = QUESTIONS.length;
  const selected = answers[q.id];
  const keys = ["A", "B", "C", "D"];

  const choose = (optId) => setAnswers(a => ({ ...a, [q.id]: optId }));
  const next = () => { if (i < total - 1) { setI(i + 1); window.scrollTo(0, 0); } else { go("generating"); } };
  const back = () => { if (i > 0) setI(i - 1); else go("profile"); };
  const pct = ((i + (selected ? 1 : 0)) / total) * 100;

  return (
    <div className="q-screen">
      <TopBar step={`Step 2 of 2 \u00b7 The audit`} onHome={() => go("landing")} right={<button className="q-save" onClick={() => go("landing")}>Save &amp; exit</button>} />
      <div className="q-progress"><div className="q-progress__bar" style={{ width: pct + "%" }} /></div>

      <div className="q-body">
        <div className="q-inner fadein" key={q.id}>
          <div className="q-meta">
            <span className="q-count">Question <b>{String(i + 1).padStart(2, "0")}</b> of {total}</span>
            <span className="q-dim"><span className="rule"></span>{DIM[q.dim].internal}</span>
          </div>
          <h2 className="q-text">{q.text}</h2>
          <div className="q-options">
            {q.options.map((o, oi) => (
              <button key={o.id} className="q-option" aria-pressed={selected === o.id} onClick={() => choose(o.id)}>
                <span className="q-option__key">{selected === o.id ? <Icon name="check" size={13} /> : keys[oi]}</span>
                <span className="q-option__text">{o.text}</span>
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="q-foot">
        <button className="q-back" onClick={back}><Icon name="arrowLeft" size={15} />{i === 0 ? "Details" : "Previous"}</button>
        <Btn variant="" onClick={next} icon="arrow" aria-disabled={!selected} disabled={!selected}>
          {i === total - 1 ? "See my pathway" : "Continue"}
        </Btn>
      </div>
    </div>
  );
}

/* ============================ GENERATING ============================ */
function Generating({ go }) {
  const steps = [
    "Scoring your eight dimensions",
    "Finding your primary and secondary leaks",
    "Matching your pathway archetype",
    "Writing your personalised report",
  ];
  const [active, setActive] = useState(0);
  useEffect(() => {
    const timers = steps.map((_, idx) => setTimeout(() => setActive(idx + 1), 650 * (idx + 1)));
    const done = setTimeout(() => go("results"), 650 * steps.length + 700);
    return () => { timers.forEach(clearTimeout); clearTimeout(done); };
  }, []);
  const acc = (window.__ffpTheme && window.__ffpTheme.accent) || "#6e8e77";
  return (
    <div className="gen">
      <div className="gen__inner">
        <div className="gen__ring">
          <svg width="64" height="64" viewBox="0 0 64 64" style={{ animation: "spin 1.1s linear infinite" }}>
            <circle cx="32" cy="32" r="27" fill="none" stroke="rgba(246,244,241,0.18)" strokeWidth="4" />
            <path d="M32 5 a27 27 0 0 1 27 27" fill="none" stroke={acc} strokeWidth="4" strokeLinecap="round" />
          </svg>
        </div>
        <h1 className="gen__title">Building your <em>Freedom Filled</em> pathway</h1>
        <p className="gen__sub">Reading your answers across eight dimensions and matching the next right move. One moment.</p>
        <ul className="gen__steps">
          {steps.map((s, idx) => (
            <li key={idx} className={active > idx ? "done" : active === idx ? "active" : ""}>
              <span className="gen__tick"><Icon name="check" size={12} /></span>{s}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

/* ============================ THANK YOU ============================ */
function ThankYou({ go, result }) {
  return (
    <div className="screen">
      <TopBar onHome={() => go("landing")} />
      <section className="section section--elevated" style={{ flex: 1, display: "grid", placeItems: "center" }}>
        <div className="wrap wrap--narrow center fadein">
          <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--p-sage)", display: "grid", placeItems: "center", margin: "0 auto 28px", color: "#fff" }}>
            <Icon name="check" size={30} />
          </div>
          <p className="eyebrow center">You're all set</p>
          <span className="rule rule--center" style={{ margin: "14px auto 22px" }}></span>
          <h1 className="section__title">Your pathway is on its way, {result.firstName}.</h1>
          <p className="section__lead" style={{ margin: "0 auto 8px", maxWidth: "48ch" }}>We've emailed your full Freedom Filled<span className="reg">&reg;</span> Pathway report as a PDF. It should land within a few minutes.</p>
          <div style={{ display: "grid", gap: 14, maxWidth: 440, margin: "32px auto 0", textAlign: "left" }}>
            {[
              { i: "mail", t: "Check your inbox", d: "Your report and a short note from Tracy on what to do first." },
              { i: "compass", t: "Book your next step", d: "Your matched pathway link is in the email and on your results page." },
              { i: "clock", t: "Give it seven days", d: "Start with your stabiliser. Small, protected, immediate." },
            ].map(x => (
              <div key={x.t} style={{ display: "flex", gap: 14, alignItems: "flex-start", background: "var(--surface-canvas)", border: "1px solid var(--border-hairline)", borderRadius: 8, padding: "18px 20px" }}>
                <span style={{ color: "var(--p-sage)", flex: "0 0 auto", marginTop: 1 }}><Icon name={x.i} size={20} /></span>
                <div><div style={{ fontFamily: "var(--f-serif-display)", fontSize: 18, color: "var(--ink-heading)" }}>{x.t}</div><div style={{ fontSize: 13.5, color: "var(--ink-body)", marginTop: 3, lineHeight: 1.5 }}>{x.d}</div></div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32, display: "flex", gap: 18, justifyContent: "center", flexWrap: "wrap" }}>
            <Btn variant="" onClick={() => go("results")} icon="arrow">Back to my results</Btn>
            <Btn variant="ghost" as="a" href="#" onClick={e => { e.preventDefault(); }}>Didn't get the email?</Btn>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}

Object.assign(window, { Footer, Landing, Profile, QuestionFlow, Generating, ThankYou });