/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;
const { createRoot } = ReactDOM;

const IG = 'https://www.instagram.com/project226_/';
const TIKTOK = 'https://www.tiktok.com/@project226_';
const WA_GROUP = 'https://chat.whatsapp.com/JDNINDfFGwi3MQ9QXjBpkN?mode=gi_t';
const WA_LINK = 'https://w.app/project226_';
const WA_PHONE = '5491132400743';
const WA_DIRECT = () => WA_LINK;
const MAIL_TO = 'infoproject226@gmail.com';
const MAIL = (subject, body) =>
`mailto:${MAIL_TO}?subject=${encodeURIComponent(subject || 'Propuesta — Project 226')}&body=${encodeURIComponent(body || '')}`;

// Formspree: ir a formspree.io → New Form → copiar el ID de la URL y pegarlo acá
const FORMSPREE_ID = 'YOUR_FORM_ID'; // ← reemplazar, ej: 'xvgprdkz'

/* ───────── METRICS / LIVE DATA ─────────
   Conectado a una capa de métricas (API stub). Para producción:
   reemplazar fetchLiveMetrics() con tu endpoint real (Phyllo,
   Modash, Iconosquare, o un cron a Instagram Graph API).
*/
// Semana 15 al 4-may-2026 → semana 1 = 26-ene-2026 (lunes). Mantener este lunes para que la cuenta sea exacta.
const PROJECT_START = new Date('2026-01-26T00:00:00-03:00'); // semana 1
const RACE_DATE = new Date('2026-12-13T00:00:00-05:00'); // Ironman Florida

function weekProgress() {
  const ms = Date.now() - PROJECT_START.getTime();
  const week = Math.max(1, Math.min(46, Math.floor(ms / (7 * 24 * 3600 * 1000)) + 1));
  return { week, total: 46 };
}
function daysToRace() {
  return Math.max(0, Math.ceil((RACE_DATE.getTime() - Date.now()) / (24 * 3600 * 1000)));
}

// Capa de métricas en vivo. En producción: poner METRICS_ENDPOINT a tu API
// (Phyllo, Modash, Iconosquare, o un cron propio que lea Instagram Graph API).
// Mientras tanto, los números se manejan desde Tweaks y refrescan en pantalla.
const METRICS_ENDPOINT = ''; // ej. 'https://api.tudominio.com/p226/metrics'

async function fetchLiveMetrics(seed) {
  if (METRICS_ENDPOINT) {
    try {
      const r = await fetch(METRICS_ENDPOINT, { cache: 'no-store' });
      if (r.ok) {
        const j = await r.json();
        return { ...seed, ...j, _ts: Date.now() };
      }
    } catch (_) {}
  }
  return { ...seed, _ts: Date.now() };
}

/* ───────── TWEAKS DEFAULTS ───────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "followers": 10000,
  "engagement": 5.34,
  "viewsAvg": 5000,
  "members": 240,
  "posts": 293,
  "useAI": false,
  "accent": "#f6f4ee",
  "showTicker": true
} /*EDITMODE-END*/;

/* ───────────── NAV ───────────── */
function Nav({ openForm }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', on, { passive: true });on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
  }, [mobileOpen]);
  const close = () => setMobileOpen(false);
  return (
    <>
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" aria-label="Project 226" style={{ display: 'flex', alignItems: 'center' }} onClick={close}>
        <img src="assets/logo-mark.png" alt="Project 226" className="brand-mark" />
      </a>
      <ul className="nav-desktop">
        <li><a href="#about">01 — El proyecto</a></li>
        <li><a href="#strava">02 — En vivo</a></li>
        <li><a href="#partners">03 — Marcas que confiaron</a></li>
        <li><a href="#community">04 — Comunidad</a></li>
        <li><a href="#faq">05 — FAQ</a></li>
      </ul>
      <button className="btn btn-primary nav-cta" onClick={openForm} style={{ padding: '10px 16px', cursor: 'pointer', whiteSpace: 'nowrap' }}>
        Quiero ser sponsor
        <svg className="arrow" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
      </button>
      <button className={`burger ${mobileOpen ? 'open' : ''}`} aria-label="Menú" onClick={() => setMobileOpen(o => !o)}
        style={{ width: 36, height: 36, position: 'relative', background: 'transparent', border: '1px solid var(--line-2)', borderRadius: 999, cursor: 'pointer', display: 'none', padding: 0, marginLeft: 8 }}>
        <span style={{ position: 'absolute', left: 9, right: 9, top: 12, height: 1.5, background: 'var(--fg)', transition: 'transform .3s, top .3s', transform: mobileOpen ? 'translateY(5px) rotate(45deg)' : 'none' }} />
        <span style={{ position: 'absolute', left: 9, right: 9, top: 17, height: 1.5, background: 'var(--fg)', transition: 'opacity .25s', opacity: mobileOpen ? 0 : 1 }} />
        <span style={{ position: 'absolute', left: 9, right: 9, top: 22, height: 1.5, background: 'var(--fg)', transition: 'transform .3s, top .3s', transform: mobileOpen ? 'translateY(-5px) rotate(-45deg)' : 'none' }} />
      </button>
    </nav>
    {mobileOpen && (
    <div className={`mobile-menu open`} onClick={close}>
      <ul onClick={(e) => e.stopPropagation()}>
        <li><a href="#about" onClick={close}>El proyecto</a></li>
        <li><a href="#strava" onClick={close}>En vivo</a></li>
        <li><a href="#partners" onClick={close}>Marcas que confiaron</a></li>
        <li><a href="#community" onClick={close}>Comunidad</a></li>
        <li><a href="#faq" onClick={close}>FAQ</a></li>
        <li className="mm-sep" />
        <li><button onClick={() => { close(); openForm(); }} className="mm-cta">Colaborar →</button></li>
      </ul>
    </div>
    )}
    </>);
}

