/* global React, ButtonFace, ButtonDot, PillButton, Kicker, TapeMeasure */
// Tito Atelier — three hero directions. Switchable live via Tweaks.
const { createElement: h, useState: useStateH, useEffect: useEffectH } = React;

function HeroActions({ t, onQuote, onServices, variant }) {
  return h(
    "div",
    { style: { display: "flex", flexWrap: "wrap", gap: 14, marginTop: 34 } },
    h(PillButton, { variant: variant === "bold" ? "solid" : "ink", icon: "bi-arrow-right-circle", onClick: onQuote }, t.cta.quote),
    h(PillButton, { variant: variant === "bold" ? "outline-light" : "outline", onClick: onServices }, t.cta.seeServices)
  );
}

/* ───────────────────────── A · ATELIER (refined, yellow) ───────────────────────── */
function HeroAtelier({ t, onQuote, onServices }) {
  return h(
    "header",
    { className: "hero hero-atelier", "data-screen-label": "Hero · Atelier", style: { background: "var(--yellow)" } },
    h("img", {
      src: "assets/tito-face-deep.png", alt: "", "aria-hidden": "true",
      style: { position: "absolute", right: "-40px", bottom: "-90px", width: "min(560px, 52vw)", opacity: 0.6, pointerEvents: "none" },
    }),
    h(
      "div",
      { className: "hero-inner", style: { position: "relative", zIndex: 2 } },
      h(Kicker, { children: t.hero.eyebrow, color: "var(--ink)" }),
      h(
        "h1",
        { className: "hero-h1", style: { color: "var(--ink)", marginTop: 22 } },
        t.hero.titles.atelier.map((line, i) => h("span", { key: i, style: { display: "block" } }, line))
      ),
      h("p", { className: "hero-sub", style: { color: "var(--ink)" } }, t.hero.sub),
      h(HeroActions, { t, onQuote, onServices, variant: "atelier" })
    ),
    h(
      "div",
      { className: "hero-foot" },
      h(TapeMeasure, { color: "var(--ink)", height: 22, ticks: 48, style: { width: "min(420px, 60vw)", opacity: 0.8 } }),
      h("span", { className: "hero-est" }, t.hero.est)
    )
  );
}

/* ───────────────────────── B · BOLD (ink, editorial, motion) ───────────────────────── */
function BlinkFace({ color }) {
  const [blink, setBlink] = useStateH(false);
  useEffectH(() => {
    let on = true;
    const loop = () => {
      if (!on) return;
      setBlink(true);
      setTimeout(() => setBlink(false), 150);
    };
    const id = setInterval(loop, 3800);
    return () => { on = false; clearInterval(id); };
  }, []);
  return h(
    "svg",
    { viewBox: "0 0 200 200", className: "blink-face", "aria-hidden": "true" },
    h("circle", { cx: 100, cy: 100, r: 92, stroke: color, strokeWidth: 10, fill: "none" }),
    h("ellipse", { cx: 100, cy: 72, rx: 11, ry: blink ? 2 : 11, fill: color, style: { transition: "ry .12s" } }),
    h("ellipse", { cx: 100, cy: 110, rx: 11, ry: blink ? 2 : 11, fill: color, style: { transition: "ry .12s" } }),
    h("path", { d: "M56 134 Q100 176 144 134", stroke: color, strokeWidth: 10, strokeLinecap: "round", fill: "none" })
  );
}

function HeroBold({ t, onQuote, onServices }) {
  const words = t.hero.titles.bold;
  return h(
    "header",
    { className: "hero hero-bold", "data-screen-label": "Hero · Bold", style: { background: "var(--ink)" } },
    h("span", { className: "hero-side-label" }, t.hero.est),
    h(
      "div",
      { className: "hero-inner hero-bold-inner" },
      h(
        "div",
        { className: "hero-bold-main" },
        h(Kicker, { children: t.hero.eyebrow, color: "var(--yellow)" }),
        h(
          "h1",
          { className: "hero-h1 hero-h1-xl", style: { color: "var(--yellow)", marginTop: 20 } },
          words.map((line, i) => h("span", { key: i, style: { display: "block" } }, line))
        ),
        h("p", { className: "hero-sub", style: { color: "rgba(255,255,255,.82)" } }, t.hero.sub),
        h(HeroActions, { t, onQuote, onServices, variant: "bold" })
      ),
      h("div", { className: "hero-bold-face" }, h(BlinkFace, { color: "var(--yellow)" }))
    ),
    h(
      "div",
      { className: "marquee" },
      h(
        "div",
        { className: "marquee-track" },
        [...t.hero.marquee, ...t.hero.marquee, ...t.hero.marquee].map((w, i) =>
          h(
            "span",
            { key: i, className: "marquee-item" },
            h(ButtonDot, { size: 16, color: "var(--ink)" }),
            w
          )
        )
      )
    )
  );
}

/* ───────────────────────── C · CRAFT (paper, tailoring details) ───────────────────────── */
function HeroCraft({ t, onQuote, onServices }) {
  const lines = t.hero.titles.craft;
  return h(
    "header",
    { className: "hero hero-craft", "data-screen-label": "Hero · Craft", style: { background: "var(--paper)" } },
    h("div", { className: "craft-grid", "aria-hidden": "true" }),
    h("img", {
      src: "assets/tito-face-ink.png", alt: "", "aria-hidden": "true",
      style: { position: "absolute", right: "7%", top: "15%", width: "260px", opacity: 0.07, pointerEvents: "none" },
    }),
    h(
      "div",
      { className: "hero-inner", style: { position: "relative", zIndex: 2 } },
      h(Kicker, { children: t.hero.eyebrow, color: "var(--ink)" }),
      h(
        "h1",
        { className: "hero-h1 hero-h1-craft", style: { color: "var(--ink)", marginTop: 22 } },
        lines.map((line, i) =>
          h(
            "span",
            { key: i, style: { display: "block", position: "relative" } },
            i === 1
              ? h("em", { className: "craft-em" }, line)
              : line
          )
        )
      ),
      h("p", { className: "hero-sub", style: { color: "var(--ink)" } }, t.hero.sub),
      h(HeroActions, { t, onQuote, onServices, variant: "craft" })
    ),
    h(
      "div",
      { className: "hero-foot craft-foot" },
      h(TapeMeasure, { color: "var(--ink)", height: 24, ticks: 64, style: { width: "100%", opacity: 0.7 } })
    )
  );
}

Object.assign(window, { HeroAtelier, HeroBold, HeroCraft });