const { SiteHeader, SiteFooter, VehicleCard, ESTOQUE_OK } = window;
const IMG = 'assets/';

const PARCEIROS = [
  { logo: IMG + 'partner-pg-crop.png', cat: 'PG Products', txt: 'Um dos mais respeitados fabricantes de vidros balísticos desde 1998.' },
  { logo: IMG + 'partner-wkr.png', cat: 'WKR Prime', txt: 'Tecnologia em proteção balística desde 1995. Materiais ultra leves e resistentes.' },
  { logo: 'assets/europamotors-ink.png', cat: 'Grupo Europamotors', txt: 'Líder em vendas Mercedes-Benz em 2025, parceira de longa data da Collet.' },
  { logo: IMG + 'partner-vw-crop.png', cat: 'Car Bank · Grupo VW', txt: 'Parceiro oficial em financiamento de veículos com atendimento e taxas especiais.' },
];

const PILARES = [
  { n: '01', t: 'Curadoria rigorosa', d: 'Trabalhamos com veículos avaliados e histórico conhecido, sempre contextualizando o passado de cada carro.' },
  { n: '02', t: 'Confiança de longa data', d: 'Com mais de 25 anos de mercado, construímos relações duradouras baseadas em responsabilidade e confiança.' },
  { n: '03', t: 'Atendimento premium', d: 'Se surgir um problema, você não fica sozinho. Nosso time acompanha você durante o período de garantia.' },
];

function Hero() {
  return (
    <section className="hero" id="main" tabIndex={-1}>
      <img decoding="async" fetchPriority="high" className="hero-bg" src={IMG + 'hero-car.webp'} alt="" />
      <div className="hero-scrim" />
      <div className="wrap hero-in">
        <p className="eyebrow light">Desde 1996 · São Paulo</p>
        <h1 className="dh xl">Venda de veículos<br /><em>especiais.</em></h1>
        <p className="hero-sub">Veículos selecionados com critério, técnica e responsabilidade.</p>
        <div className="hero-cta">
          <a className="btn-solid" href="estoque.html">Ver estoque</a>
          <a className="btn-ghost light" href="sobre.html">Sobre a Collet</a>
        </div>
      </div>
    </section>
  );
}

function Destaques() {
  // sem feed, a home nao mostra uma secao vazia: ela simplesmente nao aparece
  if (!ESTOQUE_OK) return null;
  const base = window.ESTOQUE;
  const marcados = base.filter(v => v.destaque);
  const destaques = (marcados.length ? marcados : base).slice(0, 3);
  return (
    <section className="sec">
      <div className="wrap">
        <div className="sechd">
          <div>
            <p className="eyebrow">Selecionados</p>
            <h2 className="dh lg">Destaques do mês</h2>
          </div>
          <a className="btn-line" href="estoque.html">Ver todos</a>
        </div>
        <hr className="rule" />
        <div className="dgrid">{destaques.map(v => <VehicleCard key={v.id} v={v} />)}</div>
      </div>
    </section>
  );
}

function PorQue() {
  return (
    <section className="sec sand">
      <div className="wrap">
        <div className="center">
          <p className="eyebrow">Por que a Collet</p>
          <h2 className="dh lg">Sua confiança é nossa prioridade</h2>
          <p className="body center-b">Trabalhamos com veículos avaliados e com histórico conhecido.
            Carros usados têm passado — nosso compromisso é a clareza sobre ele.</p>
        </div>
        <div className="cols3 pilares">
          {PILARES.map(p => (
            <div className="pilar" key={p.n}>
              <span className="pn">{p.n}</span>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Blindagem() {
  return (
    <section className="sec ink split">
      <div className="split-img"><img loading="lazy" decoding="async" src={IMG + 'blindagem-processo.webp'} alt="Processo de blindagem na fábrica Collet" /></div>
      <div className="split-txt">
        <p className="eyebrow">Collet Blindagens</p>
        <h2 className="dh lg">O que protege<br /><em>não aparece.</em></h2>
        <p className="body">Blindagem nível III-A executada em fábrica própria em Cotia, com fibras aramidas,
          vedação hermética e acabamento interno preservado. <strong>05 anos de garantia</strong>, vidros inclusos.</p>
        <div className="hero-cta"><a className="btn-line" href="blindagem.html">Conhecer a blindagem</a></div>
      </div>
    </section>
  );
}

function Consignacao() {
  return (
    <section className="sec sand">
      <div className="wrap two top">
        <div>
          <p className="eyebrow">Consignação</p>
          <h2 className="dh lg">Seu carro, vendido<br />com o padrão Collet.</h2>
          <p className="body">Anúncios no Instagram e na Webmotors, exposição no showroom da Vila Nova
            Conceição e negociação conduzida por especialistas. <strong>Comissão única de 6%</strong> —
            você só paga quando vende.</p>
          <div className="hero-cta"><a className="btn-line" href="consignacao.html">Como funciona</a></div>
        </div>
        <div className="consig-stats">
          <div><b>6%</b><span>comissão única sobre a venda</span></div>
          <div><b>R$ 0</b><span>de custo até o carro ser vendido</span></div>
          <div><b>Showroom</b><span>na Vila Nova Conceição</span></div>
        </div>
      </div>
    </section>
  );
}

function Parceiros() {
  return (
    <section className="sec">
      <div className="wrap">
        <div className="center">
          <p className="eyebrow">Parceiros</p>
          <h2 className="dh lg">Uma rede de excelência</h2>
          <p className="body center-b">Trabalhamos com referências reconhecidas em cada etapa:
            blindagem certificada, garantia Mercedes-Benz e crédito estruturado.</p>
        </div>
        <div className="pgrid">
          {PARCEIROS.map(p => (
            <div className="pcell" key={p.cat}>
              <div className="plogo"><img loading="lazy" decoding="async" src={p.logo} alt={p.cat} /></div>
              <p className="pcat">{p.cat}</p>
              <p className="ptxt">{p.txt}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Home() {
  return (
    <React.Fragment>
      <SiteHeader active="home" />
      <Hero />
      <Destaques />
      <PorQue />
      <Blindagem />
      <Consignacao />
      <Parceiros />
      <SiteFooter />
    </React.Fragment>
  );
}

Object.assign(window, { Home });