// components-hero.jsx — Hero paper variant (light, off-white), single variant only
const { useState, useEffect, useRef } = React;

const SYSTEM_FLOW = [
  { k: 'src',  l: 'Meta · Google',   sub: 'Pauta' },
  { k: 'lead', l: 'Lead',            sub: 'Origen + contexto' },
  { k: 'crm',  l: 'CRM',             sub: 'Registro' },
  { k: 'foll', l: 'Seguimiento',     sub: 'Responsable' },
  { k: 'sale', l: 'Ventas',          sub: 'Avance comercial' },
];

function HeroFlow(){
  return (
    <div className="hero-flow" role="img" aria-label="Flujo del sistema: pauta a lead, lead a CRM, CRM a seguimiento, seguimiento a ventas">
      {SYSTEM_FLOW.map((s, i) => (
        <React.Fragment key={s.k}>
          <div className="hf-node" style={{'--i': i}} data-k={s.k}>
            <span className="hf-dot" aria-hidden="true"></span>
            <span className="hf-label">{s.l}</span>
            <span className="hf-sub">{s.sub}</span>
          </div>
          {i < SYSTEM_FLOW.length - 1 && (
            <div className="hf-line" style={{'--i': i}} aria-hidden="true">
              <div className="hf-line-fill"></div>
            </div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

function Hero({ onNavInvert }){
  const heroRef = useRef(null);
  const H = window.SINDICATO.HERO;

  // Nav stays in light mode for paper hero (no invert)
  useEffect(() => {
    if (onNavInvert) onNavInvert(false);
  }, [onNavInvert]);

  return (
    <section ref={heroRef} className="hero v-paper" id="top">
      <div className="hero-grid-bg" aria-hidden="true"></div>
      <div className="hero-bgword" aria-hidden="true">RESULTADO</div>

      <div className="hero-shell wrap-wide">
        <div className="hero-eyebrow">
          <span className="he-dot" aria-hidden="true"></span>
          <span>B2Boost Paid Media</span>
          <span className="he-sep" aria-hidden="true"></span>
          <span>by Sindicato</span>
          <span className="he-sep" aria-hidden="true"></span>
          <span>A Peltier Group company</span>
        </div>

        <h1 className="hero-headline">
          <span className="hh-line">{H.headline}</span>
        </h1>

        <p className="hero-sub">{H.sub}</p>

        <div className="hero-ctas">
          <a className="btn btn-primary" href={H.ctaPrimary.href}>
            <span className="lbl">{H.ctaPrimary.label}</span>
            <span className="ar" aria-hidden="true">↗</span>
          </a>
          <a className="btn btn-ghost" href={H.ctaSecondary.href}>
            <span className="lbl">{H.ctaSecondary.label}</span>
          </a>
        </div>

        <HeroFlow />

        <div className="hero-claim" aria-hidden="false">
          <span className="hc-rule" aria-hidden="true"></span>
          <span className="hc-label">Claim</span>
          <span className="hc-text">{H.claim}</span>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;