/* global React, Icon, fmtViews, fmtDate, ytThumb, CARS, TOPICS */

// ============================================================
// TUCHO ANIMATED — crossfade entre variações PNG (fundo transparente)
// Sequência: normal → pisca → normal → chave combinada → normal → torquímetro
// ============================================================
function TuchoLayered({ size = 180 }) {
  const FADE = 350; // ms do crossfade
  const SEQUENCE = [
    { src: 'assets/tucho/normal.png',                     hold: 3200 },
    { src: 'assets/tucho/piscando_olhos_fechados.png',    hold: 400  },
    { src: 'assets/tucho/normal.png',                     hold: 2400 },
    { src: 'assets/tucho/oferecendo_chave_combinada.png', hold: 1600 },
    { src: 'assets/tucho/normal.png',                     hold: 2000 },
    { src: 'assets/tucho/oferecendo_torquimetro.png',     hold: 1600 },
  ];

  const [idx,    setIdx]    = React.useState(0);
  const [fading, setFading] = React.useState(false);

  React.useEffect(() => {
    let holdT, fadeT;
    holdT = setTimeout(() => {
      setFading(true);
      fadeT = setTimeout(() => {
        setIdx(i => (i + 1) % SEQUENCE.length);
        setFading(false);
      }, FADE);
    }, SEQUENCE[idx].hold);
    return () => { clearTimeout(holdT); clearTimeout(fadeT); };
  }, [idx]);

  const nextIdx = (idx + 1) % SEQUENCE.length;

  // Ícone pequeno (painel colapsado): estático, sem overhead de animação
  if (size <= 60) {
    return (
      <img src="assets/tucho/normal.png" alt="TUCHO"
        style={{ width: size, height: size, display: 'block', objectFit: 'contain' }} />
    );
  }

  const imgStyle = (visible) => ({
    position: 'absolute', top: 0, left: 0,
    width: '100%', height: '100%',
    objectFit: 'contain', display: 'block',
    opacity: visible ? 1 : 0,
    transition: `opacity ${FADE}ms ease-in-out`,
  });

  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <img src={SEQUENCE[idx].src}     alt="TUCHO" style={imgStyle(!fading)} />
      <img src={SEQUENCE[nextIdx].src} alt=""      style={imgStyle(fading)}  />
    </div>
  );
}

// ============================================================
// TOP BAR with rotating stats
// ============================================================
const TOP_STATS = [
  { tag: '+840 VÍDEOS', text: 'de mecânica DIY publicados no canal' },
  { tag: '+5,1 MILHÕES DE VIEWS', text: 'acumuladas desde 2015' },
  { tag: 'MAIS VISTO', text: '"Reforma de pivôs" · 374 mil views' },
  { tag: 'CURIOSIDADE', text: 'o tucho hidráulico se auto-regula com pressão de óleo' },
  { tag: '+100 MIL INSCRITOS', text: 'galera que não tem medo de botar a mão na graxa' },
  { tag: 'DICA PAULO', text: '"chave de torque é investimento, não gasto"' },
];

