/* global React */
/* eslint-disable no-unused-vars */

const { useState, useEffect, useRef, useMemo } = React;

const VCFG = (typeof window !== "undefined" && window.VCF_CFG) || {};

/* ============================================================
   ICONS
   ============================================================ */

const Icon = {
  Arrow: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
    </svg>
  ),
  Copy: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="9" width="13" height="13" rx="2.5" />
      <path d="M5 15V5a2 2 0 0 1 2-2h10" />
    </svg>
  ),
  Check: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="m5 12 5 5L20 7" />
    </svg>
  ),
  ChevronDown: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="m6 9 6 6 6-6" />
    </svg>
  ),
  Pin: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  ),
  Menu: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M4 7h16M4 12h16M4 17h16" />
    </svg>
  ),
  Instagram: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r=".8" fill="currentColor" />
    </svg>
  ),
};

/* ============================================================
   NAV
   ============================================================ */

function VCNav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = VCFG.nav || [
    ["Inicio", "index.html"],
    ["Cómo funciona", "index.html#como"],
    ["Sucursales", "index.html#sucursales"],
    ["Rastrear", "index.html#rastreo"],
    ["Franquicias", "franquicias.html"],
  ];

  return (
    <header
      style={{
        position: "sticky", top: 0, zIndex: 50,
        backdropFilter: "blur(12px) saturate(140%)",
        WebkitBackdropFilter: "blur(12px) saturate(140%)",
        background: scrolled ? "rgba(10,37,68,.98)" : "rgba(10,37,68,.9)",
        borderBottom: scrolled ? "1px solid rgba(255,255,255,.08)" : "1px solid rgba(255,255,255,.06)",
        transition: "background .25s ease, border-color .25s ease",
      }}
    >
      <div className="vc-shell" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 104 }}>
        <a href={VCFG.homeUrl || "index.html"} style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <VCWordmark />
        </a>

        <nav style={{ display: "flex", alignItems: "center", gap: 4 }} className="vc-nav-links">
          {links.map(([label, href]) => (
            <a key={label} href={href} style={{
              padding: "8px 14px", fontSize: 14, fontWeight: 600,
              color: "rgba(255,255,255,.92)", borderRadius: "var(--r-pill)", transition: "background .15s ease",
            }}
              onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255,255,255,.14)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
            >{label}</a>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href={VCFG.accountUrl || "#login"} className="vc-nav-account" style={{ fontSize: 14, fontWeight: 600, padding: "8px 14px", color: "#fff" }}>Mi cuenta</a>
          <a href={VCFG.registerUrl || "#register"} className="vc-btn vc-btn--yellow" style={{ padding: "10px 18px", fontSize: 14 }}>
            Crear mi casillero
            <span className="vc-btn__arrow"><Icon.Arrow size={14} /></span>
          </a>
          <button className="vc-nav-burger" aria-label="Menú" onClick={() => setOpen((v) => !v)}
            style={{ width: 44, height: 44, borderRadius: 12, border: "1.5px solid rgba(255,255,255,.4)", background: "rgba(255,255,255,.08)", placeItems: "center", color: "#fff" }}
          >
            <Icon.Menu size={20} />
          </button>
        </div>
      </div>

      {open && (
        <div style={{ borderTop: "1px solid rgba(255,255,255,.1)", background: "var(--vc-navy)", padding: "12px 20px 18px" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {links.map(([label, href]) => (
              <a key={label} href={href} onClick={() => setOpen(false)} style={{ padding: "13px 12px", fontSize: 16, fontWeight: 600, color: "#fff", borderRadius: 10, borderBottom: "1px solid rgba(255,255,255,.1)" }}>{label}</a>
            ))}
            <a href={VCFG.accountUrl || "#login"} onClick={() => setOpen(false)} style={{ padding: "13px 12px", fontSize: 16, fontWeight: 700, color: "var(--vc-yellow)" }}>Mi cuenta</a>
          </div>
        </div>
      )}
    </header>
  );
}

function VCWordmark() {
  if (VCFG.logo) {
    return <img src={VCFG.logo} alt="Vía Courier" style={{ height: 90, width: "auto", display: "block", filter: "brightness(0) invert(1)" }} />;
  }
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <div style={{ width: 36, height: 36, borderRadius: 12, background: "var(--vc-navy)", display: "grid", placeItems: "center", color: "var(--vc-yellow)", boxShadow: "0 2px 0 var(--vc-blue-deep)" }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M3 12c5-7 13-7 18 0-5 7-13 7-18 0Z" stroke="currentColor" strokeWidth="1.8" />
          <path d="M9 7l8 5-8 5" fill="currentColor" />
        </svg>
      </div>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 20, letterSpacing: "-0.02em" }}>Vía Courier</span>
        <span style={{ fontSize: 10, fontWeight: 600, color: "var(--vc-ink-mute)", letterSpacing: ".18em", marginTop: 3, textTransform: "uppercase" }}>¡Tu Courier!</span>
      </div>
    </div>
  );
}