/* ───────────── HERO ───────────── */
function Hero({ metrics, openForm }) {
  const { week, total } = weekProgress();
  const [cd, setCd] = useState(() => {
    const ms = Math.max(0, RACE_DATE.getTime() - Date.now());
    return {
      d: Math.floor(ms / (24 * 3600 * 1000)),
      h: Math.floor((ms % (24 * 3600 * 1000)) / (3600 * 1000)),
      m: Math.floor((ms % (3600 * 1000)) / (60 * 1000)),
      s: Math.floor((ms % (60 * 1000)) / 1000)
    };
  });
  useEffect(() => {
    const id = setInterval(() => {
      const ms = Math.max(0, RACE_DATE.getTime() - Date.now());
      setCd({
        d: Math.floor(ms / (24 * 3600 * 1000)),
        h: Math.floor((ms % (24 * 3600 * 1000)) / (3600 * 1000)),
        m: Math.floor((ms % (3600 * 1000)) / (60 * 1000)),
        s: Math.floor((ms % (60 * 1000)) / 1000)
      });
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <section id="top" style={{ position: 'relative', minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', paddingTop: 120, paddingBottom: 40, overflow: 'hidden' }}>
      {/* Cinematic background video */}
      <video
        autoPlay muted loop playsInline preload="auto"
        poster="assets/hero-poster.jpg"
        onError={(e) => {e.currentTarget.style.display = 'none';}}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.45, zIndex: 0 }}>
        <source src="assets/hero-loop.mp4" type="video/mp4" />
        <source src="assets/hero-loop.webm" type="video/webm" />
      </video>
      {/* Vignette overlay over video */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 80%, #000 100%)', zIndex: 1, pointerEvents: 'none' }} />
      <div className="wrap" style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
        {/* Top meta row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'clamp(32px, 5vh, 64px)', flexWrap: 'wrap', gap: 12 }}>
          <span className="eyebrow">DESDE BUENOS AIRES · 2026</span>
          <span className="eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: '#22c55e', boxShadow: '0 0 12px #22c55e' }} />
            EN VIVO · SEMANA {String(week).padStart(2, '0')} / {total}
          </span>
        </div>

        {/* Compact logo above wordmark */}
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '0 0 clamp(16px, 2.5vh, 28px)' }}>
          <img src="assets/logo-mark.png" alt="Project 226" style={{
            width: 'min(20vw, 120px)',
            height: 'auto',
            filter: 'drop-shadow(0 0 40px rgba(255,255,255,0.30))'
          }} />
        </div>

        {/* Wordmark below */}
        <h1 className="display" style={{
          fontSize: 'clamp(68px, 14vw, 220px)',
          textAlign: 'center',
          letterSpacing: '-0.02em',
          margin: 'clamp(12px, 3vh, 32px) 0 clamp(24px, 4vh, 48px)'
        }}>
          PROJECT 226
        </h1>

        {/* Claim */}
        <p className="mono" style={{
          textAlign: 'center',
          fontSize: 'clamp(13px, 1.1vw, 15px)',
          letterSpacing: '0.2em',
          textTransform: 'uppercase',
          color: 'var(--fg)',
          maxWidth: '60ch',
          margin: '0 auto'
        }}>
          Dos amigos, un Ironman, nada inventado.
        </p>

        {/* CTAs */}
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 'clamp(40px, 6vh, 72px)', flexWrap: 'wrap' }}>
          <a className="btn btn-primary" href={WA_GROUP} target="_blank" rel="noreferrer">
            Sumate al grupo
            <svg className="arrow" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
          </a>
          <button className="btn btn-ghost" onClick={openForm} style={{ cursor: 'pointer' }}>SOS MARCA? ESCRIBINOS</button>
        </div>

        {/* Live data strip */}
        <div className="hero-live" style={{ marginTop: 'clamp(56px, 8vh, 96px)', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
          <LiveCell k="Semana" v={`${week}/${total}`} />
          <LiveCell k="Falta" v={`${cd.d}d ${String(cd.h).padStart(2,'0')}:${String(cd.m).padStart(2,'0')}:${String(cd.s).padStart(2,'0')}`} last live />
        </div>
      </div>

      {/* Bottom ticker */}
      <div className="ticker" style={{ marginTop: 60 }}>
        <div className="marquee">
          {Array.from({ length: 3 }).map((_, g) =>
          <div key={g} style={{ display: 'flex', gap: 80, alignItems: 'center' }}>
              {['DOS AMIGOS', 'UN IRONMAN', '46 SEMANAS', 'NADA INVENTADO', 'TODO GRABADO', 'BUENOS AIRES → FLORIDA', '—', 'P226'].map((w, i) =>
            <span key={i} className="mono" style={{ fontSize: 12, letterSpacing: '0.24em', color: 'var(--fg-dim)' }}>{w}</span>
            )}
            </div>
          )}
        </div>
      </div>
    </section>);

}

function LiveCell({ k, v, live, last }) {
  return (
    <div style={{ padding: 'clamp(20px, 2.5vw, 32px) clamp(12px, 2vw, 24px)', borderRight: last ? 'none' : '1px solid var(--line)' }}>
      <div className="display" style={{ fontSize: 'clamp(28px, 3.6vw, 52px)', letterSpacing: '-0.02em' }}>{v}</div>
      <div className="mono" style={{ marginTop: 10, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-dim)', display: 'flex', alignItems: 'center', gap: 8 }}>
        {live && <span style={{ width: 5, height: 5, borderRadius: 999, background: '#22c55e' }} />}
        {k}
      </div>
    </div>);

}

function fmt(n) {
  if (n >= 1000) return (n / 1000).toFixed(1).replace('.0', '') + 'K';
  return String(n);
}

/* ───────────── QUÉ ES ───────────── */
function About() {
  return (
    <section className="section" id="about">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'clamp(48px, 8vw, 96px)', flexWrap: 'wrap', gap: 16 }}>
          <span className="eyebrow">01 / El proyecto</span>
          <span className="eyebrow">01 — 05</span>
        </div>

        <h2 className="display" style={{
          fontSize: 'clamp(40px, 7vw, 112px)',
          maxWidth: '14ch',
          marginBottom: 'clamp(48px, 6vw, 80px)'
        }}>
          Una marca<br />que se construye<br /><span style={{ color: 'var(--fg-dim)' }}>corriendo.</span>
        </h2>

        <div className="row-2" style={{ alignItems: 'start' }}>
          <p className="lead">
            Somos <strong>dos pibes</strong> que arrancaron lesionados, sin saber nadar, y se metieron en algo grande: el <strong>Ironman 70.3 de Florida</strong>, el 13 de diciembre del 2026. 46 semanas de entreno. Todo, pero todo, lo subimos.
          </p>
          <p className="body">No somos una cuenta más ni un grupo de WhatsApp genérico. Es lo que pasa de verdad: los días que sale y los que no, las dudas, las recaídas, las pavadas. Una plataforma abierta para el que quiera meterse en algo grande y para marcas que cachan cuándo una historia vale la pena contarla.</p>
        </div>
      </div>
    </section>);

}

/* ───────────── DIFERENCIALES ───────────── */
function Different() {
  const items = [
  { n: '01', t: 'En vivo, sin filtro', d: 'Los entrenamientos que salen y los días que no querés saber nada. La duda también se publica.' },
  { n: '02', t: 'Una historia, no un feed', d: 'Cada video es un capítulo. Tiene principio, desarrollo, y todavía no sabemos cómo termina.' },
  { n: '03', t: 'Comunidad de verdad', d: 'Gente que se conoce, entrena junta y se cruza fuera de la pantalla. Sin seguidores fantasma.' },
  { n: '04', t: 'Marcas que suman', d: 'Las marcas que encajan se meten en el proceso. No son un cartel pegado al final del reel.' }];

  return (
    <section className="section" id="different">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'clamp(48px, 8vw, 96px)', flexWrap: 'wrap', gap: 16 }}>
          <span className="eyebrow">02 / Cómo se ve</span>
          <span className="eyebrow">02 — 05</span>
        </div>

        <h2 className="display" style={{
          fontSize: 'clamp(40px, 7vw, 112px)',
          maxWidth: '16ch',
          marginBottom: 'clamp(56px, 7vw, 96px)'
        }}>
          No somos una cuenta más.<br /><span style={{ color: 'var(--fg-dim)' }}>Somos un proyecto con forma.</span>
        </h2>

        <div style={{ borderTop: '1px solid var(--line)' }}>
          {items.map((x) =>
          <div key={x.n} className="diff-row" style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 2fr)',
            gap: 'clamp(20px, 4vw, 80px)',
            padding: 'clamp(32px, 4vw, 56px) 0',
            borderBottom: '1px solid var(--line)',
            alignItems: 'start'
          }}>
              <h3 className="display" style={{ fontSize: 'clamp(22px, 2.6vw, 34px)', letterSpacing: '-0.01em', lineHeight: 0.95 }}>{x.t}</h3>
              <p className="body" style={{ fontSize: 16 }}>{x.d}</p>
            </div>
          )}
        </div>

        <style>{`
          @media (max-width: 780px) {
            .diff-row { grid-template-columns: 1fr !important; gap: 12px !important; }
          }
        `}</style>
      </div>
    </section>);

}

/* ───────────── COMUNIDAD ───────────── */
function Community({ metrics }) {

  return (
    <section className="section" id="community">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'clamp(48px, 8vw, 96px)', flexWrap: 'wrap', gap: 16 }}>
          <span className="eyebrow">04 / Comunidad</span>
          <span className="eyebrow">04 — 05</span>
        </div>

        {/* Headline + single big visual */}
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'end', marginBottom: 'clamp(56px, 7vw, 96px)' }} className="comm-top">
          <h2 className="display" style={{ fontSize: 'clamp(40px, 7vw, 112px)' }}>
            No es<br />una audiencia.<br /><span style={{ color: 'var(--fg-dim)' }}>ES UNA COMUNIDAD.</span>
          </h2>
          <p className="body" style={{ fontSize: 17 }}>Lo que arrancó como un grupo de WhatsApp se transformó en un grupo que entrena, se junta y se banca. Una marca no colabora con dos personas —colabora con todo lo que se mueve alrededor.

          </p>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--line)', paddingTop: 32, marginTop: 16, flexWrap: 'wrap', gap: 16 }}>
          <span className="eyebrow">SIN NIVEL MÍNIMO · SI QUERÉS MOVERTE, YA SOS PARTE</span>
          <a className="btn btn-ghost" href={WA_GROUP} target="_blank" rel="noreferrer">
            Entrar al grupo
            <svg className="arrow" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
          </a>
        </div>

        <style>{`
          @media (max-width: 820px) {
            .comm-top { grid-template-columns: 1fr !important; align-items: start !important; }
            .stats { grid-template-columns: repeat(2, 1fr) !important; }
            .stat:nth-child(2) { border-right: none !important; }
            .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
          }
        `}</style>
      </div>
    </section>);

}