function TopBar({ theme, onToggleTheme }) {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % TOP_STATS.length), 4200);
    return () => clearInterval(t);
  }, []);
  const s = TOP_STATS[idx];
  return (
    <div className="topbar">
      <div className="topbar__left">
        <img src="assets/pg_logo.png" alt="" className="topbar__mini-logo" />
        <span className="topbar__brand">PAULOSGARAGE<span className="dot">.</span>COM</span>
      </div>
      <div className="topbar__center">
        <div className="topbar__stat" key={idx}>
          <span className="chip">{s.tag}</span>
          <span>{s.text}</span>
        </div>
      </div>
      <div className="topbar__right">
        <button
          className="topbar__theme"
          onClick={onToggleTheme}
          title={theme === 'dark' ? 'Mudar para tema claro' : 'Mudar para tema escuro (oficina noturna)'}
          aria-label="Alternar tema"
        >
          {theme === 'dark' ? (
            // sun icon (click to go light)
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <circle cx="12" cy="12" r="4"/>
              <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>
            </svg>
          ) : (
            // moon icon (click to go dark)
            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
              <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>
            </svg>
          )}
          <span className="topbar__theme-label">{theme === 'dark' ? 'LIGHT' : 'DARK'}</span>
        </button>
        <a className="topbar__social topbar__yt" href="https://youtube.com/PaulosGarage" target="_blank" rel="noopener" title="YouTube">
          <svg viewBox="0 0 24 24" width="14" height="10" fill="#FF0000"><path d="M23 7s-.3-2-1.2-2.8c-1.1-1.2-2.4-1.2-3-1.3C16.2 3 12 3 12 3s-4.2 0-6.8.2c-.6.1-1.9.1-3 1.3C1.3 5 1 7 1 7S.7 9.1.7 11.3v2c0 2.1.3 4.2.3 4.2s.3 2 1.2 2.8c1.1 1.2 2.6 1.1 3.3 1.2C7.2 21.7 12 21.7 12 21.7s4.2 0 6.8-.3c.6-.1 1.9-.1 3-1.3.9-.8 1.2-2.8 1.2-2.8s.3-2.1.3-4.2v-2C23.3 9.1 23 7 23 7zM9.7 15.5V8.4l8.1 3.6-8.1 3.5z"/></svg>
          <span>/PAULOSGARAGE</span>
        </a>
        <a className="topbar__social topbar__ig" href="https://instagram.com/PaulosGarageBR" target="_blank" rel="noopener" title="Instagram">
          <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 3.3.2 4.8 1.7 5 5 .1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.2 3.3-1.7 4.8-5 5-1.3.1-1.6.1-4.9.1s-3.6 0-4.8-.1c-3.3-.2-4.8-1.7-5-5C2 16.6 2 16.3 2 12s0-3.6.1-4.8c.2-3.3 1.7-4.8 5-5C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.2 0-3.5 0-4.7.1-2.3.1-3.3 1.1-3.4 3.4C3.8 8.7 3.8 9 3.8 12s0 3.3.1 4.5c.1 2.3 1.1 3.3 3.4 3.4 1.2.1 1.5.1 4.7.1s3.5 0 4.7-.1c2.3-.1 3.3-1.1 3.4-3.4.1-1.2.1-1.5.1-4.5s0-3.3-.1-4.5c-.1-2.3-1.1-3.3-3.4-3.4-1.2-.1-1.5-.1-4.7-.1zM12 7a5 5 0 1 1 0 10A5 5 0 0 1 12 7zm0 1.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zM17.2 5.8a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z"/></svg>
          <span>@PAULOSGARAGEBR</span>
        </a>
        <a className="topbar__social topbar__tt" href="https://tiktok.com/@PaulosGarageBR" target="_blank" rel="noopener" title="TikTok">
          <svg viewBox="0 0 24 24" width="12" height="13" fill="currentColor"><path d="M19.6 3h-3.2v12.1a2.8 2.8 0 1 1-2.7-3 3 3 0 0 1 .9.1V8.9a6.2 6.2 0 0 0-.9-.1A6.1 6.1 0 1 0 19.8 15V8.6a9.3 9.3 0 0 0 5.4 1.7V7.1a5.6 5.6 0 0 1-5.6-4.1z"/></svg>
          <span>@PAULOSGARAGEBR</span>
        </a>
      </div>
    </div>
  );
}

// ============================================================
// HEADER
// ============================================================
function Header({ route, onNav, search, setSearch, onSearch }) {
  return (
    <header className="header">
      <div className="header__row">
        <a className="header__logo" href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }}>
          <img src="assets/pg_logo.png" alt="PG" className="header__logo-mark" />
          <div className="header__logo-word">
            <span className="t1">Paulo's Garage</span>
            <span className="t2">PORTAL · MANUAL DE OFICINA · DIY</span>
          </div>
        </a>
        <nav className="header__nav">
          <a href="#" className={route === 'home' ? 'active' : ''} onClick={(e)=>{e.preventDefault();onNav('home');}}>Início</a>
          <a href="#" className={route === 'cars' ? 'active' : ''} onClick={(e)=>{e.preventDefault();onNav('cars');}}>Por Carro</a>
          <a href="#" className={route === 'topics' ? 'active' : ''} onClick={(e)=>{e.preventDefault();onNav('topics');}}>Por Assunto</a>
          <a href="#" onClick={(e)=>{e.preventDefault();onNav('search');}}>Buscar</a>
          <a href="#" onClick={(e)=>{e.preventDefault();onNav('about');}}>Sobre</a>
        </nav>
        <form className="header__search" onSubmit={(e)=>{e.preventDefault(); onSearch && onSearch(search);}}>
          <input
            placeholder="Buscar em 840+ vídeos…"
            value={search}
            onChange={(e)=>setSearch(e.target.value)}
          />
          <button type="submit">BUSCAR</button>
        </form>
      </div>
      <div className="breadcrumb">
        <a href="#" onClick={(e)=>{e.preventDefault();onNav('home');}}>Início</a>
        <span className="sep">/</span>
        <span className="here">
          {route === 'home' ? 'Portal principal' :
           route === 'video' ? 'Vídeo' :
           route === 'cars' ? 'Por carro' :
           route === 'topics' ? 'Por assunto' : 'Explorar'}
        </span>
        <span className="sep">·</span>
        <span>atualizado {fmtDate(new Date().toISOString())}</span>
      </div>
    </header>
  );
}

