// Home page — shared primitives + 3 Hero variations
// Burgundy accent system-wide. RO copy. Conversion-funnel framing.
// v3: logo SVG inline, diacritice corecte, cifre reale (Amora/ITMAR/Trady), copy tuned pe avatar.

const BURGUNDY        = "#56151A";  // on light/white backgrounds
const BURGUNDY_BRIGHT = "#C4394A";  // on dark backgrounds (legible)
const BURGUNDY_HOVER  = "#6E1A22";
const BURGUNDY_DARK   = "#3F0E12";
const WARM_BLACK = "#262523";
const WARM_OFF   = "#FAF9F7";
const WARM_GREY  = "#71706E";
const BORDER_LIGHT = "#E8E6E3";
const BORDER_DARK  = "rgba(74,70,67,0.5)";

function useWindowWidth() {
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener('resize', h, { passive: true });
    return () => window.removeEventListener('resize', h);
  }, []);
  return w;
}

/* ---------------------------------------------------------------
   Global style injection (animations + diacritics fix)
--------------------------------------------------------------- */
(function injectStyles() {
  if (document.getElementById("ace-hero-styles")) return;
  const s = document.createElement("style");
  s.id = "ace-hero-styles";
  s.textContent = `
    html { scroll-behavior: smooth; }

    @keyframes heroFadeUp {
      from { opacity: 0; transform: translateY(56px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes heroScaleIn {
      from { opacity: 0; transform: scale(0.96) translateY(24px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    .hero-overline  { animation: heroFadeIn  0.5s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.05s; }
    .hero-h1        { animation: heroFadeUp  0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.18s; }
    .hero-body      { animation: heroFadeUp  0.6s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.34s; }
    .hero-cta       { animation: heroFadeUp  0.6s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.46s; }
    .hero-vsl       { animation: heroScaleIn 0.8s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.28s; }
    .hero-stats     { animation: heroFadeIn  0.6s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.6s;  }

    @keyframes pulse {
      0%   { box-shadow: 0 0 0 0   rgba(196,57,74,0.6); }
      70%  { box-shadow: 0 0 0 18px rgba(196,57,74,0); }
      100% { box-shadow: 0 0 0 0   rgba(196,57,74,0); }
    }
    .vsl-play { animation: pulse 2s infinite; }
  `;
  document.head.appendChild(s);
})();

/* ---------------------------------------------------------------
   Inline SVG logo — ACE Agency
   Uses currentColor for easy recoloring via CSS color prop.
--------------------------------------------------------------- */
const AceLogo = ({ color = "#fff", height = 44 }) => {
  const isLight = color && color !== "#fff" && color !== "#ffffff";
  return (
    <img
      src="/assets/ace-agency-logo.webp"
      alt="ACE Agency"
      style={{
        height,
        width: "auto",
        display: "block",
        filter: isLight ? "invert(1) brightness(0.15)" : "none",
      }}
    />
  );
};

/* ---------------------------------------------------------------
   Inline client-logo — stylized wordmark (variant-aware)
--------------------------------------------------------------- */
const ClientLogo = ({ name, variant = "sans", dark = false, size = 18, style = {} }) => {
  const color = dark ? "#E8E6E3" : "#4a4643";
  const families = {
    serif: "'Red Hat Display', Georgia, serif",
    sans:  "'Red Hat Display', Arial, sans-serif",
    mixed: "'Red Hat Display', Arial, sans-serif",
    tech:  "'Inter', monospace",
    italic:"'Red Hat Display', Georgia, serif",
  };
  const weights = { serif: 700, sans: 700, mixed: 500, tech: 600, italic: 500 };
  const transforms = { serif: "uppercase", sans: "uppercase", mixed: "none", tech: "uppercase", italic: "uppercase" };
  const styles = { serif: "normal", sans: "normal", mixed: "normal", tech: "normal", italic: "italic" };
  const trackings = { serif: "0.04em", sans: "0.06em", mixed: "-0.02em", tech: "0.14em", italic: "0.04em" };
  return (
    <span style={{
      fontFamily: families[variant],
      fontWeight: weights[variant],
      fontStyle: styles[variant],
      textTransform: transforms[variant],
      letterSpacing: trackings[variant],
      fontSize: size,
      color,
      opacity: 0.85,
      display: "inline-block",
      ...style
    }}>{name}</span>
  );
};

