/* SpeakMind — hero, 3 switchable treatments. Centerpiece = HeroShowcase
   (text flowing into a real app window with the floating overlay docked over it). */

function HeroCTAs() {
  const t = window.SM.t;
  return (
    <div className="hero-ctas">
      <a className="btn btn-primary" href="#download"><span className="apple"></span> {t("Download for Mac")}</a>
      <a className="btn btn-ghost" href="#how"><span className="play"></span> {t("See how it works")}</a>
    </div>
  );
}

function HeroMeta() {
  const t = window.SM.t;
  return (
    <div className="hero-meta">
      <span><span className="ok">✓</span> {t("Free to start")}</span>
      <span><span className="ok">✓</span> macOS 15+</span>
      <span><span className="ok">✓</span> {t("7 languages + auto")}</span>
    </div>
  );
}

const HERO_SUB_EN = "SpeakMind turns messy speech into clean, ready-to-paste text — in any app, in any language. Hold a key, talk, let go. It's already written, and already in the doc.";
function HeroSub() {
  if (window.SM.locale === "en") {
    return (<>SpeakMind turns messy speech into <strong>clean, ready-to-paste text</strong> — in <strong>any app, in any language</strong>. Hold a key, talk, let go. <strong>It's already written, and already in the doc.</strong></>);
  }
  return <>{window.SM.t(HERO_SUB_EN)}</>;
}
const HERO_SUB = <HeroSub />;

function Showcase(props) { return window.SMShowcase.HeroShowcase(props); }

/* ---------- Variant A: split — headline left, live app showcase right ---------- */
function HeroSplit() {
  const t = window.SM.t;
  return (
    <div className="hero hero-split">
      <div className="hero-copy reveal in">
        <div className="eyebrow">{t("Voice-to-text for Mac")} · ⌥Space</div>
        <h1 className="hero-h1">{t("Stop typing.")}<br /><span className="ink-accent">{t("Just talk.")}</span></h1>
        <p className="hero-sub"><HeroSub /></p>
        <HeroCTAs />
        <HeroMeta />
      </div>
      <div className="hero-vis reveal in" data-d="2">
        <div className="hero-glow" />
        <window.SMShowcase.HeroShowcase />
      </div>
    </div>
  );
}

/* ---------- Variant B: centered — headline above, showcase front & center ---------- */
function HeroCentered() {
  return (
    <div className="hero hero-centered">
      <div className="hero-copy center reveal in">
        <div className="eyebrow">Voice-to-text for Mac · ⌥Space</div>
        <h1 className="hero-h1 big">Think out loud.<br /><span className="ink-accent">Ship it clean.</span></h1>
        <p className="hero-sub">{HERO_SUB}</p>
        <HeroCTAs />
        <HeroMeta />
      </div>
      <div className="hero-float reveal in" data-d="2">
        <div className="hero-glow center" />
        <window.SMShowcase.HeroShowcase />
      </div>
    </div>
  );
}

/* ---------- Variant C: editorial — oversized type + recording-dot motif ---------- */
function HeroEditorial() {
  return (
    <div className="hero hero-editorial">
      <div className="he-type reveal in">
        <div className="he-label mono"><span className="rec-dot" /> REC · 211 WPM · MULTILINGUAL</div>
        <h1 className="he-h1">TALK<br /><span className="he-thin">becomes</span><br /><span className="ink-accent">TEXT.</span></h1>
        <p className="hero-sub" style={{ marginTop: "26px" }}>{HERO_SUB}</p>
        <HeroCTAs />
        <HeroMeta />
      </div>
      <div className="he-side reveal in" data-d="2">
        <div className="hero-glow" />
        <window.SMShowcase.HeroShowcase />
      </div>
    </div>
  );
}

const HERO_VARIANTS = {
  split: { label: "Split", Comp: HeroSplit },
  centered: { label: "Centered", Comp: HeroCentered },
  editorial: { label: "Editorial", Comp: HeroEditorial },
};

window.SMHero = { HERO_VARIANTS };