/* Home page · B2B-first.
   All copy lives in site/content.js (window.solasContent.home + .waitlistCta).
   This file is layout only — edit copy in content.js, not here.

   Three hero variations live here, swapped by the Tweaks panel:
     A · editorial pull-quote (founder statement)
     B · full-bleed editorial wedge (HELD — see note)
     C · real-case spotlight (HELD pending consented case) */

const C = window.solasContent;

// ---- Hero A · Editorial pull-quote ----------------------------------------

const HeroA = ({ onNav }) => {
  const c = C.home.heroA;
  return (
    <header className="solas-hero" data-screen-label="01a Hero · Editorial">
      <div className="solas-hero__eyebrow">{c.eyebrow}</div>
      <figure style={{ margin: 0, maxWidth: "32ch" }}>
        <div style={{ width: 64, borderTop: "2px solid var(--accent)", marginBottom: 18 }} />
        <blockquote className="solas-editorial__q" style={{ marginBottom: 20, fontSize: 36, lineHeight: 1.25 }}>
          {c.quote}
        </blockquote>
        <figcaption className="solas-editorial__sig">
          <span className="solas-editorial__name">{c.sigName}</span>
          <span className="solas-editorial__role">{c.sigRole}</span>
        </figcaption>
      </figure>
      <p className="solas-hero__standfirst" style={{ marginTop: 24 }}>
        {c.standfirst}
      </p>
      <div className="solas-hero__actions">
        <a href="#/quote" className="btn btn--primary" onClick={(e) => { e.preventDefault(); onNav("/quote"); }}>{c.ctaPrimary}</a>
        <a href="#/approach" className="solas-hero__secondary" onClick={(e) => { e.preventDefault(); onNav("/approach"); }}>{c.ctaSecondary}</a>
      </div>
    </header>
  );
};

// ---- Hero B · HELD — Full-bleed editorial wedge --------------------------
// Per help-first-reformulations §5, HeroB is held pending: (1) a genuine wedge
// sentence approved at editorial scale, (2) type treatment brought down to 60-72px
// maximum, (3) standfirst voice-passed against demonstrate-don't-perform.

const HeroB = ({ onNav }) => {
  const c = C.home.heroB;
  return (
    <header className="hero-fullbleed" data-screen-label="01b Hero · Editorial wedge (HELD)">
      <div className="solas-hero__eyebrow">{c.eyebrow}</div>
      <h1 className="hero-fullbleed__title" style={{ fontSize: 64, lineHeight: 1.05, maxWidth: "22ch" }}>
        {c.title}
      </h1>
      <p className="hero-fullbleed__standfirst">
        {c.standfirst}
      </p>
      <div className="solas-hero__actions">
        <a href="#/quote" className="btn btn--primary" onClick={(e) => { e.preventDefault(); onNav("/quote"); }}>{c.ctaPrimary}</a>
        <a href="#/approach" className="solas-hero__secondary" onClick={(e) => { e.preventDefault(); onNav("/approach"); }}>{c.ctaSecondary}</a>
      </div>
    </header>
  );
};

// ---- Hero C · Thesis spotlight — DEPLOYED variant (B2B-first) -------------
// Founder selected Hero C as the deployed homepage hero (2026-06-13) for the
// "credible B2B front end" paradigm — partners, capacity providers, investors.
// COMPLIANCE GUARDRAIL: CEP-2026-05-27-002 (the fabricated-people stop) REMAINS
// in force. The right-hand spotlight carries the FOUNDER'S OWN positioning
// quote, not an invented customer case. Do NOT reintroduce a named customer /
// tradesperson / dated case study here until a real, consented case exists
// (CMO + CCO + CLO joint clearance required for that).

const HeroC = ({ onNav }) => {
  const c = C.home.heroC;
  return (
    <header className="hero-spotlight" data-screen-label="01c Hero · Thesis spotlight (DEPLOYED)">
      <div className="hero-spotlight__col">
        <div className="solas-hero__eyebrow">{c.eyebrow}</div>
        <h1 className="hero-spotlight__title">
          {c.title}
        </h1>
        <p className="hero-spotlight__standfirst">
          {c.standfirst}
        </p>
        <div className="solas-hero__actions">
          <a href="#/investors" className="btn btn--primary" onClick={(e) => { e.preventDefault(); onNav("/investors"); }}>{c.ctaPrimary}</a>
          <a href="#/partners" className="solas-hero__secondary" onClick={(e) => { e.preventDefault(); onNav("/partners"); }}>{c.ctaSecondary}</a>
        </div>
      </div>
      <aside className="hero-spotlight__aside">
        <div className="hero-spotlight__rule" />
        <div className="hero-spotlight__lbl">{c.asideLabel}</div>
        <blockquote className="hero-spotlight__q">{c.asideQuote}</blockquote>
        <figcaption className="hero-spotlight__sig">
          <span className="hero-spotlight__name">{c.asideName}</span>
          <span className="hero-spotlight__role">{c.asideRole}</span>
        </figcaption>
      </aside>
    </header>
  );
};

const Heroes = { A: HeroA, B: HeroB, C: HeroC };

