import { useState, useEffect, useRef, useCallback } from "react";
import * as THREE from "three";

/* ─── Brand tokens ─── */
const C = {
  red:"#E3000F", redD:"#B8000C",
  yellow:"#FFD700", yellowL:"#FFF8C0",
  blue:"#0033A0", blueD:"#002280",
  cream:"#FFFDF5", creamD:"#FFF5E0",
  wa:"#25D366", waD:"#1da851",
  txt:"#1a1a2e", txtL:"#666",
};
const WA = (msg="Hola! Quisiera hacer un pedido 🍬") =>
  `https://wa.me/5493512469011?text=${encodeURIComponent(msg)}`;

/* ─── SVG icons ─── */
const WaIcon = ({ size=24, color="#fff" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
    <path d="M12 0C5.373 0 0 5.373 0 12c0 2.025.507 3.934 1.397 5.61L0 24l6.545-1.376C8.178 23.504 10.044 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.848 0-3.568-.479-5.07-1.316l-.363-.215-3.883.816.848-3.793-.233-.379C2.49 15.636 2 13.877 2 12 2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
  </svg>
);

/* ══════════════════════════════════════════
   THREE.JS CANDY SCENE
══════════════════════════════════════════ */
function CandyScene() {
  const mountRef = useRef(null);
  const mouse = useRef({ x: 0, y: 0 });

  useEffect(() => {
    const el = mountRef.current;
    if (!el) return;
    const W = el.clientWidth, H = el.clientHeight;

    /* Scene & Camera */
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(55, W / H, 0.1, 100);
    camera.position.set(0, 0.4, 7);

    /* Renderer */
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(W, H);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setClearColor(0x000000, 0);
    el.appendChild(renderer.domElement);

    /* Lights */
    scene.add(new THREE.AmbientLight(0xffffff, 0.6));
    const lA = new THREE.PointLight(0xFFD700, 4, 25); lA.position.set(4, 4, 4);
    const lB = new THREE.PointLight(0xFF2255, 3, 20); lB.position.set(-4, -2, 3);
    const lC = new THREE.PointLight(0x0055FF, 2.5, 20); lC.position.set(0, 4, -3);
    scene.add(lA, lB, lC);

    /* ── Main Lollipop group ── */
    const lolli = new THREE.Group();

    /* Candy head – shiny sphere */
    const headMat = new THREE.MeshPhongMaterial({
      color: 0xFF2244, shininess: 220, specular: 0xffffff, reflectivity: 1,
    });
    const head = new THREE.Mesh(new THREE.SphereGeometry(1.25, 40, 40), headMat);
    lolli.add(head);

    /* Stripe rings */
    const stripeColors = [0xFFD700, 0xffffff, 0xFF8800, 0xffffff, 0xFFD700, 0xee0022];
    stripeColors.forEach((col, i) => {
      const mat = new THREE.MeshPhongMaterial({ color: col, shininess: 160, transparent: true, opacity: 0.9 });
      const ring = new THREE.Mesh(new THREE.TorusGeometry(1.25, 0.07, 8, 52, Math.PI * 0.65), mat);
      ring.rotation.y = (i / stripeColors.length) * Math.PI * 2;
      ring.rotation.x = Math.PI / 3.5;
      lolli.add(ring);
    });

    /* Stick */
    const stick = new THREE.Mesh(
      new THREE.CylinderGeometry(0.085, 0.085, 3.8, 14),
      new THREE.MeshPhongMaterial({ color: 0xfff8e0, shininess: 100 })
    );
    stick.position.y = -2.65;
    lolli.add(stick);

    /* Spiral on stick via TubeGeometry */
    const pts = Array.from({ length: 28 }, (_, i) => {
      const t = i / 27;
      return new THREE.Vector3(
        Math.cos(t * Math.PI * 9) * 0.11,
        -1.0 - t * 3.5,
        Math.sin(t * Math.PI * 9) * 0.11
      );
    });
    const spiralTube = new THREE.Mesh(
      new THREE.TubeGeometry(new THREE.CatmullRomCurve3(pts), 80, 0.045, 8, false),
      new THREE.MeshPhongMaterial({ color: 0xE3000F, shininess: 120 })
    );
    lolli.add(spiralTube);

    /* Wrapper base circle */
    const wrapper = new THREE.Mesh(
      new THREE.TorusGeometry(1.42, 0.055, 8, 64),
      new THREE.MeshPhongMaterial({ color: 0xFFD700, shininess: 180, transparent: true, opacity: 0.8 })
    );
    wrapper.rotation.x = Math.PI / 2;
    lolli.add(wrapper);

    lolli.position.set(0, 0.3, 0);
    scene.add(lolli);

    /* ── Floating candy pieces ── */
    const candyPalette = [0xFFD700, 0xE3000F, 0x0033A0, 0xFF69B4, 0x25D366, 0xFF8C00, 0xAA44EE, 0x00CCFF];
    const floaters = [];
    const COUNT = 22;

    for (let i = 0; i < COUNT; i++) {
      const kind = i % 3;
      let geo;
      if (kind === 0) geo = new THREE.TorusGeometry(0.22, 0.09, 8, 28);
      else if (kind === 1) geo = new THREE.SphereGeometry(0.18, 14, 14);
      else geo = new THREE.IcosahedronGeometry(0.2, 0);

      const mat = new THREE.MeshPhongMaterial({
        color: candyPalette[i % candyPalette.length], shininess: 140, specular: 0xffffff,
      });
      const m = new THREE.Mesh(geo, mat);

      const radius = 3.2 + Math.random() * 2.4;
      const theta0 = (i / COUNT) * Math.PI * 2;
      const phi0   = (Math.random() * 0.7 + 0.15) * Math.PI;

      m.userData = { radius, theta0, phi0,
        orbitSpeed: 0.18 + Math.random() * 0.45,
        floatAmp:   0.2 + Math.random() * 0.35,
        floatOff:   Math.random() * Math.PI * 2,
        rotSp:      (Math.random() - 0.5) * 0.06,
      };
      m.position.set(
        radius * Math.sin(phi0) * Math.cos(theta0),
        radius * Math.cos(phi0) * 0.55,
        radius * Math.sin(phi0) * Math.sin(theta0) - 0.5
      );
      scene.add(m);
      floaters.push(m);
    }

    /* Mouse tracking */
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      mouse.current.x = ((e.clientX - r.left) / r.width  - 0.5) * 2;
      mouse.current.y = ((e.clientY - r.top)  / r.height - 0.5) * 2;
    };
    el.addEventListener("mousemove", onMove);

    /* Touch */
    const onTouch = (e) => {
      const r = el.getBoundingClientRect();
      const t = e.touches[0];
      mouse.current.x = ((t.clientX - r.left) / r.width  - 0.5) * 2;
      mouse.current.y = ((t.clientY - r.top)  / r.height - 0.5) * 2;
    };
    el.addEventListener("touchmove", onTouch, { passive: true });

    /* Resize */
    const onResize = () => {
      const w = el.clientWidth, h = el.clientHeight;
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h);
    };
    window.addEventListener("resize", onResize);

    /* Animate */
    let raf, t = 0;
    const tick = () => {
      raf = requestAnimationFrame(tick);
      t += 0.01;

      /* Lollipop follows mouse with lag */
      lolli.rotation.y += (mouse.current.x * 0.6  - lolli.rotation.y) * 0.04;
      lolli.rotation.x += (-mouse.current.y * 0.35 - lolli.rotation.x) * 0.04;
      lolli.rotation.z  = Math.sin(t * 0.5) * 0.04;
      lolli.position.y  = 0.3 + Math.sin(t * 0.8) * 0.14;

      /* Floating candies orbit */
      floaters.forEach(m => {
        const u = m.userData;
        const angle = u.theta0 + t * u.orbitSpeed;
        m.position.x = u.radius * Math.sin(u.phi0) * Math.cos(angle);
        m.position.z = u.radius * Math.sin(u.phi0) * Math.sin(angle) - 0.5;
        m.position.y = u.radius * Math.cos(u.phi0) * 0.55 + Math.sin(t * u.orbitSpeed + u.floatOff) * u.floatAmp;
        m.rotation.x += u.rotSp;
        m.rotation.y += u.rotSp * 0.8;
      });

      /* Lights orbit */
      lA.position.x = Math.cos(t * 0.4) * 5;
      lA.position.z = Math.sin(t * 0.4) * 5;
      lB.position.x = Math.cos(t * 0.4 + Math.PI) * 4;
      lB.position.z = Math.sin(t * 0.4 + Math.PI) * 4;

      renderer.render(scene, camera);
    };
    tick();

    return () => {
      cancelAnimationFrame(raf);
      el.removeEventListener("mousemove", onMove);
      el.removeEventListener("touchmove", onTouch);
      window.removeEventListener("resize", onResize);
      renderer.dispose();
      if (el.contains(renderer.domElement)) el.removeChild(renderer.domElement);
    };
  }, []);

  return (
    <div ref={mountRef}
      style={{ position:"absolute", inset:0, zIndex:1, cursor:"grab" }}
    />
  );
}

