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

const DIFF_LABEL = { beginner: 'INICIANTE', intermediate: 'INTERMEDIÁRIO', advanced: 'AVANÇADO' };
const DIY_LABEL  = { high: 'DIY TRANQUILO', medium: 'DIY COM CUIDADO', low: 'PREFIRA OFICINA' };
const TYPE_LABEL = { tutorial: 'TUTORIAL', review: 'REVIEW', dica: 'DICA', diagnostico: 'DIAGNÓSTICO', showcase: 'SHOWCASE', live: 'AO VIVO', vlog: 'VLOG' };

function VideoBadges({ v }) {
  const part = v.seriesPart > 0 && v.seriesPart < 100 ? ` ${v.seriesPart}/${v.seriesTotal}` : '';
  return (
    <div className="vid-badges">
      {v.car       && <span className="vid-badge vid-badge--car">{v.car}</span>}
      {v.topics?.[0] && <span className="vid-badge vid-badge--topic">{v.topics[0]}</span>}
      {v.difficulty  && <span className={`vid-badge vid-badge--diff vid-badge--${v.difficulty}`}>{DIFF_LABEL[v.difficulty]}</span>}
      {v.isSeries    && <span className="vid-badge vid-badge--series">EM SÉRIE{part}</span>}
    </div>
  );
}

// ============================================================
// 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
// ============================================================
// Monta a rotação da barra superior: stats dinâmicos + banco de dicas (rev. 15).
// Dicas vêm de __PG_DATA__.tipsDb (build_tips_db.py — vídeos [DICA] + curadoria).
function buildTopStats() {
  const ch = (window.__PG_DATA__ || {}).channel || {};
  const tipsDb = (window.__PG_DATA__ || {}).tipsDb || [];
  const fmtMi = (n) => n >= 1e6 ? (n / 1e6).toFixed(1).replace('.', ',') + ' milhões'
                      : n >= 1e3 ? Math.round(n / 1e3) + ' mil' : String(n || 0);
  const stats = [];
  if (ch.totalVideos) stats.push({ tag: `${ch.totalVideos} VÍDEOS`, text: 'de mecânica DIY publicados no canal' });
  if (ch.totalViews)  stats.push({ tag: `${fmtMi(ch.totalViews).toUpperCase()} DE VIEWS`, text: 'acumuladas desde 2015' });
  if (ch.totalContentHours) stats.push({ tag: `${ch.totalContentHours}H DE CONTEÚDO`, text: 'técnico, do começo ao fim' });
  // Intercala stats com as dicas do banco
  const tips = tipsDb.map(t => ({ tag: t.tag || 'DICA', text: t.text, videoId: t.videoId || null }));
  const out = [];
  const maxLen = Math.max(stats.length, tips.length);
  for (let i = 0; i < maxLen; i++) {
    if (i < tips.length) out.push(tips[i]);
    if (i < stats.length) out.push(stats[i]);
  }
  return out.length ? out : [{ tag: 'PAULOSGARAGE', text: 'mecânica DIY de verdade' }];
}

function TopBar({ theme, onToggleTheme, onOpen }) {
  const items = React.useMemo(() => buildTopStats(), []);
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    if (items.length < 2) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % items.length), 5000);
    return () => clearInterval(t);
  }, [items]);
  const s = items[idx % items.length];
  const vmap = ((window.__PG_DATA__ || {}));
  const openTip = () => {
    if (!s.videoId || !onOpen) return;
    const all = {};
    [...(vmap.top||[]), ...(vmap.recent||[]), ...Object.values(vmap.byTopic||{}).flat()].forEach(v => { all[v.id]=v; });
    onOpen(all[s.videoId] || { id: s.videoId });
  };
  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" + (s.videoId ? " topbar__stat--clickable" : "")} key={idx}
          onClick={openTip} title={s.videoId ? 'Ver vídeo dessa dica' : undefined}>
          <span className="chip">{s.tag}</span>
          <span>{s.text}</span>
          {s.videoId && <span className="topbar__stat-cta">▸</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>
  );
}

// ============================================================
// FAIXA DE DICAS (rev. 14) — barra rolante acima do header
// Rotaciona dicas úteis; cada uma abre um vídeo relevante.
// ============================================================
function TipsBar({ tips, onOpen }) {
  const [idx, setIdx] = React.useState(0);
  const [dismissed, setDismissed] = React.useState(() => {
    try { return localStorage.getItem('pg_tips_dismissed') === '1'; } catch (_) { return false; }
  });
  React.useEffect(() => {
    if (dismissed || !tips || tips.length < 2) return;
    const t = setInterval(() => setIdx(i => (i + 1) % tips.length), 6500);
    return () => clearInterval(t);
  }, [dismissed, tips]);

  if (dismissed || !tips || tips.length === 0) return null;
  const tip = tips[idx % tips.length];
  const dismiss = () => {
    setDismissed(true);
    try { localStorage.setItem('pg_tips_dismissed', '1'); } catch (_) {}
  };
  return (
    <div className="tipsbar">
      <span className="tipsbar__icon">💡</span>
      <span className="tipsbar__label">DICA</span>
      <button className="tipsbar__text" key={idx} onClick={() => onOpen && tip.video && onOpen(tip.video)}
        title="Ver vídeo">
        {tip.text}
        <span className="tipsbar__cta">assistir ›</span>
      </button>
      <button className="tipsbar__close" onClick={dismiss} aria-label="Fechar dicas" title="Não mostrar dicas">×</button>
    </div>
  );
}

