// Homepage — content from HOMEPAGE in data.jsx (story-led pack)

function HomePage() {
  const featured = HOMEPAGE.featuredSlugs.map(lessonBySlug).filter(Boolean);
  const resources = HOMEPAGE.resourceSlugs.map(resourceBySlug).filter(Boolean);
  const [activeChapter, setActiveChapter] = useState(2);
  const ch = chapterByN(activeChapter) || CHAPTERS[0];

  return (
    <Page className="home">
      {/* HERO — story-pack headline */}
      <section className="hero hero-v2">
        <div className="container">
          <div className="hero-meta">
            <span><span className="hero-meta-dot" />Field Guide · v0.1</span>
            <span>Founder-led · Independent</span>
            <span>Updated April 2026</span>
            <span>UK · Scotland · Global</span>
          </div>

          <div className="hero-grid-v2">
            <div className="hero-text">
              <div className="hero-eyebrow mono">A founder-to-founder field guide</div>
              <h1 className="hero-mega">
                <span className="line">Building a fintech</span>
                <span className="line"><em>is rarely hard</em><span className="hero-arc" aria-hidden="true">↓</span></span>
                <span className="line line-sm">for the reasons people expect.</span>
              </h1>
              <div className="hero-meta-grid">
                <div>
                  <p className="hero-sub">{HOMEPAGE.hero.subheadline}</p>
                  <p className="hero-sub" style={{ marginTop: 16 }}>{HOMEPAGE.hero.subheadline2}</p>
                </div>
                <div className="hero-stats">
                  {[["Lessons", LESSONS.length], ["Chapters", CHAPTERS.length], ["Resources", RESOURCES.length], ["Insights", INSIGHTS.length]].map(([k, v], i) => (
                    <div key={k} className="hero-stat">
                      <span className="hero-stat-num" data-i={i}>{v}</span>
                      <span className="mono">{k}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="hero-ctas">
                {HOMEPAGE.hero.ctas.map((c) => (
                  <Link key={c.to} to={c.to} className={"btn btn-" + c.variant + " btn-lg"}>
                    {c.label} {c.variant === "primary" && <span className="arrow">→</span>}
                  </Link>
                ))}
              </div>
              <p className="mono" style={{ marginTop: 24, color: "var(--ink-3)", fontSize: 13 }}>{HOMEPAGE.hero.credibility}</p>
            </div>
          </div>
        </div>

        {/* Marquee — running ribbon of lessons */}
        <div className="marquee" aria-hidden="true">
          <div className="marquee-track">
            {[...LESSONS, ...LESSONS].map((l, i) => (
              <span key={i} className="marquee-item">
                <span className="marquee-num">{String((i % LESSONS.length) + 1).padStart(2, "0")}</span>
                <span className="marquee-text">{l.title}</span>
                <span className="marquee-dot" />
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* Opening story — "The lessons founders usually learn in private" */}
      <section className="section">
        <div className="container">
          <div className="opening-story">
            <div className="eyebrow mono">Opening</div>
            <h2 className="section-title" style={{ marginBottom: 28 }}>
              <em>{HOMEPAGE.openingStory.title}</em>
            </h2>
            <div className="opening-story-body">
              {HOMEPAGE.openingStory.body.map((p, i) => (
                <p key={i} className={i === 0 ? "dropcap" : ""}>{p}</p>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* What this helps with — six numbered rows */}
      <section className="section section-tinted">
        <div className="container">
          <SectionHeader
            eyebrow={HOMEPAGE.whatHelps.eyebrow}
            title={<>Six areas the lessons <em>keep returning to.</em></>}
            kicker={HOMEPAGE.whatHelps.intro}
          />
          <div className="row-list row-list-six">
            {HOMEPAGE.whatHelps.items.map((h) => (
              <div key={h.n} className={"row-item row-" + h.color}>
                <span className="row-num">{h.n}</span>
                <h3 className="row-title">{h.title}</h3>
                <p className="row-body">{h.body}</p>
                <span className="row-marker" aria-hidden="true" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured lessons — magazine grid */}
      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="Featured lessons"
            title={<>The ones founders <em>ask about most.</em></>}
            kicker="Each lesson is short, opinionated, and pairs with a worksheet you can use this week."
            action={<Link to="/lessons" className="btn btn-link">All lessons →</Link>}
          />
          {featured[0] && (
            <div className="mag-grid">
              <Link to={"/lessons/" + featured[0].slug} className="mag-card mag-card-hero">
                <div className="mag-card-cat"><Tag data-cat={filterCategoryFor(featured[0])}>{featured[0].category}</Tag></div>
                <h3 className="mag-card-title">{featured[0].title}</h3>
                <p className="mag-card-summary">{featured[0].summary}</p>
                <div className="mag-card-meta">
                  <span className="mono">Pairs with · {(resourceBySlug(featured[0].resource) || {}).title || featured[0].resource}</span>
                  <span className="mag-card-cta">Read lesson <span className="arrow">→</span></span>
                </div>
              </Link>
              <div className="mag-grid-rest">
                {featured.slice(1, 7).map((l) => <LessonCard key={l.slug} lesson={l} />)}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Founder journey — "Start where the pressure is sharpest" */}
      <section className="section section-tinted">
        <div className="container">
          <SectionHeader
            eyebrow="Founder journey"
            title={<><em>Start where</em> the pressure is sharpest</>}
            kicker={HOMEPAGE.founderJourney.body}
            action={<Link to="/start" className="btn btn-link">Open Start Here →</Link>}
          />
          <div className="route-grid">
            {ROUTES.map((r) => (
              <Link key={r.id} to="/start" className="route-card">
                <span className="route-card-q">{r.question}</span>
                <span className="route-card-meta mono">{r.lessonSlugs.length} lessons →</span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Chapters explorer */}
      <section className="section dark">
        <div className="container">
          <SectionHeader
            eyebrow="The curriculum"
            title={<>Ten chapters, <em>in the order</em> founders meet them.</>}
            action={<Link to="/chapters" className="btn btn-link">View all chapters →</Link>}
          />
          <div className="ch-explorer">
            <div className="ch-list">
              {CHAPTERS.map((c) => (
                <button
                  key={c.n}
                  onMouseEnter={() => setActiveChapter(c.n)}
                  onClick={() => navigate("/chapters/" + c.n)}
                  className={"ch-item " + (activeChapter === c.n ? "is-active" : "")}
                >
                  <span className="ch-item-n">{String(c.n).padStart(2, "0")}</span>
                  <span className="ch-item-title">{c.title}</span>
                  <span className="ch-item-arrow">→</span>
                </button>
              ))}
            </div>
            <div className="ch-preview">
              <div className="ch-preview-head">
                <span className="mono" style={{ color: "var(--ochre)" }}>Chapter {String(ch.n).padStart(2, "0")} · Preview</span>
                <span className="ch-preview-progress">
                  <span className="mono">{ch.n}</span>
                  <span className="ch-bar"><span className="ch-bar-fill" style={{ width: (ch.n / CHAPTERS.length) * 100 + "%" }} /></span>
                  <span className="mono">{CHAPTERS.length}</span>
                </span>
              </div>
              <h3 className="ch-preview-title">{ch.title}</h3>
              <p className="ch-preview-sum">{ch.headline}</p>
              <div className="ch-preview-tags">
                {ch.relatedLessonSlugs.slice(0, 3).map((s) => {
                  const l = lessonBySlug(s);
                  return l && (
                    <span key={s} className="ch-preview-tag">
                      <span className="ch-preview-tag-dot" />
                      {l.title}
                    </span>
                  );
                })}
              </div>
              <Link to={"/chapters/" + ch.n} className="btn btn-ochre">
                Read chapter {ch.n} <span className="arrow">→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Resources — warm band */}
      <section className="section warm">
        <div className="container">
          <SectionHeader
            eyebrow="Founder resources"
            title={<>Worksheets, checklists, and <em>templates.</em></>}
            kicker="Use them solo, or run them with your team. Free to download. Free to remix."
            action={<Link to="/resources" className="btn btn-link">All resources →</Link>}
          />
          <div className="resources-grid">
            {resources.map((r) => <ResourceCard key={r.slug} resource={r} />)}
          </div>
        </div>
      </section>

      {/* Quote strip */}
      <section className="quote-strip">
        <div className="quote-content">
          <div className="quote-mark">“</div>
          <p className="quote-text">{HOMEPAGE.quoteStrip}</p>
          <div className="quote-attr">
            <span className="mono">Editorial · Lessons from a Fintech</span>
          </div>
        </div>
      </section>

      {/* About teaser — split with portrait */}
      <section className="section">
        <div className="container">
          <div className="about-teaser-v2">
            <div className="about-teaser-text">
              <div className="eyebrow mono">About the project</div>
              <h2 className="section-title" style={{ marginBottom: 24 }}>
                Founder experience, <em>made usable.</em>
              </h2>
              {HOMEPAGE.aboutPreview.map((p, i) => (
                <p key={i} className={i === 0 ? "dropcap" : ""} style={{ color: "var(--ink-2)", fontSize: 18, lineHeight: 1.6, maxWidth: "60ch", margin: "0 0 20px" }}>{p}</p>
              ))}
              <Link to="/about" className="btn btn-ghost">Explore the project →</Link>
            </div>
            <div className="about-teaser-side">
              <div className="portrait-card">
                <div className="portrait-mark">JV</div>
                <div className="portrait-meta">
                  <span className="mono" style={{ color: "var(--ochre)" }}>Editor</span>
                  <span className="portrait-name">James Varga</span>
                  <span className="portrait-role">Fintech founder, adviser, operator.</span>
                </div>
              </div>
              <div className="portrait-grid">
                {[["Lessons", LESSONS.length], ["Chapters", CHAPTERS.length], ["Resources", RESOURCES.length], ["Insights", INSIGHTS.length]].map(([k, v], i) => (
                  <div key={k} className="portrait-stat">
                    <span className="portrait-stat-num" data-i={i}>{v}</span>
                    <span className="mono">{k}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="section section-tinted">
        <div className="container">
          <div className="final-cta">
            <h2 className="section-title" style={{ marginBottom: 16 }}>
              <em>{HOMEPAGE.finalCta.headline}</em>
            </h2>
            <p style={{ fontSize: 19, color: "var(--ink-2)", maxWidth: "55ch", margin: "0 auto 32px" }}>
              {HOMEPAGE.finalCta.body}
            </p>
            <div className="hero-ctas" style={{ justifyContent: "center" }}>
              {HOMEPAGE.finalCta.buttons.map((b) => (
                <Link key={b.to} to={b.to} className={"btn btn-" + b.variant + " btn-lg"}>
                  {b.label} {b.variant === "primary" && <span className="arrow">→</span>}
                </Link>
              ))}
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

// --- shared cards ---------------------------------------------------------
function LessonCard({ lesson }) {
  const cat = filterCategoryFor(lesson);
  const resource = resourceBySlug(lesson.resource);
  return (
    <Link to={"/lessons/" + lesson.slug} className="lesson-card">
      <div className="lesson-card-top">
        <Tag tone="accent" data-cat={cat}>{lesson.category}</Tag>
        <span className="mono" style={{ fontSize: 10.5 }}>L · {String(lesson.n).padStart(2, "0")}</span>
      </div>
      <h3 className="lesson-card-title">{lesson.title}</h3>
      <p className="lesson-card-summary">{lesson.summary}</p>
      <div className="lesson-card-meta">
        <span className="lesson-card-related">
          <span className="mono">Pairs with</span>
          <span style={{ color: "var(--ink-2)" }}>{resource ? resource.title : lesson.resource}</span>
        </span>
        <span className="lesson-card-cta">Read <span className="arrow">→</span></span>
      </div>
    </Link>
  );
}

function ResourceCard({ resource }) {
  const fmtColor = { Worksheet: "terra", Checklist: "moss", Template: "signal", Map: "ochre", Canvas: "ochre", Scorecard: "moss", Tracker: "signal", Planner: "terra", Plan: "terra", Cadence: "moss", Log: "signal", Review: "terra" }[resource.format] || "terra";
  return (
    <Link to={"/resources/" + resource.slug} className={"resource-card resource-" + fmtColor}>
      <div className="resource-stripe" />
      <div className="resource-top">
        <span className="resource-format-pill">
          <span className="resource-format-dot" />
          {resource.format}
        </span>
        <Tag>{resource.category}</Tag>
      </div>
      <h3 className="resource-title">{resource.title}</h3>
      <p className="resource-desc">{resource.summary}</p>
      <div className="resource-bottom">
        <span className="mono" style={{ fontSize: 10.5 }}>Open resource</span>
        <span className="btn btn-secondary btn-sm">View <span className="arrow">→</span></span>
      </div>
    </Link>
  );
}

Object.assign(window, { HomePage, LessonCard, ResourceCard });