// app.jsx — Power B / Pablo Batres landing page
const { useState, useEffect, useRef, useMemo } = React;

// ─── Tweak defaults ──────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "treatment": "raw",
  "accent": "dorado",
  "showNav": true,
  "showStats": true,
  "particles": true,
  "marquee": true,
  "parallax": true
}/*EDITMODE-END*/;

// ─── Reveal-on-scroll hook ───────────────────────────────────────────────────
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

// ─── Word-by-word reveal (splits children into spans) ───────────────────────
function WordReveal({ text, delay = 0, className = '' }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const t = setTimeout(() => ref.current && ref.current.classList.add('in'), delay);
    return () => clearTimeout(t);
  }, [delay]);
  const words = String(text || '').split(' ');
  return (
    <span ref={ref} className={`word-reveal ${className}`}>
      {words.map((w, i) => (
        <span key={i} style={{ transitionDelay: `${i * 90}ms` }}>
          {w}{i < words.length - 1 ? '\u00A0' : ''}
        </span>
      ))}
    </span>
  );
}

// ─── Hero particles (dust motes in light) ───────────────────────────────────
function HeroParticles({ enabled = true }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!enabled) return;
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf, w, h, dpr;
    const particles = [];
    const COUNT = 70;

    const resize = () => {
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      w = canvas.clientWidth;
      h = canvas.clientHeight;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    window.addEventListener('resize', resize);

    for (let i = 0; i < COUNT; i++) {
      particles.push({
        x: Math.random() * w,
        y: Math.random() * h,
        r: Math.random() * 1.6 + 0.3,
        vy: -(Math.random() * 0.22 + 0.05),
        vx: (Math.random() - 0.5) * 0.18,
        a: Math.random() * 0.5 + 0.15,
        phase: Math.random() * Math.PI * 2,
        warm: Math.random() < 0.35,
      });
    }

    let t0 = performance.now();
    const tick = (t) => {
      const dt = Math.min((t - t0) / 16.67, 3); t0 = t;
      ctx.clearRect(0, 0, w, h);
      for (const p of particles) {
        p.phase += 0.012 * dt;
        p.x += (p.vx + Math.sin(p.phase) * 0.18) * dt;
        p.y += p.vy * dt;
        if (p.y < -8) { p.y = h + 6; p.x = Math.random() * w; }
        if (p.x < -8) p.x = w + 6;
        if (p.x > w + 8) p.x = -6;

        const tw = 0.7 + 0.3 * Math.sin(p.phase * 1.5);
        ctx.beginPath();
        ctx.fillStyle = p.warm
          ? `rgba(255, 220, 170, ${p.a * tw})`
          : `rgba(220, 230, 240, ${p.a * tw * 0.7})`;
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
    };
  }, [enabled]);

  if (!enabled) return null;
  return <canvas ref={ref} className="particles" aria-hidden="true" />;
}

// ─── Count-up number ────────────────────────────────────────────────────────
function useInView(ref, opts = { threshold: 0.4 }) {
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) { setSeen(true); io.disconnect(); }
    }, opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref, seen]);
  return seen;
}

// ─── Parallax on element ────────────────────────────────────────────────────
function useParallax(ref, strength = 0.12, enabled = true) {
  useEffect(() => {
    if (!enabled || !ref.current) return;
    const el = ref.current;
    let raf = null;
    const update = () => {
      const rect = el.getBoundingClientRect();
      const center = rect.top + rect.height / 2;
      const offset = (center - window.innerHeight / 2) * -strength;
      el.style.transform = `translate3d(0, ${offset.toFixed(1)}px, 0)`;
      raf = null;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [ref, strength, enabled]);
}

// ─── Icons (inline SVG, no decoration) ───────────────────────────────────────
const ArrowRight = ({ size = 14 }) => (
  <svg className="arr" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square">
    <line x1="3" y1="12" x2="20" y2="12" />
    <polyline points="14,6 20,12 14,18" />
  </svg>
);
const PlusSm = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <line x1="12" y1="4" x2="12" y2="20" /><line x1="4" y1="12" x2="20" y2="12" />
  </svg>
);

// ─── Nav ─────────────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")} data-screen-label="00 Nav">
      <a href="#hero" className="brand" aria-label="Power B home">
        <img src="assets/logo-pb.png" alt="Power B" />
        <span className="wm">Power B</span>
      </a>
      <div className="links">
        <a href="#about">Historia</a>
        <a href="#road">El camino</a>
        <a href="#training">Entrenamiento</a>
        <a href="#mindset">Mindset</a>
        <a href="#press">Prensa</a>
        <a href="#contact">Contacto</a>
      </div>
      <div className="lang">
        <b>ES</b><span className="sep">/</span><span>EN</span>
      </div>
    </nav>
  );
}

