/* Shared section components */

const Placeholder = ({ label }) => (
  <div className="ph">
    <div className="ph-label">{label}</div>
  </div>
);

const PlayIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M8 5v14l11-7L8 5z" fill="#fff" />
  </svg>
);

const YouTubePlay = () => (
  <svg width="32" height="22" viewBox="0 0 32 22" fill="none">
    <path d="M12 6.5v9l8-4.5-8-4.5z" fill="#fff" />
  </svg>
);

const ArrowRight = () => (
  <svg className="arrow" width="22" height="14" viewBox="0 0 22 14" fill="none">
    <path d="M15 1l6 6-6 6M1 7h20" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
  </svg>
);

const ChevronLeft = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
    <path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const ChevronRight = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
    <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

/* Animated counter */
const Counter = ({ to, format = (v) => v.toLocaleString(), duration = 1500 }) => {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>{format(val)}</span>;
};

/* Reveal-on-scroll wrapper */
const Reveal = ({ children, delay = 0 }) => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => setShown(true), delay);
          io.disconnect();
        }
      });
    }, { threshold: 0.15 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className={'reveal ' + (shown ? 'in' : '')}>{children}</div>;
};

/* YouTube embed — tap-to-play, in-page */
const YouTubeCard = ({ id, type = 'short', children }) => {
  const [playing, setPlaying] = React.useState(false);
  // Shorts thumbnails are best at hqdefault; long videos use maxresdefault
  const thumb = `https://img.youtube.com/vi/${id}/${type === 'short' ? 'hqdefault' : 'maxresdefault'}.jpg`;
  if (playing) {
    return (
      <iframe
        src={`https://www.youtube.com/embed/${id}?autoplay=1&rel=0&playsinline=1&modestbranding=1`}
        title="YouTube video"
        allow="accelerated-2d-canvas; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
      />
    );
  }
  return (
    <React.Fragment>
      <img className="thumb" src={thumb} alt="" loading="lazy" onError={(e) => { e.currentTarget.src = `https://img.youtube.com/vi/${id}/hqdefault.jpg`; }} />
      <button
        type="button"
        onClick={(e) => { e.preventDefault(); e.stopPropagation(); setPlaying(true); }}
        aria-label="Play video"
        style={{ position: 'absolute', inset: 0, background: 'transparent', border: 'none', cursor: 'pointer', zIndex: 3 }}
      />
      {children}
    </React.Fragment>
  );
};

/* Nav */
const Nav = () => (
  <nav className="nav">
    <div className="nav-inner">
      <a href="#top" className="nav-logo">
        <span className="dot" />
        ALEX TRICKOSO
      </a>
      <div className="nav-links">
        <a href="#work" className="nav-link">Work</a>
        <a href="#services" className="nav-link">Services</a>
        <a href="#stats" className="nav-link">Statistics</a>
        <a href="#reviews" className="nav-link">Reviews</a>
      </div>
      <a href="mailto:trickoso0@gmail.com" className="nav-cta">Contact</a>
    </div>
  </nav>
);

/* Hero */
const Hero = () => (
  <header id="top" className="hero">
    <div className="wrap">
      <div className="hero-grid">
        <div>
          <div className="eyebrow">Fitness · Cirque du Soleil · Guinness World Records · UGC Creator</div>
          <h1>
            Skyrocket<br />
            your brand<br />
            with <span className="accent">1M+</span><br />
            monthly views.
          </h1>
          <p className="hero-sub">
            I'm Alex, a fitness creator, former Cirque du Soleil performer and Guinness World Records title holder, building long-term partnerships with brands that fit my audience.
          </p>
          <div className="hero-meta">
            <div className="stat">
              <div className="num">18M</div>
              <div className="lbl">Facebook · 90d</div>
            </div>
            <div className="stat">
              <div className="num">3.3M</div>
              <div className="lbl">YouTube · 1y</div>
            </div>
            <div className="stat">
              <div className="num">2.2M</div>
              <div className="lbl">TikTok · 1y</div>
            </div>
            <div className="stat">
              <div className="num">1M+</div>
              <div className="lbl">Instagram · 90d</div>
            </div>
          </div>
        </div>
        <div className="hero-side">
          <img className="hero-img" src="assets/performance.jpg" alt="Alex performing as a Cirque du Soleil VOLTA acrobat" />
          <div className="badge">Cirque du Soleil · VOLTA</div>
        </div>
      </div>
    </div>
  </header>
);