// ============================================================
// HEADER
// ============================================================
function Header({ route, homePanel, onNav, search, setSearch, onSearch }) {
  const isCarsView = route === 'car' || (route === 'home' && homePanel === 'cars');
  const isTopicsView = route === 'topic' || (route === 'home' && homePanel === 'topics');
  const isSearchView = route === 'home' && homePanel === 'tucho';

  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={isCarsView ? 'active' : ''} onClick={(e)=>{e.preventDefault();onNav('cars');}}>Por Carro</a>
          <a href="#" className={isTopicsView ? 'active' : ''} onClick={(e)=>{e.preventDefault();onNav('topics');}}>Por Assunto</a>
          <a href="#" className={isSearchView ? 'active' : ''} onClick={(e)=>{e.preventDefault();onNav('search');}}>Buscar</a>
          <a href="#" className={route === 'about' ? 'active' : ''} onClick={(e)=>{e.preventDefault();onNav('about');}}>Sobre</a>
        </nav>
        <form className="header__search" onSubmit={(e)=>{e.preventDefault(); onSearch && onSearch(search);}}>
          <input
            placeholder={`Buscar em ${((window.__PG_DATA__||{}).channel||{}).totalVideos||766}+ 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 === 'car' ? 'Por carro' :
           route === 'topic' ? 'Por assunto' :
           route === 'about' ? 'Sobre' : '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>
        <VideoBadges v={v} />
      </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>
              <VideoBadges v={at(0)} />
            </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>
            <VideoBadges v={v} />
          </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, horizontal }) {
  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>
        <VideoBadges v={v} />
      </div>
    </div>
  );
  return (
    <aside className={"hsl" + (horizontal ? " hsl--horizontal" : "")}>
      <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}.png`} 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, onOpenTopic }) {
  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();
                    if (onOpenTopic) { onOpenTopic(t); } else { 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>
        </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, initialQuery, onSearch }) {
  const [q, setQ] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [answer, setAnswer] = React.useState(null);
  const [suggested, setSuggested] = React.useState([]);
  const lastAutoAskedRef = React.useRef('');

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

    // (rev. 14) Busca híbrida compartilhada — definida em pages.jsx, global.
    // Antes: 60 linhas duplicadas inline com a mesma lógica.
    const allScored = await hybridSearch(text, allVideos, allVideos);
    const picks = allScored.slice(0, 3).map(x => x.v);

    setSuggested(picks);

    // Se há handler de navegação para a TuchoResultsPage, navegar com resultados pontuados
    if (onSearch) {
      onSearch(text, allScored, null);
      setLoading(false);
      return;
    }

    // Frase canônica (decisão de produto rev. 14): sem LLM — o valor está nos vídeos
    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!');
    setLoading(false);
  };

  React.useEffect(() => {
    const text = (initialQuery || '').trim();
    if (!text) return;
    setQ(text);
    if (expanded && text !== lastAutoAskedRef.current) {
      lastAutoAskedRef.current = text;
      ask(text);
    }
  }, [initialQuery, expanded]);

  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() {
  const ch = (window.__PG_DATA__ || {}).channel || {};
  const totalVideos = ch.totalVideos || 766;
  const totalViews  = ch.totalViews  || 0;
  const contentHours = ch.totalContentHours || 191;

  function fmtViews(n) {
    if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace('.', ',') + ' mi';
    if (n >= 1_000)     return (n / 1_000).toFixed(0) + ' mil';
    return String(n);
  }

  return (
    <div className="statstrip">
      <div className="statstrip__cell">
        <div className="statstrip__k">▸ Catálogo total</div>
        <div className="statstrip__v">{totalVideos}</div>
        <div className="statstrip__n">vídeos publicados no canal</div>
      </div>
      <div className="statstrip__cell">
        <div className="statstrip__k">▸ Views acumuladas</div>
        <div className="statstrip__v">{fmtViews(totalViews)}</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">▸ Conteúdo publicado</div>
        <div className="statstrip__v">{contentHours}h</div>
        <div className="statstrip__n">de conteúdo técnico DIY em PT-BR</div>
      </div>
    </div>
  );
}

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