// ─── Hero ────────────────────────────────────────────────────────────────────
function Hero({ particles = true, parallax = true }) {
  const bgRef = useRef(null);
  useParallax(bgRef, 0.04, parallax);
  return (
    <section id="hero" className="hero" data-screen-label="01 Hero">
      <div ref={bgRef} className="bg treat" />
      <div className="shaft" />
      <HeroParticles enabled={particles} />
      <div className="grade" />
      <div className="vignette" />

      <div className="content">
        <div className="meta reveal">
          <span className="dot" />
          <span className="tiny" style={{ color: '#fff' }}>Boxeo · Profesional</span>
          <span className="tiny" style={{ opacity: .5 }}>· Huejutla, Hidalgo · MX</span>
        </div>

        <h1 className="display" style={{ lineHeight: .88 }}>
          <WordReveal text="El camino" delay={250} /><br/>
          <span className="light" style={{ display: 'inline-block' }}>
            <WordReveal text="apenas empieza." delay={650} />
          </span>
        </h1>

        <p className="sub reveal reveal-delay-2">
          <i>The journey is just beginning.</i><br/>
          <span style={{ color: '#bdbdbd' }}>Pablo Batres · Power B · Canelo Camp</span>
        </p>

        <div className="ctas reveal reveal-delay-3">
          <a href="#about" className="btn">Conoce la historia <ArrowRight /></a>
          <a href="#contact" className="link-cta">Sponsors &amp; prensa <ArrowRight size={12} /></a>
        </div>
      </div>

      <div className="scroll"><span>Scroll</span><span className="l" /></div>
      <div className="corner-r">
        <span>Cap. 01</span>
        <span className="num">2026</span>
        <span>Pablo Batres</span>
      </div>
    </section>
  );
}