/* ---------------------------------------------------------------
   Shared primitives
--------------------------------------------------------------- */
const HContainer = ({ children, style = {}, ...rest }) => {
  const w = useWindowWidth();
  const p = w < 640 ? "0 16px" : w < 1024 ? "0 24px" : "0 32px";
  return (
    <div style={{ maxWidth: 1280, margin: "0 auto", padding: p, ...style }} {...rest}>{children}</div>
  );
};

const HOverline = ({ children, dark, style = {}, className = "" }) => (
  <div className={className} style={{ fontFamily: "Inter, system-ui, sans-serif", fontWeight: 600, fontSize: 12, textTransform: "uppercase", letterSpacing: "0.18em", color: dark ? "#D9D9D9" : WARM_GREY, ...style }}>{children}</div>
);

const HHeading = ({ as: Tag = "h2", children, style = {}, className = "" }) => (
  <Tag className={className} style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, margin: 0, lineHeight: 1.02, letterSpacing: "-0.03em", ...style }}>{children}</Tag>
);

const HBody = ({ children, style = {}, className = "" }) => (
  <p className={className} style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 19, lineHeight: 1.55, margin: 0, ...style }}>{children}</p>
);

function BCTA({ children, onClick, variant = "primary", size = "lg", style = {}, className = "", href }) {
  const [hover, setHover] = React.useState(false);
  const sizes = {
    sm: { height: 38, padding: "0 18px", fontSize: 13 },
    md: { height: 46, padding: "0 22px", fontSize: 14 },
    lg: { height: 54, padding: "0 30px", fontSize: 15 },
  };
  const variants = {
    primary: { background: hover ? BURGUNDY_HOVER : BURGUNDY, color: "#fff", border: "none", boxShadow: hover ? "0 10px 40px rgba(196,57,74,0.35)" : "none" },
    ghost:   { background: hover ? "rgba(255,255,255,0.06)" : "transparent", color: "#fff", border: "1px solid rgba(255,255,255,0.25)" },
    light:   { background: hover ? "#fff" : "transparent", color: hover ? BURGUNDY : "#fff", border: "1px solid #fff" },
    dark:    { background: hover ? "#1a1918" : WARM_BLACK, color: "#fff", border: "none" },
    outline: { background: "transparent", color: WARM_BLACK, border: `1px solid ${WARM_BLACK}` },
  };
  const Tag = href ? "a" : "button";
  return (
    <Tag onClick={onClick} href={href} className={className}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 10, cursor: "pointer", fontFamily: "Inter", fontWeight: 500, borderRadius: 9999, transition: "all 300ms cubic-bezier(0.16,1,0.3,1)", textDecoration: "none", ...sizes[size], ...variants[variant], ...style }}>
      {children}
    </Tag>
  );
}

const BGlow = ({ style = {} }) => (
  <div style={{ position: "absolute", width: 800, height: 800, background: "radial-gradient(circle, rgba(86,21,26,0.4), transparent 65%)", pointerEvents: "none", ...style }}/>
);

const LogoStrip = ({ dark }) => {
  const clients = [
    { name: "LEONOR",  variant: "serif" },
    { name: "TRADY",   variant: "sans" },
    { name: "doSense", variant: "mixed" },
    { name: "TUTTI",   variant: "italic" },
    { name: "AMORA",   variant: "serif" },
    { name: "ITMAR",   variant: "tech" },
  ];
  return (
    <div style={{ display: "flex", gap: 44, alignItems: "center", flexWrap: "wrap", opacity: 0.85 }}>
      {clients.map((c, i) => (
        <ClientLogo key={i} name={c.name} variant={c.variant} dark={dark} size={18}/>
      ))}
    </div>
  );
};