// ---- Doors row — three audience doors ------------------------------------

const Doors = ({ onNav }) => (
  <section
    className="page-section page-section--flat"
    aria-label="Audience doors"
    data-screen-label="02 Doors"
    style={{ paddingTop: 40, paddingBottom: 40 }}
  >
    <div className="hero-doors">
      {C.home.doors.map((d, i) => (
        <a key={i} href={"#" + d.href} className="hero-door" onClick={(e) => { e.preventDefault(); onNav(d.href); }}>
          <span className="hero-door__lbl">{d.label}</span>
          <h3 className="hero-door__t">{d.title}</h3>
          <p className="hero-door__p">{d.body}</p>
          <span className="hero-door__arrow">{d.arrow}</span>
        </a>
      ))}
    </div>
  </section>
);

// ---- Three pillars -------------------------------------------------------
// The three locked brand pillars per /brain/brand/positioning.md.

const Pillars = ({ onNav }) => (
  <section className="solas-pillars solas-pillars--three" id="approach" data-screen-label="03 Pillars">
    <header className="solas-pillars__head">
      <div className="eyebrow">{C.home.pillarsHead.eyebrow}</div>
      <h2>{C.home.pillarsHead.title}</h2>
    </header>
    <ol className="solas-pillars__list">
      {C.home.pillars.map(({ n, t, h, p }) => (
        <li className="solas-pillar" key={n}>
          <div className="solas-pillar__n">{n} · {t}</div>
          <h3 className="solas-pillar__h">{h}</h3>
          <p className="solas-pillar__p">{p}</p>
        </li>
      ))}
    </ol>
  </section>
);

// ---- Editorial block — HELD pending real consented case (CEP-2026-05-27-002)
// Renders nothing until a real, consented case is documented.

const EditorialBlock = () => null;

// ---- Brief panel — investor-readable stats -------------------------------

const BriefPanel = ({ onNav }) => {
  const c = C.home.brief;
  return (
    <section className="brief-panel" data-screen-label="05 Brief panel">
      <div className="brief-panel__col">
        <div className="eyebrow" style={{ color: "var(--accent)" }}>{c.eyebrow}</div>
        <h2 className="brief-panel__t">{c.title}</h2>
        {c.paras.map((p, i) => (
          <p className="brief-panel__p" key={i}>{p}</p>
        ))}
        <div className="solas-hero__actions" style={{ marginTop: 16 }}>
          <a href="#/investors" className="btn btn--primary" onClick={(e) => { e.preventDefault(); onNav("/investors"); }}>{c.ctaPrimary}</a>
          <a href="#/quote" className="solas-hero__secondary" onClick={(e) => { e.preventDefault(); onNav("/quote"); }}>{c.ctaSecondary}</a>
        </div>
      </div>
      <div className="brief-panel__col">
        <dl className="brief-panel__stats">
          {c.stats.map((s, i) => (
            <div className="brief-panel__stat" key={i}>
              <dt>{s.dt}</dt>
              <dd>{s.dd} <span>{s.note}</span></dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
};

// ---- Homeowner waitlist invitation (quiet) -------------------------------
// Held out of the homepage compose today; copy retained in content.js.

const HomeownerInvite = ({ onNav }) => {
  const c = C.home.homeownerInvite;
  return (
    <section
      className="page-section page-section--flat"
      aria-label="Homeowner waitlist"
      data-screen-label="06 Homeowner invite"
    >
      <header className="page-section__head">
        <div className="page-section__eyebrow">{c.eyebrow}</div>
        <h2 className="page-section__title">{c.title}</h2>
        <p className="page-section__standfirst">{c.standfirst}</p>
      </header>
      <div className="page-section__body">
        <div className="solas-hero__actions">
          <a href="#/quote" className="btn btn--primary" onClick={(e) => { e.preventDefault(); onNav("/quote"); }}>{c.ctaPrimary}</a>
          <a href="#/approach" className="solas-hero__secondary" onClick={(e) => { e.preventDefault(); onNav("/approach"); }}>{c.ctaSecondary}</a>
        </div>
        <p className="form-note" style={{ marginTop: 16 }}>{c.note}</p>
      </div>
    </section>
  );
};

// ---- Home — composed ----------------------------------------------------

const HomePage = ({ heroVariant = "A", onNav, audience = "investors", showAudienceStrip = false }) => {
  const Hero = Heroes[heroVariant] || HeroA;
  return (
    <React.Fragment>
      {showAudienceStrip && <AudienceStrip active={audience} onNav={onNav} />}
      <Hero onNav={onNav} />
      <Doors onNav={onNav} />
      <Pillars onNav={onNav} />
      <BriefPanel onNav={onNav} />
      <HiringStrip
        role={C.home.hiringStrip.role}
        where={C.home.hiringStrip.where}
        onNav={onNav}
      />
      <WaitlistCTA variant="argument" onNav={onNav} />
    </React.Fragment>
  );
};

Object.assign(window, { HomePage, HeroA, HeroB, HeroC, Pillars, EditorialBlock, BriefPanel, Doors, HomeownerInvite, Heroes });