// Hero — animated, more realistic EV silhouette driving on scroll.
// Realism upgrades: longer/lower SU7-style fastback proportions, paint
// highlight band, door + fender cut lines, side mirror, taillight light
// bar, multi-spoke aero wheels, ground reflection + contact shadow.
// Pills moved to LEFT edge of the stage so they don't congest the car.

const { useEffect: useEffectSU7, useRef: useRefSU7, useState: useStateSU7 } = React;

function SU7Hero({ lang = "en" }) {
  const wa = (typeof WA !== "undefined" && WA.beirut) ? WA.beirut : "#";
  const heroRef = useRefSU7(null);
  const [progress, setProgress] = useStateSU7(0);

  const I18N = {
    en: {
      eyebrow: "NEW · MAY 2026 · SHIPPING WORLDWIDE",
      titleA: "The newest car in China.",
      titleB: "Delivered to your door, anywhere.",
      sub: "Icon Automotives sources from the Chinese domestic market — the same Shenzhen showroom price, made to order, container-shared, customs cleared, registered, ready to drive. No dealer markup. No middlemen.",
      cta: "EXPLORE THE CARS",
      wa: "Talk to us on WhatsApp",
      trust: "Icon Automotives · est. 2003 · Exporting Chinese cars worldwide",
      brands: "Brands we source",
      tag: "XIAOMI SU7 ULTRA · 1,548 HP · NÜRBURGRING 6:46.87",
      p1l: "China showroom", p2l: "Icon One delivered", p3l: "Local dealer",
      p3v: "not yet available",
      mob3: "Local", mobNa: "n/a",
      foot: "*Indicative — SU7 Ultra sourcing pending OEM authorization. Reserve your spot.",
      scroll: "SCROLL",
    },
    fr: {
      eyebrow: "NOUVEAU · MAI 2026 · EXPÉDITION MONDE",
      titleA: "La voiture la plus récente de Chine.",
      titleB: "Livrée à votre porte, partout.",
      sub: "Icon Automotives sourcent depuis le marché domestique chinois — même prix qu'en showroom à Shenzhen, sur commande, conteneur partagé, dédouané, immatriculé, prêt à rouler. Aucune marge de concessionnaire. Aucun intermédiaire.",
      cta: "DÉCOUVRIR LE CATALOGUE",
      wa: "Discuter sur WhatsApp",
      trust: "Icon Automotives · depuis 2003 · Exportation de voitures chinoises dans le monde",
      brands: "Marques sourcées",
      tag: "XIAOMI SU7 ULTRA · 1 548 CH · NÜRBURGRING 6:46.87",
      p1l: "Showroom Chine", p2l: "Livré Icon One", p3l: "Concessionnaire local",
      p3v: "non disponible",
      mob3: "Local", mobNa: "n/d",
      foot: "*Indicatif — sourcing SU7 Ultra en attente d'autorisation OEM. Réservez votre place.",
      scroll: "DÉFILER",
    },
    es: {
      eyebrow: "NUEVO · MAYO 2026 · ENVÍO MUNDIAL",
      titleA: "El coche más nuevo de China.",
      titleB: "Entregado en tu puerta, donde sea.",
      sub: "Icon Automotives sourcing desde el mercado doméstico chino — el mismo precio de showroom en Shenzhen, bajo pedido, contenedor compartido, despachado en aduana, matriculado, listo para conducir. Sin margen de concesionario. Sin intermediarios.",
      cta: "VER EL CATÁLOGO",
      wa: "Hablar por WhatsApp",
      trust: "Icon Automotives · desde 2003 · Exportando coches chinos al mundo",
      brands: "Marcas que importamos",
      tag: "XIAOMI SU7 ULTRA · 1.548 CV · NÜRBURGRING 6:46.87",
      p1l: "Showroom China", p2l: "Entregado Icon One", p3l: "Concesionario local",
      p3v: "aún no disponible",
      mob3: "Local", mobNa: "n/d",
      foot: "*Indicativo — sourcing del SU7 Ultra pendiente de autorización OEM. Reserva tu plaza.",
      scroll: "DESPLAZAR",
    },
    ar: {
      eyebrow: "جديد · أيار ٢٠٢٦ · شحن إلى العالم",
      titleA: "أحدث سيارة في الصين.",
      titleB: "تصل إلى بابك، أينما كنت.",
      sub: "أيكون أوتو تورد مباشرة من السوق الصيني — نفس سعر المعرض في شنزن، بالطلب، حاوية مشتركة، الجمارك مخلّصة، مسجّلة، جاهزة للقيادة. لا هامش للوكيل. لا وسطاء.",
      cta: "تصفح السيارات",
      wa: "للتواصل عبر واتساب",
      trust: "أيكون أوتو · منذ ٢٠٠٣ · تصدير السيارات الصينية إلى العالم",
      brands: "علامات نوردها",
      tag: "شياومي SU7 أولترا · ١٬٥٤٨ حصان · نيوربورغرينغ 6:46.87",
      p1l: "معرض الصين", p2l: "أيكون واصلة", p3l: "وكيل محلي",
      p3v: "غير متوفر بعد",
      mob3: "محلي", mobNa: "غ/م",
      foot: "*إرشادي — توريد SU7 أولترا بانتظار تفويض المصنع. احجز مكانك.",
      scroll: "اسحب",
    },
  };
  const tx = I18N[lang] || I18N.en;

  useEffectSU7(() => {
    const el = heroRef.current;
    if (!el) return;
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        const r = el.getBoundingClientRect();
        const vh = window.innerHeight || 800;
        const total = r.height;
        const scrolled = Math.max(0, -r.top);
        const p = Math.max(0, Math.min(1, scrolled / Math.max(1, total - vh * 0.4)));
        setProgress(p);
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  const driveX = -22 + progress * 44;
  const wheelRot = progress * 1440;
  const lightBoost = 0.5 + progress * 0.5;

  return (
    <section id="top" className="su7-hero" ref={heroRef}>
      <div className="su7-bg" aria-hidden="true" />
      <div className="su7-noise" aria-hidden="true" />

      <div className="su7-wrap wrap">
        <div className="su7-copy">
          <div className="su7-eyebrow">{tx.eyebrow}</div>
          <h1 className="su7-title">
            {tx.titleA}<br />
            <span className="su7-title-2">{tx.titleB}</span>
          </h1>
          <p className="su7-sub">
            {tx.sub}
          </p>
          <div className="su7-ctas">
            <a className="su7-cta-primary" href="#receipts">{tx.cta} <span aria-hidden="true">→</span></a>
            <a className="su7-cta-link" href={wa} target="_blank" rel="noopener">{tx.wa}</a>
          </div>
          <div className="su7-trust">
            <span className="su7-trust-line">{tx.trust}</span>
            <div className="su7-logos" aria-label={tx.brands}>
              <svg className="su7-logo" viewBox="0 0 100 100" aria-label="BMW">
                <circle cx="50" cy="50" r="46" fill="none" stroke="currentColor" strokeWidth="4" />
                <circle cx="50" cy="50" r="32" fill="currentColor" opacity="0.18" />
                <path d="M50 18 A32 32 0 0 1 82 50 L50 50 Z" fill="currentColor" opacity="0.55" />
                <path d="M50 82 A32 32 0 0 1 18 50 L50 50 Z" fill="currentColor" opacity="0.55" />
                <circle cx="50" cy="50" r="32" fill="none" stroke="currentColor" strokeWidth="3" />
              </svg>
              <svg className="su7-logo su7-logo-word" viewBox="0 0 120 40" aria-label="BYD">
                <text x="60" y="30" textAnchor="middle" fontFamily="var(--sans)" fontWeight="800" fontSize="28" letterSpacing="2" fill="currentColor">BYD</text>
              </svg>
              <svg className="su7-logo" viewBox="0 0 100 100" aria-label="Xiaomi">
                <rect x="10" y="10" width="80" height="80" rx="22" fill="currentColor" opacity="0.85" />
                <text x="50" y="64" textAnchor="middle" fontFamily="var(--sans)" fontWeight="800" fontSize="34" fill="#1A2B4A">Mi</text>
              </svg>
              <svg className="su7-logo su7-logo-word" viewBox="0 0 160 40" aria-label="Jetour">
                <text x="80" y="30" textAnchor="middle" fontFamily="var(--sans)" fontWeight="800" fontSize="22" letterSpacing="3" fill="currentColor">JETOUR</text>
              </svg>
              <svg className="su7-logo su7-logo-word" viewBox="0 0 140 40" aria-label="Geely">
                <text x="70" y="30" textAnchor="middle" fontFamily="var(--sans)" fontWeight="800" fontSize="22" letterSpacing="3" fill="currentColor">GEELY</text>
              </svg>
            </div>
          </div>
        </div>

        <div className="su7-stage">
          <div className="su7-tag">{tx.tag}</div>

          {/* Pills moved to LEFT edge of stage so car (on right) has clear space */}
          <div className="su7-pill su7-pill-1">
            <span className="su7-pill-label">{tx.p1l}</span>
            <span className="su7-pill-value">$73,000</span>
            <span className="su7-pill-line su7-pill-line-1" aria-hidden="true" />
          </div>
          <div className="su7-pill su7-pill-2">
            <span className="su7-pill-label">{tx.p2l}</span>
            <span className="su7-pill-value su7-pill-accent">from $98,500*</span>
            <span className="su7-pill-line su7-pill-line-2" aria-hidden="true" />
          </div>
          <div className="su7-pill su7-pill-3">
            <span className="su7-pill-label">{tx.p3l}</span>
            <span className="su7-pill-value su7-pill-muted">{tx.p3v}</span>
            <span className="su7-pill-line su7-pill-line-3" aria-hidden="true" />
          </div>

          <div
            className="su7-car-float"
            style={{ transform: `translate(calc(-50% + ${driveX}%), -42%)` }}
          >
            <img
              className="su7-ev"
              src="assets/hero/xiaomi-su7-ultra.jpg"
              alt="Xiaomi SU7 Ultra"
              draggable="false"
            />
          </div>

          <div className="su7-mobile-strip">
            <div><span>China</span><strong>$73,000</strong></div>
            <div><span>Icon One</span><strong className="su7-pill-accent">from $98,500*</strong></div>
            <div><span>{tx.mob3}</span><strong className="su7-pill-muted">{tx.mobNa}</strong></div>
          </div>
        </div>
      </div>

      <div className="su7-foot wrap">
        <span>{tx.foot}</span>
        <a className="su7-scrollcue" href="#receipts" aria-label="Scroll to cars">
          <span className="su7-scrollcue-line" />
          <span className="su7-scrollcue-label">{tx.scroll}</span>
        </a>
      </div>

      <style>{`
        .su7-hero {
          position: relative;
          min-height: 100vh;
          display: flex; flex-direction: column;
          background: #1A2B4A;
          color: #F7F1E5;
          overflow: hidden;
          padding-top: 96px;
        }
        .su7-bg {
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse at 65% 55%, rgba(232,93,42,0.08) 0%, transparent 45%),
            radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 55%),
            radial-gradient(ellipse at 0% 100%, rgba(10,18,38,0.5) 0%, transparent 50%),
            linear-gradient(180deg, #1A2B4A 0%, #14213A 100%);
          pointer-events: none;
        }
        .su7-noise {
          position: absolute; inset: 0; pointer-events: none;
          opacity: 0.035; mix-blend-mode: overlay;
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
        }

        .su7-wrap {
          position: relative; z-index: 2;
          flex: 1;
          display: grid; grid-template-columns: 42% 58%;
          gap: 48px;
          align-items: center;
          padding-block: 64px;
        }
        .su7-copy { max-width: 540px; }

        .su7-eyebrow {
          font-family: var(--sans);
          font-size: 11px; font-weight: 500;
          letter-spacing: 0.22em; text-transform: uppercase;
          color: #E85D2A; margin-bottom: 28px;
        }
        .su7-title {
          font-family: var(--sans);
          font-weight: 700;
          font-size: clamp(44px, 6.2vw, 88px);
          line-height: 1.0; letter-spacing: -0.02em;
          color: #F7F1E5; margin: 0 0 28px;
        }
        .su7-title-2 { display: inline-block; opacity: 0.92; }
        .su7-sub {
          font-family: var(--sans);
          font-size: clamp(16px, 1.4vw, 20px);
          line-height: 1.6;
          color: rgba(247,241,229,0.72);
          margin: 0 0 36px; max-width: 480px;
        }
        .su7-ctas {
          display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
          margin-bottom: 40px;
        }
        .su7-cta-primary {
          display: inline-flex; align-items: center; gap: 10px;
          background: #E85D2A; color: #F7F1E5;
          padding: 16px 28px; border-radius: 999px;
          font-family: var(--sans); font-size: 13px; font-weight: 600;
          letter-spacing: 0.18em; text-transform: uppercase;
          text-decoration: none;
          transition: transform .25s ease, box-shadow .3s ease, background .25s ease;
        }
        .su7-cta-primary:hover { background: #ff7042; transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(232,93,42,0.5); }
        .su7-cta-link {
          color: #F7F1E5; text-decoration: none;
          font-size: 14px; font-weight: 500;
          border-bottom: 1px solid transparent; padding-bottom: 2px;
          transition: border-color .2s ease;
        }
        .su7-cta-link:hover { border-bottom-color: #F7F1E5; }
        .su7-trust { display: flex; flex-direction: column; gap: 16px; color: rgba(247,241,229,0.5); }
        .su7-trust-line { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; line-height: 1.65; }
        .su7-logos { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; color: rgba(247,241,229,0.72); }
        .su7-logo { height: 22px; width: auto; opacity: 0.85; }
        .su7-logo-word { height: 14px; }

        .su7-stage {
          position: relative;
          height: 100%;
          min-height: 600px;
          display: flex; align-items: center; justify-content: center;
        }

        .su7-tag {
          position: absolute; top: 12px; right: 0;
          background: #F7F1E5; color: #1A2B4A;
          font-family: var(--sans); font-size: 10px; font-weight: 600;
          letter-spacing: 0.16em; text-transform: uppercase;
          padding: 8px 14px; border-radius: 4px;
          z-index: 4;
          box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
        }

        /* Car centered & shifted up; sits clear of pills which are on the left */
        .su7-car-float {
          position: absolute;
          left: 58%; top: 50%;
          width: 88%;
          aspect-ratio: 1100 / 360;
          transform: translate(-50%, -42%);
          transition: transform .25s cubic-bezier(.2,.7,.2,1);
          will-change: transform;
          z-index: 2;
        }
        .su7-ev {
          width: 100%; height: 100%;
          display: block;
          object-fit: contain;
          filter: drop-shadow(0 22px 30px rgba(0,0,0,0.5));
        }

        /* Pills — stacked on LEFT edge of stage */
        .su7-pill {
          position: absolute; z-index: 3;
          background: rgba(247,241,229,0.06);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(247,241,229,0.16);
          border-radius: 999px;
          padding: 10px 16px;
          font-family: var(--sans);
          display: flex; align-items: baseline; gap: 10px;
          white-space: nowrap;
          box-shadow: 0 8px 20px -10px rgba(0,0,0,0.4);
        }
        .su7-pill-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,241,229,0.55); }
        .su7-pill-value { font-size: 14px; font-weight: 600; color: #F7F1E5; font-variant-numeric: tabular-nums; }
        .su7-pill-accent { color: #E85D2A; }
        .su7-pill-muted { color: rgba(247,241,229,0.5); font-weight: 500; }
        .su7-pill-line {
          position: absolute; height: 1px;
          background-image: linear-gradient(to right, rgba(247,241,229,0.35) 50%, transparent 50%);
          background-size: 6px 1px; background-repeat: repeat-x;
          pointer-events: none;
        }
        /* Three pills vertically arrayed at left edge */
        .su7-pill-1 { top: 18%;  left: 0; }
        .su7-pill-1 .su7-pill-line-1 { left: 100%; width: 36px; top: 50%; }
        .su7-pill-2 { top: 50%; left: 0; transform: translateY(-50%); border-color: rgba(232,93,42,0.45); }
        .su7-pill-2 .su7-pill-line-2 { left: 100%; width: 48px; top: 50%; }
        .su7-pill-3 { bottom: 18%; left: 0; }
        .su7-pill-3 .su7-pill-line-3 { left: 100%; width: 36px; top: 50%; }

        .su7-mobile-strip { display: none; }

        .su7-foot {
          position: relative; z-index: 2;
          padding-block: 24px 32px;
          display: flex; justify-content: space-between; align-items: center; gap: 16px;
          font-family: var(--sans); font-size: 11px;
          color: rgba(247,241,229,0.5);
          letter-spacing: 0.04em;
        }
        .su7-scrollcue {
          display: inline-flex; align-items: center; gap: 10px;
          color: rgba(247,241,229,0.5); text-decoration: none;
          font-size: 10px; letter-spacing: 0.22em;
        }
        .su7-scrollcue-line { width: 32px; height: 1px; background: rgba(247,241,229,0.4); }
        .su7-scrollcue:hover { color: #F7F1E5; }

        @media (max-width: 900px) {
          .su7-hero { padding-top: 88px; }
          .su7-wrap { grid-template-columns: 1fr; gap: 24px; padding-block: 24px 12px; }
          .su7-copy { max-width: 100%; }
          .su7-title { font-size: clamp(40px, 9vw, 52px); }
          .su7-sub { font-size: 16px; margin-bottom: 28px; }
          .su7-stage { min-height: 0; height: 56vh; max-height: 460px; }
          .su7-tag { top: 8px; font-size: 9px; padding: 6px 10px; }
          .su7-car-float { position: absolute; left: 50%; top: 38%; width: 110%; transform: translate(-50%, -50%); }
          .su7-pill { display: none; }
          .su7-mobile-strip {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            position: absolute; left: 0; right: 0; bottom: 0;
            background: rgba(247,241,229,0.12);
            border-top: 1px solid rgba(247,241,229,0.14);
            z-index: 4;
          }
          .su7-mobile-strip > div {
            display: flex; flex-direction: column; gap: 2px;
            padding: 10px 8px;
            background: rgba(26,43,74,0.85);
            backdrop-filter: blur(8px);
            font-family: var(--sans);
          }
          .su7-mobile-strip span { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,241,229,0.55); }
          .su7-mobile-strip strong { font-size: 13px; color: #F7F1E5; font-weight: 600; font-variant-numeric: tabular-nums; }
          .su7-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
        }

        @media (prefers-reduced-motion: reduce) {
          .su7-car-float { transition: none; }
        }
      `}</style>
    </section>
  );
}

window.SU7Hero = SU7Hero;