/* Three hero variants. Each takes a `copy` object so the tweaks panel can
   swap headlines/ledes/CTAs per variant without component churn.

   All three variants ship Hero A's locked copy. Only the composition
   varies. The earlier audience-coded copy in B and C was retired during
   the second visual pass.

   A: Editorial type-led on Parchment. Asymmetric 1180px grid; type left,
      numbered offerings rail right. The launch direction.
   B: Forest immersion. Full-bleed dark band, vertical line motif committed.
   C: Image-paired asymmetric. Type left, framed image-slot right.
*/

/* Copy locked 2026-07-03. Ownership-led messaging pass.
   Prior canonical ("Ready, not behind" / practitioner hero) retired with the
   Studio/Builds/Ops lineup. See content-plan-2026-07-03.md. */
const heroCopyCanonical = {
  eyebrow: "Yours from day one.",
  headline: <>We build what your business runs on. <em>You own every piece.</em></>,
  lede: "Brand and website, one hard workflow, or the whole operating system. Built fixed fee, handed over with every key. Run it yourself, or run it with us.",
  primary: "Book a scoping call",
  secondary: "See the three doors",
  secondaryHref: "#/what",
};

const heroCopy = {
  a: heroCopyCanonical,
  b: heroCopyCanonical,
  c: heroCopyCanonical,
};

const heroRailItems = [
  { num: "01", label: "Studio" },
  { num: "02", label: "Builds" },
  { num: "03", label: "Ops" },
];

function HeroA({ copy = heroCopy.a }) {
  return (
    <section className="hero variant-a" data-screen-label="Hero · A · Editorial type-led">
      <div className="inner">
        <div className="type-stack">
          <div>
            <div className="eyebrow">{copy.eyebrow}</div>
            <h1>{copy.headline}</h1>
            <p className="lede">{copy.lede}</p>
          </div>
          <div className="actions">
            <a href="#/contact" className="cta" onClick={(e)=>{e.preventDefault(); window.location.hash="#/contact";}}>
              {copy.primary}
            </a>
            <a href={copy.secondaryHref} className="secondary" onClick={(e)=>{e.preventDefault(); window.location.hash=copy.secondaryHref;}}>
              {copy.secondary} →
            </a>
          </div>
        </div>

        <aside className="hero-rail" aria-label="Three offerings">
          {heroRailItems.map((r) => (
            <div className="row" key={r.num}>
              <div className="num">{r.num}</div>
              <div className="label">{r.label}</div>
            </div>
          ))}
        </aside>
      </div>
    </section>
  );
}

function HeroB({ copy = heroCopy.b }) {
  return (
    <section className="hero variant-b" data-screen-label="Hero · B · Forest immersion">
      <div className="inner">
        <div className="eyebrow">{copy.eyebrow}</div>
        <h1>{copy.headline}</h1>
        <p className="lede">{copy.lede}</p>
        <div className="actions">
          <a href="#/contact" className="cta" onClick={(e)=>{e.preventDefault(); window.location.hash="#/contact";}}>
            {copy.primary}
          </a>
          <a href={copy.secondaryHref} className="secondary" onClick={(e)=>{e.preventDefault(); window.location.hash=copy.secondaryHref;}}>
            {copy.secondary} →
          </a>
        </div>
      </div>
    </section>
  );
}

function HeroC({ copy = heroCopy.c, showImagery = true }) {
  return (
    <section className="hero variant-c" data-screen-label="Hero · C · Image-paired">
      <div className="inner">
        <div>
          <div className="eyebrow">{copy.eyebrow}</div>
          <h1>{copy.headline}</h1>
          <p className="lede">{copy.lede}</p>
          <div className="actions">
            <a href="#/contact" className="cta" onClick={(e)=>{e.preventDefault(); window.location.hash="#/contact";}}>
              {copy.primary}
            </a>
            <a href={copy.secondaryHref} className="secondary" onClick={(e)=>{e.preventDefault(); window.location.hash=copy.secondaryHref;}}>
              {copy.secondary} →
            </a>
          </div>
        </div>
        {showImagery ? (
          <div className="image-side">
            <image-slot
              id="hero-c-portrait"
              placeholder="Editorial workshop photograph. Hands and work, not faces, per the de-identification posture."
              shape="rect"
            ></image-slot>
            <div className="caption-strip">Image direction · open</div>
          </div>
        ) : null}
      </div>
    </section>
  );
}

function Hero({ variant = "a", copy, showImagery = true }) {
  const fallback = heroCopy[variant] || heroCopy.a;
  const c = copy || fallback;
  if (variant === "b") return <HeroB copy={c} />;
  if (variant === "c") return <HeroC copy={c} showImagery={showImagery} />;
  return <HeroA copy={c} />;
}

Object.assign(window, { Hero, HeroA, HeroB, HeroC, heroCopy });