// Hero V2 — full-bleed cinematic with photo background + glass form card
const HeroSection = ({ variantKey = "a", intent = "" }) => {
  const v = CONTENT.heroVariants[variantKey] || CONTENT.heroVariants.a;

  const renderH1 = () => {
    if (!v.h1Emphasis || !v.h1Emphasis.length) return v.h1;
    let parts = [v.h1];
    v.h1Emphasis.forEach(phrase => {
      parts = parts.flatMap(p => {
        if (typeof p !== "string") return [p];
        const idx = p.indexOf(phrase);
        if (idx === -1) return [p];
        return [p.slice(0, idx), <em key={phrase}>{phrase}</em>, p.slice(idx + phrase.length)];
      });
    });
    return parts;
  };

  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-bg" aria-hidden="true">
        <div
          className="hero-bg-image"
          style={{ backgroundImage: `url("${CONTENT.images.heroBg}")` }}
        />
      </div>

      <div className="container hero-content">
        <div className="hero-narrative">
          <Reveal as="span" className="eyebrow">
            <span className="num">01</span> {v.eyebrow}
          </Reveal>

          <Reveal delay={80}>
            <h1 className="h-display" style={{ marginTop: 20 }}>
              {renderH1()}
            </h1>
          </Reveal>

          <Reveal delay={160}>
            <p className="hero-sub">{v.sub}</p>
          </Reveal>

          <Reveal delay={240}>
            <div className="micro-proofs">
              {CONTENT.microProofs.map((m) => (
                <span key={m.label} className="micro-proof">
                  <Icon name={m.icon} size={14} />
                  {m.label}
                </span>
              ))}
            </div>
          </Reveal>

          <Reveal delay={320}>
            <div className="hero-ctas">
              <button
                type="button"
                className="btn btn-primary btn-lg"
                onClick={() => {
                  track("hero_cta_click", { target: "lead-form" });
                  scrollToId("lead-form-manifesto");
                }}
              >
                CLIQUE AQUI E CONHEÇA
                <Icon name="arrowR" size={16} />
              </button>
            </div>
          </Reveal>
        </div>
      </div>

      <div className="container">
        <div className="hero-locale">
          <span>Praia do Campeche · Florianópolis/SC</span>
          <span>1 min da praia · 15 min do aeroporto</span>
        </div>
      </div>
    </section>
  );
};

window.HeroSection = HeroSection;