/* Credentials — Guinness World Records */
const Credentials = () => (
  <section id="record" className="section" style={{ paddingTop: 60 }}>
    <div className="wrap">
      <div className="services-grid" style={{ alignItems: 'center' }}>
        <div className="service-copy">
          <div className="section-label">— Officially Amazing</div>
          <h3 style={{ marginTop: 12 }}>Guinness World Records<br />title holder.</h3>
          <p>
            Highest pistol squat box jump (male) at 100 cm (39.37 in). Set in Salamanca, Spain on 19 March 2026 and officially verified by Guinness World Records.
          </p>
          <div className="hero-meta" style={{ marginTop: 32 }}>
            <div className="stat">
              <div className="num">100<span style={{ fontSize: 20 }}>cm</span></div>
              <div className="lbl">Record height</div>
            </div>
            <div className="stat">
              <div className="num">39.37<span style={{ fontSize: 20 }}>in</span></div>
              <div className="lbl">Imperial</div>
            </div>
            <div className="stat">
              <div className="num">2026</div>
              <div className="lbl">Salamanca, Spain</div>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div style={{ position: 'relative', width: '100%', maxWidth: 420, aspectRatio: '762 / 1126', borderRadius: 'var(--radius)', overflow: 'hidden', background: '#f2f2f2', border: '1px solid var(--border-strong)', boxShadow: '0 30px 70px -30px rgba(0,0,0,0.8)' }}>
            <img src="assets/gwr-certificate.jpg" alt="Guinness World Records certificate awarded to Alejandro Sanchez Martin for the highest pistol squat box jump" loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* Marquee */
const Marquee = () => {
  const items = ['Hover Air', 'Bull Bar', 'Insta360', 'MTL Balance Boards', 'Polar Monkeys', 'Cirque du Soleil', 'Guinness World Records'];
  const row = (
    <div className="marquee-item">
      {items.map((b, i) => (
        <React.Fragment key={i}>
          <span>{b}</span>
          <span className="dot" />
        </React.Fragment>
      ))}
    </div>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row}{row}
      </div>
    </div>
  );
};

