// Shared hero shell — eyebrow, title, sub, CTA, subtle pills.
// Three variants (manifest / route / ledger) plug their own visual into <HeroStage>.

const { useEffect: useEffectHero, useRef: useRefHero, useState: useStateHero } = React;

const HERO_I18N = {
  en: {
    eyebrow: "China Bridge Auto · Shipping worldwide",
    titleA: "The newest car in China.",
    titleB: "Delivered to your door,",
    titleC: "anywhere.",
    sub: "Live China showroom prices. Made to order, container-shared, customs cleared, registered. No dealer markup. No middlemen.",
    cta: "Explore the catalog",
    wa: "Talk to us on WhatsApp",
    p1: "China showroom",
    p2: "China Bridge delivered",
    p3: "Local dealer",
    p1v: "$73,000",
    p2v: "from $98,500*",
    p3v: "not yet available",
    foot: "Live China showroom prices. We source on order.",
  },
  fr: {
    eyebrow: "China Bridge Auto · Expédition mondiale",
    titleA: "La voiture la plus récente de Chine.",
    titleB: "Livrée à votre porte,",
    titleC: "partout.",
    sub: "Prix showroom Chine en direct. Sur commande, conteneur partagé, dédouané, immatriculé. Sans marge concessionnaire. Sans intermédiaires.",
    cta: "Découvrir le catalogue",
    wa: "Discuter sur WhatsApp",
    p1: "Showroom Chine",
    p2: "Livré China Bridge",
    p3: "Concessionnaire local",
    p1v: "73 000 $",
    p2v: "dès 98 500 $*",
    p3v: "non disponible",
    foot: "Prix showroom Chine en direct. Nous sourçons sur commande.",
  },
  es: {
    eyebrow: "China Bridge Auto · Envío mundial",
    titleA: "El coche más nuevo de China.",
    titleB: "Entregado en tu puerta,",
    titleC: "donde sea.",
    sub: "Precio showroom de China en directo. Bajo pedido, contenedor compartido, despachado en aduana, matriculado. Sin margen de concesionario. Sin intermediarios.",
    cta: "Ver el catálogo",
    wa: "Hablar por WhatsApp",
    p1: "Showroom China",
    p2: "Entregado China Bridge",
    p3: "Concesionario local",
    p1v: "$73.000",
    p2v: "desde $98.500*",
    p3v: "aún no disponible",
    foot: "Precio showroom de China en directo. Sourcing bajo pedido.",
  },
  ar: {
    eyebrow: "تشاينا بريدج أوتو · شحن إلى العالم",
    titleA: "أحدث سيارة في الصين.",
    titleB: "تصل إلى بابك،",
    titleC: "أينما كنت.",
    sub: "أسعار معارض الصين مباشرة. بالطلب، حاوية مشتركة، الجمارك مخلّصة، مسجّلة. لا هامش للوكيل. لا وسطاء.",
    cta: "تصفح السيارات",
    wa: "للتواصل عبر واتساب",
    p1: "معرض الصين",
    p2: "تشاينا بريدج واصلة",
    p3: "وكيل محلي",
    p1v: "73,000 $",
    p2v: "من 98,500 $*",
    p3v: "غير متوفر بعد",
    foot: "أسعار معارض الصين مباشرة. نوردها بالطلب.",
  },
};

function HeroPills({ tx }) {
  return (
    <div className="hv-pills" aria-label="Price comparison">
      <div className="hv-pill">
        <span className="hv-pill-label">{tx.p1}</span>
        <span className="hv-pill-value">{tx.p1v}</span>
      </div>
      <div className="hv-pill hv-pill-accent">
        <span className="hv-pill-label">{tx.p2}</span>
        <span className="hv-pill-value">{tx.p2v}</span>
      </div>
      <div className="hv-pill hv-pill-muted">
        <span className="hv-pill-label">{tx.p3}</span>
        <span className="hv-pill-value">{tx.p3v}</span>
      </div>
    </div>
  );
}

function HeroStage({ lang, variant, children }) {
  const tx = HERO_I18N[lang] || HERO_I18N.en;
  const wa = (typeof WA !== "undefined" && WA.beirut) ? WA.beirut : "#";
  return (
    <section id="top" className={`hv ${variant ? "hv-v-" + variant : ""}`}>
      <div className="hv-bg" aria-hidden="true" />
      <div className="hv-grain" aria-hidden="true" />
      <div className="hv-wrap wrap">
        <div className="hv-eyebrow">{tx.eyebrow}</div>
        <h1 className="hv-title">
          <span className="hv-l1">{tx.titleA}</span>
          <span className="hv-l2"><em>{tx.titleB}</em> <span className="hv-accent">{tx.titleC}</span></span>
        </h1>
        <p className="hv-sub">{tx.sub}</p>
        <div className="hv-ctas">
          <a className="hv-cta" href="#receipts">{tx.cta} <span aria-hidden="true">→</span></a>
          <a className="hv-cta-link" href={wa} target="_blank" rel="noopener"
             onClick={() => window.fireAutoLead && window.fireAutoLead({ inquiry_source: "auto_hero_wa", request_kind: "WhatsApp interest", subject: "hero shell CTA", whatsapp: wa })}>{tx.wa}</a>
        </div>
        <HeroPills tx={tx} />
        <div className="hv-canvas">{children}</div>
        <div className="hv-foot">{tx.foot}</div>
      </div>
    </section>
  );
}

window.HERO_I18N = HERO_I18N;
window.HeroStage = HeroStage;
window.HeroPills = HeroPills;