/* ───────────── PARTNERS / MARCAS QUE CONFIARON ───────────── */
function Partners() {
  const trackRef = useRef(null);
  const pausedRef = useRef(false);

  useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    let raf;
    let last = performance.now();
    const SPEED = 70; // px / sec (más rápido que antes)
    const tick = (now) => {
      const dt = (now - last) / 1000;
      last = now;
      if (!pausedRef.current && el) {
        el.scrollLeft += SPEED * dt;
        const half = el.scrollWidth / 2;
        if (el.scrollLeft >= half) el.scrollLeft -= half;
        if (el.scrollLeft < 0) el.scrollLeft += half;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    const pause = () => {pausedRef.current = true;};
    const resume = () => {pausedRef.current = false;};
    el.addEventListener('mouseenter', pause);
    el.addEventListener('mouseleave', resume);
    el.addEventListener('touchstart', pause, { passive: true });
    el.addEventListener('touchend', () => setTimeout(resume, 1500), { passive: true });
    return () => {
      cancelAnimationFrame(raf);
      el.removeEventListener('mouseenter', pause);
      el.removeEventListener('mouseleave', resume);
    };
  }, []);

  const nudge = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    pausedRef.current = true;
    el.scrollBy({ left: dir * 320, behavior: 'smooth' });
    setTimeout(() => {pausedRef.current = false;}, 1500);
  };

  const brands = [
  { name: 'RITUAL', tag: 'Café de especialidad', url: 'https://www.instagram.com/ritualcafe.arg/', handle: '@ritualcafe.arg' },
  { name: 'GARMIN', tag: 'GPS & wearables', url: 'https://www.instagram.com/garminargentina/', handle: '@garminargentina' },
  { name: 'LAS TRES NIÑAS', tag: 'Leche', url: 'https://www.instagram.com/lastresninasok/', handle: '@lastresninasok' },
  { name: 'SUMA', tag: 'Hidratación', url: 'https://www.instagram.com/drink.suma/', handle: '@drink.suma' },
  { name: 'PELOTÓN BIKES', tag: 'Bicis & equipamiento', url: 'https://www.instagram.com/peloton.bikes/', handle: '@peloton.bikes' },
  { name: 'MARTHA', tag: 'Ropa y lifestyle', url: 'https://www.instagram.com/martha/', handle: '@martha' },
  { name: 'BASSET', tag: 'Indumentaria', url: 'https://www.instagram.com/basset.arg/', handle: '@basset.arg' },
  { name: 'SPORT TECH', tag: 'Deporte & tecnología', url: 'https://www.instagram.com/sportechstore.arg/', handle: '@sportechstore.arg' },
  { name: 'THERABODY', tag: 'Recovery & bienestar', url: 'https://www.instagram.com/therabodyargentina/', handle: '@therabodyargentina' },
  { name: 'INSTA360', tag: 'Productos de tecnología', url: 'https://www.instagram.com/insta360argentina/', handle: '@insta360argentina' },
  { name: 'DAY BY DAY', tag: 'Productos fit', url: 'https://www.instagram.com/daybyday_arg/', handle: '@daybyday_arg' },
  { name: "ZANNA'S", tag: 'Nutrición', url: 'https://www.instagram.com/zannas.ar/', handle: '@zannas.ar' }];


  return (
    <section className="section" id="partners" style={{ paddingTop: 'clamp(64px, 8vw, 120px)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'clamp(40px, 5vw, 64px)', flexWrap: 'wrap', gap: 16 }}>
          <span className="eyebrow">Marcas que confiaron</span>
          <span className="eyebrow">— se subieron temprano —</span>
        </div>

        <h3 className="display" style={{ fontSize: 'clamp(32px, 4.5vw, 64px)', letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 'clamp(40px, 5vw, 72px)', maxWidth: '24ch' }}>
          Marcas que ya<br /><span style={{ color: 'var(--fg-dim)' }}>se subieron al barco.</span>
        </h3>

        <div className="partner-track-wrap" style={{ position: 'relative', marginInline: 'calc(-1 * var(--gutter, 24px))' }}>
          <button onClick={() => nudge(-1)} aria-label="Anterior" className="carousel-nav left">
            <svg viewBox="0 0 14 14" width="14" height="14" fill="none"><path d="M9 2L3 7L9 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
          <button onClick={() => nudge(1)} aria-label="Siguiente" className="carousel-nav right">
            <svg viewBox="0 0 14 14" width="14" height="14" fill="none"><path d="M5 2L11 7L5 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
          <div ref={trackRef} className="partner-track" style={{
            display: 'flex', gap: 16,
            overflowX: 'auto', overflowY: 'hidden',
            scrollBehavior: 'auto',
            scrollbarWidth: 'none',
            paddingInline: 'var(--gutter, 24px)',
            scrollSnapType: 'none'
          }}>
            {[...brands, ...brands].map((b, idx) =>
            <a key={idx} href={b.url} target="_blank" rel="noreferrer" className="partner-card"
            style={{
              width: 280, flexShrink: 0,
              padding: 'clamp(24px, 3vw, 36px)',
              border: '1px solid var(--line)',
              background: '#070707',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: 320,
              color: 'var(--fg)',
              position: 'relative',
              textDecoration: 'none',
              transition: 'transform 0.35s ease, background 0.3s, border-color 0.3s'
            }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1, minHeight: 140 }}>
                  <div style={{ width: 132, height: 132, borderRadius: '50%', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#070707' }}>
                    <img
                    src={`assets/brands/${b.name.toLowerCase().replace(/[^a-z0-9]/g, '')}.png`}
                    alt={b.name}
                    onError={(e) => {e.currentTarget.style.display = 'none';e.currentTarget.nextElementSibling.style.display = 'flex';}}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  
                    <div className="display" style={{ display: 'none', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', fontSize: 14, letterSpacing: '-0.01em', lineHeight: 1.1, textAlign: 'center', padding: 12, color: 'var(--fg)' }}>
                      {b.name}
                    </div>
                  </div>
                </div>
                <div style={{ marginTop: 20 }}>
                  <div className="display" style={{ fontSize: 'clamp(18px, 1.6vw, 22px)', letterSpacing: '-0.01em', lineHeight: 1, marginBottom: 6, textTransform: 'uppercase' }}>
                    {b.name}
                  </div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 14 }}>{b.tag}</div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-dim)', display: 'flex', alignItems: 'center', gap: 6 }}>
                    {b.handle}
                    <svg viewBox="0 0 14 14" fill="none" style={{ width: 11, height: 11 }}>
                      <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                    </svg>
                  </div>
                </div>
              </a>
            )}
          </div>
        </div>

        <p className="mono" style={{ marginTop: 24, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>
          Tocá cualquier marca y te lleva a su Instagram · usá las flechas para volver · <a href="#brands" style={{ color: 'var(--fg)' }}>VER PROPUESTAS →</a>
        </p>

        <style>{`
          .partner-track::-webkit-scrollbar { display: none; }
          .partner-card:hover { transform: translateY(-6px); border-color: var(--line-2, #2a2a2a) !important; background: #0c0c0c !important; }
          .carousel-nav {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 44px; height: 44px; border-radius: 50%;
            background: rgba(10,10,10,0.85); backdrop-filter: blur(8px);
            border: 1px solid var(--line, #232323);
            color: var(--fg, #f5f3ec);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; z-index: 5;
            transition: background 0.2s, transform 0.2s;
          }
          .carousel-nav:hover { background: #1a1a1a; transform: translateY(-50%) scale(1.05); }
          .carousel-nav.left { left: 8px; }
          .carousel-nav.right { right: 8px; }
          @media (max-width: 720px) {
            .partner-card { width: 240px !important; min-height: 280px !important; }
            .carousel-nav { width: 36px; height: 36px; }
          }
        `}</style>
      </div>
    </section>);

}

/* ───────────── VALORES ───────────── */
function Values() {
  const v = ['Disfrutar el proceso', 'Documentar todo', 'Crear comunidad', 'Ser genuino', 'Apuntar alto', 'No aflojar'];
  return (
    <section className="section" id="values" style={{ background: '#020202' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'clamp(48px, 8vw, 96px)' }}>
          <span className="eyebrow">Valores</span>
          <span className="eyebrow">— P226 —</span>
        </div>
        <div className="display" style={{
          fontSize: 'clamp(44px, 9vw, 160px)',
          letterSpacing: '-0.025em',
          lineHeight: 1.02
        }}>
          {v.map((w, i) =>
          <div key={w} style={{ display: 'flex', alignItems: 'baseline', gap: 'clamp(16px, 3vw, 48px)', borderBottom: '1px solid var(--line)', padding: 'clamp(16px, 2vw, 28px) 0' }}>
              <span className="mono" style={{ fontSize: 12, letterSpacing: '0.2em', color: 'var(--fg-mute)' }}>{`0${i + 1}`}</span>
              <span style={{ color: i % 2 === 0 ? 'var(--fg)' : 'var(--fg-dim)' }}>{w}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ───────────── PARA MARCAS ───────────── */
function Brands({ openForm }) {
  const tiers = [
  {
    k: 'Producto',
    d: 'Nos mandás el producto, lo usamos en serio entrenando y aparece en la historia cuando suma. Sin guion armado, sin posteos hechos a medida — así se nota que es genuino y así convierte.',
    t: ['Te mandamos el producto', 'Lo integramos al día a día', 'Reels, stories y menciones orgánicas']
  },
  {
    k: 'Contenido a medida',
    d: 'Producimos contenido pensado para tu marca, con ustedes de protagonistas. Bajamos la idea, grabamos, editamos y lo subimos a nuestros canales y a los tuyos.',
    t: ['Concepto, guión y producción', 'Contenido corto, carruseles y contenido largo', 'Distribución en IG, TikTok y YouTube', 'Derechos de uso para tu marca']
  },
  {
    k: 'Largo plazo',
    d: 'Tu marca metida en el proyecto durante todo el camino al Ironman. Presencia sostenida, eventos y contenido todo el año.',
    t: ['Relación a largo plazo', 'Eventos y activaciones presenciales', 'Plan de contenido mensual']
  }];

  return (
    <section className="section" id="brands" style={{ background: '#020202' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'clamp(48px, 8vw, 96px)', flexWrap: 'wrap', gap: 16 }}>
          <span className="eyebrow">03 / Para marcas</span>
          <span className="eyebrow">03 — 05</span>
        </div>

        <h2 className="display" style={{
          fontSize: 'clamp(40px, 7vw, 112px)',
          maxWidth: '14ch',
          marginBottom: 'clamp(32px, 4vw, 56px)'
        }}>
          Estamos<br />construyendo algo grande.<br /><span style={{ color: 'var(--fg-dim)' }}>Metéte.</span>
        </h2>

        <p className="lead" style={{ marginBottom: 'clamp(72px, 8vw, 120px)' }}>
          Project 226 es una <strong>plataforma de marca en formación</strong>: audiencia que se compromete, una historia que se sostiene en el tiempo y producción con criterio. Buscamos aliados que entiendan el proyecto, no sponsors que pongan plata y se vayan.
        </p>

        {/* Tiers — horizontal list, minimal */}
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {tiers.map((t, i) =>
          <div key={i} className="tier-row" style={{
            display: 'grid',
            gridTemplateColumns: '80px minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr)',
            gap: 'clamp(20px, 3vw, 56px)',
            padding: 'clamp(36px, 5vw, 64px) 0',
            borderBottom: '1px solid var(--line)',
            alignItems: 'start'
          }}>
              <span className="mono" style={{ fontSize: 12, letterSpacing: '0.14em', color: 'var(--fg-mute)', paddingTop: 8 }}>{`0${i + 1}`}</span>
              <h3 className="display" style={{ fontSize: 'clamp(28px, 3.5vw, 52px)', letterSpacing: '-0.015em', lineHeight: 0.92 }}>{t.k}</h3>
              <p className="body" style={{ fontSize: 16, paddingTop: 6 }}>{t.d}</p>
              <ul style={{ listStyle: 'none', padding: 0, paddingTop: 6 }}>
                {t.t.map((x, j) =>
              <li key={j} className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-dim)', padding: '4px 0' }}>
                    — {x}
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>

        {/* Industries */}
        <div style={{ marginTop: 'clamp(72px, 9vw, 120px)' }}>
          <span className="eyebrow" style={{ display: 'block', marginBottom: 28 }}>Industrias con las que trabajamos</span>
          <div className="ind-grid">
            {[
            ['Indumentaria & gear', 'Lo que nos ponemos para entrenar 6 días por semana — desde la pileta hasta la ruta. Si te sirve para correr 90km en bici, sirve para cualquier audiencia activa.', 'Ej.: Basset · Martha · Sport Tech'],
            ['Nutrición & hidratación', 'Lo que comemos y tomamos antes, durante y después de cada sesión larga. Reseñas honestas — si no nos gusta, no lo mostramos. Punto.', 'Ej.: SUMA · Zanna\'s · Day by Day · Las Tres Niñas'],
            ['Tecnología & wearables', 'Relojes, GPS, sensores, plataformas de entrenamiento. Métricas reales en Strava y Garmin que validan cualquier producto técnico.', 'Ej.: Garmin · Insta360'],
            ['Recovery & wellness', 'Las marcas que nos mantienen enteros entre entrenos. El 80% del rendimiento pasa cuando no estamos en la cinta — y queremos contarlo bien.', 'Ej.: Therabody']].
            map(([t, d, ex], i) =>
            <div key={i} className="ind-card">
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--fg-mute)', display: 'block', marginBottom: 14 }}>{String(i + 1).padStart(2, '0')}</span>
                <h4 className="display" style={{ fontSize: 'clamp(22px, 2.2vw, 30px)', letterSpacing: '-0.01em', lineHeight: 1, marginBottom: 14 }}>{t}</h4>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--fg-dim)', marginBottom: 16 }}>{d}</p>
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--fg-mute)', display: 'block', paddingTop: 14, borderTop: '1px solid var(--line)' }}>{ex}</span>
              </div>
            )}
          </div>
        </div>

        {/* CTA removido */}

        <style>{`
          @media (max-width: 820px) {
            .tier-row { grid-template-columns: 1fr !important; gap: 8px !important; }
            .brand-cta { grid-template-columns: 1fr !important; }
          }
          .ind-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            border-top: 1px solid var(--line);
            border-left: 1px solid var(--line);
          }
          .ind-card {
            padding: clamp(20px, 2vw, 32px);
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: rgba(255,255,255,0.005);
          }
          @media (max-width: 980px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 540px) { .ind-grid { grid-template-columns: 1fr; } }
        `}</style>
      </div>
    </section>);

}

/* ───────────── FAQ ───────────── */
function FAQ() {
  const [open, setOpen] = useState(0);
  const faqs = [
  { q: '¿Qué es Project 226?', a: 'Somos Doman y Frigo. Dos amigos que un día decidieron anotarse a un Ironman 70.3 sin tener experiencia, sin estar entrenados, y arrancando lesionados. 46 semanas de preparación, todo grabado, todo publicado — los días buenos y los que no. En el medio nació una comunidad de gente que entrena con nosotros desde cualquier parte del mundo.' },
  { q: '¿Cómo me sumo a la comunidad?', a: 'Click en el botón de WhatsApp y listo. No te pedimos currículum de deportista profesional jajaj.' },
  { q: '¿Hay que tener nivel?', a: 'Para nada. Hay gente que está saliendo a correr por primera vez y gente que ya hizo un Ironman entero. Todos en el mismo grupo.' },
  { q: '¿Qué marcas encajan?', a: 'Marcas que estemos dispuestos a usar todos los días, aunque no nos pagasen. Si no lo usaríamos en nuestro entrenamiento real, no lo mostramos. Punto.' },
  { q: '¿Cómo son las colaboraciones?', a: 'Tres formatos: producto (te recibimos y lo usamos), contenido a medida (lo producimos para vos) o largo plazo (vamos juntos al Ironman). Todo por escrito, entregables claros.' },
  { q: '¿Cómo los contacto?', a: 'Mail a infoproject226@gmail.com o WhatsApp directo al +54 9 11 3240-0743. Te volvemos a escribir en menos de 24hs hábiles.' }];

  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'clamp(48px, 8vw, 96px)', flexWrap: 'wrap', gap: 16 }}>
          <span className="eyebrow">05 / FAQ</span>
          <span className="eyebrow">05 — 05</span>
        </div>

        <h2 className="display" style={{
          fontSize: 'clamp(40px, 7vw, 112px)',
          maxWidth: '14ch',
          marginBottom: 'clamp(48px, 6vw, 80px)'
        }}>
          Lo que<br />nos preguntan.<br /><span style={{ color: 'var(--fg-dim)' }}>Sin vueltas.</span>
        </h2>

        <div style={{ borderTop: '1px solid var(--line)' }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', textAlign: 'left',
                  padding: 'clamp(24px, 3vw, 36px) 0',
                  display: 'grid', gridTemplateColumns: '56px 1fr 32px', gap: 16, alignItems: 'center'
                }}>
                  <span className="mono" style={{ fontSize: 12, letterSpacing: '0.14em', color: 'var(--fg-mute)' }}>{String(i + 1).padStart(2, '0')}</span>
                  <span className="display" style={{ fontSize: 'clamp(20px, 2.6vw, 32px)', letterSpacing: '-0.01em', lineHeight: 1.1, textWrap: 'balance' }}>{f.q}</span>
                  <svg width="18" height="18" viewBox="0 0 18 18" style={{ justifySelf: 'end', transition: 'transform 320ms var(--ease)', transform: isOpen ? 'rotate(45deg)' : 'none' }}>
                    <path d="M9 2V16M2 9H16" stroke="var(--fg)" strokeWidth="1.2" strokeLinecap="round" />
                  </svg>
                </button>
                <div style={{ maxHeight: isOpen ? 400 : 0, overflow: 'hidden', transition: 'max-height 400ms var(--ease), opacity 320ms var(--ease)', opacity: isOpen ? 1 : 0 }}>
                  <div style={{ padding: '0 0 clamp(24px, 3vw, 36px) 72px', maxWidth: '62ch', fontSize: 16, lineHeight: 1.55, color: 'var(--fg-dim)' }}>
                    {f.a}
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ───────────── FINAL CTA ───────────── */
function FinalCTA({ openForm }) {
  return (
    <section className="section" id="contact" style={{ paddingTop: 'clamp(120px, 14vw, 200px)' }}>
      <div className="wrap">
        <h2 className="display" style={{ fontSize: 'clamp(56px, 14vw, 240px)', letterSpacing: '-0.03em', lineHeight: 0.88, textAlign: 'center' }}>
          SUMATE<br /><span style={{ color: 'var(--fg-dim)' }}>O SUMA TU MARCA.</span>
        </h2>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, marginTop: 'clamp(80px, 10vw, 140px)', border: '1px solid var(--line)' }} className="final-grid">
          <div style={{ padding: 'clamp(32px, 5vw, 64px)', background: 'var(--bg)' }}>
            <span className="eyebrow" style={{ marginBottom: 24, display: 'block' }}>PARA PERSONAS ACTIVAS</span>
            <h3 className="display" style={{ fontSize: 'clamp(28px, 4vw, 56px)', letterSpacing: '-0.015em', lineHeight: 0.95, marginBottom: 20 }}>
              Sumate al grupo.
            </h3>
            <p className="body" style={{ marginBottom: 32 }}>Sumate al WhatsApp y entrená con gente que va para el mismo lado.

            </p>
            <a className="btn btn-primary" href={WA_GROUP} target="_blank" rel="noreferrer">
              Entrar al grupo de WhatsApp
              <svg className="arrow" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
            </a>
          </div>

          <div style={{ padding: 'clamp(32px, 5vw, 64px)', background: 'var(--fg)', color: 'var(--bg)' }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.55)', marginBottom: 24, display: 'block' }}>Para marcas</span>
            <h3 className="display" style={{ fontSize: 'clamp(28px, 4vw, 56px)', letterSpacing: '-0.015em', lineHeight: 0.95, marginBottom: 20, color: 'var(--bg)' }}>
              Hablemos.
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(0,0,0,0.65)', maxWidth: '38ch', marginBottom: 32 }}>
              Contanos qué marca son y en qué momento están. Te respondemos en menos de 24hs hábiles con una propuesta a medida.
            </p>
            <button className="btn" onClick={openForm} style={{ background: 'var(--bg)', color: 'var(--fg)', cursor: 'pointer' }}>
              Enviar propuesta
              <svg className="arrow" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
            </button>
          </div>
        </div>

        <style>{`
          @media (max-width: 780px) { .final-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>);

}

/* ───────────── FOOTER ───────────── */
function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: 'clamp(56px, 7vw, 96px) var(--gutter) 40px' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 40 }} className="ft-grid">
          <div>
            <img src="assets/logo-mark.png" alt="" style={{ height: 48, width: 'auto', marginBottom: 20 }} />
            <p className="body" style={{ fontSize: 14, maxWidth: '36ch' }}>Dos amigos rumbo al Ironman 70.3 de Florida. Comunidad, contenido y cultura alrededor de un objetivo que no se corre solo.

            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Canales</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li><a href={IG} target="_blank" rel="noreferrer" style={{ fontSize: 14 }}>Instagram ↗</a></li>
              <li><a href={TIKTOK} target="_blank" rel="noreferrer" style={{ fontSize: 14 }}>TikTok ↗</a></li>
              <li><a href={WA_GROUP} target="_blank" rel="noreferrer" style={{ fontSize: 14 }}>Grupo de WhatsApp ↗</a></li>
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Contacto</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li><a href={MAIL()} style={{ fontSize: 14 }}>infoproject226@gmail.com</a></li>
              <li><a href={WA_DIRECT()} target="_blank" rel="noreferrer" style={{ fontSize: 14 }}>+54 9 11 3240-0743 ↗</a></li>
            </ul>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--line)', paddingTop: 24, marginTop: 64, flexWrap: 'wrap', gap: 12 }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--fg-mute)' }}>© 2026 PROJECT 226</span>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--fg-mute)' }}>BUENOS AIRES / EN MOVIMIENTO</span>
        </div>

        <style>{`
          @media (max-width: 780px) { .ft-grid { grid-template-columns: 1fr 1fr !important; } }
        `}</style>
      </div>
    </footer>);

}

/* ───────────── TWEAKS PANEL ───────────── */
function TweaksPanel({ tweaks, setTweak, onClose }) {
  const ts = tweaks._ts ? new Date(tweaks._ts) : new Date();
  return (
    <div style={{
      position: 'fixed', right: 20, bottom: 70, zIndex: 60,
      width: 320, padding: 20,
      background: '#0a0a0a', border: '1px solid var(--line-2)',
      color: 'var(--fg)',
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
      boxShadow: '0 20px 60px rgba(0,0,0,.6)'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <span style={{ letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-dim)' }}>Tweaks · Métricas</span>
        <button onClick={onClose} style={{ color: 'var(--fg-dim)' }}>×</button>
      </div>
      <div style={{ fontSize: 10, color: 'var(--fg-mute)', marginBottom: 14, textTransform: 'uppercase', letterSpacing: '0.14em' }}>
        {METRICS_ENDPOINT ? 'Conectado' : 'Manual'} · Actualizado {ts.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit' })}
      </div>
      {[
      ['followers', 'Seguidores IG'],
      ['engagement', 'Engagement %'],
      ['viewsAvg', 'Views promedio'],
      ['posts', 'Posts publicados']].
      map(([k, lbl]) =>
      <label key={k} style={{ display: 'block', marginBottom: 10 }}>
          <span style={{ display: 'block', color: 'var(--fg-dim)', marginBottom: 4 }}>{lbl}</span>
          <input type="number" step={k === 'engagement' ? 0.01 : 1} value={tweaks[k]}
        onChange={(e) => setTweak(k, parseFloat(e.target.value) || 0)}
        style={{
          width: '100%', padding: '8px 10px',
          background: '#000', border: '1px solid var(--line-2)', color: 'var(--fg)',
          fontFamily: 'inherit', fontSize: 12
        }} />
        </label>
      )}
      <button onClick={() => setTweak('_refresh', Date.now())}
      style={{
        width: '100%', marginTop: 8, padding: '10px',
        background: 'var(--fg)', color: 'var(--bg)',
        letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 10
      }}>
        Refrescar ahora
      </button>
    </div>);

}

/* ───────────── PROPOSAL FORM ───────────── */
function ProposalForm({ onClose }) {
  const [form, setForm] = useState({
    nombre: '', marca: '', email: '', web: '',
    tipo: 'Branded Content', timing: '1–3 meses', mensaje: ''
  });
  const [sending, setSending] = useState(false);
  const [sent, setSent] = useState(false);

  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const buildBody = () => {
    return [
    `Nombre: ${form.nombre}`,
    `Marca: ${form.marca}`,
    `Email: ${form.email}`,
    form.web ? `Web / IG: ${form.web}` : null,
    `Tipo de colaboración: ${form.tipo}`,
    `Timing: ${form.timing}`,
    '',
    'Mensaje:',
    form.mensaje].
    filter(Boolean).join('\n');
  };

  const sendViaFormspree = async (e) => {
    e?.preventDefault?.();
    if (!form.nombre || !form.marca || !form.email || !form.mensaje) return;
    if (FORMSPREE_ID === 'YOUR_FORM_ID') {
      // Fallback a mailto si aún no hay Formspree configurado
      const subject = `Propuesta — ${form.marca} × Project 226`;
      window.open(MAIL(subject, buildBody()), '_blank');
      setSent(true);
      return;
    }
    setSending(true);
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          nombre: form.nombre,
          marca: form.marca,
          email: form.email,
          web: form.web || undefined,
          tipo: form.tipo,
          timing: form.timing,
          mensaje: form.mensaje,
          _subject: `Propuesta — ${form.marca} × Project 226`,
          _replyto: form.email
        })
      });
      if (res.ok) {
        setSent(true);
      } else {
        alert(`Error al enviar. Escribinos directo a ${MAIL_TO} o por WhatsApp.`);
      }
    } catch (_) {
      alert(`Sin conexión. Escribinos a ${MAIL_TO} o por WhatsApp.`);
    } finally {
      setSending(false);
    }
  };

  const sendByWA = () => {
    if (!form.nombre || !form.marca || !form.mensaje) return;
    const txt = `Hola Project 226 👋\n\n${buildBody()}`;
    window.open(WA_DIRECT(txt), '_blank');
    setSent(true);
  };

  // ESC to close
  useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, []);

  const inputStyle = {
    width: '100%', padding: '14px 16px',
    background: 'transparent',
    border: '1px solid var(--line-2)',
    color: 'var(--fg)',
    fontFamily: 'inherit', fontSize: 15,
    outline: 'none'
  };

  const labelStyle = {
    display: 'block',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
    color: 'var(--fg-dim)', marginBottom: 8
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
      padding: 'clamp(20px, 5vh, 60px) 20px',
      overflowY: 'auto'
    }}>
      <form onClick={(e) => e.stopPropagation()} onSubmit={sendViaFormspree} style={{
        width: '100%', maxWidth: 640,
        background: '#0a0a0a', border: '1px solid var(--line-2)',
        padding: 'clamp(28px, 4vw, 48px)',
        position: 'relative'
      }}>
        <button type="button" onClick={onClose} aria-label="Cerrar" style={{
          position: 'absolute', top: 16, right: 16,
          width: 36, height: 36,
          color: 'var(--fg-dim)', fontSize: 22,
          background: 'transparent', border: '1px solid var(--line-2)',
          cursor: 'pointer'
        }}>×</button>

        <span className="eyebrow" style={{ display: 'block', marginBottom: 14 }}>Propuesta para marcas</span>
        <h3 className="display" style={{ fontSize: 'clamp(28px, 3.5vw, 40px)', letterSpacing: '-0.015em', lineHeight: 1, marginBottom: 12 }}>
          Hablemos.
        </h3>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--fg-dim)', marginBottom: 28 }}>
          Contanos quiénes son y qué buscan. Te volvemos en menos de 24hs hábiles con una propuesta a medida.
        </p>

        {sent ?
        <div style={{ padding: '32px 0', textAlign: 'center' }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.18em', color: 'var(--accent)', marginBottom: 12 }}>✓ ENVIADO</div>
            <p style={{ fontSize: 16, color: 'var(--fg)', marginBottom: 8 }}>Gracias por escribirnos.</p>
            <p style={{ fontSize: 14, color: 'var(--fg-dim)', marginBottom: 24 }}>Te respondemos en menos de 24hs hábiles.</p>
            <button type="button" onClick={onClose} className="btn btn-ghost" style={{ cursor: 'pointer' }}>Cerrar</button>
          </div> :

        <>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="form-grid">
              <div>
                <label style={labelStyle}>Tu nombre *</label>
                <input style={inputStyle} required value={form.nombre} onChange={(e) => update('nombre', e.target.value)} placeholder="Juan Pérez" />
              </div>
              <div>
                <label style={labelStyle}>Marca *</label>
                <input style={inputStyle} required value={form.marca} onChange={(e) => update('marca', e.target.value)} placeholder="Nombre de la marca" />
              </div>
              <div>
                <label style={labelStyle}>Email *</label>
                <input type="email" style={inputStyle} required value={form.email} onChange={(e) => update('email', e.target.value)} placeholder="vos@marca.com" />
              </div>
              <div>
                <label style={labelStyle}>Web o Instagram</label>
                <input style={inputStyle} value={form.web} onChange={(e) => update('web', e.target.value)} placeholder="@marca o marca.com" />
              </div>
            </div>

            <div style={{ marginTop: 18 }}>
              <label style={labelStyle}>Tipo de colaboración</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {['Producto', 'Contenido a medida', 'Largo plazo', 'Otro'].map((opt) =>
              <button key={opt} type="button" onClick={() => update('tipo', opt)}
              style={{
                padding: '10px 14px',
                fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                background: form.tipo === opt ? 'var(--fg)' : 'transparent',
                color: form.tipo === opt ? 'var(--bg)' : 'var(--fg-dim)',
                border: '1px solid ' + (form.tipo === opt ? 'var(--fg)' : 'var(--line-2)'),
                cursor: 'pointer'
              }}>
                    {opt}
                  </button>
              )}
              </div>
            </div>

            <div style={{ marginTop: 18 }}>
              <label style={labelStyle}>Timing</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {['Puntual', '1–3 meses', '3–6 meses', '6+ meses'].map((opt) =>
              <button key={opt} type="button" onClick={() => update('timing', opt)}
              style={{
                padding: '10px 14px',
                fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                background: form.timing === opt ? 'var(--fg)' : 'transparent',
                color: form.timing === opt ? 'var(--bg)' : 'var(--fg-dim)',
                border: '1px solid ' + (form.timing === opt ? 'var(--fg)' : 'var(--line-2)'),
                cursor: 'pointer'
              }}>
                    {opt}
                  </button>
              )}
              </div>
            </div>

            <div style={{ marginTop: 18 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <label style={{ ...labelStyle, marginBottom: 0 }}>Mensaje *</label>
              </div>
              <textarea required rows={5} style={{ ...inputStyle, resize: 'vertical', minHeight: 120, fontFamily: 'inherit' }}
            value={form.mensaje} onChange={(e) => update('mensaje', e.target.value)}
            placeholder="Contanos qué marca son, qué les interesa de Project 226 y qué tienen en mente." />
            </div>

            <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
              <button type="submit" className="btn btn-primary" disabled={sending} style={{ cursor: sending ? 'not-allowed' : 'pointer', flex: 1, minWidth: 200, opacity: sending ? 0.6 : 1 }}>
                {sending ? 'Enviando…' : 'Enviar propuesta'}
                {!sending && <svg className="arrow" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>}
              </button>
              <button type="button" onClick={sendByWA} className="btn btn-ghost" style={{ cursor: 'pointer' }}>
                Enviar por WhatsApp
              </button>
            </div>

            <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginTop: 16 }}>
              Respondemos en menos de 24hs hábiles a {MAIL_TO}
            </p>
          </>
        }

        <style>{`
          @media (max-width: 540px) { .form-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </form>
    </div>);

}

const SPOTIFY_PLAYLIST_URL = 'https://open.spotify.com/playlist/6ELNQqTfHwwEzRY8Xpcfcw';
const SPOTIFY_EMBED_URL = 'https://open.spotify.com/embed/playlist/6ELNQqTfHwwEzRY8Xpcfcw?utm_source=generator&theme=0';

function SpotifyMini() {
  const [open, setOpen] = useState(false);
  return (
    <>
      {open && (
        <div style={{
          position: 'fixed', left: 18, bottom: 78, zIndex: 56,
          width: 320, height: 152,
          borderRadius: 12, overflow: 'hidden',
          boxShadow: '0 12px 36px rgba(0,0,0,.6)',
          border: '1px solid #232323'
        }}>
          <iframe
            src={SPOTIFY_EMBED_URL}
            width="100%" height="100%" frameBorder="0"
            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
            loading="lazy"
            style={{ border: 0, display: 'block' }}
          />
        </div>
      )}
      <button
        onClick={() => setOpen(o => !o)}
        aria-label="Playlist"
        style={{
          position: 'fixed', left: 18, bottom: 18, zIndex: 56,
          width: 44, height: 44, borderRadius: 999,
          background: '#1DB954', color: '#000',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: 0, cursor: 'pointer',
          boxShadow: '0 6px 20px rgba(29,185,84,.35)',
          transition: 'transform .2s ease'
        }}
        onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.06)'}
        onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}
      >
        <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
          <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.4-.7.5-1.1.3-3-1.8-6.8-2.2-11.3-1.2-.4.1-.9-.2-1-.6-.1-.4.2-.9.6-1 4.9-1.1 9.1-.6 12.4 1.4.4.2.6.7.4 1.1zm1.5-3.3c-.3.4-.9.6-1.4.3-3.5-2.1-8.7-2.7-12.8-1.5-.5.1-1.1-.1-1.2-.6-.1-.5.1-1.1.6-1.2 4.7-1.4 10.5-.7 14.5 1.7.5.3.6.9.3 1.3zm.1-3.4c-4.1-2.4-10.9-2.6-14.8-1.4-.6.2-1.3-.2-1.4-.8-.2-.6.2-1.3.8-1.4 4.5-1.4 12-1.1 16.7 1.7.6.3.7 1.1.4 1.6-.3.5-1.1.7-1.7.3z"/>
        </svg>
      </button>
    </>
  );
}

/* ───────────── STICKY WA ───────────── */
function WAStick() {
  return (
    <a className="whatsapp-sticky" href={WA_GROUP} target="_blank" rel="noreferrer">
      <svg viewBox="0 0 24 24" width="14" height="14" fill="#22c55e" aria-hidden="true">
        <path d="M17.5 14.4c-.3-.1-1.6-.8-1.9-.9-.3-.1-.4-.1-.6.1-.2.2-.7.9-.8 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.5-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.5-.9-2.1-.2-.5-.5-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.3 0 1.4 1 2.7 1.2 2.9.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.6-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
      </svg>
      Project 226 Crew
    </a>);

}

function CtaStrip({ openForm }) {
  return (
    <div style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', background: '#050505' }}>
      <div style={{ maxWidth: 'var(--container, 1280px)', margin: '0 auto', padding: 'clamp(24px, 3vw, 40px) var(--gutter, 24px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
        <div className="display" style={{ fontSize: 'clamp(20px, 2.4vw, 32px)', letterSpacing: '-0.01em', lineHeight: 1.05, maxWidth: '32ch' }}>
          ¿Tu marca acá? <span style={{ color: 'var(--fg-dim)' }}>Hablemos.</span>
        </div>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <button onClick={openForm} className="btn btn-primary" style={{ cursor: 'pointer' }}>
            Quiero ser sponsor
            <svg className="arrow" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
          </button>
          <a className="btn btn-ghost" href={WA_LINK} target="_blank" rel="noreferrer">WhatsApp</a>
        </div>
      </div>
    </div>);

}

/* ───────────── CONTENIDO VERTICAL ───────────── */
const STRAVA_DOMAN = 'https://www.strava.com/athletes/20207015';
const STRAVA_FRIGO = 'https://www.strava.com/athletes/202585484';

/* ───────────── STRAVA / ENTRENAMOS EN VIVO ───────────── */
function LiveTraining() {
  return (
    <section className="section" id="strava" style={{ background: '#050505' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'clamp(24px, 3vw, 40px)', flexWrap: 'wrap', gap: 12 }}>
          <span className="eyebrow" style={{ color: '#FC4C02' }}>● EN VIVO · STRAVA</span>
          <span className="eyebrow">SEGUÍ CADA ENTRENO</span>
        </div>
        <h2 className="display" style={{ fontSize: 'clamp(32px, 6vw, 88px)', maxWidth: '20ch', marginBottom: 'clamp(20px, 3vw, 36px)' }}>
          Subimos<br/><span style={{ color: 'var(--fg-dim)' }}>cada entrenamiento.</span>
        </h2>
        <p style={{ fontSize: 'clamp(14px, 1.4vw, 17px)', color: 'var(--fg-dim)', maxWidth: '56ch', marginBottom: 'clamp(32px, 4vw, 48px)' }}>
          Nada de pose ni curaduría — todo lo que entrenamos se sube a Strava. Tiempos, ritmos, kilómetros, pulsaciones. Seguinos directo desde nuestros perfiles.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
          <a href={STRAVA_DOMAN} target="_blank" rel="noreferrer" className="strava-card"
            style={{ display: 'block', padding: 'clamp(28px, 3.5vw, 40px)', border: '1px solid var(--line)', background: '#080808', textDecoration: 'none', color: 'var(--fg)', transition: 'transform .35s, background .3s, border-color .3s' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
              <svg viewBox="0 0 24 24" width="24" height="24" fill="#FC4C02" aria-hidden="true">
                <path d="M15.387 17.944l-2.089-4.116h-3.065L15.387 24l5.15-10.172h-3.066m-7.008-5.599l2.836 5.598h4.172L10.463 0l-7 13.828h4.169"/>
              </svg>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>Strava</span>
            </div>
            <div className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', letterSpacing: '-0.015em', lineHeight: 1, marginBottom: 8 }}>DOMAN</div>
            <div style={{ fontSize: 14, color: 'var(--fg-dim)', marginBottom: 28 }}>Santiago Domínguez</div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg)', display: 'flex', alignItems: 'center', gap: 6 }}>
              Ver perfil
              <svg viewBox="0 0 14 14" fill="none" style={{ width: 11, height: 11 }}>
                <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
              </svg>
            </div>
          </a>
          {STRAVA_FRIGO ? (
            <a href={STRAVA_FRIGO} target="_blank" rel="noreferrer" className="strava-card"
              style={{ display: 'block', padding: 'clamp(28px, 3.5vw, 40px)', border: '1px solid var(--line)', background: '#080808', textDecoration: 'none', color: 'var(--fg)', transition: 'transform .35s, background .3s, border-color .3s' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
                <svg viewBox="0 0 24 24" width="24" height="24" fill="#FC4C02" aria-hidden="true">
                  <path d="M15.387 17.944l-2.089-4.116h-3.065L15.387 24l5.15-10.172h-3.066m-7.008-5.599l2.836 5.598h4.172L10.463 0l-7 13.828h4.169"/>
                </svg>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>Strava</span>
              </div>
              <div className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', letterSpacing: '-0.015em', lineHeight: 1, marginBottom: 8 }}>FRIGO</div>
              <div style={{ fontSize: 14, color: 'var(--fg-dim)', marginBottom: 28 }}>Santiago Frigo</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg)', display: 'flex', alignItems: 'center', gap: 6 }}>
                Ver perfil
                <svg viewBox="0 0 14 14" fill="none" style={{ width: 11, height: 11 }}>
                  <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                </svg>
              </div>
            </a>
          ) : (
            <div style={{ padding: 'clamp(28px, 3.5vw, 40px)', border: '1px dashed var(--line-2)', background: 'transparent', color: 'var(--fg-mute)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', letterSpacing: '-0.015em', lineHeight: 1, marginBottom: 8 }}>FRIGO</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Próximamente</div>
            </div>
          )}
        </div>
        <style>{`
          .strava-card:hover { transform: translateY(-4px); border-color: #FC4C02 !important; background: #0d0d0d !important; }
        `}</style>
      </div>
    </section>
  );
}

function VerticalContent() {
  // 11 reels reales — al tocar abren Instagram
  const reels = [
  { url: 'https://www.instagram.com/reel/DYaHlpUxkmc/', code: 'DYaHlpUxkmc', tint: '#1a1a1a' },
  { url: 'https://www.instagram.com/reel/DYXLvxGNGIt/', code: 'DYXLvxGNGIt', tint: '#0d1419' },
  { url: 'https://www.instagram.com/reel/DYR_lGmt3Ei/', code: 'DYR_lGmt3Ei', tint: '#161210' },
  { url: 'https://www.instagram.com/reel/DYPbJLLR-gA/', code: 'DYPbJLLR-gA', tint: '#10181a' },
  { url: 'https://www.instagram.com/reel/DYQS6b0gbCG/', code: 'DYQS6b0gbCG', tint: '#1a1410' },
  { url: 'https://www.instagram.com/reel/DYNSNTaR72n/', code: 'DYNSNTaR72n', tint: '#11141a' },
  { url: 'https://www.instagram.com/reel/DYGQtnNtk3F/', code: 'DYGQtnNtk3F', tint: '#1a1816' },
  { url: 'https://www.instagram.com/reel/DXup5LckfHM/', code: 'DXup5LckfHM', tint: '#15181b' },
  { url: 'https://www.instagram.com/reel/DXnKruYjWrL/', code: 'DXnKruYjWrL', tint: '#181412' },
  { url: 'https://www.instagram.com/reel/DX77bHsNn1_/', code: 'DX77bHsNn1_', tint: '#131618' },
  { url: 'https://www.instagram.com/reel/DUgldflkUrB/', code: 'DUgldflkUrB', tint: '#181612' }];

  return (
    <section className="section" id="contenido" style={{ paddingTop: 'clamp(40px, 5vw, 64px)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'clamp(24px, 3vw, 40px)', flexWrap: 'wrap', gap: 12 }}>
          <span className="eyebrow">CONTENIDO · 9:16</span>
          <a className="eyebrow" href="https://www.instagram.com/project226_/" target="_blank" rel="noreferrer" style={{ color: 'var(--fg-dim)' }}>VER MÁS ↗</a>
        </div>
        <h2 className="display" style={{ fontSize: 'clamp(32px, 6vw, 88px)', maxWidth: '14ch', marginBottom: 'clamp(28px, 4vw, 48px)' }}>
          Esto<br /><span style={{ color: 'var(--fg-dim)' }}>es lo que hacemos.</span>
        </h2>
        <div className="vcontent-row" style={{
          display: 'grid',
          gridAutoFlow: 'column',
          gridAutoColumns: 'minmax(220px, 280px)',
          gap: 14,
          overflowX: 'auto',
          scrollSnapType: 'x mandatory',
          paddingBottom: 18,
          WebkitOverflowScrolling: 'touch',
          marginInline: 'calc(-1 * var(--gutter, 24px))',
          paddingInline: 'var(--gutter, 24px)'
        }}>
          {reels.map((r, i) =>
          <a key={i} href={r.url} target="_blank" rel="noreferrer"
          className="reel-card"
          style={{
            aspectRatio: '9 / 16',
            background: `radial-gradient(ellipse at 40% 30%, ${r.tint} 0%, #050505 100%)`,
            border: '1px solid var(--line)',
            position: 'relative', overflow: 'hidden',
            scrollSnapAlign: 'start',
            display: 'block',
            transition: 'transform 0.35s ease, border-color 0.35s'
          }}>
              {/* Portada del reel (local) */}
              <img
              src={`assets/reels/r${i + 1}.jpg`}
              alt=""
              onError={(e) => {e.currentTarget.style.display = 'none';}}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0 }} />
            
              {/* Decorative grain */}
              <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 14px)', pointerEvents: 'none' }} />
              {/* Top right label */}
              <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 3 }}>
                <span className="mono" style={{ fontSize: 9, letterSpacing: '0.18em', color: 'var(--fg-dim)', textTransform: 'uppercase' }}>REEL {String(i + 1).padStart(2, '0')}</span>
              </div>
              {/* Center play icon */}
              <div className="reel-play" style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2 }}>
                <div style={{
                width: 64, height: 64, borderRadius: '50%',
                background: 'rgba(246,244,238,0.95)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'transform 0.35s ease, background 0.3s',
                boxShadow: '0 10px 30px rgba(0,0,0,0.4)'
              }}>
                  <svg viewBox="0 0 16 16" width="22" height="22" fill="#000" style={{ marginLeft: 3 }}>
                    <path d="M3 2 L13 8 L3 14 Z" />
                  </svg>
                </div>
              </div>
              {/* Bottom label */}
              <div style={{ position: 'absolute', left: 14, bottom: 14, right: 14, zIndex: 3, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 10 }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--fg)', textTransform: 'uppercase' }}>@project226_</span>
                <svg viewBox="0 0 14 14" width="11" height="11" fill="none">
                  <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                </svg>
              </div>
              {/* Vignette */}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%)', zIndex: 1, pointerEvents: 'none' }} />
            </a>
          )}
        </div>
        <p className="mono" style={{ marginTop: 12, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>
          Tocá cualquier reel para verlo en Instagram →
        </p>
        <style>{`
          .reel-card:hover { transform: translateY(-4px); border-color: var(--line-2, #2a2a2a) !important; }
          .reel-card:hover .reel-play > div { transform: scale(1.08); background: #fff; }
          .vcontent-row::-webkit-scrollbar { display: none; }
        `}</style>
      </div>
    </section>);

}

/* ───────────── APP ───────────── */
function App() {
  const [tweaks, setTweaks] = useState({ ...TWEAK_DEFAULTS, _ts: Date.now() });
  const [showTweaks, setShowTweaks] = useState(false);
  const [formOpen, setFormOpen] = useState(false);

  const setTweak = (k, v) => {
    if (k === '_refresh') {
      // pull live metrics
      fetchLiveMetrics(tweaks).then((m) => setTweaks((t) => ({ ...t, ...m, _ts: Date.now() })));
      return;
    }
    setTweaks((t) => ({ ...t, [k]: v, _ts: Date.now() }));
    try {
      window.parent?.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    } catch (_) {}
  };

  // Tweaks toolbar protocol
  useEffect(() => {
    const onMsg = (e) => {
      const t = e?.data?.type;
      if (t === '__activate_edit_mode') setShowTweaks(true);
      if (t === '__deactivate_edit_mode') setShowTweaks(false);
    };
    window.addEventListener('message', onMsg);
    try {window.parent?.postMessage({ type: '__edit_mode_available' }, '*');} catch (_) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Auto-refresh metrics every 5 min
  useEffect(() => {
    let mounted = true;
    const tick = () => fetchLiveMetrics(tweaks).then((m) => {if (mounted) setTweaks((t) => ({ ...t, ...m, _ts: Date.now() }));});
    const id = setInterval(tick, 5 * 60 * 1000);
    return () => {mounted = false;clearInterval(id);};
  }, []); // eslint-disable-line

  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('in');});
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const metrics = {
    followers: tweaks.followers,
    engagement: tweaks.engagement,
    viewsAvg: tweaks.viewsAvg,
    posts: tweaks.posts
  };

  return (
    <>
      <Nav openForm={() => setFormOpen(true)} />
      <main>
        <Hero metrics={metrics} openForm={() => setFormOpen(true)} />
        <Partners />
        <VerticalContent />
        <Brands openForm={() => setFormOpen(true)} />
        <CtaStrip openForm={() => setFormOpen(true)} />
        <LiveTraining />
        <About />
        <Different />
        <Community metrics={metrics} />
        <FAQ />
        <FinalCTA openForm={() => setFormOpen(true)} />
      </main>
      <Footer />
      <WAStick />
      <SpotifyMini />
      {formOpen && <ProposalForm onClose={() => setFormOpen(false)} />}
      {showTweaks && <TweaksPanel tweaks={tweaks} setTweak={setTweak} onClose={() => {
        setShowTweaks(false);
        try {window.parent?.postMessage({ type: '__edit_mode_dismissed' }, '*');} catch (_) {}
      }} />}
    </>);

}

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