/* ============================================================
   HERO
   ============================================================ */

function VCHero() {
  return (
    <section id="top" style={{ position: "relative", marginTop: -104, paddingTop: 152, paddingBottom: 110, overflow: "hidden", background: "radial-gradient(120% 120% at 80% -10%, var(--vc-blue-deep) 0%, var(--vc-navy) 55%, #04122a 100%)", color: "#fff" }}>
      <HeroBackdrop />

      <div className="vc-shell" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "center" }} className="vc-hero-grid">
          <div>
            <span className="vc-eyebrow" style={{ color: "var(--vc-yellow)" }}>La vía directa · Miami → RD</span>

            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(50px, 6.8vw, 100px)", lineHeight: 0.92, letterSpacing: "-0.04em", margin: "20px 0 0", color: "#fff", textWrap: "balance" }}>
              Compra en <em style={{ fontStyle: "normal", background: "var(--vc-yellow)", color: "var(--vc-navy)", padding: "0 .14em", borderRadius: 6, boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone" }}>USA.</em><br />
              Recibe en <span style={{ position: "relative", display: "inline-block" }}>
                RD.
                <svg width="120" height="14" viewBox="0 0 120 14" fill="none" style={{ position: "absolute", left: 0, bottom: -8, width: "100%" }}>
                  <path d="M2 9 C 30 1, 60 13, 118 5" stroke="var(--vc-yellow)" strokeWidth="4" strokeLinecap="round" fill="none" />
                </svg>
              </span>
            </h1>

            <p style={{ fontSize: 19, lineHeight: 1.55, color: "rgba(255,255,255,.78)", maxWidth: "46ch", marginTop: 32 }}>
              Tu dirección en Miami es la <strong style={{ color: "#fff" }}>única vía</strong> que necesitas
              para comprar en Amazon, Shein, eBay y miles de tiendas. Sin desvíos, sin sorpresas:
              directo a tu <strong style={{ color: "var(--vc-yellow)" }}>sucursal más cercana</strong>.
            </p>

            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a href={VCFG.registerUrl || "#register"} className="vc-btn vc-btn--yellow">
                Crear mi casillero gratis
                <span className="vc-btn__arrow"><Icon.Arrow /></span>
              </a>
              <a href="#address" className="vc-btn vc-btn--ghost-light">
                Ver mi dirección Miami
              </a>
            </div>

            <div style={{ display: "flex", gap: 32, marginTop: 56, flexWrap: "wrap", paddingTop: 28, borderTop: "1px solid rgba(255,255,255,.14)" }}>
              <Stat n="25+" label="Años de experiencia" light />
              <Stat n="+250K" label="Paquetes al año" light />
              <Stat n="70+" label="Sucursales en el país" light />
            </div>
          </div>

          <CasilleroCard />
        </div>

        <RouteRibbon />
      </div>

      <div style={{ position: "absolute", bottom: 24, left: "50%", transform: "translateX(-50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 6, color: "rgba(255,255,255,.55)", fontSize: 11, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", animation: "vc-bob 2.4s ease-in-out infinite" }}>
        Desliza
        <Icon.ChevronDown />
      </div>
    </section>
  );
}

function Stat({ n, label, light }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 34, letterSpacing: "-0.03em", lineHeight: 1, color: light ? "#fff" : "var(--vc-ink)" }}>{n}</div>
      <div style={{ fontSize: 12, color: light ? "rgba(255,255,255,.6)" : "var(--vc-ink-mute)", marginTop: 6, fontWeight: 500 }}>{label}</div>
    </div>
  );
}