/* Brand slide — wraps a YouTubeCard with brand chrome */
const BrandSlide = ({ brand, onPlay }) => {
  const [playing, setPlaying] = React.useState(false);
  const handleClick = (e) => {
    e.preventDefault();
    setPlaying(true);
    onPlay && onPlay();
  };
  return (
    <div className="brand-card" onClick={!playing ? handleClick : undefined}>
      {playing ? (
        <React.Fragment>
          <iframe
            src={`https://www.youtube-nocookie.com/embed/${brand.id}?autoplay=1&playsinline=1&rel=0`}
            title={brand.name}
            referrerPolicy="strict-origin-when-cross-origin"
            allow="autoplay; encrypted-media; picture-in-picture; web-share; fullscreen"
            allowFullScreen
          />
          <a
            href={`https://youtube.com/shorts/${brand.id}`}
            target="_blank"
            rel="noopener"
            onClick={(e) => e.stopPropagation()}
            style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 4, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(8px)', padding: '6px 10px', borderRadius: 4, color: 'var(--accent)', border: '1px solid var(--border)' }}
          >
            Open ↗
          </a>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <img
            className="thumb"
            src={`https://img.youtube.com/vi/${brand.id}/maxresdefault.jpg`}
            alt={brand.name}
            loading="lazy"
            onLoad={(e) => { if (e.currentTarget.naturalWidth <= 120) e.currentTarget.src = `https://img.youtube.com/vi/${brand.id}/hqdefault.jpg`; }}
            onError={(e) => { e.currentTarget.src = `https://img.youtube.com/vi/${brand.id}/hqdefault.jpg`; }}
          />
          <div className="play"><PlayIcon size={22} /></div>
          <div className="meta">
            <div>
              <div className="name">{brand.name}</div>
              <div className="tag">{brand.tag}</div>
            </div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
};

/* Slider container */
const BrandWork = ({ brands }) => {
  const trackRef = React.useRef(null);
  const [canPrev, setCanPrev] = React.useState(false);
  const [canNext, setCanNext] = React.useState(true);
  const [progress, setProgress] = React.useState(0);

  const updateButtons = () => {
    const el = trackRef.current;
    if (!el) return;
    setCanPrev(el.scrollLeft > 4);
    setCanNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
    const max = el.scrollWidth - el.clientWidth;
    setProgress(max > 0 ? el.scrollLeft / max : 0);
  };

  React.useEffect(() => {
    updateButtons();
    const el = trackRef.current;
    if (!el) return;
    el.addEventListener('scroll', updateButtons, { passive: true });
    window.addEventListener('resize', updateButtons);
    return () => {
      el.removeEventListener('scroll', updateButtons);
      window.removeEventListener('resize', updateButtons);
    };
  }, []);

  const scrollBy = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const slide = el.querySelector('.slider-slide');
    const step = slide ? slide.offsetWidth + 18 : 300;
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };

  // Drag-to-scroll on desktop
  React.useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    let down = false, startX = 0, startLeft = 0, moved = false;
    const onDown = (e) => {
      if (e.target.closest('iframe, button')) return;
      down = true; moved = false;
      startX = (e.touches ? e.touches[0].pageX : e.pageX);
      startLeft = el.scrollLeft;
      el.classList.add('dragging');
    };
    const onMove = (e) => {
      if (!down) return;
      const x = (e.touches ? e.touches[0].pageX : e.pageX);
      const dx = x - startX;
      if (Math.abs(dx) > 5) moved = true;
      el.scrollLeft = startLeft - dx;
    };
    const onUp = () => {
      down = false;
      el.classList.remove('dragging');
    };
    el.addEventListener('mousedown', onDown);
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return () => {
      el.removeEventListener('mousedown', onDown);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
  }, []);

  return (
    <section id="work" className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-label">— 01 / Work</div>
            <h2>See my work<br />with top brands.</h2>
          </div>
          <div className="right">
            Short-form video that converts. Real product demos, embedded in real workouts — swipe through the gallery and tap any video to play.
          </div>
        </div>

        <div className="slider-wrap">
          <div ref={trackRef} className="slider-track">
            {brands.map((b, i) => (
              <div key={i} className="slider-slide">
                <BrandSlide brand={b} />
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16, gap: 24, flexWrap: 'wrap' }}>
            <div className="slider-progress" style={{ flex: 1, minWidth: 160 }}>
              <div className="bar" style={{ width: `${Math.max(progress * 100, 8)}%` }} />
            </div>
            <div className="slider-controls">
              <button className="slider-btn" disabled={!canPrev} onClick={() => scrollBy(-1)} aria-label="Previous"><ChevronLeft /></button>
              <button className="slider-btn" disabled={!canNext} onClick={() => scrollBy(1)} aria-label="Next"><ChevronRight /></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* Services */
const Services = () => (
  <section id="services" className="section">
    <div className="wrap">
      <div className="services-grid">
        <div className="service-copy">
          <div className="section-label">— 02 / Services</div>
          <h3>UGC videos<br />&amp; brand collabs.</h3>
          <p>
            I'm always looking to build long-term relationships with brands that fit my audience.
            UGC (User Generated Content) is content created for the brand to use as marketing assets — no posting requirements attached.
          </p>
          <div className="service-list">
            <div className="service-item">
              <span className="label">UGC short-form videos</span>
              <span className="num">01</span>
            </div>
            <div className="service-item">
              <span className="label">Sponsored Instagram &amp; TikTok posts</span>
              <span className="num">02</span>
            </div>
            <div className="service-item">
              <span className="label">YouTube product reviews</span>
              <span className="num">03</span>
            </div>
            <div className="service-item">
              <span className="label">Long-term brand ambassador deals</span>
              <span className="num">04</span>
            </div>
          </div>
        </div>
        <div className="service-visual">
          <img
            src="assets/services.jpg"
            alt="Alex performing a flip in Times Square, New York"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
          />
          <div style={{ position: 'absolute', top: 16, left: 16, background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)', border: '1px solid var(--border-strong)', padding: '6px 12px', borderRadius: 999, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', zIndex: 2 }}>
            Times Square · NYC
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* Stat cards */
const Donut = ({ pct, color = 'var(--accent)' }) => {
  const r = 42, c = 2 * Math.PI * r;
  return (
    <svg className="donut" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r={r} fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="10" />
      <circle cx="50" cy="50" r={r} fill="none" stroke={color} strokeWidth="10"
        strokeDasharray={`${(pct / 100) * c} ${c}`} strokeDashoffset={c * 0.25} strokeLinecap="round"
        style={{ transition: 'stroke-dasharray 1.2s ease' }} />
      <text x="50" y="55" textAnchor="middle" fill="#fff" fontFamily="Bebas Neue" fontSize="22">{pct}%</text>
    </svg>
  );
};

/* Platform brand chips */
const PlatformChip = ({ kind }) => {
  const map = {
    facebook: { color: '#1877F2', name: 'Facebook', icon: (
      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.54-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z"/></svg>
    )},
    instagram: { color: '#E1306C', name: 'Instagram', icon: (
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
    )},
    youtube: { color: '#FF0033', name: 'YouTube', icon: (
      <svg width="14" height="10" viewBox="0 0 24 17" fill="currentColor"><path d="M23 3a3 3 0 0 0-2.1-2.1C19 0 12 0 12 0S5 0 3.1.9A3 3 0 0 0 1 3 31 31 0 0 0 1 8.5 31 31 0 0 0 1 14a3 3 0 0 0 2.1 2.1C5 17 12 17 12 17s7 0 8.9-.9A3 3 0 0 0 23 14a31 31 0 0 0 0-5.5A31 31 0 0 0 23 3z"/></svg>
    )},
    tiktok: { color: '#FFFFFF', name: 'TikTok', icon: (
      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M20 8.5a6.5 6.5 0 0 1-4-1.4v8.4a5.5 5.5 0 1 1-5.5-5.5c.4 0 .7 0 1 .1v3a2.5 2.5 0 1 0 1.5 2.4V2h2.6a4 4 0 0 0 4.4 4v2.5z"/></svg>
    )},
  };
  const p = map[kind];
  return (
    <div className="pill" style={{ color: p.color }}>
      <span style={{ display: 'inline-flex', alignItems: 'center' }}>{p.icon}</span>
      <span>{p.name}</span>
    </div>
  );
};

const PlatformCard = ({ platform, period, big, sub, delta, deltaPositive = true, rows = [], donut }) => (
  <div className="stat-card">
    <div className="head">
      <PlatformChip kind={platform} />
      <div className="date">{period}</div>
    </div>
    <div className="big">{big}</div>
    <div className="sub">{sub}</div>
    {delta && (
      <div className="delta" style={{ color: deltaPositive ? '#62E4A1' : '#FF6B9D' }}>
        {deltaPositive ? '↗' : '↘'} {delta}
      </div>
    )}
    {donut && (
      <div className="footer-row" style={{ marginTop: 28 }}>
        <div className="donut-wrap">
          <Donut pct={donut.pct} />
          <div className="donut-legend">
            {donut.rows.map((r, i) => (
              <div key={i} className="row"><span className="sw" style={{ background: r.color }} />{r.label}</div>
            ))}
          </div>
        </div>
      </div>
    )}
    {rows.length > 0 && (
      <div className="footer-row" style={{ flexDirection: 'column', gap: 14, alignItems: 'stretch' }}>
        {rows.map((r, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>{r.label}</span>
            <span className="v">
              {r.value}
              {r.delta && <em style={{ color: '#62E4A1', fontStyle: 'normal', fontSize: 11, marginLeft: 8 }}>{r.delta}</em>}
            </span>
          </div>
        ))}
      </div>
    )}
  </div>
);

const GeographyCard = () => {
  const rows = [
    { c: 'United States', p: 16.2 },
    { c: 'India', p: 11.6 },
    { c: 'Spain', p: 5.3 },
  ];
  return (
    <div className="stat-card geography-card">
      <div className="head">
        <div className="pill">🌍 Audience by country</div>
        <div className="date">VIEWS · 28 DAYS</div>
      </div>
      <div className="bars geo-bars">
        {rows.map((r) => (
          <div className="bar-row" key={r.c}>
            <div className="top">
              <span style={{ fontSize: 14, fontWeight: 500 }}>{r.c}</span>
              <span className="pct" style={{ fontSize: 13 }}>{r.p}%</span>
            </div>
            <div className="bar-track">
              <div className="bar-fill" style={{ width: `${(r.p / 16.2) * 100}%` }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Statistics = () => (
  <section id="stats" className="section">
    <div className="wrap">
      <div className="section-head">
        <div>
          <div className="section-label">— 03 / Statistics</div>
          <h2>The numbers,<br />from every channel.</h2>
        </div>
        <div className="right">
          Audience reach across Facebook, YouTube, Instagram and TikTok — pulled directly from each platform's analytics.
        </div>
      </div>

      <div className="stats-grid stats-grid-4">
        <Reveal>
          <PlatformCard
            platform="facebook"
            period="90 DAYS"
            big="18M"
            sub="Total views"
            delta="+239% vs prev. period"
            rows={[
              { label: 'Unique viewers', value: '9.6M' },
              { label: 'Interactions', value: '303K', delta: '+118%' },
              { label: 'Earnings', value: '$557', delta: '+113%' },
            ]}
          />
        </Reveal>
        <Reveal delay={80}>
          <PlatformCard
            platform="youtube"
            period="365 DAYS"
            big={<Counter to={3272992} />}
            sub="Total views"
            delta="3.27M lifetime"
            rows={[
              { label: 'Peak day', value: '66K views' },
              { label: 'Period', value: 'May 20 → May 19' },
            ]}
          />
        </Reveal>
        <Reveal delay={160}>
          <PlatformCard
            platform="instagram"
            period="90 DAYS"
            big={<Counter to={1043869} />}
            sub="Total views"
            delta="442,756 accounts reached"
            deltaPositive={false}
            donut={{
              pct: 72,
              rows: [
                { label: '72.2% non-followers', color: 'var(--accent)' },
                { label: '27.8% followers', color: 'rgba(255,255,255,0.25)' },
              ],
            }}
          />
        </Reveal>
        <Reveal delay={240}>
          <PlatformCard
            platform="tiktok"
            period="365 DAYS"
            big="2.2M"
            sub="Post views"
            delta="91K likes · 14K profile views"
            rows={[
              { label: 'Comments', value: '1,353' },
              { label: 'Shares', value: '3,951' },
              { label: 'Last 90d views', value: '426K' },
            ]}
          />
        </Reveal>
      </div>

      <div style={{ marginTop: 20 }}>
        <Reveal delay={120}><GeographyCard /></Reveal>
      </div>
    </div>
  </section>
);

/* Reviews */
const ReviewCard = ({ r }) => {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div className="review-card" onClick={() => !playing && setPlaying(true)}>
      {playing ? (
        <React.Fragment>
          <iframe
            src={`https://www.youtube-nocookie.com/embed/${r.id}?autoplay=1&playsinline=1&rel=0`}
            title={r.title}
            referrerPolicy="strict-origin-when-cross-origin"
            allow="autoplay; encrypted-media; picture-in-picture; web-share; fullscreen"
            allowFullScreen
          />
          <a
            href={`https://youtu.be/${r.id}`}
            target="_blank"
            rel="noopener"
            onClick={(e) => e.stopPropagation()}
            style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 4, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(8px)', padding: '6px 10px', borderRadius: 4, color: 'var(--accent)', border: '1px solid var(--border)' }}
          >
            Open ↗
          </a>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <img
            className="thumb"
            src={`https://img.youtube.com/vi/${r.id}/maxresdefault.jpg`}
            alt={r.title}
            loading="lazy"
            onLoad={(e) => { if (e.currentTarget.naturalWidth <= 120) e.currentTarget.src = `https://img.youtube.com/vi/${r.id}/hqdefault.jpg`; }}
            onError={(e) => { e.currentTarget.src = `https://img.youtube.com/vi/${r.id}/hqdefault.jpg`; }}
          />
          <div className="yt-play"><YouTubePlay /></div>
          <div className="meta">
            <div className="stars">★ ★ ★ ★ ★</div>
            <div className="title">{r.title}</div>
            <div className="channel">{r.channel}</div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
};

const Reviews = ({ reviews }) => (
  <section id="reviews" className="section">
    <div className="wrap">
      <div className="section-head">
        <div>
          <div className="section-label">— 04 / Press</div>
          <h2>YouTube<br />reviews.</h2>
        </div>
        <div className="right">
          Featured by creators in fitness, calisthenics and outdoor gear. Tap to play — videos stay on the page.
        </div>
      </div>
      <div className="reviews-grid">
        {reviews.map((r, i) => (
          <Reveal key={i} delay={i * 120}>
            <ReviewCard r={r} />
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* CTA + Footer */
const InstagramIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <rect x="3" y="3" width="18" height="18" rx="5" />
    <circle cx="12" cy="12" r="4" />
    <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
  </svg>
);
const YouTubeIcon = () => (
  <svg width="20" height="14" viewBox="0 0 24 17" fill="none">
    <path d="M23 3a3 3 0 0 0-2.1-2.1C19 0 12 0 12 0S5 0 3.1.9A3 3 0 0 0 1 3 31 31 0 0 0 1 8.5 31 31 0 0 0 1 14a3 3 0 0 0 2.1 2.1C5 17 12 17 12 17s7 0 8.9-.9A3 3 0 0 0 23 14a31 31 0 0 0 0-5.5A31 31 0 0 0 23 3z" fill="currentColor" />
    <path d="M9.6 12.2 15.4 8.5 9.6 4.8v7.4z" fill="#000" />
  </svg>
);
const TikTokIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
    <path d="M20 8.5a6.5 6.5 0 0 1-4-1.4v8.4a5.5 5.5 0 1 1-5.5-5.5c.4 0 .7 0 1 .1v3a2.5 2.5 0 1 0 1.5 2.4V2h2.6a4 4 0 0 0 4.4 4v2.5z" />
  </svg>
);

const CTA = () => (
  <section id="contact" className="cta-section">
    <div className="wrap">
      <div className="eyebrow" style={{ marginBottom: 18 }}>— Ready when you are</div>
      <h2>Let's <span className="accent">collaborate.</span></h2>
      <p>Drop me a message — I usually reply within 24 hours.</p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginTop: 36 }}>
        <a href="mailto:trickoso0@gmail.com?subject=Brand%20Collab%20Inquiry" className="cta-btn" style={{ marginTop: 0 }}>
          Email me <ArrowRight />
        </a>
        <a
          href="https://wa.me/34663577786?text=Hi%20Alex%2C%20I%27d%20love%20to%20discuss%20a%20brand%20collaboration."
          target="_blank"
          rel="noopener"
          className="cta-btn cta-btn-wa"
          style={{ marginTop: 0 }}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style={{ marginRight: 4 }}>
            <path d="M.06 24l1.69-6.17A11.86 11.86 0 0 1 .15 11.9C.15 5.34 5.48 0 12.04 0a11.83 11.83 0 0 1 8.41 3.49 11.81 11.81 0 0 1 3.48 8.42c0 6.56-5.34 11.9-11.89 11.9a11.9 11.9 0 0 1-5.69-1.45L.06 24zm6.6-3.81l.36.21a9.86 9.86 0 0 0 5.02 1.37c5.45 0 9.89-4.44 9.89-9.89A9.83 9.83 0 0 0 19.05 4.9a9.83 9.83 0 0 0-7-2.9c-5.45 0-9.89 4.44-9.89 9.89 0 1.87.52 3.69 1.51 5.27l.24.38-1 3.65 3.75-.98zM17.47 14.4c-.07-.12-.27-.2-.56-.34-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.64-2.05-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.47 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.7.63.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41z"/>
          </svg>
          WhatsApp
        </a>
      </div>
      <div style={{ marginTop: 24, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--text-faint)', letterSpacing: '0.1em' }}>
        trickoso0@gmail.com · +34 663 577 786
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="wrap footer-inner">
      <div className="footer-fineprint">© 2026 Alex Trickoso · All rights reserved</div>
      <div className="socials">
        <a href="https://www.instagram.com/alex.worksout" target="_blank" rel="noopener" className="social-btn" aria-label="Instagram"><InstagramIcon /></a>
        <a href="https://www.youtube.com/@Alextrickoso" target="_blank" rel="noopener" className="social-btn" aria-label="YouTube"><YouTubeIcon /></a>
        <a href="https://www.tiktok.com/@alex.worksout" target="_blank" rel="noopener" className="social-btn" aria-label="TikTok"><TikTokIcon /></a>
        <a href="https://www.facebook.com/alex.trickoso" target="_blank" rel="noopener" className="social-btn" aria-label="Facebook">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.54-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z"/></svg>
        </a>
      </div>
      <a href="mailto:trickoso0@gmail.com" className="footer-fineprint" style={{ color: 'var(--text-dim)' }}>trickoso0@gmail.com</a>
    </div>
  </footer>
);

Object.assign(window, {
  Nav, Hero, Marquee, BrandWork, Services, Statistics, Reviews, CTA, Footer,
  Placeholder, PlayIcon, Reveal, Counter, YouTubeCard,
});