// ============================================================
// CARD ROWS for Hero section
// ============================================================
function VideoRow({ v, badge, onOpen }) {
  return (
    <div className="card-row" onClick={() => onOpen && onOpen(v)}>
      <div className="thumb">
        <img src={ytThumb(v.id)} alt="" loading="lazy" />
        <div className="duration">{v.duration}</div>
        {badge === 'new' && <div className="badge-new">NOVO</div>}
        {badge === 'views' && <div className="badge-views">{fmtViews(v.views)} views</div>}
        <div className="play" />
      </div>
      <div>
        <div className="card-row__title">{v.title}</div>
        <div className="card-row__meta">
          {badge === 'views' ? <>
            <span>{fmtDate(v.date)}</span>
            <span className="dot">·</span>
            <span>{v.duration}</span>
          </> : <>
            <span>{fmtDate(v.date)}</span>
            <span className="dot">·</span>
            <span>{fmtViews(v.views)} views</span>
            <span className="dot">·</span>
            <span>{v.duration}</span>
          </>}
        </div>
      </div>
    </div>
  );
}

function Carousel({ items, badge, onOpen }) {
  const [idx, setIdx] = React.useState(0);
  const n = items.length;
  const prev = () => setIdx((i) => (i - 1 + n) % n);
  const next = () => setIdx((i) => (i + 1) % n);

  const at = (offset) => items[(idx + offset + n) % n];

  return (
    <div className="carousel">
      <div className="carousel__row">
        <button className="carousel__btn carousel__btn--prev" onClick={prev} aria-label="Anterior">‹</button>

        <div className="carousel__viewport">
          {/* left half */}
          <div className="carousel__card carousel__card--side carousel__card--left" onClick={prev}>
            <div className="thumb">
              <img src={ytThumb(at(-1).id)} alt="" loading="lazy" />
              <div className="duration">{at(-1).duration}</div>
            </div>
          </div>
          {/* center full */}
          <div className="carousel__card carousel__card--center" onClick={() => onOpen(at(0))}>
            <div className="thumb">
              <img src={ytThumb(at(0).id)} alt="" />
              <div className="duration">{at(0).duration}</div>
              {badge === 'new' && <div className="badge-new">NOVO</div>}
              {badge === 'views' && <div className="badge-views">{fmtViews(at(0).views)} views</div>}
              <div className="play" />
            </div>
            <div className="carousel__meta">
              <div className="carousel__title">{at(0).title}</div>
              <div className="card-row__meta">
                <span>{fmtDate(at(0).date)}</span>
                <span className="dot">·</span>
                <span>{fmtViews(at(0).views)} views</span>
                <span className="dot">·</span>
                <span>{at(0).duration}</span>
              </div>
            </div>
          </div>
          {/* right half */}
          <div className="carousel__card carousel__card--side carousel__card--right" onClick={next}>
            <div className="thumb">
              <img src={ytThumb(at(1).id)} alt="" loading="lazy" />
              <div className="duration">{at(1).duration}</div>
            </div>
          </div>
        </div>

        <button className="carousel__btn carousel__btn--next" onClick={next} aria-label="Próximo">›</button>
      </div>

      <div className="carousel__dots">
        {items.slice(0, Math.min(n, 8)).map((_, i) => (
          <span key={i} className={'carousel__dot' + (i === idx ? ' is-active' : '')} onClick={() => setIdx(i)} />
        ))}
      </div>
    </div>
  );
}