/* ══════════════════════════════════════════
   PARTICLE CANVAS (emoji falling)
══════════════════════════════════════════ */
function ParticleCanvas() {
  const ref = useRef(null);
  useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const EMOJIS = ["🍬","🍭","🍫","🍡","🧁","🍩","🎊","⭐","🎀","🌟"];
    let W, H, particles = [], raf;

    const resize = () => {
      W = canvas.width  = canvas.parentElement.offsetWidth;
      H = canvas.height = canvas.parentElement.offsetHeight;
    };

    const mkPart = (y) => ({
      x: Math.random() * (W||800),
      y: y ?? Math.random() * -200 - 20,
      emoji: EMOJIS[Math.floor(Math.random() * EMOJIS.length)],
      size:  14 + Math.random() * 18,
      speed: 0.3 + Math.random() * 0.7,
      drift: (Math.random() - 0.5) * 0.4,
      rot:   Math.random() * Math.PI * 2,
      rotSp: (Math.random() - 0.5) * 0.015,
      op:    0.25 + Math.random() * 0.45,
      vx: 0, vy: 0,
    });

    resize();
    for (let i = 0; i < 40; i++) particles.push(mkPart(Math.random() * H));

    const draw = () => {
      raf = requestAnimationFrame(draw);
      ctx.clearRect(0, 0, W, H);
      particles.forEach((p, i) => {
        p.vy = p.vy * 0.92 + p.speed * 0.08;
        p.vx = p.vx * 0.92 + p.drift * 0.08;
        if (p.vy < p.speed * 0.4) p.vy = p.speed * 0.4;
        p.x += p.vx; p.y += p.vy; p.rot += p.rotSp;
        if (p.y > H + 40 || p.x < -60 || p.x > W + 60) particles[i] = mkPart();
        ctx.save();
        ctx.globalAlpha = p.op;
        ctx.font = `${p.size}px serif`;
        ctx.textAlign = "center"; ctx.textBaseline = "middle";
        ctx.translate(p.x, p.y); ctx.rotate(p.rot);
        ctx.fillText(p.emoji, 0, 0);
        ctx.restore();
      });
    };
    draw();
    window.addEventListener("resize", resize);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, []);

  return (
    <canvas ref={ref}
      style={{ position:"absolute", inset:0, width:"100%", height:"100%",
               pointerEvents:"none", zIndex:0 }}
    />
  );
}