/* ---------------------------------------------------------------
   VSL Card — shared across heroes
--------------------------------------------------------------- */
function VSLCard({ style = {} }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <div className="hero-vsl" style={{ position: "relative", borderRadius: 20, overflow: "hidden", cursor: "pointer", background: "#1a1918", border: `1px solid ${BORDER_DARK}`, aspectRatio: "16/9", ...style }}
           onClick={() => setOpen(true)}>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg, rgba(38,37,35,0.55) 0%, rgba(64,14,18,0.75) 100%)", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 24 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div style={{ fontFamily: "Inter", fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.16em", color: "rgba(255,255,255,0.7)", background: "rgba(0,0,0,0.4)", padding: "6px 12px", borderRadius: 99 }}>▶ 2:47 min</div>
            <div style={{ fontFamily: "Inter", fontSize: 10, color: "rgba(255,255,255,0.55)" }}>Cazul Amora · +544% revenue</div>
          </div>
          <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div className="vsl-play" style={{ width: 72, height: 72, borderRadius: "50%", background: BURGUNDY_BRIGHT, display: "flex", alignItems: "center", justifyContent: "center", transition: "transform 200ms, background 200ms" }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
            </div>
          </div>
          <div>
            <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 18, color: "#fff", lineHeight: 1.2 }}>Cum am urcat un magazin de la 3× la 8× ROAS în afara sezonului.</div>
            <div style={{ fontFamily: "Inter", fontSize: 12, color: "rgba(255,255,255,0.65)", marginTop: 6 }}>Fără pitch. Doar procesul, ecranele și datele.</div>
          </div>
        </div>
        <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(90deg, transparent 0px, transparent 80px, rgba(255,255,255,0.015) 80px, rgba(255,255,255,0.015) 81px)", pointerEvents: "none" }}/>
      </div>

      {open && (
        <div onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 1000, background: "rgba(0,0,0,0.85)", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(8px)" }}>
          <div onClick={e => e.stopPropagation()} style={{ width: "min(520px, 90vw)", padding: "48px 40px", background: "#1a1918", border: `1px solid ${BORDER_DARK}`, borderRadius: 24, textAlign: "center", position: "relative" }}>
            <button onClick={() => setOpen(false)} style={{ position: "absolute", top: 16, right: 16, background: "transparent", border: `1px solid ${BORDER_DARK}`, color: "#fff", width: 32, height: 32, borderRadius: "50%", cursor: "pointer", fontSize: 18, display: "flex", alignItems: "center", justifyContent: "center", lineHeight: 1 }}>×</button>
            <div style={{ width: 72, height: 72, borderRadius: "50%", background: BURGUNDY, display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 24px" }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
            </div>
            <HHeading as="h3" style={{ fontSize: 26, color: "#fff", lineHeight: 1.2 }}>Video case study în curând.</HHeading>
            <HBody style={{ color: "#a0a0a0", marginTop: 12, fontSize: 15 }}>Studiul complet Amora — 3× → 8.11× ROAS în afara sezonului de vârf. Publicăm în curând.</HBody>
            <div style={{ marginTop: 28 }}>
              <BCTA onClick={() => setOpen(false)} variant="ghost">Închide</BCTA>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

/* ============================================================
   HERO VARIATIONS (3)
   ============================================================ */

// HERO 1 — Propunere de valoare clară + dovadă + VSL
function Hero_Specific({ onCTA }) {
  const w = useWindowWidth();
  const isMobile = w < 900;
  return (
    <section id="acasa" data-screen-label="01 Hero" itemScope itemType="https://schema.org/WebPage" style={{ background: WARM_BLACK, color: "#fff", padding: isMobile ? "100px 0 40px" : "160px 0 40px", position: "relative", overflow: "hidden" }}>
      <BGlow style={{ top: -280, right: -200 }}/>
      <HContainer style={{ position: "relative" }}>

        {/* Overline — ascuns pe mobil, redundant față de H1 */}
        {!isMobile && (
          <HOverline dark className="hero-overline">AGENȚIE DE PERFORMANCE MARKETING · BUCUREȘTI</HOverline>
        )}

        {/* H1 — primul în DOM pentru SEO/GEO, indiferent de layout */}
        <HHeading as="h1" className="hero-h1" style={{ fontSize: isMobile ? "clamp(1.75rem, 7vw, 2.6rem)" : "clamp(2.8rem, 5.5vw, 5.2rem)", color: "#fff", marginTop: isMobile ? 0 : 24, maxWidth: 900, lineHeight: isMobile ? 1.1 : 1.04 }}>
          Transformăm bugetul de ads în{" "}
          <span style={{ color: BURGUNDY_BRIGHT }}>revenue măsurabil</span>{" "}
          — pentru magazine online și branduri B2B.
        </HHeading>

        {/* Subtitlu "cel mai bun caz" — ascuns pe mobil */}
        {!isMobile && (
          <div className="hero-body" style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 15, color: "#a0a0a0", marginTop: 14 }}>
            Cel mai bun caz:{" "}
            <span style={{ color: BURGUNDY_BRIGHT, fontWeight: 600 }}>13.34× ROAS · 2.38M RON revenue generat · 16 luni de scalare continuă</span>
            {" "}— de la 632k la 2.38M RON fără să dublăm bugetul.
          </div>
        )}

        {isMobile ? (
          /* ── MOBILE LAYOUT ─────────────────────────────────────
             Ordine: H1 (sus, DOM first) → body scurt → CTA →
             trust badges → VSL full-width
          ─────────────────────────────────────────────────────── */
          <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 0 }}>
            <HBody className="hero-body" style={{ color: "#D9D9D9", fontSize: 16, lineHeight: 1.55 }}>
              Google Ads, Meta, TikTok — optimizate pe vânzări reale. ROAS țintă contractual. Un senior dedicat.
            </HBody>
            <div className="hero-cta" style={{ marginTop: 22 }}>
              <BCTA onClick={onCTA} style={{ width: "100%", justifyContent: "center" }}>Rezervă analiza gratuită →</BCTA>
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 14, fontFamily: "Inter", fontSize: 11, color: "#a0a0a0", flexWrap: "wrap" }}>
              <span>✓ Google Partner</span>
              <span>✓ Meta Business Partner</span>
              <span>✓ Audit gratuit</span>
            </div>
            <div style={{ marginTop: 24 }}>
              <VSLCard/>
            </div>
          </div>
        ) : (
          /* ── DESKTOP LAYOUT ────────────────────────────────────
             2 coloane: text stânga, VSL dreapta
          ─────────────────────────────────────────────────────── */
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 40, marginTop: 40, alignItems: "start" }}>
            <div>
              <HBody className="hero-body" style={{ color: "#D9D9D9", maxWidth: 500, fontSize: 19 }}>
                Google Ads, Meta, TikTok — optimizate săptămânal pe vânzări reale, nu pe CTR raportat de platformă. ROAS țintă contractual. Raport săptămânal. Un senior dedicat.
              </HBody>
              <div className="hero-cta" style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
                <BCTA onClick={onCTA}>Rezervă analiza gratuită →</BCTA>
                <BCTA variant="ghost" href="#rezultate">Vezi rezultatele</BCTA>
              </div>
              <div style={{ display: "flex", gap: 20, marginTop: 14, fontFamily: "Inter", fontSize: 12, color: "#a0a0a0", flexWrap: "wrap" }}>
                <span>✓ Google Partner</span>
                <span>✓ Meta Business Partner</span>
                <span>✓ Contract min. 90 zile</span>
                <span>✓ Audit gratuit</span>
              </div>
              <div className="hero-stats" style={{ display: "flex", gap: 32, marginTop: 32, paddingTop: 28, borderTop: `1px solid ${BORDER_DARK}`, flexWrap: "wrap" }}>
                {[["13.34×","ROAS maxim · portofoliu activ"],["5.4M+ RON","revenue total atribuit"],["-87%","reducere CPL · cel mai bun caz"],["6","industrii · 7+ clienți activi"]].map(([n,l],i) => (
                  <div key={i}>
                    <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 28, color: BURGUNDY_BRIGHT, letterSpacing: "-0.02em" }}>{n}</div>
                    <div style={{ fontFamily: "Inter", fontSize: 10, color: "#a0a0a0", marginTop: 3, textTransform: "uppercase", letterSpacing: "0.12em" }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <VSLCard/>
          </div>
        )}

      </HContainer>
    </section>
  );
}