function HeroSection({ recent, top, onOpen }) {
  return (
    <div className="hero">
      <div className="hero__col">
        <div className="hero__col-head">
          <h3>📌 Últimos Vídeos</h3>
          <span className="mark">ORDEM CRONOLÓGICA</span>
        </div>
        <Carousel items={recent.slice(0, 8)} badge="new" onOpen={onOpen} />
      </div>
      <div className="hero__col">
        <div className="hero__col-head">
          <h3>🏆 Mais Vistos</h3>
          <span className="mark">TOP DO CANAL</span>
        </div>
        <Carousel items={top.slice(0, 8)} badge="views" onOpen={onOpen} />
      </div>
    </div>
  );
}

// --- STRIP layout: uma faixa horizontal única, thumbs pequenas ---
function HeroStrip({ recent, top, onOpen }) {
  const items = [
    ...recent.slice(0, 4).map(v => ({...v, _kind:'new'})),
    ...top.slice(0, 5).map(v => ({...v, _kind:'views'})),
  ];
  return (
    <div className="hero-strip">
      <div className="hero-strip__head">
        <span className="hero-strip__label">📌 DESTAQUES</span>
        <span className="hero-strip__mark">ÚLTIMOS + MAIS VISTOS · ROLE LATERALMENTE</span>
      </div>
      <div className="hero-strip__track">
        {items.map(v => (
          <div key={v.id+'_'+v._kind} className="hero-strip__item" onClick={()=>onOpen(v)}>
            <div className="thumb">
              <img src={ytThumb(v.id)} alt="" loading="lazy" />
              <div className="duration">{v.duration}</div>
              {v._kind === 'new'   && <div className="badge-new" style={{fontSize:9,padding:'1px 4px'}}>NOVO</div>}
              {v._kind === 'views' && <div className="badge-views" style={{fontSize:9,padding:'1px 4px'}}>{fmtViews(v.views)}</div>}
            </div>
            <div className="hero-strip__title">{v.title}</div>
            <div className="hero-strip__meta">
              {v._kind === 'new'
                ? <>{fmtDate(v.date)} · {v.duration}</>
                : <>{fmtViews(v.views)} views · {v.duration}</>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// --- SIDEBAR layout: lista estreita com thumbs pequenas em 2 colunas lado a lado ---
// Este componente renderiza apenas o aside (a "jornada" é renderizada ao lado no Home)
// Três variantes enxutas: 'compact', 'tabs', 'featured'
function HeroSidebarList({ recent, top, onOpen }) {
  const Row = ({v, kind}) => (
    <div className="hsl__row" onClick={()=>onOpen(v)}>
      <div className="thumb hsl__thumb">
        <img src={ytThumb(v.id)} alt="" loading="lazy"/>
        <div className="duration">{v.duration}</div>
      </div>
      <div>
        <div className="hsl__title">{v.title}</div>
        <div className="hsl__meta">
          {kind === 'new'
            ? <>{fmtDate(v.date)}</>
            : <>{fmtViews(v.views)} views</>}
        </div>
      </div>
    </div>
  );
  return (
    <aside className="hsl">
      <div className="hsl__block">
        <div className="hsl__head">📌 ÚLTIMOS</div>
        {recent.slice(0, 5).map(v => <Row key={v.id} v={v} kind="new"/>)}
      </div>
      <div className="hsl__block">
        <div className="hsl__head">🏆 MAIS VISTOS</div>
        {top.slice(0, 5).map(v => <Row key={v.id} v={v} kind="views"/>)}
      </div>
    </aside>
  );
}

// ============================================================
// CARS PANEL (expandable)
// ============================================================
function CarsPanel({ expanded, onExpand, onCar }) {
  return (
    <>
      <div className="panel__num">01 / 03</div>
      <div className="panel__icon"><Icon.Car /></div>
      <div className="panel__title">Por Carro</div>
      <div className="panel__sub">Escolha um dos 6 carros do canal — todos de uso popular e manutenção acessível</div>
      {expanded && (
        <div className="panel__content">
          <div className="cargrid">
            {CARS.map((c) => (
              <div key={c.id} className="carcard" onClick={() => onCar && onCar(c)}>
                <div className="carcard__img">
                  <img src={`assets/cars/${c.id}.jpg`} alt={c.name} loading="lazy" />
                </div>
                <div className="carcard__body">
                  <div className="carcard__name">{c.name}</div>
                  <div className="carcard__spec">{c.spec}</div>
                  <div className="carcard__count"><span className="n">{c.count}</span> vídeos</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
      {!expanded && (
        <div style={{marginTop:12, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--pg-gray-2)', textTransform:'uppercase', letterSpacing:'0.12em'}}>
          6 modelos · Clique
        </div>
      )}
    </>
  );
}

// ============================================================
// TOPICS PANEL (expandable)
// ============================================================
function TopicsPanel({ expanded, onExpand, activeTopic, setActiveTopic, topicVideos, onOpen }) {
  return (
    <>
      <div className="panel__num">02 / 03</div>
      <div className="panel__icon"><Icon.Wrench /></div>
      <div className="panel__title">Por Assunto</div>
      <div className="panel__sub">Motor · Freios · Suspensão · Elétrica · Funilaria · Dicas</div>
      {expanded && (
        <div className="panel__content">
          <div className="topicgrid">
            {TOPICS.map((t) => {
              const ICO = t.ico;
              return (
                <div
                  key={t.id}
                  className={'topiccard' + (activeTopic === t.id ? ' active' : '')}
                  onClick={(e) => { e.stopPropagation(); setActiveTopic(t.id); }}
                >
                  <div className="topiccard__ico"><ICO /></div>
                  <div className="topiccard__label">{t.label}</div>
                  <div className="topiccard__count">{t.count} VÍDEOS</div>
                </div>
              );
            })}
          </div>
          {activeTopic && topicVideos[activeTopic] && (
            <div className="topic-results">
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:8}}>
                <h4 style={{fontSize:14,letterSpacing:'0.08em'}}>
                  {TOPICS.find(t=>t.id===activeTopic).label} · PRIMEIROS RESULTADOS
                </h4>
                <span style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--pg-gray-2)',letterSpacing:'0.1em',textTransform:'uppercase'}}>
                  FILTRAR POR CARRO ▸
                </span>
              </div>
              <div className="topic-results__grid">
                {topicVideos[activeTopic].slice(0, 4).map((v) => (
                  <div key={v.id} className="vid-mini" onClick={() => onOpen(v)}>
                    <div className="thumb" style={{aspectRatio:'16/9'}}>
                      <img src={ytThumb(v.id)} alt="" loading="lazy" />
                      <div className="duration">{v.duration}</div>
                    </div>
                    <div className="vid-mini__body">
                      <div className="vid-mini__title">{v.title}</div>
                      <div className="vid-mini__meta">{fmtViews(v.views)} views · {fmtDate(v.date)}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
      {!expanded && (
        <div style={{marginTop:12, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--pg-gray-2)', textTransform:'uppercase', letterSpacing:'0.12em'}}>
          6 categorias
        </div>
      )}
    </>
  );
}

// ============================================================
// TUCHO PANEL (AI search)
// ============================================================
const TUCHO_HINTS = [
  'meu Gol está fazendo barulho quando freio',
  'como trocar pivô de suspensão',
  'qual óleo usar na Brasília',
  'alternador do CR-V não carrega',
  'S10 morrendo na lenta',
];

function TuchoPanel({ expanded, onExpand, allVideos, onOpen }) {
  const [q, setQ] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [answer, setAnswer] = React.useState(null);
  const [suggested, setSuggested] = React.useState([]);

  const ask = async (question) => {
    const text = (question || q).trim();
    if (!text || loading) return;
    setLoading(true);
    setAnswer(null);

    // local pick: score videos by keyword overlap
    const words = text.toLowerCase().split(/\s+/).filter(w => w.length > 2);
    const scored = allVideos.map(v => {
      const hay = (v.title + ' ' + (v.tags || '')).toLowerCase();
      let score = 0;
      words.forEach(w => { if (hay.includes(w)) score += 1; });
      return { v, score };
    }).filter(x => x.score > 0).sort((a,b) => b.score - a.score);
    let picks = scored.slice(0, 3).map(x => x.v);
    if (picks.length === 0) picks = allVideos.slice(0, 3);
    setSuggested(picks);

    // try Claude for the speech
    try {
      const prompt = `Você é o TUCHO — assistente de IA do Paulo's Garage, um canal brasileiro de mecânica DIY. Fala como o Paulo: informal, direto, amigável, técnico sem ser pedante. Usa "galera", "fera", frases curtas, sem jargão corporativo.

Pergunta do usuário: "${text}"

Escreva uma resposta CURTA (máx 3 frases, 50 palavras) no tom do Paulo, sem listas, sem markdown. Diga que você separou uns vídeos que ajudam com isso. Seja específico sobre o provável problema se der.`;

      const reply = await window.claude.complete(prompt);
      setAnswer(reply.trim());
    } catch (e) {
      setAnswer('Fala galera! Dei uma olhada aqui e achei uns vídeos que devem te ajudar com isso. Dá uma conferida no que separei embaixo — tem procedimento mostrado passo-a-passo. Qualquer coisa, pergunta de novo!');
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="panel__num">03 / 03</div>
      <div className="panel__icon" style={{height: expanded ? 0 : 52, overflow:'hidden'}}>
        <TuchoLayered size={48} />
      </div>
      <div className="panel__title">Pergunte ao TUCHO</div>
      <div className="panel__sub">
        Assistente de busca inteligente — descreva o problema em português comum
      </div>

      {expanded && (
        <div className="panel__content">
          <div className="tucho-big">
            <div className="tucho-big__mascot">
              <TuchoLayered size={200} />
            </div>
            <div>
              <div className="tucho-big__speech">
                {answer
                  ? answer
                  : 'Fala galera! Sou o TUCHO — me conta o que tá rolando com o teu carro. Descreve o sintoma, o modelo, o motor, o que você já tentou. Eu vasculho os vídeos do Paulo e volto com os que vão te resolver.'}
              </div>

              <form
                className="tucho-input"
                onClick={(e)=>e.stopPropagation()}
                onSubmit={(e)=>{e.preventDefault(); ask();}}
              >
                <input
                  placeholder="Ex: meu Gol está fazendo barulho quando freio"
                  value={q}
                  onChange={(e)=>setQ(e.target.value)}
                />
                <button type="submit" disabled={loading}>
                  {loading ? '...' : 'PERGUNTAR'}
                </button>
              </form>

              <div className="tucho-hints" onClick={(e)=>e.stopPropagation()}>
                {TUCHO_HINTS.map((h) => (
                  <button key={h} className="tucho-chip" onClick={()=>{setQ(h); ask(h);}}>
                    {h}
                  </button>
                ))}
              </div>

              {(answer || suggested.length > 0) && (
                <div className="tucho-answer" onClick={(e)=>e.stopPropagation()}>
                  <div className="tucho-answer__label">▸ vídeos separados pelo TUCHO</div>
                  <div className="tucho-answer__videos">
                    {suggested.map(v => (
                      <div key={v.id} className="tucho-suggest" onClick={()=>onOpen(v)}>
                        <div className="thumb">
                          <img src={ytThumb(v.id)} alt="" />
                          <div className="duration">{v.duration}</div>
                        </div>
                        <div className="body">
                          <div className="title">{v.title}</div>
                          <div className="meta">{fmtViews(v.views)} views</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
      {!expanded && (
        <div style={{marginTop:12, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--pg-gray-2)', textTransform:'uppercase', letterSpacing:'0.12em'}}>
          IA · Busca
        </div>
      )}
    </>
  );
}

// ============================================================
// STAT STRIP
// ============================================================
function StatStrip() {
  return (
    <div className="statstrip">
      <div className="statstrip__cell">
        <div className="statstrip__k">▸ Catálogo total</div>
        <div className="statstrip__v">840+</div>
        <div className="statstrip__n">vídeos com transcrição indexada</div>
      </div>
      <div className="statstrip__cell">
        <div className="statstrip__k">▸ Views acumuladas</div>
        <div className="statstrip__v">5,1 mi</div>
        <div className="statstrip__n">em todo o canal desde 2015</div>
      </div>
      <div className="statstrip__cell">
        <div className="statstrip__k">▸ Carros cobertos</div>
        <div className="statstrip__v">6</div>
        <div className="statstrip__n">Gol · Brasília · Ka · S10 · Fit · CR-V</div>
      </div>
      <div className="statstrip__cell">
        <div className="statstrip__k">▸ Tempo total</div>
        <div className="statstrip__v">320h</div>
        <div className="statstrip__n">de conteúdo técnico DIY em PT-BR</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  TuchoLayered,
  TopBar, Header, VideoRow, HeroSection, HeroStrip, HeroSidebarList, Carousel,
  CarsPanel, TopicsPanel, TuchoPanel, StatStrip,
});