function HeroBackdrop() {
  return (
    <>
      <div aria-hidden style={{ position: "absolute", right: "6%", top: "6%", width: 620, height: 620, borderRadius: "50%", background: "radial-gradient(circle at 40% 40%, rgba(42,148,230,.55), transparent 60%)", filter: "blur(10px)", pointerEvents: "none" }} />
      <div aria-hidden style={{ position: "absolute", left: "-6%", bottom: "-10%", width: 420, height: 420, borderRadius: "50%", background: "radial-gradient(circle at 50% 50%, rgba(206,178,115,.22), transparent 62%)", pointerEvents: "none" }} />
      <svg aria-hidden style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", opacity: .5, pointerEvents: "none" }}>
        <defs>
          <pattern id="dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="1" fill="rgba(255,255,255,.10)" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#dots)" />
      </svg>
    </>
  );
}

function RouteRibbon() {
  const stops = [
    { k: "01", t: "Compras en USA", s: "Amazon · Shein · eBay", icon: "🛒" },
    { k: "02", t: "Llega a Miami", s: "Doral, FL — nuestra vía", icon: "🏬" },
    { k: "03", t: "Recibes en RD", s: "Tu sucursal más cercana", icon: "📦" },
  ];
  return (
    <div style={{ marginTop: 64, position: "relative", background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.14)", borderRadius: 20, padding: "22px 26px", backdropFilter: "blur(6px)" }}>
      <div style={{ position: "absolute", top: -11, left: 26, fontSize: 11, fontWeight: 800, letterSpacing: ".16em", textTransform: "uppercase", background: "var(--vc-yellow)", color: "var(--vc-navy)", padding: "3px 12px", borderRadius: 6 }}>Una sola vía</div>

      <div style={{ position: "relative" }}>
        <svg aria-hidden width="100%" height="4" viewBox="0 0 100 4" preserveAspectRatio="none" style={{ position: "absolute", left: 0, right: 0, top: 22, width: "100%", height: 4 }}>
          <line x1="2" y1="2" x2="98" y2="2" stroke="rgba(255,255,255,.22)" strokeWidth="2" strokeDasharray="4 4" style={{ animation: "vc-dash 1.4s linear infinite" }} />
        </svg>
        <div aria-hidden style={{ position: "absolute", top: 4, left: 0, width: "100%", pointerEvents: "none" }}>
          <div style={{ position: "absolute", top: 0, animation: "vc-leg1 6s linear infinite", transform: "translateX(-50%)", fontSize: 22, filter: "drop-shadow(0 4px 8px rgba(0,0,0,.4))" }}>✈️</div>
          <div style={{ position: "absolute", top: 2, animation: "vc-leg2 6s linear infinite", transform: "translateX(-50%)", fontSize: 20, filter: "drop-shadow(0 4px 8px rgba(0,0,0,.4))" }}>🚚</div>
        </div>

        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="vc-route-stops">
          {stops.map((st, i) => (
            <div key={st.k} style={{ display: "flex", flexDirection: "column", alignItems: i === 0 ? "flex-start" : i === 2 ? "flex-end" : "center", textAlign: i === 0 ? "left" : i === 2 ? "right" : "center" }}>
              <div style={{ width: 46, height: 46, borderRadius: "50%", background: i === 1 ? "var(--vc-yellow)" : "var(--vc-navy)", border: "3px solid " + (i === 1 ? "var(--vc-yellow)" : "rgba(255,255,255,.6)"), display: "grid", placeItems: "center", fontSize: 20, marginBottom: 12, boxShadow: i === 1 ? "0 0 0 6px rgba(206,178,115,.18)" : "none" }}>{st.icon}</div>
              <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: ".14em", color: "var(--vc-yellow)" }}>PARADA {st.k}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, marginTop: 2, color: "#fff" }}>{st.t}</div>
              <div style={{ fontSize: 12, color: "rgba(255,255,255,.6)", marginTop: 2 }} className="vc-route-copy">{st.s}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function CasilleroCard() {
  return (
    <div style={{ position: "relative", display: "grid", placeItems: "center" }}>
      <div aria-hidden style={{ position: "absolute", inset: -28, animation: "vc-spin 28s linear infinite", zIndex: 0, opacity: .55 }}>
        <svg viewBox="0 0 200 200" width="100%" height="100%">
          <defs>
            <path id="circle" d="M 100,100 m -85,0 a 85,85 0 1,1 170,0 a 85,85 0 1,1 -170,0" />
          </defs>
          <text fontSize="9" fontFamily="Plus Jakarta Sans" fontWeight="700" letterSpacing="6" fill="rgba(255,255,255,.7)">
            <textPath href="#circle">¡TU COURIER! · DESDE 1997 · ¡TU COURIER! · DESDE 1997 ·  </textPath>
          </text>
        </svg>
      </div>

      <div style={{ position: "relative", zIndex: 1, width: "100%", maxWidth: 440, background: "linear-gradient(155deg, var(--vc-blue) 0%, var(--vc-blue-deep) 60%, var(--vc-navy) 100%)", color: "#fff", borderRadius: 28, padding: "28px 28px 24px", boxShadow: "0 30px 80px -26px rgba(4,18,42,.7), 0 0 0 1px rgba(42,148,230,.35)", transform: "rotate(-2.5deg)", transition: "transform .4s cubic-bezier(.2,.7,.2,1)" }}
        onMouseEnter={(e) => e.currentTarget.style.transform = "rotate(0deg) translateY(-4px)"}
        onMouseLeave={(e) => e.currentTarget.style.transform = "rotate(-2.5deg)"}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--vc-yellow)", fontWeight: 600 }}>Casillero · Member</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, marginTop: 4 }}>Vía Courier</div>
          </div>
          <div style={{ background: "var(--vc-yellow)", color: "var(--vc-ink)", padding: "6px 12px", borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: ".06em" }}>TAX FREE</div>
        </div>

        <div style={{ marginTop: 28, padding: "18px 18px", background: "rgba(255,255,255,.04)", border: "1px dashed rgba(245,179,36,.45)", borderRadius: 16, fontFamily: "var(--font-mono)", fontSize: 14, lineHeight: 1.6 }}>
          <div style={{ opacity: .55, fontSize: 10, letterSpacing: ".22em", marginBottom: 6 }}>SHIPPING ADDRESS</div>
          [Tu nombre] VIA-<span style={{ color: "var(--vc-yellow)" }}>00427</span><br />
          7715 NW 46th Street<br />
          Doral, FL 33195<br />
          +1-305-848-1017
        </div>

        <div style={{ marginTop: 22, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: ".22em", opacity: .55, textTransform: "uppercase", fontWeight: 600 }}>Member desde</div>
            <div style={{ fontWeight: 600, marginTop: 3 }}>06 / 2026</div>
          </div>
          <div style={{ width: 42, height: 30, borderRadius: 6, background: "linear-gradient(135deg, #F5B324, #C98807)", position: "relative" }}>
            <svg viewBox="0 0 42 30" style={{ position: "absolute", inset: 0 }}>
              <g stroke="rgba(15,24,32,.4)" strokeWidth=".8" fill="none">
                <rect x="4" y="4" width="34" height="22" rx="3" />
                <path d="M4 15h34M21 4v22" />
              </g>
            </svg>
          </div>
        </div>
      </div>

      <div style={{ position: "absolute", left: "5%", bottom: "-2%", zIndex: 2, transform: "rotate(-12deg)" }}>
        <Stamp color="var(--vc-red)" text="USPS · MIA" />
      </div>
      <div style={{ position: "absolute", right: "0%", top: "-2%", zIndex: 2, transform: "rotate(8deg)" }}>
        <Stamp color="var(--vc-yellow-deep)" text="AIR MAIL" />
      </div>

      {/* Sello de credibilidad */}
      <div className="vc-seal-hero" style={{ position: "absolute", right: "-4%", bottom: "-12%", zIndex: 4, transform: "rotate(-8deg)" }}>
        <Seal size={132} />
      </div>
    </div>
  );
}

function Stamp({ color, text }) {
  return (
    <div style={{ border: `2px solid ${color}`, color, padding: "6px 12px", borderRadius: 6, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13, letterSpacing: ".14em", textTransform: "uppercase", background: "var(--vc-white)", backdropFilter: "blur(2px)" }}>{text}</div>
  );
}

/* Sello — Aduaneros desde 1997 */
function Seal({ size = 150 }) {
  return (
    <div className="vc-seal" style={{ "--size": size + "px" }}>
      <div className="vc-seal-glow"></div>
      <div className="vc-seal-ring"></div>
      <div className="vc-seal-shine"></div>
      <div className="vc-seal-accent"></div>
      <div className="vc-seal-face">
        <div className="vc-seal-top">Aduaneros</div>
        <div className="vc-seal-desde">desde</div>
        <div className="vc-seal-year">1997</div>
        <div className="vc-seal-icon">
          <svg viewBox="0 0 64 64" fill="none">
            <path d="M32 6 54 16 32 26 10 16Z" fill="#fff" />
            <path d="M10 16 32 26 32 58 10 48Z" fill="#fff" opacity=".85" />
            <path d="M54 16 32 26 32 58 54 48Z" fill="#fff" opacity=".7" />
            <circle cx="48" cy="48" r="13" fill="var(--vc-navy)" stroke="#fff" strokeWidth="2.5" />
            <path d="M48 53c-4-2.6-6-4.6-6-7a3.4 3.4 0 0 1 6-2.1A3.4 3.4 0 0 1 54 46c0 2.4-2 4.4-6 7Z" fill="#fff" />
          </svg>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   MIAMI ADDRESS
   ============================================================ */

function VCAddress() {
  const [copied, setCopied] = useState(false);
  const fullAddress = "7715 NW 46th Street\nDoral, FL 33195\n+1-305-848-1017";

  const onCopy = async () => {
    try {
      await navigator.clipboard.writeText(fullAddress);
      setCopied(true);
      setTimeout(() => setCopied(false), 2200);
    } catch {
      setCopied(true);
      setTimeout(() => setCopied(false), 2200);
    }
  };

  return (
    <section id="address" style={{ padding: "104px 0", background: "linear-gradient(135deg, var(--vc-blue-deep) 0%, var(--vc-navy) 100%)", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{ position: "absolute", inset: 0, opacity: .9, pointerEvents: "none" }}>
        <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1440 600">
          <path d="M0 540 L1440 220 L1440 600 L0 600 Z" fill="rgba(245,179,36,.06)" />
        </svg>
      </div>

      <div className="vc-shell" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 80, alignItems: "center" }} className="vc-address-grid">
          <div>
            <span className="vc-eyebrow" style={{ color: "var(--vc-yellow)" }}>Tu dirección en Miami</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(40px, 4.6vw, 64px)", lineHeight: 1.02, letterSpacing: "-0.03em", margin: "16px 0 0", textWrap: "balance" }}>
              Copia y pega <br /> al momento de comprar.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: "rgba(251,246,236,.7)", maxWidth: "42ch", marginTop: 24 }}>
              Úsala como dirección de envío en cualquier tienda online de Estados Unidos.
              Nosotros la recibimos en Doral, FL y la enviamos a tu sucursal favorita en RD.
            </p>
          </div>

          <div style={{ background: "var(--vc-cream)", color: "var(--vc-ink)", borderRadius: 28, padding: "32px 36px 28px", boxShadow: "0 40px 80px -30px rgba(0,0,0,.5)", position: "relative", overflow: "hidden" }}>
            <div aria-hidden style={{ position: "absolute", top: -8, left: "8%", width: 110, height: 28, background: "var(--vc-yellow)", opacity: .85, transform: "rotate(-3deg)", boxShadow: "0 4px 8px rgba(0,0,0,.06)" }} />

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--vc-ink-mute)", letterSpacing: ".18em", textTransform: "uppercase" }}>Shipping Address</div>
            </div>

            <pre style={{ fontFamily: "var(--font-mono)", fontSize: 18, lineHeight: 1.7, margin: 0, color: "var(--vc-ink)", whiteSpace: "pre-wrap", fontWeight: 500 }}>{fullAddress}</pre>

            <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
              <button onClick={onCopy} className="vc-btn vc-btn--yellow" style={{ padding: "14px 22px", fontSize: 15, position: "relative" }}>
                {copied ? <Icon.Check /> : <Icon.Copy />}
                {copied ? "¡Copiado!" : "Copiar dirección completa"}
              </button>
              <button onClick={onCopy} className="vc-btn vc-btn--ghost" style={{ padding: "14px 22px", fontSize: 15 }}>
                Compartir por WhatsApp
              </button>
            </div>

            <p style={{ marginTop: 22, padding: "12px 14px", background: "var(--vc-amber-tint)", borderRadius: 12, fontSize: 13, color: "var(--vc-ink-soft)", lineHeight: 1.5, display: "flex", gap: 10, alignItems: "flex-start" }}>
              <span style={{ flexShrink: 0, marginTop: 1 }}>💡</span>
              <span><strong>Tip:</strong> Pega esto exactamente como aparece en el campo
              "Shipping address" — no en el de billing. Tu número de casillero (VIA-#####)
              identifica tu paquete.</span>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BENEFICIOS
   ============================================================ */

function VCBeneficios() {
  const items = [
    { title: "Tax Free", desc: "Compra en Amazon, eBay y miles de tiendas sin pagar impuestos estatales en USA.", pillar: "Ahorras hasta 7%", icon: <IconTaxFree />, accent: "blue" },
    { title: "Sin sorpresas", desc: "Un precio claro y consolidado, sin cargos ocultos ni recargos por volumen.", pillar: "Precio claro", icon: <IconPrice />, featured: true },
    { title: "Desde 1997", desc: "Más de 25 años llevando paquetes a la puerta de los dominicanos.", pillar: "25+ años", icon: <IconAnniversary />, accent: "blue" },
    { title: "Entregas rápidas", desc: "Red de sucursales en todo el país. Tu paquete sale en cuanto llega a Miami.", pillar: "24-48 horas", icon: <IconDelivery /> },
  ];

  return (
    <section id="beneficios" style={{ padding: "120px 0 60px", background: "var(--vc-cream)" }}>
      <div className="vc-shell">
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "end", marginBottom: 56 }} className="vc-section-head">
          <div>
            <span className="vc-eyebrow">¿Por qué elegirnos?</span>
            <h2 className="vc-section-title">
              Beneficios que nos distinguen <br />
              <em style={{ fontStyle: "normal", color: "var(--vc-ink-mute)", fontWeight: 600 }}>desde hace 25 años.</em>
            </h2>
          </div>
          <a href="#como" className="vc-btn vc-btn--ghost" style={{ whiteSpace: "nowrap" }}>
            Conoce nuestra historia <Icon.Arrow />
          </a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }} className="vc-bene-grid">
          {items.map((it, i) => (
            <BeneCard key={i} {...it} />
          ))}
        </div>
      </div>
    </section>
  );
}

