/* Hero — single reference design. Props: {t} */

function HeroCTAs({ t, tone = "light" }) {
  return (
    <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
      <a href="#contact" className="btn btn-gold btn-lg"><I.wa />{t.hero.primary}</a>
      <a href="https://www.instagram.com/villasimiuscharter/" target="_blank"
      className={"btn btn-ghost btn-lg" + (tone === "light" ? " on-deep" : "")}><I.ig />{t.hero.secondary}</a>
    </div>);

}

const FEAT_ICONS = { pin: I.pin, sail: I.sail, compass: I.compass, anchor: I.anchor, sun: I.sun };
function FeatureRow({ t, tone = "light" }) {
  const main = tone === "light" ? "rgba(255,255,255,.92)" : "var(--fg-2)";
  const gold = tone === "light" ? "var(--gold-300)" : "var(--gold-600)";
  return (
    <div className="hero-features" style={{ display: "flex", gap: "clamp(18px,2.6vw,40px)", flexWrap: "nowrap", alignItems: "flex-start" }} data-comment-anchor="0a680ee478-div-18-5">
      {t.hero.features.map((f, i) => {const Ic = FEAT_ICONS[f.icon] || I.anchor;return (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 11 }}>
          <Ic style={{ width: 22, height: 22, color: gold, flex: "0 0 auto" }} />
          <span style={{ fontSize: 13.5, fontWeight: 500, lineHeight: 1.3, color: main, letterSpacing: ".01em" }}>{f.label}</span>
        </div>);
      })}
    </div>);

}

/* Full-bleed cinematic hero — left-aligned, gradient scrim, feature row */
function HeroA({ t }) {
  return (
    <section style={{ position: "relative", minHeight: "92vh", display: "flex", alignItems: "center",
      overflow: "hidden" }}>
      <Slot id="heroA-bg" ph="Drop your hero film-still — boat on open sea, golden light" shape="rect"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: 0 }} />
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none",
        background: "linear-gradient(100deg,rgba(4,34,62,.88) 0%,rgba(4,34,62,.62) 34%,rgba(4,34,62,.2) 60%,rgba(4,34,62,.05) 100%)" }}></div>
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none",
        background: "linear-gradient(180deg,rgba(4,34,62,.45),transparent 22%,transparent 70%,rgba(4,34,62,.55))" }}></div>
      <div className="wrap" style={{ position: "relative", paddingTop: 120, paddingBottom: 60, width: "100%" }}>
        <div style={{ maxWidth: 620 }}>
          <span className="eyebrow on-deep" style={{ color: "var(--gold-300)" }}>{t.hero.eyebrow}</span>
          <h1 className="display light" style={{ margin: "22px 0 0", fontSize: "clamp(42px,5.4vw,76px)", fontWeight: 300 }}>
            {t.hero.h1a} {t.hero.h1b}<br /><span className="serif-italic gold-text">{t.hero.h1c}</span>
          </h1>
          <hr className="gold-rule" style={{ margin: "28px 0 26px" }} />
          <p className="lede" style={{ color: "rgba(255,255,255,.9)", marginBottom: 34, fontSize: "clamp(16px,1.4vw,19px)", maxWidth: "46ch" }}>{t.hero.sub}</p>
          <HeroCTAs t={t} tone="light" />
          <div style={{ marginTop: "clamp(34px,4vw,48px)" }}><FeatureRow t={t} tone="light" /></div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { HeroA, HeroCTAs, FeatureRow });