// Hero — header section with provided key visual
function Hero({ variant = "Revelar", showMarquee = true }) {
  return (
    <section id="hero" style={{
      position: "relative",
      minHeight: "92vh",
      paddingTop: 110,
      paddingBottom: 80,
      overflow: "hidden",
      background: "var(--paper)",
    }}>
      <div className="container" style={{
        display: "grid",
        gridTemplateColumns: "0.9fr 1.1fr",
        gap: 60,
        alignItems: "center",
        position: "relative",
      }}>
        <div className="reveal">
          <div className="eyebrow" style={{ marginBottom: 28 }}>
            <span>Ana Paula Celis · Makeup Artist</span>
          </div>
          <h1 className="display" style={{
            fontSize: "clamp(48px, 6.2vw, 96px)",
            margin: "0 0 28px",
            color: "var(--coffee)",
            textWrap: "balance",
          }}>
            {t('heroHeadline1')}
            <span className="italic" style={{ color: "var(--rose)" }}>{t('heroHeadline2')}</span>
          </h1>
          <p className="body-lg" style={{ maxWidth: 520, marginBottom: 40, textWrap: "pretty" }}>
            {t('heroTagline')}
          </p>
          <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
            <a className="btn btn-primary" href="https://wa.me/523320126620" target="_blank" rel="noreferrer">
              {t('heroBookWhatsApp')}
            </a>
            <button className="btn btn-ghost" onClick={() => document.getElementById("about").scrollIntoView({ behavior: "smooth" })}>
              {t('heroSeeAbout')}
            </button>
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, auto)",
            gap: 0, marginTop: 80, maxWidth: 540,
            borderTop: "1px solid var(--marfil)",
            paddingTop: 28,
          }}>
            {[
              ["26", t('heroYearsExp')],
              ["WW", t('heroAvailable')],
              ["MX", t('heroBase')],
            ].map(([n, l], i) => (
              <div key={i} style={{
                paddingRight: 24,
                borderLeft: i === 0 ? "0" : "1px solid var(--marfil)",
                paddingLeft: i === 0 ? 0 : 24,
              }}>
                <div className="display" style={{ fontSize: 38, color: "var(--coffee)", lineHeight: 1 }}>{n}</div>
                <div className="eyebrow" style={{ marginTop: 8 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="reveal" style={{ animationDelay: "0.2s", position: "relative" }}>
          <img
            src={assetBase + "assets/images/anaprincipal.JPG"}
            alt="Ana Paula Celis en sesión de maquillaje"
            fetchpriority="high"
            decoding="async"
            style={{
              width: "100%",
              aspectRatio: "4/5",
              objectFit: "cover",
              borderRadius: 0,
              boxShadow: "0 30px 80px rgba(100,81,61,0.12)",
            }}
          />
        </div>
      </div>

      {showMarquee && (
      <div className="marquee" style={{ marginTop: 120, padding: "24px 0", borderTop: "1px solid var(--marfil)", borderBottom: "1px solid var(--marfil)" }}>
        <div className="marquee-track display italic" style={{ fontSize: 36, color: "var(--coffee)" }}>
          {Array(2).fill(0).map((_, k) => (
            <React.Fragment key={k}>
              <span>Bridal makeup</span><span style={{ color: "var(--rose)" }}>✦</span>
              <span>{t('heroMarqueeAvailable')}</span><span style={{ color: "var(--rose)" }}>✦</span>
              <span>{t('heroMarqueeBook')}</span><span style={{ color: "var(--rose)" }}>✦</span>
              <span>Ana Paula Celis Makeup Team</span><span style={{ color: "var(--rose)" }}>✦</span>
            </React.Fragment>
          ))}
        </div>
      </div>
      )}
    </section>
  );
}

window.Hero = Hero;