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

// ============================================================
// VIDEO PAGE — individual video view
// ============================================================
function VideoPage({ video, allVideos, onBack, onOpen }) {
  const [transcriptOpen, setTranscriptOpen] = React.useState(false);
  if (!video) return null;

  // related: same car / topic pool, excluding current
  const related = allVideos.filter(v => v.id !== video.id).slice(0, 4);
  const compat = video.compat || ['VW Gol G3', 'Ford Ka', 'GM S10', 'Família AP'];
  const description = video.description ||
    `Neste vídeo o Paulo mostra o procedimento completo passo-a-passo, com a ferramenta certa e os cuidados pra não errar. Vale pra quem tá começando e pra quem já mexe — linguagem direta, sem enrolação. Tem os códigos das peças na descrição do YouTube.`;

  const transcript = video.transcript ||
    `[00:00] E fala galera, tudo certo com vocês? Sejam bem-vindos a mais um vídeo. Neste vídeo aqui a gente vai falar sobre o procedimento completo, vou mostrar passo a passo pra vocês não terem dúvida.

[02:14] Primeiro ponto importante: antes de qualquer coisa, desconecta a bateria. Não é frescura — é segurança. Trabalhar com tensão residual dá problema.

[05:47] Agora presta atenção aqui, esse parafuso aqui é o que a maioria esquece. Ele tá atrás da bandeja, escondido. Usa uma chave de 17 com extensão que fica fácil.

[09:22] Eu uso graxa lítio pra essa aplicação. Alguns vão falar de graxa à base d'água — funciona, mas na prática o que eu testei aqui durou mais foi a de lítio mesmo.

[14:30] Pra finalizar: aperto de 85 Nm com chave de torque. Não chute o aperto, por favor. Chave de torque é investimento, não gasto — vocês me ouvem falar isso em todo vídeo.

[18:55] E é isso galera, espero que tenha ajudado. Se gostaram deixa o like, compartilha com quem também vai precisar. Abraço a todos os inscritos e até o próximo vídeo!`;

  return (
    <div className="video-page">
      <div style={{padding:'10px 18px 0'}}>
        <a className="back-link" href="#" onClick={(e)=>{e.preventDefault();onBack();}}>
          ◂ VOLTAR AO PORTAL
        </a>
      </div>
      <div className="video-page__body">
        <div>
          <div className="video-page__player">
            <iframe
              src={`https://www.youtube.com/embed/${video.id}?rel=0`}
              title={video.title}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            />
          </div>
          <h1 className="video-page__title">{video.title}</h1>
          <div className="video-page__tags">
            <span className="tag-chip gold">VW GOL</span>
            <span className="tag-chip">MOTOR AP</span>
            <span className="tag-chip">SUSPENSÃO</span>
            <span className="tag-chip">DURAÇÃO {video.duration}</span>
            <span className="tag-chip">{fmtViews(video.views)} VIEWS</span>
            <span className="tag-chip">{fmtDate(video.date)}</span>
          </div>
          <div style={{marginTop:14}}>
            <h4 style={{fontSize:13,letterSpacing:'0.14em',borderBottom:'1.5px solid var(--pg-black)',paddingBottom:4,textTransform:'uppercase'}}>
              Descrição
            </h4>
            <p style={{marginTop:10,fontSize:13.5,lineHeight:1.6}}>{description}</p>
          </div>
        </div>
        <aside className="video-side">
          <h4>Também serve para</h4>
          <ul className="compat">
            {compat.map(c => <li key={c}>{c}</li>)}
          </ul>

          <h4>Ferramentas mencionadas</h4>
          <p style={{fontFamily:'var(--font-mono)',fontSize:11.5,lineHeight:1.7}}>
            → Chave de 17 c/ extensão<br/>
            → Chave de torque (0–100 Nm)<br/>
            → Graxa lítio EP2<br/>
            → Desengripante WD-40<br/>
            → Macaco hidráulico 2t
          </p>

          <h4>Vídeos relacionados</h4>
          <div className="related-list">
            {related.map(v => (
              <div key={v.id} className="card-row" onClick={()=>onOpen(v)}>
                <div className="thumb" style={{width:96}}>
                  <img src={ytThumb(v.id)} alt="" loading="lazy" />
                  <div className="duration">{v.duration}</div>
                </div>
                <div>
                  <div className="card-row__title" style={{fontSize:12}}>{v.title}</div>
                  <div className="card-row__meta">{fmtViews(v.views)} views · {fmtDate(v.date)}</div>
                </div>
              </div>
            ))}
          </div>
        </aside>
      </div>

      <div className="transcript-block">
        <button
          className={'transcript-toggle' + (transcriptOpen ? ' open' : '')}
          onClick={() => setTranscriptOpen(!transcriptOpen)}
        >
          <span className="arrow">▸</span>
          <span>Transcrição completa</span>
          <span style={{marginLeft:8,fontFamily:'var(--font-mono)',fontSize:10,color:'var(--pg-gray-2)',letterSpacing:'0.1em'}}>
            [ INDEXADA PELO GOOGLE · CTRL+F FUNCIONA AQUI ]
          </span>
        </button>
        {transcriptOpen && (
          <div className="transcript-text">{transcript}</div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// HOME (main page with panels)
// ============================================================
function Home({ data, onOpen, heroLayout }) {
  const [expanded, setExpanded] = React.useState('cars');  // 'cars' | 'topics' | 'tucho' | null
  const [activeTopic, setActiveTopic] = React.useState('motor');

  const panelsCls = 'panels ' + (expanded ? ('expanded-' + expanded) : '');

  const panelsBlock = (
    <>
      <div className="section-head">
        <h2>▸ Escolha sua jornada</h2>
        <span className="tag">3 CAMINHOS</span>
        <span className="sub">clique num painel para expandir · <span className="kbd">1</span> <span className="kbd">2</span> <span className="kbd">3</span> atalhos</span>
      </div>
      <div className={panelsCls}>
        <div
          className={'panel' + (expanded === 'cars' ? ' is-expanded' : ' is-collapsed')}
          onClick={() => setExpanded('cars')}
        >
          <CarsPanel
            expanded={expanded === 'cars'}
            onCar={(c) => alert('Abrir página do carro: ' + c.name + '\n(nesta demo, o fluxo é ilustrativo)')}
          />
        </div>
        <div
          className={'panel' + (expanded === 'topics' ? ' is-expanded' : ' is-collapsed')}
          onClick={() => setExpanded('topics')}
        >
          <TopicsPanel
            expanded={expanded === 'topics'}
            activeTopic={activeTopic}
            setActiveTopic={setActiveTopic}
            topicVideos={data.byTopic}
            onOpen={onOpen}
          />
        </div>
        <div
          className={'panel tucho' + (expanded === 'tucho' ? ' is-expanded' : ' is-collapsed')}
          onClick={() => setExpanded('tucho')}
        >
          <TuchoPanel
            expanded={expanded === 'tucho'}
            allVideos={[...data.top, ...data.recent, ...Object.values(data.byTopic).flat()]}
            onOpen={onOpen}
          />
        </div>
      </div>
    </>
  );

  // SIDEBAR layout: jornada à esquerda (~70%), lista vertical à direita (~30%)
  if (heroLayout === 'sidebar') {
    return (
      <div className="page">
        <div className="section-head">
          <h2>Portal de Conhecimento</h2>
          <span className="tag">v1.0 · DIY</span>
          <span className="sub">atualizado <a href="#">hoje</a> · {data.recent.length} vídeos novos</span>
        </div>
        <div className="hero-sidebar-layout">
          <div className="hero-sidebar-layout__main">
            {panelsBlock}
          </div>
          <div className="hero-sidebar-layout__aside">
            <HeroSidebarList recent={data.recent} top={data.top} onOpen={onOpen} />
          </div>
        </div>
        <StatStrip />
      </div>
    );
  }

  // default / strip / carousel layouts: hero em cima, jornada embaixo
  return (
    <div className="page">
      <div className="section-head">
        <h2>Portal de Conhecimento</h2>
        <span className="tag">v1.0 · DIY</span>
        <span className="sub">
          atualizado <a href="#">hoje</a> · {data.recent.length} vídeos novos esta semana
        </span>
      </div>

      {heroLayout === 'strip'
        ? <HeroStrip recent={data.recent} top={data.top} onOpen={onOpen} />
        : <HeroSection recent={data.recent} top={data.top} onOpen={onOpen} />}

      {panelsBlock}

      <StatStrip />

      <div className="section-head">
        <h2>▸ Por carro — navegação rápida</h2>
        <span className="tag">6 MODELOS</span>
        <span className="sub">todos populares · manutenção DIY acessível</span>
      </div>

      <div className="cargrid" style={{gridTemplateColumns:'repeat(6, 1fr)', gap: 12, marginBottom: 28}}>
        {CARS.map(c => (
          <div key={c.id} className="carcard">
            <div className="carcard__img">
              <div className="placeholder-label">[ foto · {c.id} ]</div>
            </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>
  );
}

// ============================================================
// ABOUT PAGE
// ============================================================
function AboutPage() {
  return (
    <div className="page about-page">

      {/* ── HERO ── */}
      <div className="about-hero">
        <div className="about-hero__eyebrow">▸ SOBRE O CANAL</div>
        <h1 className="about-hero__title">Faça você mesmo.<br/>De verdade.</h1>
        <p className="about-hero__sub">
          Paulo's Garage é um canal de mecânica DIY criado para quem quer colocar
          a mão na graxa, aprender o procedimento correto e não depender de oficina
          para tudo. Desde 2015, sem cortar caminho na informação.
        </p>
      </div>

      {/* ── HISTÓRIA ── */}
      <div className="section-head" style={{marginTop: 36}}>
        <h2>▸ A história</h2>
        <span className="tag">COMO COMEÇOU</span>
      </div>
      <div className="about-grid">
        <div className="about-block">
          <div className="about-block__num">01</div>
          <h3 className="about-block__title">O problema</h3>
          <p className="about-block__text">
            Quem tenta aprender mecânica de forma independente esbarra sempre no mesmo
            muro: informação fragmentada, desatualizada ou simplesmente errada.
            Fóruns de época, grupos, manuais técnicos — tudo espalhado e difícil de
            cruzar com a realidade do carro brasileiro popular.
          </p>
        </div>
        <div className="about-block">
          <div className="about-block__num">02</div>
          <h3 className="about-block__title">A solução</h3>
          <p className="about-block__text">
            Começou como um blog, mas ficou claro rápido que vídeo era o formato certo
            — dá pra mostrar o parafuso escondido, o torque exato, a mão na peça.
            O canal nasceu disso: documentar as próprias manutenções com o nível de
            detalhe que eu gostaria de ter encontrado quando estava aprendendo.
          </p>
        </div>
        <div className="about-block">
          <div className="about-block__num">03</div>
          <h3 className="about-block__title">A filosofia</h3>
          <p className="about-block__text">
            Sou entusiasta, aprendi na prática — lendo manual, pesquisando fórum,
            errando e corrigindo. Não tenho formação formal em mecânica automotiva.
            Exatamente por isso a régua é alta: informação técnica correta, procedimento
            completo, sem atalho e sem achismo. Tem muita informação ruim na internet.
            Aqui não.
          </p>
        </div>
      </div>

      {/* ── OS CARROS ── */}
      <div className="section-head" style={{marginTop: 36}}>
        <h2>▸ Os carros</h2>
        <span className="tag">6 MODELOS</span>
        <span className="sub">cada um com seu propósito</span>
      </div>
      <p className="about-text">
        Cada carro do canal existe por uma razão — seja pelo desafio mecânico, pela
        utilidade prática ou pelo valor histórico. O limite é espaço físico, não
        falta de vontade. De um Fusca de 1979 a um CR-V de 2009, os procedimentos
        mostrados cobrem desde mecânica simples e acessível até manutenções mais
        elaboradas que a maioria evita levar para oficina.
      </p>
      <div className="about-cars">
        {CARS.map(c => (
          <div key={c.id} className="about-car">
            <img src={`assets/cars/${c.id}.jpg`} alt={c.name} />
            <div className="about-car__name">{c.name}</div>
            <div className="about-car__spec">{c.spec}</div>
          </div>
        ))}
      </div>

      {/* ── TUCHO ── */}
      <div className="section-head" style={{marginTop: 36}}>
        <h2>▸ O TUCHO</h2>
        <span className="tag">IA · ASSISTENTE</span>
      </div>
      <div className="about-tucho">
        <div className="about-tucho__img">
          <img src="assets/tucho/normal.png" alt="TUCHO" />
        </div>
        <div className="about-tucho__text">
          <h3>Um nome que vem da oficina</h3>
          <p>
            O nome TUCHO surgiu durante a retífica do motor da S10 — o tucho
            hidráulico é aquele componente que a maioria conhece pelo barulho
            característico quando o óleo demora a chegar, mas que poucos sabem
            exatamente o que faz. Um item comum, técnico e com nome quase engraçado.
            Perfeito para o assistente de busca do canal.
          </p>
          <p>
            O TUCHO vasculha o acervo de {'>'}840 vídeos e transcrições para encontrar
            o procedimento certo para o seu problema. Descreve o sintoma em português
            comum — ele entende de mecânica.
          </p>
          <a className="about-tucho__cta" href="#" onClick={(e)=>{e.preventDefault(); window.__goTucho && window.__goTucho();}}>
            Perguntar ao TUCHO ▸
          </a>
        </div>
      </div>

      {/* ── NÚMEROS ── */}
      <div className="section-head" style={{marginTop: 36}}>
        <h2>▸ O canal em números</h2>
        <span className="tag">DESDE 2015</span>
      </div>
      <div className="about-stats">
        <div className="about-stat">
          <div className="about-stat__val">840<span>+</span></div>
          <div className="about-stat__label">Vídeos publicados</div>
        </div>
        <div className="about-stat">
          <div className="about-stat__val">5,1<span>mi</span></div>
          <div className="about-stat__label">Views acumuladas</div>
        </div>
        <div className="about-stat">
          <div className="about-stat__val">100<span>k+</span></div>
          <div className="about-stat__label">Inscritos</div>
        </div>
        <div className="about-stat">
          <div className="about-stat__val">320<span>h</span></div>
          <div className="about-stat__label">De conteúdo técnico</div>
        </div>
        <div className="about-stat">
          <div className="about-stat__val">9</div>
          <div className="about-stat__label">Anos de canal</div>
        </div>
        <div className="about-stat">
          <div className="about-stat__val">6</div>
          <div className="about-stat__label">Carros documentados</div>
        </div>
      </div>

      {/* ── CONTATO / REDES ── */}
      <div className="section-head" style={{marginTop: 36}}>
        <h2>▸ Redes e contato</h2>
        <span className="tag">SIGA O CANAL</span>
      </div>
      <div className="about-social">
        <a className="about-social__card" href="https://youtube.com/PaulosGarage" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" width="28" height="20" 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>
          <div>
            <div className="about-social__name">YouTube</div>
            <div className="about-social__handle">youtube.com/PaulosGarage</div>
          </div>
        </a>
        <a className="about-social__card" href="https://instagram.com/PaulosGarageBR" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" width="24" height="24" 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>
          <div>
            <div className="about-social__name">Instagram</div>
            <div className="about-social__handle">@PaulosGarageBR</div>
          </div>
        </a>
        <a className="about-social__card" href="https://tiktok.com/@PaulosGarageBR" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" width="22" height="24" 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>
          <div>
            <div className="about-social__name">TikTok</div>
            <div className="about-social__handle">@PaulosGarageBR</div>
          </div>
        </a>
        <a className="about-social__card about-social__card--email" href="mailto:paulosgarage@gmail.com">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
          <div>
            <div className="about-social__name">E-mail</div>
            <div className="about-social__handle">paulosgarage@gmail.com</div>
          </div>
        </a>
      </div>

      {/* ── PARCERIAS ── */}
      <div className="about-parceria">
        <div className="about-parceria__label">▸ PARCERIAS</div>
        <p>
          O canal está aberto a parcerias com marcas e fabricantes do setor automotivo
          que compartilhem o compromisso com informação técnica de qualidade.
          Entre em contato pelo e-mail acima.
        </p>
      </div>

    </div>
  );
}

Object.assign(window, { VideoPage, Home, AboutPage });