// ─── Marquee tape ────────────────────────────────────────────────────────────
function Marquee() {
  const items = ['HUEJUTLA · HIDALGO', 'POWER B', 'CANELO CAMP', 'EL CAMINO APENAS EMPIEZA', 'BOXEO MX'];
  // Duplicate for seamless loop
  const all = [...items, ...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="track">
        {all.map((it, i) => (
          <span key={i} className={"item" + (i % 2 ? ' muted' : '')}>
            <span>{it}</span>
            <span className="sep" />
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── About ───────────────────────────────────────────────────────────────────
function About({ showStats, parallax = true }) {
  const portraitRef = useRef(null);
  useParallax(portraitRef, -0.06, parallax);
  return (
    <section id="about" className="about section-pad" data-screen-label="02 About">
      <div className="wrap">
        <div className="grid">
          <div className="col-left">
            <div className="eyebrow reveal">02 — Quién es</div>
            <h2 className="display reveal reveal-delay-1" style={{ marginTop: 18 }}>
              Pablo<br/>Batres.
            </h2>
            <p className="quote reveal reveal-delay-2">
              <span className="pull">"No vine de los grandes reflectores.</span>{' '}
              Vine de trabajar en silencio, de aprender disciplina antes que reconocimiento.
              Soy Pablo Batres. Soy <strong style={{ color: '#fff', fontWeight: 500 }}>Power B</strong>.
              Y esto apenas empieza."
            </p>
            <p className="small reveal reveal-delay-3" style={{ marginTop: 24, fontStyle: 'italic', fontFamily: "'Instrument Serif', serif", fontSize: 16, color: 'var(--plata)' }}>
              Boxeador profesional · Nueva promesa del boxeo mexicano
            </p>

            {showStats && (
              <div className="stats reveal reveal-delay-4">
                <div className="stat"><div className="k">Origen</div><div className="v">Huejutla <small>Hidalgo, MX</small></div></div>
                <div className="stat"><div className="k">Camp</div><div className="v">Canelo Camp</div></div>
                <div className="stat"><div className="k">Categoría</div><div className="v">— <small>por confirmar</small></div></div>
                <div className="stat"><div className="k">Récord</div><div className="v">— <small>profesional</small></div></div>
              </div>
            )}
          </div>

          <div className="col-right reveal reveal-delay-2">
            <div className="img-wrap">
              <img ref={portraitRef} className="treat parallax-img" src="assets/portrait.png" alt="Pablo Batres, retrato" style={{ height: '115%', top: '-7.5%', position: 'absolute', left: 0 }} />
              <div className="tag">
                <div className="l">Power B · Retrato · 2026</div>
                <div className="r">PB / 01</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Road / Timeline ─────────────────────────────────────────────────────────
const ROAD = [
  { year: '20XX', event: 'El inicio', place: 'Huejutla, Hidalgo', desc: 'Primeros guantes. Primeros golpes en un gimnasio local. La disciplina antes del talento.' },
  { year: '20XX', event: 'Amateur', place: 'Circuito regional', desc: 'Primeras peleas registradas. Aprender a perder. Aprender a volver al día siguiente.' },
  { year: '20XX', event: 'Debut profesional', place: 'México', desc: 'El nombre Power B entra al registro. Cambio de etapa: de promesa a oficio.' },
  { year: '2025', event: 'Canelo Camp', place: 'San Diego, CA', desc: 'Convocado al campamento que define a la nueva generación del boxeo mexicano. Entrenamiento al lado del mejor de su era.' },
  { year: 'Lo que viene', event: 'Próximos objetivos', place: 'Por anunciar', desc: 'El siguiente capítulo se está escribiendo.', future: true },
];

function Road() {
  return (
    <section id="road" className="road section-pad" data-screen-label="03 Road">
      <div className="wrap">
        <div className="section-head">
          <div className="title">
            <div className="eyebrow reveal">03 — El camino</div>
            <h3 className="display reveal reveal-delay-1" style={{ marginTop: 14 }}>The road<br/>so far.</h3>
            <p className="sub reveal reveal-delay-2">Una historia que sigue escribiéndose, de Huejutla al campamento más reconocido del boxeo mexicano.</p>
          </div>
          <div className="num reveal">CAP · 03 / 09</div>
        </div>

        <div className="timeline reveal">
          {ROAD.map((r, i) => (
            <div key={i} className={"row-tl" + (r.future ? " future" : "")}>
              <div className={"yr" + (r.future ? " future" : "")}>{r.year}</div>
              <div className="ev">
                {r.event}
                <span className="place">{r.place}</span>
              </div>
              <div className="desc">{r.desc}</div>
              <div className="marker"><span className="d" /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Training ────────────────────────────────────────────────────────────────
function Training() {
  return (
    <section id="training" className="training section-pad" data-screen-label="04 Training">
      <div className="wrap">
        <div className="section-head">
          <div className="title">
            <div className="eyebrow reveal">04 — Entrenamiento</div>
            <h3 className="display reveal reveal-delay-1" style={{ marginTop: 14 }}>El trabajo<br/>que nadie ve.</h3>
            <p className="sub reveal reveal-delay-2">
              Cada sesión. Cada madrugada. Cada sacrificio. <i style={{ color: '#9aa6b1', fontFamily: "'Instrument Serif', serif" }}>The work behind the glory.</i>
            </p>
          </div>
        </div>

        <div className="grid reveal">
          <div className="tile t-1">
            <img className="treat" src="assets/training-side.png" alt="Entrenamiento en costal" />
            <div className="label">
              <div className="k">Bag work</div>
              <div className="v">04 · 01</div>
            </div>
          </div>
          <div className="tile t-2">
            <img className="treat" src="assets/training-bag.png" alt="Entrenamiento en pera" />
            <div className="label">
              <div className="k">Speed</div>
              <div className="v">04 · 02</div>
            </div>
          </div>
          <div className="tile t-quote">
            <div>
              <div className="eyebrow" style={{ color: 'var(--plata)' }}>De su libreta</div>
            </div>
            <div>
              <div className="q">"La disciplina también se entrena."</div>
              <div className="sig" style={{ marginTop: 22 }}>— Power B</div>
            </div>
          </div>
          <div className="tile t-3">
            <img className="treat" src="assets/portrait.png" alt="Entre rondas" style={{ objectPosition: '50% 25%' }}/>
            <div className="label">
              <div className="k">Between rounds</div>
              <div className="v">04 · 03</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Mindset ─────────────────────────────────────────────────────────────────
function Mindset() {
  return (
    <section id="mindset" className="mindset section-pad" data-screen-label="05 Mindset">
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 56 }}>
          <div className="title">
            <div className="eyebrow reveal">05 — Mindset</div>
            <h3 className="display reveal reveal-delay-1" style={{ marginTop: 14, fontSize: 'clamp(40px, 5vw, 64px)' }}>Power B<br/>mindset.</h3>
          </div>
          <div className="num reveal">5 / 9</div>
        </div>

        <div className="quote-stack">
          <div className="q lt reveal">
            La disciplina<br/>
            <span className="light">también se entrena.</span>
            <span className="en">Discipline is trained, too.</span>
          </div>

          <div className="divider reveal" />

          <div className="q reveal">
            El ruido llega <span className="em">después</span><br/>
            <span className="light">del trabajo.</span>
            <span className="en">The noise comes after the work.</span>
          </div>

          <div className="divider reveal" />

          <div className="q rt reveal">
            No vengo de grandes reflectores.<br/>
            <span className="light">Vengo de trabajar en silencio.</span>
            <span className="en">I don't come from the spotlight. I come from silent work.</span>
          </div>

          <div className="sig reveal">— Power B</div>
        </div>
      </div>
    </section>
  );
}

// ─── Sponsors ────────────────────────────────────────────────────────────────
function Sponsors() {
  return (
    <section id="sponsors" className="sponsors section-pad" data-screen-label="06 Sponsors">
      <div className="wrap">
        <div className="section-head">
          <div className="title">
            <div className="eyebrow reveal">06 — Partners</div>
            <h3 className="display reveal reveal-delay-1" style={{ marginTop: 14 }}>Partners.</h3>
            <p className="sub reveal reveal-delay-2">Marcas que caminan al lado del proyecto Power B desde el día uno.</p>
          </div>
          <div className="num reveal">6 / 9</div>
        </div>

        <div className="grid reveal">
          <div className="cell active">
            <div className="logo">
              <span>Adams</span>
              <span>Boxing</span>
              <span className="sm">Equipo oficial</span>
            </div>
          </div>
          <div className="cell empty"><span className="ph">Tu marca aquí</span></div>
          <div className="cell empty"><span className="ph">Tu marca aquí</span></div>
          <div className="cell empty"><span className="ph">Tu marca aquí</span></div>
        </div>

        <div className="invite reveal">
          <div className="l">
            <h4>¿Quieres ser parte del equipo?</h4>
            <p>Sponsorships, colaboraciones de marca y oportunidades de co-creación con un atleta en construcción.</p>
          </div>
          <a href="#contact" className="btn">Become a partner <ArrowRight /></a>
        </div>
      </div>
    </section>
  );
}

// ─── Press ───────────────────────────────────────────────────────────────────
const PRESS = [
  { outlet: 'RÉCORD', title: 'La nueva generación del boxeo mexicano que llega desde Hidalgo.', date: '20XX' },
  { outlet: 'ESPN DEPORTES', title: 'Canelo Camp suma a Pablo "Power B" Batres a su nueva camada.', date: '20XX' },
  { outlet: 'HIDALGO HOY', title: 'De Huejutla al ring: la historia silenciosa detrás de Power B.', date: '20XX' },
];

function Press() {
  return (
    <section id="press" className="press section-pad" data-screen-label="07 Press">
      <div className="wrap">
        <div className="section-head">
          <div className="title">
            <div className="eyebrow reveal">07 — Media &amp; Press</div>
            <h3 className="display reveal reveal-delay-1" style={{ marginTop: 14 }}>En los medios.</h3>
            <p className="sub reveal reveal-delay-2">
              Cobertura de su trayectoria en medios deportivos nacionales e internacionales. <i style={{ color: '#9aa6b1', fontFamily: "'Instrument Serif', serif" }}>Press & features.</i>
            </p>
          </div>
          <a href="#contact" className="link-cta reveal" style={{ alignSelf: 'flex-end' }}>Solicitar entrevista <ArrowRight size={12} /></a>
        </div>

        <div className="grid">
          {PRESS.map((p, i) => (
            <div key={i} className="card reveal" style={{ transitionDelay: `${i*80}ms` }}>
              <div>
                <div className="outlet">{p.outlet}</div>
                <h4>{p.title}</h4>
              </div>
              <div className="meta">
                <span>{p.date} · Nota</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>Leer <ArrowRight size={12} /></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Social wall ─────────────────────────────────────────────────────────────
function Social() {
  // Mix real images + placeholder cells. 6 cells total.
  const cells = [
    { img: 'assets/training-bag.png',  likes: '12.4K', net: 'IG' },
    { img: 'assets/portrait.png',      likes: '8.1K',  net: 'IG' },
    { img: 'assets/training-side.png', likes: '24.7K', net: 'TT' },
    { img: 'assets/hero.png',          likes: '6.2K',  net: 'IG' },
    { img: 'assets/gallery-01.png',    likes: '18.9K', net: 'IG' },
    { img: 'assets/gallery-02.png',    likes: '32.1K', net: 'TT' },
  ];
  return (
    <section id="social" className="social section-pad" data-screen-label="08 Social">
      <div className="wrap">
        <div className="section-head">
          <div className="title">
            <div className="eyebrow reveal">08 — Comunidad</div>
            <h3 className="display reveal reveal-delay-1" style={{ marginTop: 14 }}>Síguelo<br/>en vivo.</h3>
            <p className="sub reveal reveal-delay-2">
              Reels, sparrings, viajes y el día a día del campamento. <i style={{ color: '#9aa6b1', fontFamily: "'Instrument Serif', serif" }}>Follow the journey.</i>
            </p>
          </div>
          <div className="row gap-24 reveal" style={{ alignSelf: 'flex-end' }}>
            <a className="link-cta" href="#">Instagram <ArrowRight size={12} /></a>
            <a className="link-cta" href="#">TikTok <ArrowRight size={12} /></a>
          </div>
        </div>

        <div className="wall reveal">
          {cells.map((c, i) => (
            <a key={i} href="#" className={"post" + (c.placeholder ? ' placeholder' : '')}>
              {c.placeholder ? (
                <span>Próximamente · {c.net}</span>
              ) : (
                <>
                  <img className="treat" src={c.img} alt="" />
                  <div className="icon">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.4">
                      <rect x="3" y="3" width="18" height="18" rx="4" />
                      <circle cx="12" cy="12" r="4" />
                      <circle cx="17.5" cy="6.5" r="1" fill="#fff" />
                    </svg>
                  </div>
                  <div className="stats"><span>♡ {c.likes}</span><span>{c.net}</span></div>
                </>
              )}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Contact ─────────────────────────────────────────────────────────────────
function Contact({ parallax = true }) {
  const bgRef = useRef(null);
  useParallax(bgRef, 0.08, parallax);
  const [form, setForm] = useState({ name: '', email: '', company: '', message: '' });
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSent(true);
    setTimeout(() => setSent(false), 4200);
    setForm({ name: '', email: '', company: '', message: '' });
  };

  return (
    <section id="contact" className="contact section-pad" data-screen-label="09 Contact">
      <div ref={bgRef} className="bg treat parallax-img" />
      <div className="grade" />

      <div className="wrap">
        <div className="inner">
          <div>
            <div className="eyebrow reveal">09 — Management</div>
            <h3 className="display reveal reveal-delay-1" style={{ marginTop: 14 }}>¿Trabajamos<br/>juntos?</h3>
            <p className="sub reveal reveal-delay-2">
              Sponsors · Entrevistas · Colaboraciones · Eventos.
              <span className="en">Let's work together — press, partnerships & appearances.</span>
            </p>

            <div className="reveal reveal-delay-3" style={{ marginTop: 56, borderTop: '1px solid var(--line)', paddingTop: 28, maxWidth: 420 }}>
              <div className="tiny" style={{ marginBottom: 12 }}>Management</div>
              <div style={{ fontFamily: "'Bebas Neue'", fontSize: 22, letterSpacing: '.08em', color: '#fff' }}>contacto@pablobatres.com</div>
              <div className="small" style={{ marginTop: 6 }}>Respuesta en 48 hrs · ES / EN</div>
            </div>
          </div>

          <form onSubmit={onSubmit} className="reveal reveal-delay-2">
            <div className="field row2">
              <div className="field">
                <label>Nombre</label>
                <input type="text" required placeholder="Tu nombre"
                  value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
              </div>
              <div className="field">
                <label>Email</label>
                <input type="email" required placeholder="tu@correo.com"
                  value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
              </div>
            </div>
            <div className="field">
              <label>Empresa / Medio <span style={{ opacity: .5 }}>· opcional</span></label>
              <input type="text" placeholder="Marca, medio o agencia"
                value={form.company} onChange={e => setForm({ ...form, company: e.target.value })} />
            </div>
            <div className="field">
              <label>Mensaje</label>
              <textarea required placeholder="Cuéntanos sobre tu proyecto, propuesta o solicitud."
                value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} />
            </div>
            <div className="submit-row">
              <span className="note">Sponsors · Press · Bookings</span>
              <button type="submit" className="btn">Enviar mensaje <ArrowRight /></button>
            </div>
            {sent && <div className="sent-msg">Mensaje recibido. Te contactamos en menos de 48 hrs. — Power B Management</div>}
          </form>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ──────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap row between">
        <div className="left">
          <img src="assets/logo-pb.png" alt="" />
          <div className="col">
            <div className="name">Power B</div>
            <div className="sm">Pablo Batres · Huejutla, MX</div>
          </div>
        </div>
        <div className="socials">
          <a href="#">Instagram</a>
          <a href="#">TikTok</a>
          <a href="#">YouTube</a>
          <a href="#contact">Press</a>
        </div>
        <div className="copy">© 2026 Power B · All rights reserved</div>
      </div>
    </footer>
  );
}

// ─── App ─────────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  // Apply photo treatment to <body>
  useEffect(() => {
    document.body.setAttribute('data-treatment', t.treatment);
  }, [t.treatment]);

  return (
    <>
      <Nav />
      <Hero particles={t.particles} parallax={t.parallax} />
      <About showStats={t.showStats} parallax={t.parallax} />
      <Road />
      {t.marquee && <Marquee />}
      <Training />
      <Mindset />
      <Sponsors />
      <Press />
      <Social />
      <Contact parallax={t.parallax} />
      <Footer />

      <TweaksPanel title="Tweaks · Power B">
        <TweakSection label="Photography" />
        <TweakRadio
          label="Treatment"
          value={t.treatment}
          options={['raw', 'bw', 'cool', 'warm']}
          onChange={(v) => setTweak('treatment', v)}
        />
        <TweakSection label="Motion" />
        <TweakToggle
          label="Dust particles (hero)"
          value={t.particles}
          onChange={(v) => setTweak('particles', v)}
        />
        <TweakToggle
          label="Parallax"
          value={t.parallax}
          onChange={(v) => setTweak('parallax', v)}
        />
        <TweakToggle
          label="Marquee tape"
          value={t.marquee}
          onChange={(v) => setTweak('marquee', v)}
        />
        <TweakSection label="Sections" />
        <TweakToggle
          label="Show stats block"
          value={t.showStats}
          onChange={(v) => setTweak('showStats', v)}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);