// Start Here, Interview Insights, About, Contact, Privacy

// --- Start Here -----------------------------------------------------------
function StartHerePage() {
  return (
    <Page>
      <section className="page-hero">
        <div className="container">
          <div className="back-link mono">Start Here</div>
          <h1>{START_HERE.hero.headline.split(" in front of you.")[0]} <em>in front of you.</em></h1>
          <p>{START_HERE.hero.subheadline}</p>
        </div>
      </section>

      <div className="container">
        <div className="start-here-opening">
          {START_HERE.opening.split("\n\n").map((p, i) => (
            <p key={i} className={i === 0 ? "dropcap" : ""}>{p}</p>
          ))}
        </div>

        <SectionHeader
          eyebrow="Choose your route"
          title={<>Find the situation that <em>feels familiar.</em></>}
        />

        <div className="route-list">
          {ROUTES.map((r) => {
            const lessons = r.lessonSlugs.map(lessonBySlug).filter(Boolean);
            return (
              <article key={r.id} className="route-block">
                <div className="route-block-head">
                  <h3 className="route-block-q">{r.question}</h3>
                  <p className="route-block-body">{r.body}</p>
                </div>
                <ol className="route-block-lessons">
                  {lessons.map((l, i) => (
                    <li key={l.slug}>
                      <Link to={"/lessons/" + l.slug} className="route-lesson-link">
                        <span className="route-lesson-num mono">{String(i + 1).padStart(2, "0")}</span>
                        <span className="route-lesson-title">{l.title}</span>
                        <span className="route-lesson-cta">Read <span className="arrow">→</span></span>
                      </Link>
                    </li>
                  ))}
                </ol>
              </article>
            );
          })}
        </div>

        <section className="section" style={{ paddingTop: 64, borderTop: "1px solid var(--rule)", marginTop: 48 }}>
          <SectionHeader
            eyebrow="How to use a lesson"
            title={<>{START_HERE.howToUse.title}</>}
            kicker={START_HERE.howToUse.intro}
          />
          <ol className="howto-list">
            {START_HERE.howToUse.steps.map((s, i) => (
              <li key={i}>
                <span className="howto-num mono">{String(i + 1).padStart(2, "0")}</span>
                <span className="howto-step">{s}</span>
              </li>
            ))}
          </ol>
        </section>
      </div>
    </Page>
  );
}

// --- Interview Insights ---------------------------------------------------
function InsightCard({ insight }) {
  const lesson = lessonBySlug(insight.relatedLessonSlug);
  const resource = resourceBySlug(insight.relatedResourceSlug);
  return (
    <article className="insight-card">
      <div className="insight-card-top">
        <Tag tone="accent">{insight.topic}</Tag>
      </div>
      <p className="insight-card-body">{insight.body}</p>
      <div className="insight-quote-slot">
        <span className="quote-mark" aria-hidden="true">“</span>
        <span className="insight-quote-placeholder">Verified anonymous transcript quote will appear here.</span>
        <span className="mono">Anonymous founder interview</span>
      </div>
      <div className="insight-card-links">
        {lesson && <Link to={"/lessons/" + lesson.slug} className="insight-link">Read lesson <span className="arrow">→</span></Link>}
        {resource && <Link to={"/resources/" + resource.slug} className="insight-link insight-link-muted">Use resource <span className="arrow">→</span></Link>}
      </div>
    </article>
  );
}