/* ══════════════════════════════════════════
   SCROLL REVEAL HOOK
══════════════════════════════════════════ */
function useReveal() {
  const map = useRef(new Map());
  const [visible, setVisible] = useState(new Set());

  const register = useCallback((id) => (el) => {
    if (!el) return;
    map.current.set(id, el);
    el.dataset.revealId = id;
  }, []);

  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting)
          setVisible(prev => new Set([...prev, e.target.dataset.revealId]));
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    map.current.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const style = (id, delay = 0) => ({
    opacity:    visible.has(id) ? 1 : 0,
    transform:  visible.has(id) ? "translateY(0) scale(1)" : "translateY(44px) scale(0.95)",
    transition: `opacity .7s ease ${delay}s, transform .7s cubic-bezier(.34,1.56,.64,1) ${delay}s`,
  });

  return { register, style, visible };
}

/* ══════════════════════════════════════════
   PARALLAX HOOK
══════════════════════════════════════════ */
function useParallax() {
  const [sy, setSy] = useState(0);
  useEffect(() => {
    let raf;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setSy(window.scrollY));
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, []);
  return sy;
}

/* ══════════════════════════════════════════
   REUSABLE COMPONENTS
══════════════════════════════════════════ */
function WaButton({ href, children, size="md", style:sx={} }) {
  const base = {
    display:"inline-flex", alignItems:"center", gap:10,
    background:`linear-gradient(135deg,${C.wa},#1fba5a)`,
    color:"#fff", textDecoration:"none", borderRadius:50,
    fontFamily:"'Baloo 2',cursive", fontWeight:800,
    boxShadow:`0 6px 28px rgba(37,211,102,.4)`,
    transition:"transform .18s,box-shadow .18s",
    cursor:"pointer",
  };
  const sizes = {
    sm:  { fontSize:"0.88rem", padding:"9px 22px" },
    md:  { fontSize:"1rem",    padding:"13px 30px" },
    lg:  { fontSize:"1.2rem",  padding:"18px 44px" },
    xl:  { fontSize:"1.35rem", padding:"20px 52px" },
  };
  return (
    <a href={href} target="_blank" rel="noopener"
      style={{...base, ...sizes[size], ...sx}}
      onMouseEnter={e=>{e.currentTarget.style.transform="scale(1.05) translateY(-2px)"; e.currentTarget.style.boxShadow="0 12px 40px rgba(37,211,102,.6)";}}
      onMouseLeave={e=>{e.currentTarget.style.transform=""; e.currentTarget.style.boxShadow=`0 6px 28px rgba(37,211,102,.4)`;}}
    >
      <WaIcon size={size==="xl"?28:size==="lg"?24:20} /> {children}
    </a>
  );
}

function SectionTag({ children, light }) {
  return (
    <div style={{
      display:"inline-block", fontFamily:"'Baloo 2',cursive", fontWeight:800,
      fontSize:"0.75rem", letterSpacing:"2.5px", textTransform:"uppercase",
      color: light ? C.yellow : C.red,
      background: light ? "rgba(255,215,0,.18)" : "rgba(227,0,15,.08)",
      padding:"5px 18px", borderRadius:50, marginBottom:12,
    }}>{children}</div>
  );
}

function SectionTitle({ children, light, center=true }) {
  return (
    <h2 style={{
      fontFamily:"'Baloo 2',cursive", fontWeight:900, lineHeight:1.1,
      fontSize:"clamp(1.9rem,4vw,2.85rem)",
      color: light ? "#fff" : C.blue,
      textAlign: center ? "center" : "left",
      marginBottom:14,
    }}>{children}</h2>
  );
}