// HERO 2 — Split · problemă vs. soluție
function Hero_Split({ onCTA }) {
  return (
    <section id="acasa" data-screen-label="01 Hero" style={{ background: WARM_BLACK, color: "#fff", padding: "160px 0 100px", position: "relative", overflow: "hidden" }}>
      <BGlow style={{ top: -300, left: "40%" }}/>
      <HContainer style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 72, alignItems: "center" }}>
          <div>
            <HOverline dark className="hero-overline">AGENȚIE DE CONVERSIE</HOverline>
            <HHeading as="h1" className="hero-h1" style={{ fontSize: "clamp(2.6rem, 6vw, 5rem)", color: "#fff", marginTop: 24, lineHeight: 0.98 }}>
              Oprește să cheltui pe<br/>reclame care nu vând.<br/><span style={{ color: BURGUNDY_BRIGHT }}>Începi să măsori.</span>
            </HHeading>
            <HBody className="hero-body" style={{ color: "#D9D9D9", marginTop: 28, maxWidth: 540, fontSize: 19 }}>
              Performance marketing pentru magazine online cu buget media serios. ROAS țintă contractual. Raport săptămânal. Un singur senior dedicat.
            </HBody>
            <div className="hero-cta" style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <BCTA onClick={onCTA}>Programează analiza →</BCTA>
              <BCTA variant="ghost" href="#servicii">Cum lucrăm</BCTA>
            </div>
            <div className="hero-stats" style={{ display: "flex", gap: 28, marginTop: 32, fontFamily: "Inter", fontSize: 12, color: "#a0a0a0", flexWrap: "wrap" }}>
              <span>✓ Google Partner</span><span>✓ Meta Business Partner</span><span>✓ TikTok Marketing Partner</span>
            </div>
          </div>
          <div className="hero-vsl" style={{ background: "linear-gradient(135deg, rgba(196,57,74,0.18), rgba(86,21,26,0.06))", border: `1px solid ${BORDER_DARK}`, borderRadius: 24, padding: 28 }}>
            <div style={{ fontFamily: "Inter", fontSize: 11, color: "#a0a0a0", letterSpacing: "0.12em", textTransform: "uppercase" }}>CAZ RECENT · AMORA</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 16 }}>
              <div style={{ background: BURGUNDY_BRIGHT, borderRadius: 16, padding: 20 }}>
                <div style={{ fontFamily: "Inter", fontSize: 10, color: "rgba(255,255,255,0.85)" }}>ROAS</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 40, color: "#fff", lineHeight: 1, marginTop: 8 }}>8.11×</div>
                <div style={{ fontFamily: "Inter", fontSize: 11, color: "rgba(255,255,255,0.75)", marginTop: 6 }}>de la 3.04×</div>
              </div>
              <div style={{ background: WARM_BLACK, border: `1px solid ${BORDER_DARK}`, borderRadius: 16, padding: 20 }}>
                <div style={{ fontFamily: "Inter", fontSize: 10, color: "#a0a0a0" }}>CPA</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 40, color: "#fff", lineHeight: 1, marginTop: 8 }}>-38%</div>
                <div style={{ fontFamily: "Inter", fontSize: 11, color: "#66F3A6", marginTop: 6 }}>în 3 luni</div>
              </div>
            </div>
            <div style={{ marginTop: 12, background: WARM_BLACK, border: `1px solid ${BORDER_DARK}`, borderRadius: 16, padding: 18 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                <span style={{ fontFamily: "Inter", fontSize: 10, color: "#a0a0a0", textTransform: "uppercase", letterSpacing: "0.12em" }}>REVENUE · 90 ZILE</span>
                <span style={{ fontFamily: "Inter", fontSize: 10, color: "#66F3A6" }}>▲ +544%</span>
              </div>
              <svg viewBox="0 0 300 70" style={{ width: "100%" }}>
                <path d="M0,55 L40,50 L80,48 L120,38 L160,32 L200,22 L240,14 L300,6" stroke={BURGUNDY_BRIGHT} strokeWidth="2" fill="none"/>
                <path d="M0,55 L40,50 L80,48 L120,38 L160,32 L200,22 L240,14 L300,6 L300,70 L0,70 Z" fill="url(#gradb)"/>
                <defs><linearGradient id="gradb" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stopColor={BURGUNDY_BRIGHT} stopOpacity="0.5"/><stop offset="1" stopColor={BURGUNDY_BRIGHT} stopOpacity="0"/></linearGradient></defs>
              </svg>
            </div>
            <div style={{ marginTop: 14, fontFamily: "Inter", fontSize: 12, color: "#D9D9D9" }}>
              „Revenue lei 118k → lei 765k, fără Black Friday." — Amora
            </div>
          </div>
        </div>
      </HContainer>
    </section>
  );
}

