/* global React, I */
// ===== HERO — 3 variants, i18n-driven =====

function Eyebrow({ children, center }) {
  return <span className={"eyebrow"+(center?" center":"")}>{children}</span>;
}

function HeroTitle({ h }) {
  return (<>{h.t1}<span className="grad-text">{h.emph}</span>{h.t2}</>);
}

function HeroCTA({ t, go }) {
  return (
    <div className="hero-cta">
      <a className="btn btn-primary btn-lg hero-cta-btn" href="#contacto" onClick={(e)=>go(e,"#contacto")}>
        {t.cta.sell2} <I.arrow />
      </a>
      <a className="btn btn-ghost btn-lg hero-cta-btn" href="#contacto" onClick={(e)=>go(e,"#contacto")}>
        {t.cta.buy}
      </a>
    </div>
  );
}

const TRUST_IC = ["euro","truck","shield"];
function HeroTrust({ h }) {
  return (
    <div className="hero-trust">
      {h.trust.map((tr,i)=>{ const Ic=I[TRUST_IC[i]]; return (
        <div className="ht" key={i}>
          <Ic /><div><b>{tr.b}</b><small>{tr.s}</small></div>
        </div>
      );})}
    </div>
  );
}

// ---- Variant A: Split with photo + floating stat ----
function HeroSplit({ t, contact, go }) {
  const h = t.hero;
  return (
    <section className="hero" id="inicio">
      <div className="wrap">
        <div className="hero-split">
          <div className="reveal in">
            <Eyebrow>{h.eyebrow}</Eyebrow>
            <h1 className="display" style={{marginTop:18}}><HeroTitle h={h} /></h1>
            <p className="lead">{h.lead}</p>
            <div style={{height:34}}></div>
            <HeroCTA t={t} go={go} />
            <HeroTrust h={h} />
          </div>
          <div className="reveal in d2">
            <div className="hero-photo">
              <img src="assets/warehouse-team.jpg" alt="Comprostock20" />
              <div className="float-pill"><span className="live"></span> {h.livePill}</div>
              <div className="float-card">
                <div className="fc-ic"><I.euro /></div>
                <div><b>{h.cardB}</b><small>{h.cardS}</small></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Variant B: Cinematic full-bleed ----
function HeroCine({ t, contact, go }) {
  const h = t.hero;
  return (
    <section className="hero hero-cine" id="inicio">
      <div className="hero-bg"><img src="assets/hero-warehouse.jpg" alt="Comprostock20" /></div>
      <div className="wrap">
        <div className="hero-inner reveal in">
          <h1 className="display"><HeroTitle h={h} /></h1>
          <p className="lead">{h.lead}</p>
          <div style={{height:34}}></div>
          <HeroCTA t={t} go={go} />
          <HeroTrust h={h} />
        </div>
      </div>
    </section>
  );
}

// ---- Variant C: Centered editorial + image strip ----
function HeroCentered({ t, contact, go }) {
  const h = t.hero;
  const imgs = ["assets/electronics-pallets.jpg","assets/store-home.jpg","assets/grid-stock.jpg","assets/warehouse-team.jpg"];
  return (
    <section className="hero" id="inicio">
      <div className="wrap">
        <div className="hero-center reveal in">
          <Eyebrow center>{h.eyebrow}</Eyebrow>
          <h1 className="display" style={{margin:"20px auto",maxWidth:"16ch"}}><HeroTitle h={h} /></h1>
          <p className="lead">{h.lead}</p>
          <div style={{height:34}}></div>
          <HeroCTA t={t} go={go} />
          <HeroTrust h={h} />
        </div>
      </div>
      <div className="wrap" style={{marginTop:54}}>
        <div className="strip reveal in d2">
          {imgs.map((s,i)=>(<div className="strip-img" key={i}><img src={s} alt="" /></div>))}
        </div>
      </div>
    </section>
  );
}

function Hero({ variant, t, contact, go }) {
  if (variant === "cine") return <HeroCine t={t} contact={contact} go={go} />;
  if (variant === "centered") return <HeroCentered t={t} contact={contact} go={go} />;
  return <HeroSplit t={t} contact={contact} go={go} />;
}
window.Hero = Hero;