/* ══════════════════════════════════════════
   MAIN PAGE
══════════════════════════════════════════ */
export default function App() {
  const sy = useParallax();
  const { register, style: rv } = useReveal();

  return (
    <div style={{
      fontFamily:"'Poppins',sans-serif", backgroundColor:C.cream,
      overflowX:"hidden", color:C.txt,
    }}>
      {/* ── Fonts + global CSS ── */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700;800;900&family=Poppins:wght@300;400;500;600&display=swap');
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        ::-webkit-scrollbar{display:none}
        @keyframes wiggle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(8deg)}}
        @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
        @keyframes wa-ring{0%{box-shadow:0 6px 24px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.4)}70%{box-shadow:0 6px 24px rgba(37,211,102,.45),0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 6px 24px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,0)}}
        @keyframes badge-glow{0%,100%{box-shadow:0 4px 12px rgba(255,215,0,.4)}50%{box-shadow:0 4px 24px rgba(255,215,0,.8)}}
        @property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
        @keyframes spin-border{to{--a:360deg}}
        .wa-ring{animation:wa-ring 2.5s ease-in-out infinite}
        .badge-glow{animation:badge-glow 3s ease-in-out infinite}
        .float{animation:float 3s ease-in-out infinite}
        .wiggle{animation:wiggle 2s ease-in-out infinite}
        .card-hover{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
        .card-hover:hover{transform:translateY(-10px) scale(1.02)!important;box-shadow:0 24px 60px rgba(0,0,0,.14)!important}
        .product-emoji{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
        .card-hover:hover .product-emoji{transform:scale(1.2) rotate(-6deg)}
        .featured-border{position:relative}
        .featured-border::after{content:'';position:absolute;inset:-2px;border-radius:22px;background:conic-gradient(from var(--a,0deg),#FFD700 0%,#fff 25%,#E3000F 50%,#fff 75%,#FFD700 100%);z-index:-1;animation:spin-border 3s linear infinite}
      `}</style>

      {/* ══ HEADER ══ */}
      <header style={{
        position:"sticky", top:0, zIndex:999,
        background:"rgba(255,253,245,0.92)",
        backdropFilter:"blur(20px)", WebkitBackdropFilter:"blur(20px)",
        borderBottom:`2px solid ${C.yellow}`,
        padding:"12px 28px", display:"flex",
        alignItems:"center", justifyContent:"space-between",
        boxShadow:"0 4px 20px rgba(0,0,0,.08)",
      }}>
        <div style={{
          fontFamily:"'Baloo 2',cursive", fontSize:"1.85rem",
          fontWeight:900, color:C.red, display:"flex", alignItems:"center", gap:8,
        }}>
          <span className="wiggle" style={{fontSize:"1.5rem"}}>🍬</span>
          Bongi <span style={{color:C.blue}}>Bom Bon</span>
        </div>
        <WaButton href={WA()} size="sm">
          <span style={{display:"none"}} className="sm-hide">Pedí ahora</span>
          <span style={{fontSize:"0.85rem"}}>Pedí ahora</span>
        </WaButton>
      </header>

      {/* ══ HERO ══ */}
      <section style={{
        position:"relative", minHeight:"100vh",
        display:"flex", alignItems:"center",
        overflow:"hidden",
        background:`linear-gradient(155deg,${C.cream} 0%,${C.creamD} 55%,#FFE8D6 100%)`,
      }}>
        {/* Particle canvas */}
        <ParticleCanvas />

        {/* Parallax blobs */}
        <div style={{
          position:"absolute", width:520, height:520, borderRadius:"50%",
          background:C.red, filter:"blur(90px)", opacity:0.18,
          top:-160, right:-160, pointerEvents:"none",
          transform:`translateY(${sy*0.06}px)`,
          transition:"transform .1s linear",
        }}/>
        <div style={{
          position:"absolute", width:420, height:420, borderRadius:"50%",
          background:C.yellow, filter:"blur(90px)", opacity:0.2,
          bottom:-100, left:-100, pointerEvents:"none",
          transform:`translateY(${sy*-0.04}px)`,
          transition:"transform .1s linear",
        }}/>
        <div style={{
          position:"absolute", width:300, height:300, borderRadius:"50%",
          background:C.blue, filter:"blur(80px)", opacity:0.1,
          top:"40%", left:"8%", pointerEvents:"none",
          transform:`translateY(${sy*0.10}px)`,
          transition:"transform .1s linear",
        }}/>

        {/* Content grid: left text | right 3D */}
        <div style={{
          position:"relative", zIndex:2, width:"100%", maxWidth:1200,
          margin:"0 auto", padding:"100px 40px 60px",
          display:"grid", gridTemplateColumns:"1fr 1fr",
          alignItems:"center", gap:48,
        }}>
          {/* Left: text */}
          <div style={{ textAlign:"left" }}>
            <div className="badge-glow" style={{
              display:"inline-block", background:C.yellow, color:C.blue,
              fontFamily:"'Baloo 2',cursive", fontWeight:800, fontSize:"0.82rem",
              padding:"6px 18px", borderRadius:50, letterSpacing:"1.5px",
              textTransform:"uppercase", marginBottom:22,
            }}>🎉 Río Segundo, Córdoba</div>

            <h1 style={{
              fontFamily:"'Baloo 2',cursive", fontWeight:900,
              fontSize:"clamp(2.6rem,5.5vw,4.4rem)", lineHeight:1.07,
              color:C.blue, marginBottom:10,
              textShadow:`4px 4px 0 rgba(0,51,160,.12),8px 8px 0 rgba(0,51,160,.06)`,
            }}>
              Las mejores{" "}
              <span style={{
                color:C.red, position:"relative", display:"inline-block",
                textShadow:`3px 3px 0 rgba(227,0,15,.18)`,
              }}>
                golosinas
                <span style={{
                  position:"absolute", bottom:4, left:0, right:0,
                  height:7, background:C.yellow, borderRadius:4, zIndex:-1,
                }}/>
              </span>
              <br/>para tu fiesta
            </h1>

            <p style={{
              fontSize:"clamp(.95rem,1.8vw,1.15rem)", color:C.txtL,
              lineHeight:1.75, maxWidth:480, marginBottom:38,
            }}>
              Copetín, combos y golosinas al por mayor y menor. Surtimos cumpleaños, eventos y mesas dulces con los mejores precios de la región.
            </p>

            <div style={{ display:"flex", flexDirection:"column", gap:16, alignItems:"flex-start" }}>
              <WaButton href={WA()} size="xl"
                style={{ animationName:"wa-ring", animationDuration:"2.5s",
                         animationIterationCount:"infinite" }}
                className="wa-ring"
              >
                ¡Hacé tu pedido por WhatsApp!
              </WaButton>
              <div style={{ display:"flex", alignItems:"center", gap:8, color:C.txtL, fontSize:"0.85rem" }}>
                <span style={{ color:C.yellow, fontSize:"1.05rem" }}>★★★★★</span>
                +10.000 clientes felices · Respuesta rápida
              </div>
            </div>
          </div>

          {/* Right: Three.js */}
          <div style={{
            position:"relative", height:520,
            transform:`translateY(${sy*-0.08}px)`,
            transition:"transform .1s linear",
          }}>
            <CandyScene />
            {/* Glow ring */}
            <div style={{
              position:"absolute", bottom:"12%", left:"50%",
              transform:"translateX(-50%)",
              width:200, height:30,
              background:"radial-gradient(ellipse,rgba(227,0,15,.35),transparent 70%)",
              borderRadius:"50%", filter:"blur(10px)", pointerEvents:"none",
            }}/>
          </div>
        </div>

        {/* Scroll hint */}
        <div className="float" style={{
          position:"absolute", bottom:32, left:"50%", transform:"translateX(-50%)",
          zIndex:3, color:C.txtL, fontSize:"0.78rem", display:"flex",
          flexDirection:"column", alignItems:"center", gap:6,
        }}>
          <span>Deslizá para ver más</span>
          <div style={{ width:2, height:32, background:`linear-gradient(${C.red},transparent)`, borderRadius:2 }}/>
        </div>
      </section>

      {/* ══ PROOF BAR ══ */}
      <div style={{
        background:C.blue, color:"#fff",
        padding:"18px 32px",
        display:"flex", flexWrap:"wrap",
        justifyContent:"center", alignItems:"center", gap:40,
        fontFamily:"'Baloo 2',cursive", fontWeight:700,
      }}>
        {[
          ["🌟","5.0","en Google Maps"],
          ["🎊","+10.000","clientes felices"],
          ["⚡","Respuesta","rápida"],
          ["💰","Mejores","precios"],
        ].map(([icon, num, label], i) => (
          <div key={i} style={{ display:"flex", alignItems:"center", gap:10, fontSize:"1rem" }}>
            <span style={{ fontSize:"1.5rem" }}>{icon}</span>
            <span style={{ color:C.yellow, fontSize:"1.4rem", fontWeight:900 }}>{num}</span>
            <span>{label}</span>
          </div>
        ))}
      </div>

      {/* ══ POR QUÉ ELEGIRNOS ══ */}
      <section style={{
        padding:"96px 40px",
        background:C.cream,
        textAlign:"center",
        position:"relative", overflow:"hidden",
      }}>
        {/* Parallax decorative circle */}
        <div style={{
          position:"absolute", width:600, height:600, borderRadius:"50%",
          background:`radial-gradient(${C.yellow}22,transparent 70%)`,
          top:"-20%", right:"-10%", pointerEvents:"none",
          transform:`translateY(${(sy-600)*0.07}px)`,
        }}/>

        <SectionTag>¿Por qué elegirnos?</SectionTag>
        <SectionTitle>Todo lo que necesitás,{" "}
          <em style={{ fontStyle:"normal", color:C.red }}>en un solo lugar</em>
        </SectionTitle>
        <p style={{ color:C.txtL, fontSize:"1.05rem", maxWidth:540, margin:"0 auto 52px", lineHeight:1.75 }}>
          Somos el punto de referencia de Río Segundo para golosinas, copetín y todo lo que hace falta para una fiesta memorable.
        </p>

        <div style={{
          display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(220px,1fr))",
          gap:24, maxWidth:1080, margin:"0 auto",
        }}>
          {[
            ["🏷️","Precios Imbatibles","Trabajamos con volumen para darte los mejores precios del mercado, sin sacrificar calidad en ningún producto."],
            ["🎁","Gran Variedad","Golosinas, chicles, chocolates, copetín salado, alfajores y todo lo que imaginás para tu mesa dulce o evento."],
            ["💬","Atención Personalizada","Te asesoramos para armar el combo perfecto según tu presupuesto y la cantidad de personas que tenés."],
            ["⚡","Respuesta Inmediata","Escribinos por WhatsApp y recibís respuesta al toque. Pedidos listos para retirar en Jujuy 868, Río Segundo."],
          ].map(([icon, title, desc], i) => (
            <div key={i} className="card-hover"
              ref={register(`why-${i}`)}
              style={{
                ...rv(`why-${i}`, i*0.1),
                background:"#fff", borderRadius:20, padding:"36px 28px",
                boxShadow:"0 8px 30px rgba(0,0,0,.09)",
                border:"2px solid transparent",
                position:"relative", overflow:"hidden",
              }}
            >
              <div style={{
                position:"absolute", top:0, left:0, right:0, height:4,
                background:`linear-gradient(90deg,${C.red},${C.yellow},${C.blue})`,
              }}/>
              <div style={{ fontSize:"3.2rem", marginBottom:16 }}>{icon}</div>
              <h3 style={{
                fontFamily:"'Baloo 2',cursive", fontWeight:800,
                fontSize:"1.15rem", color:C.blue, marginBottom:10,
              }}>{title}</h3>
              <p style={{ fontSize:"0.88rem", color:C.txtL, lineHeight:1.7 }}>{desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ══ PRODUCTOS ══ */}
      <section style={{
        padding:"96px 40px",
        background:`linear-gradient(180deg,${C.creamD} 0%,#fff 100%)`,
        textAlign:"center",
        position:"relative",
      }}>
        <div style={{
          position:"absolute", width:500, height:500, borderRadius:"50%",
          background:`radial-gradient(${C.red}18,transparent 70%)`,
          bottom:"-10%", left:"-5%", pointerEvents:"none",
          transform:`translateY(${(sy-1600)*0.05}px)`,
        }}/>

        <SectionTag>Nuestros productos</SectionTag>
        <SectionTitle>Olvidate del estrés:{" "}
          <em style={{ fontStyle:"normal", color:C.red }}>tenemos todo</em>
        </SectionTitle>
        <p style={{ color:C.txtL, fontSize:"1.05rem", maxWidth:540, margin:"0 auto 52px", lineHeight:1.75 }}>
          Desde golosinas individuales hasta paquetes completos para 200 personas. Vos disfrutá la fiesta, nosotros te la surtimos.
        </p>

        <div style={{
          display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(260px,1fr))",
          gap:24, maxWidth:1080, margin:"0 auto",
        }}>
          {[
            { emoji:"🍬", bg:"linear-gradient(135deg,#FFE8E8,#FFF0C0)", title:"Golosinas & Caramelos",
              desc:"Amplia selección de marcas nacionales: Arcor, Sugus, Mentitas, gomitas y todo lo dulce.", badge:"⭐ Top",
              msg:"Hola! Me interesan las golosinas 🍬" },
            { emoji:"🎉", bg:"linear-gradient(135deg,#E8F0FF,#F0E8FF)", title:"Mesa Dulce para Cumpleaños",
              desc:"Surtido especial para cumpleaños infantiles y adultos. Te ayudamos a calcular las cantidades ideales.", badge:"Fiestas",
              msg:"Hola! Quiero armar una mesa dulce 🎉" },
            { emoji:"🥨", bg:"linear-gradient(135deg,#E8FFE8,#F0FFE8)", title:"Copetín & Salados",
              desc:"Papas fritas, palitos, maníes, galletitas y todo el copetín salado para que no falte nada.", badge:null,
              msg:"Hola! Me interesa el copetín 🥨" },
            { emoji:"🎊", bg:"linear-gradient(135deg,#FFF0E8,#FFE8D0)", title:"Combos para Eventos",
              desc:"Paquetes cerrados para 50, 100 o 200 personas. Dulce + salado + presentación incluida.", badge:"Popular",
              msg:"Hola! Quiero info sobre combos 🎊" },
          ].map((p, i) => (
            <div key={i} className="card-hover"
              ref={register(`prod-${i}`)}
              style={{
                ...rv(`prod-${i}`, i*0.1),
                background:"#fff", borderRadius:20,
                overflow:"hidden", boxShadow:"0 8px 30px rgba(0,0,0,.09)",
                textAlign:"left",
              }}
            >
              <div style={{ background:p.bg, padding:"36px 24px",
                display:"flex", alignItems:"center", justifyContent:"center",
                position:"relative", fontSize:"4rem" }}>
                <span className="product-emoji">{p.emoji}</span>
                {p.badge && (
                  <div style={{
                    position:"absolute", top:12, right:12,
                    background:C.red, color:"#fff",
                    fontFamily:"'Baloo 2',cursive", fontWeight:800,
                    fontSize:"0.68rem", padding:"4px 10px",
                    borderRadius:50, letterSpacing:1, textTransform:"uppercase",
                  }}>{p.badge}</div>
                )}
              </div>
              <div style={{ padding:"22px 24px" }}>
                <h3 style={{
                  fontFamily:"'Baloo 2',cursive", fontWeight:800,
                  fontSize:"1.15rem", color:C.blue, marginBottom:8,
                }}>{p.title}</h3>
                <p style={{ fontSize:"0.87rem", color:C.txtL, lineHeight:1.65, marginBottom:18 }}>{p.desc}</p>
                <a href={WA(p.msg)} target="_blank" rel="noopener" style={{
                  display:"inline-flex", alignItems:"center", gap:6,
                  background:C.yellow, color:C.blue,
                  fontFamily:"'Baloo 2',cursive", fontWeight:800, fontSize:"0.85rem",
                  padding:"8px 18px", borderRadius:50, textDecoration:"none",
                  transition:"background .2s,transform .2s",
                }}
                  onMouseEnter={e=>{e.currentTarget.style.background=C.yellowL; e.currentTarget.style.transform="scale(1.05)";}}
                  onMouseLeave={e=>{e.currentTarget.style.background=C.yellow; e.currentTarget.style.transform="";}}
                >Consultar precio →</a>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ══ COMBOS ══ */}
      <section style={{
        padding:"96px 40px", position:"relative", overflow:"hidden",
        background:`linear-gradient(135deg,${C.blue} 0%,${C.blueD} 100%)`,
        textAlign:"center", color:"#fff",
      }}>
        {/* Pattern overlay */}
        <div style={{
          position:"absolute", inset:0, opacity:0.04,
          backgroundImage:"radial-gradient(circle,#fff 1px,transparent 1px)",
          backgroundSize:"32px 32px", pointerEvents:"none",
        }}/>
        {/* Parallax decoration */}
        <div style={{
          position:"absolute", width:500, height:500, borderRadius:"50%",
          background:"radial-gradient(rgba(255,215,0,.18),transparent 70%)",
          top:"-20%", right:"-10%", pointerEvents:"none",
          transform:`translateY(${(sy-2400)*0.08}px)`,
        }}/>

        <SectionTag light>Combos armados</SectionTag>
        <SectionTitle light>Elegí tu combo<br/>
          <em style={{ fontStyle:"normal", color:C.yellow }}>y listo para tu fiesta</em>
        </SectionTitle>
        <p style={{ color:"rgba(255,255,255,.75)", fontSize:"1.05rem", maxWidth:540, margin:"0 auto 52px", lineHeight:1.75 }}>
          Sin vueltas. Elegís, nos avisás por WhatsApp y lo tenés listo para retirar. Así de fácil.
        </p>

        <div style={{
          display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(260px,1fr))",
          gap:24, maxWidth:960, margin:"0 auto", position:"relative", zIndex:1,
        }}>
          {[
            { icon:"🧒", title:"Combo Infantil", items:["Golosinas surtidas x50","Chicles y caramelos","Copetín para 20 niños","Bolsitas de recuerdo"], featured:false, msg:"Hola! Me interesa el Combo Infantil 🧒" },
            { icon:"🎂", title:"Combo Cumpleaños", items:["Mesa dulce completa","Golosinas para 50 personas","Copetín salado incluido","Asesoramiento incluido"], featured:true, msg:"Hola! Me interesa el Combo Cumpleaños 🎂" },
            { icon:"🏢", title:"Combo Evento Grande", items:["+100 personas","Surtido dulce y salado","Precio mayorista","Cotización personalizada"], featured:false, msg:"Hola! Quiero cotizar un evento grande 🏢" },
          ].map((c, i) => (
            <div key={i}
              ref={register(`combo-${i}`)}
              className={c.featured ? "featured-border" : ""}
              style={{
                ...rv(`combo-${i}`, i*0.1),
                background: c.featured ? "rgba(255,215,0,.13)" : "rgba(255,255,255,.08)",
                border: c.featured ? "none" : "2px solid rgba(255,255,255,.15)",
                backdropFilter:"blur(10px)",
                borderRadius:20, padding:"36px 28px",
                position:"relative",
                transition:"background .3s,transform .3s",
              }}
              onMouseEnter={e=>{e.currentTarget.style.background="rgba(255,255,255,.16)"; e.currentTarget.style.transform="translateY(-8px)";}}
              onMouseLeave={e=>{e.currentTarget.style.background=c.featured?"rgba(255,215,0,.13)":"rgba(255,255,255,.08)"; e.currentTarget.style.transform="";}}
            >
              {c.featured && (
                <div style={{
                  position:"absolute", top:-14, left:"50%", transform:"translateX(-50%)",
                  background:C.yellow, color:C.blue,
                  fontFamily:"'Baloo 2',cursive", fontWeight:900, fontSize:"0.75rem",
                  padding:"5px 18px", borderRadius:50, letterSpacing:1,
                  textTransform:"uppercase", whiteSpace:"nowrap",
                }}>⭐ Más elegido</div>
              )}
              <div style={{ fontSize:"3rem", marginBottom:16 }}>{c.icon}</div>
              <h3 style={{
                fontFamily:"'Baloo 2',cursive", fontWeight:900,
                fontSize:"1.25rem", color:"#fff", marginBottom:14,
              }}>{c.title}</h3>
              <ul style={{ listStyle:"none", marginBottom:26 }}>
                {c.items.map((item, j) => (
                  <li key={j} style={{
                    fontSize:"0.87rem", color:"rgba(255,255,255,.82)",
                    padding:"6px 0", borderBottom:"1px solid rgba(255,255,255,.08)",
                    display:"flex", alignItems:"center", justifyContent:"center", gap:8,
                  }}>
                    <span style={{ color:C.yellow, fontWeight:900 }}>✓</span> {item}
                  </li>
                ))}
              </ul>
              <WaButton href={WA(c.msg)} size="md">Consultar</WaButton>
            </div>
          ))}
        </div>
      </section>

      {/* ══ RESEÑAS ══ */}
      <section style={{
        padding:"96px 40px", background:C.cream, textAlign:"center",
        position:"relative", overflow:"hidden",
      }}>
        <div style={{
          position:"absolute", width:400, height:400, borderRadius:"50%",
          background:`radial-gradient(${C.blue}10,transparent 70%)`,
          top:"10%", left:"-5%", pointerEvents:"none",
          transform:`translateY(${(sy-3200)*0.05}px)`,
        }}/>

        <SectionTag>Opiniones reales</SectionTag>
        <SectionTitle>Lo que dicen{" "}
          <em style={{ fontStyle:"normal", color:C.red }}>nuestros clientes</em>
        </SectionTitle>
        <p style={{ color:C.txtL, fontSize:"1.05rem", maxWidth:540, margin:"0 auto 52px", lineHeight:1.75 }}>
          Todas reseñas reales de Google Maps. Sin filtros, sin inventos. 5 estrellas por mérito propio.
        </p>

        <div style={{
          display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(280px,1fr))",
          gap:20, maxWidth:1100, margin:"0 auto",
        }}>
          {[
            { init:"NB", name:"Lic. Nicolas Bongiorno", text:"Son excelentes! El mejor precio y calidad. No dudés en consultarlos, te ayudan con todo.", col:"linear-gradient(135deg,#E3000F,#ff4d5e)" },
            { init:"NG", name:"Nora Gomez", text:"Buena atención. Muy amables. Excelente calidad de productos. Muy recomendable.", col:`linear-gradient(135deg,${C.blue},#0055cc)` },
            { init:"GB", name:"Gochy Bongiorno", text:"¡EXCELENTE ATENCIÓN, COMODIDAD, PRECIOS Y COMBOS MUY BUENOS! Vuelvo siempre, sin dudas.", col:"linear-gradient(135deg,#8B5CF6,#A855F7)" },
            { init:"SC", name:"Sebastián M. Castellano", text:"Excelente local para fiestas infantiles. Tienen muy buenas promos y una gran variedad.", col:"linear-gradient(135deg,#F59E0B,#EF4444)" },
            { init:"ST", name:"Silvina Tissera", text:"Muy buenos productos. Todas las golosinas para los cumpleaños de los niños. Riquísimo y muy buenos precios.", col:"linear-gradient(135deg,#10B981,#059669)" },
          ].map((r, i) => (
            <div key={i} className="card-hover"
              ref={register(`rev-${i}`)}
              style={{
                ...rv(`rev-${i}`, i*0.08),
                background:"#fff", borderRadius:20, padding:"28px 26px",
                boxShadow:"0 10px 30px rgba(0,0,0,.07)",
                textAlign:"left", position:"relative",
                overflow:"hidden", border:`1.5px solid rgba(255,215,0,.3)`,
              }}
            >
              <div style={{
                position:"absolute", top:-12, left:14,
                fontSize:"8rem", fontFamily:"Georgia,serif",
                color:C.yellow, opacity:0.18, lineHeight:1, pointerEvents:"none",
              }}>"</div>
              <div style={{ color:C.yellow, fontSize:"1.1rem", marginBottom:12 }}>★★★★★</div>
              <p style={{
                fontSize:"0.92rem", color:C.txt, fontStyle:"italic",
                lineHeight:1.7, marginBottom:18, position:"relative", zIndex:1,
              }}>"{r.text}"</p>
              <div style={{ display:"flex", alignItems:"center", gap:12 }}>
                <div style={{
                  width:42, height:42, borderRadius:"50%",
                  background:r.col, display:"flex", alignItems:"center", justifyContent:"center",
                  fontFamily:"'Baloo 2',cursive", fontWeight:900, fontSize:"1.1rem",
                  color:"#fff", flexShrink:0,
                }}>{r.init}</div>
                <div>
                  <div style={{ fontFamily:"'Baloo 2',cursive", fontWeight:800, fontSize:"0.95rem", color:C.blue }}>{r.name}</div>
                  <div style={{ fontSize:"0.73rem", color:C.txtL }}>Google Maps ✓</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ══ CTA FINAL ══ */}
      <section style={{
        padding:"96px 40px", textAlign:"center", color:"#fff",
        background:`linear-gradient(135deg,${C.red} 0%,${C.redD} 100%)`,
        position:"relative", overflow:"hidden",
      }}>
        <div style={{
          position:"absolute", inset:0,
          background:"radial-gradient(ellipse at 70% 50%,rgba(255,215,0,.18),transparent 60%)",
          pointerEvents:"none",
        }}/>
        {/* Parallax orb */}
        <div style={{
          position:"absolute", width:600, height:600, borderRadius:"50%",
          background:"radial-gradient(rgba(255,255,255,.06),transparent 60%)",
          top:"-30%", left:"-10%", pointerEvents:"none",
          transform:`translateY(${(sy-4100)*0.06}px)`,
        }}/>

        <div className="float" style={{ fontSize:"3.5rem", marginBottom:16 }}>🍭</div>

        <SectionTitle light>¿Lista tu fiesta?<br/>
          <em style={{ fontStyle:"normal", color:C.yellow }}>¡Nosotros la surtimos!</em>
        </SectionTitle>
        <p style={{
          color:"rgba(255,255,255,.85)", fontSize:"1.05rem",
          maxWidth:520, margin:"0 auto 40px", lineHeight:1.75
        }}>
          No importa si son 20 o 200 personas. Escribinos y te armamos el combo perfecto al mejor precio de Río Segundo.
        </p>

        <a href={WA("Hola! Quiero hacer un pedido para mi fiesta 🎉")}
          target="_blank" rel="noopener"
          style={{
            display:"inline-flex", alignItems:"center", gap:14,
            background:"#fff", color:C.blue,
            fontFamily:"'Baloo 2',cursive", fontWeight:900, fontSize:"1.25rem",
            padding:"20px 54px", borderRadius:50, textDecoration:"none",
            boxShadow:"0 8px 40px rgba(0,0,0,.22)",
            transition:"transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s",
            position:"relative", zIndex:1,
          }}
          onMouseEnter={e=>{e.currentTarget.style.transform="scale(1.07)"; e.currentTarget.style.boxShadow="0 16px 60px rgba(0,0,0,.32)";}}
          onMouseLeave={e=>{e.currentTarget.style.transform=""; e.currentTarget.style.boxShadow="0 8px 40px rgba(0,0,0,.22)";}}
        >
          <WaIcon size={28} color={C.wa} />
          Escribinos por WhatsApp
        </a>

        <div style={{
          display:"flex", justifyContent:"center", flexWrap:"wrap",
          gap:28, marginTop:40, position:"relative", zIndex:1,
        }}>
          {["✅ Sin compromiso","⚡ Respuesta en minutos","💰 Mejor precio garantizado","🎉 +100 fiestas realizadas"].map((item, i) => (
            <div key={i} style={{
              display:"flex", alignItems:"center", gap:8,
              color:"rgba(255,255,255,.85)", fontSize:"0.88rem", fontWeight:500,
            }}>{item}</div>
          ))}
        </div>
      </section>

      {/* ══ FOOTER ══ */}
      <footer style={{
        background:C.txt, color:"rgba(255,255,255,.55)",
        textAlign:"center", padding:"32px 24px", fontSize:"0.85rem",
      }}>
        <p>
          © 2025 <strong style={{ color:"#fff" }}>Bongi Bom Bon</strong> · Jujuy 868, Río Segundo, Córdoba ·
          Hecho con <span style={{ color:C.red }}>♥</span> para los mejores clientes.
        </p>
      </footer>

      {/* ══ FLOATING WA BUTTON ══ */}
      <a href={WA()} target="_blank" rel="noopener"
        className="wa-ring"
        style={{
          position:"fixed", bottom:28, right:24, zIndex:998,
          width:62, height:62, background:C.wa,
          borderRadius:"50%", display:"flex",
          alignItems:"center", justifyContent:"center",
          textDecoration:"none",
          transition:"transform .2s",
        }}
        onMouseEnter={e=>{e.currentTarget.style.transform="scale(1.12)"; e.currentTarget.style.animation="none";}}
        onMouseLeave={e=>{e.currentTarget.style.transform=""; e.currentTarget.style.animation="";}}
        aria-label="WhatsApp"
      >
        <WaIcon size={30} />
      </a>
    </div>
  );
}