// HERO 3 — Bold editorial
function Hero_Bold({ onCTA }) {
  return (
    <section id="acasa" data-screen-label="01 Hero" style={{ background: WARM_BLACK, color: "#fff", padding: "160px 0 80px", position: "relative", overflow: "hidden" }}>
      <BGlow style={{ top: "20%", left: "-10%" }}/>
      <HContainer style={{ position: "relative" }}>
        <HOverline dark className="hero-overline">ACCEPTĂM 3 CLIENȚI NOI PE LUNĂ</HOverline>
        <HHeading as="h1" className="hero-h1" style={{ fontSize: "clamp(4rem, 12vw, 11rem)", color: "#fff", marginTop: 24, lineHeight: 0.86, letterSpacing: "-0.045em" }}>
          Venit,<br/>nu <span style={{ color: BURGUNDY_BRIGHT, fontFamily: "'Red Hat Display'", fontStyle: "italic", fontWeight: 500 }}>vanity</span><br/>metrics.
        </HHeading>
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 60, marginTop: 64, alignItems: "end" }}>
          <HBody className="hero-body" style={{ color: "#D9D9D9", maxWidth: 560, fontSize: 22 }}>
            Construim sisteme de conversie care transformă bugetul de ads în revenue măsurabil. Pentru magazine online și branduri B2B care vor să oprească risipa pe reach și impresii.
          </HBody>
          <div className="hero-cta" style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
            <BCTA onClick={onCTA}>Programează analiza →</BCTA>
            <BCTA variant="ghost" href="#rezultate">Studii de caz reale</BCTA>
          </div>
        </div>
      </HContainer>
    </section>
  );
}

