/* 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>
  );
};

/* Category landing pages.
   Added 2026-08-02: the media kit had no route to /brands/gear|tech|apparel, so
   a brand landing here could not reach the work in its own category. This is a
   SECTION rather than nav links because .nav-links is display:none below 760px,
   which would have hidden the whole thing on a phone.
   Lives in components.jsx on purpose: index.html stays untouched. */
/* ⛔ CATS is GENERATED. build.py rewrites the block between the two markers from
   verticals.py every time the site is built, so the piece counts can never go
   stale the way the first hardcoded "36 pieces" did. Edit verticals.py, not this. */
/* CATS-BEGIN */
const CATS = [
  { href: '/brands/gear/', name: "Training gear", note: "Bars, boards, balls, boxes, rings, bands and recovery.", count: 37, thumbs: ['gear-bar-foldable', 'gear-board-360', 'gear-box-combo'] },
  { href: '/brands/tech/', name: "Camera, drone and AI", note: "Bullet time, VFX and tracking drone tests.", count: 16, thumbs: ['tech-ai-bullet', 'tech-drone-wind', 'tech-360-water'] },
  { href: '/brands/apparel/', name: "Apparel and footwear", note: "How a garment behaves through a full acrobatic line.", count: 9, thumbs: ['app-shoes-barefoot', 'app-court', 'app-gainer-loop'] },
];
/* CATS-END */

/* Alex 2026-08-03: "this should be highlighted so they see if they click there
   they'd see a lot more, otherwise it doesn't really show and they'd scroll
   away." Three flat text cards on a black page read as a footer nav, so nothing
   told a brand contact that a whole page of their own category sat behind each
   one. Two changes carry the weight: real frames from that category, and the
   "+N MORE" plate over the third one, which is the only element that states
   there is more work than the card is showing. The panel behind them separates
   the block from the black page so the eye stops on it at all. */
const Verticals = () => (
  <section id="categories" className="section" style={{ paddingTop: 0 }}>
    <style>{`
      .cats{position:relative;overflow:hidden;border:1px solid var(--border);
        border-radius:var(--radius);padding:30px 28px 32px;
        background:linear-gradient(180deg,rgba(165,221,230,.06),rgba(255,255,255,.014) 55%,transparent)}
      .cats::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
        background:linear-gradient(90deg,transparent,var(--accent),transparent)}
      /* ⚠️ The kit's heading style is scoped to '.section-head h2', so an h2
         anywhere else silently falls back to the browser default Inter bold.
         Restated here rather than rescoping, exactly as .vhero h1 does on the
         vertical pages. Same numbers as the original rule. */
      .cats h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(30px,3.6vw,46px);
        margin:12px 0 0;letter-spacing:.01em;line-height:1}
      .cats .lede{margin:12px 0 0;color:var(--text-dim);font-size:15px;max-width:60ch}
      .catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
        gap:14px;margin-top:26px}
      /* flex column + margin-top:auto on the footer, so the "37 PIECES / SEE THE
         WORK" line sits on the same baseline across all three cards however many
         lines the note wraps to. Grid stretches the cards to equal height already;
         without this the footers still floated at different heights inside them. */
      .catcard{display:flex;flex-direction:column;text-decoration:none;color:var(--text);
        background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
        padding:13px 13px 17px;transition:border-color .2s,transform .2s,background .2s}
      .catcard:hover{border-color:var(--accent);transform:translateY(-3px);background:#101010}
      .catshots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
      .catshot{position:relative;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#000}
      .catshot img{width:100%;height:100%;object-fit:cover;display:block;
        filter:grayscale(.18) brightness(.9);transition:filter .25s,transform .25s}
      .catcard:hover .catshot img{filter:none;transform:scale(1.05)}
      .catmore{position:absolute;inset:0;display:flex;flex-direction:column;
        align-items:center;justify-content:center;gap:2px;background:rgba(0,0,0,.66);
        font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;line-height:1;color:#fff}
      .catmore b{font-size:24px;font-weight:400;color:var(--accent)}
      .catmore span{font-size:11px;color:rgba(255,255,255,.75)}
      .catname{font-family:'Bebas Neue',sans-serif;font-size:25px;letter-spacing:.04em;
        text-transform:uppercase;margin-top:15px}
      .catnote{margin:6px 0 14px;font-size:14px;color:var(--text-dim);line-height:1.5}
      .catfoot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
        display:flex;align-items:center;justify-content:space-between;
        font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
        text-transform:uppercase}
      .catfoot .n{color:var(--text-dim)}
      .catfoot .go{color:var(--accent)}
      .catfoot .arw{display:inline-block;transition:transform .2s}
      .catcard:hover .arw{transform:translateX(4px)}
      @media(max-width:560px){.cats{padding:24px 18px 26px}.catgrid{grid-template-columns:1fr}}
    `}</style>
    <div className="wrap">
      <div className="cats">
        <div className="section-label">— See the work in your category</div>
        <h2>Every category<br />has its own page.</h2>
        <p className="lede">
          Each one holds only the work that matches what you sell, with the same stats and the
          same numbers. Open the one that fits you.
        </p>
        <div className="catgrid">
          {CATS.map((c) => (
            <a className="catcard" key={c.href} href={c.href}>
              <div className="catshots">
                {c.thumbs.map((t, i) => (
                  <div className="catshot" key={t}>
                    <img src={`/vid/${t}.jpg`} alt="" loading="lazy" />
                    {i === 2 && (
                      <div className="catmore">
                        <b>+{c.count - 3}</b>
                        <span>more</span>
                      </div>
                    )}
                  </div>
                ))}
              </div>
              <div className="catname">{c.name}</div>
              <div className="catnote">{c.note}</div>
              <div className="catfoot">
                <span className="n">{c.count} pieces</span>
                <span className="go">See the work <i className="arw">→</i></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* 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,
});