function InterviewInsights() {
  const [cat, setCat] = useState("All");
  const filtered = cat === "All" ? INSIGHTS : INSIGHTS.filter((i) => i.topic === cat);
  return (
    <Page>
      <section className="page-hero">
        <div className="container">
          <div className="back-link mono">Interview Insights</div>
          <h1>{INSIGHTS_PAGE.hero.headline.split(" the project.")[0]} <em>the project.</em></h1>
          <p>{INSIGHTS_PAGE.hero.subheadline}</p>
        </div>
      </section>
      <div className="container">
        <p style={{ maxWidth: "62ch", color: "var(--ink-2)", fontSize: 17, lineHeight: 1.65, padding: "8px 0 16px" }}>
          {INSIGHTS_PAGE.intro}
        </p>

        <div className="library-controls" style={{ position: "static" }}>
          <div className="filter-row">
            {["All", ...INSIGHT_CATEGORIES].map((c) => (
              <button key={c} className={"filter-pill " + (cat === c ? "is-active" : "")} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
        </div>
        <div className="results-meta">
          {filtered.length} insight{filtered.length === 1 ? "" : "s"}
          {cat !== "All" && <> · in <span style={{ color: "var(--ink)" }}>{cat}</span></>}
        </div>
        {filtered.length === 0 ? (
          <div className="empty-state">
            <h3>No insights in this category yet.</h3>
            <p>More are being added as transcripts are reviewed and contributors confirm publication.</p>
          </div>
        ) : (
          <div className="insights-grid">
            {filtered.map((i) => <InsightCard key={i.id} insight={i} />)}
          </div>
        )}

        <div style={{ marginTop: 64, padding: 24, borderTop: "1px solid var(--rule)", color: "var(--ink-3)", fontSize: 13.5 }}>
          <span className="mono">Note · </span>
          Direct quotes are not invented. Each insight will receive a verified anonymous quote once transcript review is complete.
        </div>
      </div>
    </Page>
  );
}

// --- About ----------------------------------------------------------------
function AboutPage() {
  return (
    <Page>
      <section className="about-hero">
        <div className="container">
          <div className="back-link mono">About</div>
          <h1>{ABOUT_PAGE.hero.headline.split(" practical guidance.")[0]} <em>practical guidance.</em></h1>
          <p className="about-lede dropcap">{ABOUT_PAGE.hero.subheadline}</p>
        </div>
      </section>

      <div className="container">
        <div className="about-main">
          {ABOUT_PAGE.main.map((p, i) => (
            <p key={i} className={i === 0 ? "dropcap" : ""} style={{ color: "var(--ink-2)", fontSize: 18, lineHeight: 1.65, margin: "0 0 20px" }}>{p}</p>
          ))}
        </div>

        <section style={{ padding: "48px 0", borderTop: "1px solid var(--rule)" }}>
          <div className="eyebrow mono">Created by</div>
          <h2 style={{ fontFamily: "var(--serif)", fontSize: 32, letterSpacing: "-0.015em", margin: "0 0 32px", fontWeight: 500 }}>{ABOUT_PAGE.creator.name}.</h2>
          <div className="creator-card">
            <div className="creator-avatar">JV</div>
            <div>
              <h3>{ABOUT_PAGE.creator.title}</h3>
              <p>{ABOUT_PAGE.creator.body}</p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
                <a className="btn btn-primary btn-sm" href="https://jamesvarga.com" target="_blank" rel="noopener noreferrer">Visit jamesvarga.com →</a>
                <Link to="/contact" className="btn btn-secondary btn-sm">Get in touch</Link>
              </div>
            </div>
          </div>
        </section>

        <section style={{ padding: "48px 0", borderTop: "1px solid var(--rule)" }}>
          <div className="about-grid">
            <div>
              <div className="eyebrow mono">Why anonymous</div>
              <h2>The lessons are anonymised on purpose.</h2>
              <p style={{ color: "var(--ink-2)" }}>{ABOUT_PAGE.whyAnonymous}</p>
            </div>
            <div>
              <div className="eyebrow mono">What this project believes</div>
              <h2>Eight beliefs that shape the work.</h2>
              <ul className="about-list">
                {ABOUT_PAGE.beliefs.map((b, i) => <li key={i}>{b}</li>)}
              </ul>
            </div>
          </div>
        </section>
      </div>
    </Page>
  );
}

// --- Contact --------------------------------------------------------------
function ContactPage() {
  const [intentIdx, setIntentIdx] = useState(0);
  const [form, setForm] = useState({ name: "", email: "", org: "", topic: "", message: "" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  const intent = CONTACT_PAGE.intents[intentIdx];

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = "Required";
    if (!form.email.trim()) errs.email = "Required";
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = "Use a valid email";
    if (!form.message.trim()) errs.message = "Required";
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  };

  if (sent) {
    return (
      <Page>
        <section className="page-hero">
          <div className="container">
            <div className="back-link mono">Contact</div>
            <h1>Thank you.</h1>
            <p>Your message is in. James will reply personally — usually within a few days.</p>
            <div className="form-success" style={{ marginTop: 32, maxWidth: 640 }}>
              <div className="form-success-mark">✓</div>
              <div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 18, letterSpacing: "-0.005em", marginBottom: 4 }}>Message received</div>
                <div style={{ fontSize: 14 }}>
                  Topic: <strong>{intent.label}</strong><br/>
                  From: {form.name} ({form.email})
                </div>
              </div>
            </div>
            <div style={{ marginTop: 24, display: "flex", gap: 12 }}>
              <button className="btn btn-secondary" onClick={() => { setSent(false); setForm({ name: "", email: "", org: "", topic: "", message: "" }); }}>Send another</button>
              <Link to="/" className="btn btn-ghost">Back to home</Link>
            </div>
          </div>
        </section>
      </Page>
    );
  }

  return (
    <Page>
      <section className="page-hero">
        <div className="container">
          <div className="back-link mono">Contact · Contribute</div>
          <h1>{CONTACT_PAGE.hero.headline.split(" with founders.")[0]} <em>with founders.</em></h1>
          <p>{CONTACT_PAGE.hero.subheadline}</p>
        </div>
      </section>
      <div className="container">
        <div className="contact-grid">
          <div className="contact-intent">
            <div className="contact-intent-h">I'd like to</div>
            {CONTACT_PAGE.intents.map((i, idx) => (
              <button
                key={i.label}
                className={"intent-pill " + (intentIdx === idx ? "is-active" : "")}
                onClick={() => setIntentIdx(idx)}
                type="button"
              >
                <span>{i.label}</span>
                <span className="arrow">→</span>
              </button>
            ))}
            <div style={{ marginTop: 16, padding: "16px 0", borderTop: "1px solid var(--rule)", color: "var(--ink-2)", fontSize: 14, lineHeight: 1.55 }}>
              {intent.body}
            </div>
            <div style={{ marginTop: 16, padding: "16px 0", borderTop: "1px solid var(--rule)", color: "var(--ink-3)", fontSize: 13.5, lineHeight: 1.6 }}>
              No newsletters, no marketing lists. Replies come directly from James.
            </div>
          </div>

          <form className="form" onSubmit={submit} noValidate>
            <div className="form-row">
              <div className="field">
                <label htmlFor="name">Name</label>
                <input id="name" value={form.name} onChange={update("name")} aria-invalid={!!errors.name} />
                {errors.name && <span className="field-error">{errors.name}</span>}
              </div>
              <div className="field">
                <label htmlFor="email">Email</label>
                <input id="email" type="email" value={form.email} onChange={update("email")} aria-invalid={!!errors.email} />
                {errors.email && <span className="field-error">{errors.email}</span>}
              </div>
            </div>
            <div className="form-row">
              <div className="field">
                <label htmlFor="org">Organisation</label>
                <input id="org" value={form.org} onChange={update("org")} placeholder="Optional" />
              </div>
              <div className="field">
                <label htmlFor="topic">What would you like to discuss?</label>
                <input id="topic" value={form.topic} onChange={update("topic")} placeholder={intent.label} />
              </div>
            </div>
            <div className="field">
              <label htmlFor="message">Message</label>
              <textarea id="message" value={form.message} onChange={update("message")} aria-invalid={!!errors.message} placeholder="A few sentences is fine." />
              {errors.message && <span className="field-error">{errors.message}</span>}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap", paddingTop: 8, borderTop: "1px dashed var(--rule)" }}>
              <span className="mono" style={{ color: "var(--ink-3)" }}>Intent · {intent.label}</span>
              <button type="submit" className="btn btn-primary">Send message <span className="arrow">→</span></button>
            </div>
          </form>
        </div>

        <div style={{ marginTop: 48, padding: "24px 0", borderTop: "1px solid var(--rule)", color: "var(--ink-2)", fontSize: 16, lineHeight: 1.6, maxWidth: "62ch" }}>
          {CONTACT_PAGE.closing}
        </div>
      </div>
    </Page>
  );
}

// --- Privacy --------------------------------------------------------------
function PrivacyPage() {
  return (
    <Page>
      <section className="page-hero">
        <div className="container">
          <div className="back-link mono">Privacy</div>
          <h1>{PRIVACY_PAGE.hero.headline}</h1>
          <p>{PRIVACY_PAGE.hero.subheadline}</p>
        </div>
      </section>
      <div className="container">
        <div style={{ maxWidth: "68ch", padding: "16px 0 64px" }}>
          {PRIVACY_PAGE.body.map((p, i) => (
            <p key={i} style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.7, margin: "0 0 20px" }}>{p}</p>
          ))}
        </div>
      </div>
    </Page>
  );
}

Object.assign(window, { StartHerePage, InsightCard, InterviewInsights, AboutPage, ContactPage, PrivacyPage });