/* ============================================================
   PROOF BAR (3)
   ============================================================ */

function Proof_Logos() {
  return (
    <section data-screen-label="02 Proof" style={{ background: WARM_BLACK, padding: "40px 0 80px", borderBottom: `1px solid ${BORDER_DARK}` }}>
      <HContainer>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
          <span style={{ fontFamily: "Inter", fontSize: 11, color: "#a0a0a0", textTransform: "uppercase", letterSpacing: "0.14em" }}>Branduri care ne-au ales</span>
          <LogoStrip dark/>
        </div>
      </HContainer>
    </section>
  );
}

function Proof_Stat() {
  const w = useWindowWidth();
  const isMobile = w < 640;
  const isTablet = w >= 640 && w < 1024;
  const proofStats = [
    { n: "200+",    l: "Proiecte livrate" },
    { n: "5.4M+",  l: "RON revenue atribuit" },
    { n: "13.34×", l: "ROAS maxim atins" },
    { n: "501+",   l: "Leads generate" },
  ];
  return (
    <section data-screen-label="02 Proof" style={{ background: BURGUNDY, padding: isMobile ? "40px 0" : "56px 0", color: "#fff" }}>
      <HContainer>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4,1fr)", gap: isMobile ? 28 : 0, marginBottom: 36 }}>
          {proofStats.map((s, i) => (
            <div key={i} style={{ textAlign: "center", padding: isMobile ? 0 : "0 20px", borderLeft: !isMobile && i > 0 ? "1px solid rgba(255,255,255,0.22)" : "none" }}>
              <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: isMobile ? 30 : isTablet ? 36 : 46, letterSpacing: "-0.02em", lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontFamily: "Inter", fontSize: 11, color: "rgba(255,255,255,0.72)", marginTop: 8, textTransform: "uppercase", letterSpacing: "0.12em" }}>{s.l}</div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,0.2)", paddingTop: 24 }}>
          <div style={{ fontFamily: "Inter", fontSize: 10, color: "rgba(255,255,255,0.55)", textTransform: "uppercase", letterSpacing: "0.16em", marginBottom: 14 }}>Branduri care ne-au ales</div>
          <LogoStrip dark/>
        </div>
      </HContainer>
    </section>
  );
}