function BeneCard({ title, desc, pillar, icon, featured, accent }) {
  const isBlue = accent === "blue";
  return (
    <article className="vc-card" style={{ padding: 24, background: featured ? "var(--vc-yellow)" : "var(--vc-white)", border: featured ? "1px solid var(--vc-yellow-deep)" : "1px solid rgba(15,24,32,.04)", display: "flex", flexDirection: "column", gap: 18, minHeight: 280, transition: "transform .25s ease, box-shadow .25s ease" }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-pop)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "var(--shadow-card)"; }}
    >
      <div style={{ width: 56, height: 56, borderRadius: 14, background: featured ? "var(--vc-ink)" : (isBlue ? "var(--vc-blue-soft)" : "var(--vc-amber-tint)"), color: featured ? "var(--vc-yellow)" : (isBlue ? "var(--vc-blue)" : "var(--vc-ink)"), display: "grid", placeItems: "center" }}>
        {icon}
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, letterSpacing: "-0.02em", lineHeight: 1.05 }}>{pillar}</div>
        <div style={{ fontSize: 14, fontWeight: 600, color: featured ? "var(--vc-ink)" : "var(--vc-ink-mute)", marginTop: 6, textTransform: "uppercase", letterSpacing: ".08em" }}>{title}</div>
      </div>
      <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.5, color: featured ? "rgba(15,24,32,.78)" : "var(--vc-ink-soft)" }}>{desc}</p>
    </article>
  );
}

function IconTaxFree() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" /><path d="M16 8 8 16" /><circle cx="9" cy="9" r="1.4" /><circle cx="15" cy="15" r="1.4" />
    </svg>
  );
}
function IconPrice() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c2.3 0 4.4.86 6 2.28" /><path d="M21 4v4h-4" /><path d="M12 8v8" /><path d="M15 10.5c0-1.4-1.34-2.5-3-2.5s-3 1.1-3 2.5 1.34 2.5 3 2.5 3 1.1 3 2.5-1.34 2.5-3 2.5-3-1.1-3-2.5" />
    </svg>
  );
}
function IconAnniversary() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 6V4h10v2" /><path d="M12 14a4 4 0 0 1-4-4V6h8v4a4 4 0 0 1-4 4Z" /><path d="M12 14v3" /><path d="M8 21h8" /><path d="M9 17h6" />
    </svg>
  );
}
function IconDelivery() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 7h11v9H3z" /><path d="M14 10h4l3 3v3h-7" /><circle cx="7" cy="18" r="2" /><circle cx="17" cy="18" r="2" />
    </svg>
  );
}

Object.assign(window, { VCNav, VCHero, VCAddress, VCBeneficios, Icon, Stat });