function Proof_Certifications() {
  const w = useWindowWidth();
  const isMobile = w < 640;
  const certs = [
    { label: "Google Partner",        sub: "Ads · Analytics" },
    { label: "Meta Business Partner", sub: "Performance · Creative" },
    { label: "TikTok Marketing",      sub: "Paid Partner" },
  ];
  return (
    <section data-screen-label="02 Proof" style={{ background: WARM_BLACK, padding: isMobile ? "40px 0" : "60px 0", borderBottom: `1px solid ${BORDER_DARK}` }}>
      <HContainer>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 2fr", gap: isMobile ? 20 : 40, alignItems: "center" }}>
          <div>
            <HOverline dark>PARTENERI OFICIALI</HOverline>
            <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: isMobile ? 18 : 22, color: "#fff", marginTop: 10 }}>Certificări verificabile.</div>
          </div>
          <div style={{ display: "flex", gap: isMobile ? 10 : 28, alignItems: "center", justifyContent: isMobile ? "flex-start" : "flex-end", flexWrap: "wrap" }}>
            {certs.map((c,i) => (
              <div key={i} style={{ display: "flex", flexDirection: "column", padding: isMobile ? "10px 14px" : "12px 20px", border: `1px solid ${BORDER_DARK}`, borderRadius: 12, minWidth: isMobile ? 0 : 160, flex: isMobile ? "1 1 calc(33% - 8px)" : "none" }}>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: isMobile ? 11 : 14, color: "#fff", letterSpacing: "-0.01em" }}>✓ {c.label}</div>
                <div style={{ fontFamily: "Inter", fontSize: isMobile ? 9 : 10, color: "#a0a0a0", marginTop: 4, letterSpacing: "0.04em" }}>{c.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </HContainer>
    </section>
  );
}

Object.assign(window, {
  BURGUNDY, BURGUNDY_BRIGHT, BURGUNDY_HOVER, BURGUNDY_DARK,
  WARM_BLACK, WARM_OFF, WARM_GREY, BORDER_LIGHT, BORDER_DARK,
  HContainer, HOverline, HHeading, HBody, BCTA, BGlow, LogoStrip,
  AceLogo, ClientLogo, useWindowWidth,
  Hero_Specific, Hero_Split, Hero_Bold,
  Proof_Logos, Proof_Stat, Proof_Certifications,
});