;(() => {
// HOME PAGE
const { Link, navigate, WhatsIcon, WHATSAPP_URL } = window.FaukoChrome;

const HERO_SLIDES = [
  {
    eyebrow: 'Linha completa',
    title: 'Bombas FILL-RITE & Adam Pumps',
    desc: 'Importação direta dos EUA e Itália. Bombas elétricas, a bateria, manuais, magnéticas e para lubrificantes — toda a linha em estoque.',
    cta: 'Ver bombas', ctaLink: '/produtos?cat=Bombas',
    image: 'assets/hero/linha-bombas.png',
    alt: 'Linha completa de bombas FILL-RITE e Adam Pumps',
  },
  {
    eyebrow: 'Certificação',
    title: 'À prova de explosão, certificadas INMETRO',
    desc: 'Equipamentos em conformidade com a Portaria INMETRO nº 179/2010. Segurança operacional para combustíveis em frotas, postos e indústria.',
    cta: 'Equipamentos certificados', ctaLink: '/produtos?inmetro=1',
    image: 'assets/hero/bomba-antiexplosao.png',
    alt: 'Bomba FILL-RITE à prova de explosão certificada INMETRO',
  },
  {
    eyebrow: 'Desde 1990',
    title: 'Importação direta — qualidade que abastece o Brasil',
    desc: '+35 anos importando equipamentos para combustíveis, ARLA 32 e lubrificantes. Distribuidor oficial das marcas que movem a operação.',
    cta: 'Conheça a Fauko', ctaLink: '/quem-somos',
    image: 'assets/hero/fachada-fauko.png',
    alt: 'Showroom Fauko Import com linha de equipamentos em exposição',
  },
];

function Hero() {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % HERO_SLIDES.length), 6500);
    return () => clearInterval(t);
  }, []);
  const slide = HERO_SLIDES[idx];
  return (
    <section className="hero">
      <div className="hero__bg" />
      <div className="hero__decor" aria-hidden>
        <img src="assets/fauko-symbol.png" alt="" />
      </div>
      <div className="container hero__inner">
        <div className="hero__copy">
          <span className="eyebrow eyebrow--light">{slide.eyebrow}</span>
          <h1 className="hero__title">{slide.title}</h1>
          <p className="hero__desc">{slide.desc}</p>
          <div className="hero__ctas">
            <Link to={slide.ctaLink} className="btn btn--light">
              {slide.cta} <ArrowIcon />
            </Link>
            <a className="btn btn--ghost-light" href={WHATSAPP_URL} target="_blank" rel="noopener">
              <WhatsIcon /> Orçamento
            </a>
          </div>
          <div className="hero__dots">
            {HERO_SLIDES.map((_, i) => (
              <button key={i} className={'hero__dot ' + (i === idx ? 'active' : '')}
                aria-label={`Slide ${i + 1}`} onClick={() => setIdx(i)} />
            ))}
          </div>
        </div>
        <div className="hero__media">
          <div className="hero__placeholder hero__photo">
            {HERO_SLIDES.map((s, i) => (
              <img key={s.image} src={s.image} alt={s.alt}
                className={i === idx ? 'active' : ''} />
            ))}
          </div>
          <div className="hero__stat">
            <div>
              <strong>+35</strong>
              <span>anos importando</span>
            </div>
            <div>
              <strong>86</strong>
              <span>equipamentos em catálogo</span>
            </div>
            <div>
              <strong>2</strong>
              <span>marcas oficiais</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ArrowIcon() {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );
}

// SECTION 2 — Categories
const CATEGORIES = [
  { name: 'Bombas', count: 30, sub: 'Elétricas · Bateria · Manuais · Lubrificantes · Magnéticas',
    icon: 'pump' },
  { name: 'Medidores de Vazão', count: 28, sub: 'Mecânicos · Digital · Turbina · Engrenagem oval',
    icon: 'meter' },
  { name: 'Bicos de Abastecimento', count: 9, sub: 'Automáticos e manuais',
    icon: 'nozzle' },
  { name: 'Mangueiras e Carretéis', count: 7, sub: 'Mangueiras certificadas e carretéis',
    icon: 'hose' },
  { name: 'Filtros', count: 7, sub: 'Diesel · Gasolina · Lubrificantes',
    icon: 'filter' },
  { name: 'Tanques', count: 5, sub: 'Polietileno e aço carbono — 220 L a 15 m³',
    icon: 'tank' },
];

function CategoryIcon({ kind }) {
  const props = { width: 36, height: 36, viewBox: '0 0 48 48', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'pump': return (<svg {...props}><rect x="10" y="14" width="20" height="28" rx="2" /><path d="M30 22h6v8h-6" /><circle cx="20" cy="28" r="4" /><path d="M14 14V8h12v6" /><path d="M36 30v6h2" /></svg>);
    case 'meter': return (<svg {...props}><circle cx="24" cy="24" r="14" /><path d="M24 24l8-6" /><circle cx="24" cy="24" r="1.5" fill="currentColor" /><path d="M24 10v3M38 24h-3M24 38v-3M10 24h3" /></svg>);
    case 'nozzle': return (<svg {...props}><path d="M14 12h14l4 8v18a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V12z" /><path d="M32 22h6v6" /><path d="M18 18h10" /></svg>);
    case 'hose': return (<svg {...props}><circle cx="18" cy="24" r="10" /><circle cx="18" cy="24" r="3" /><path d="M28 24c4 0 6 4 10 4s4-6 0-6" /></svg>);
    case 'filter': return (<svg {...props}><path d="M10 10h28l-10 14v14l-8-4V24L10 10z" /></svg>);
    case 'tank': return (<svg {...props}><rect x="8" y="14" width="32" height="22" rx="3" /><path d="M14 14v-4h20v4" /><path d="M8 22h32M8 30h32" /></svg>);
    default: return null;
  }
}

function CategoriesSection() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Catálogo</span>
          <h2 className="section-title">6 categorias, 86 equipamentos sob medida para sua operação</h2>
          <p className="section-lead">
            Toda a linha de equipamentos para abastecimento de combustíveis, ARLA e lubrificantes,
            organizada para você encontrar o modelo certo em segundos.
          </p>
        </div>
        <div className="cat-grid">
          {CATEGORIES.map(cat => (
            <Link to={`/produtos?cat=${encodeURIComponent(cat.name)}`} key={cat.name} className="cat-card">
              <div className="cat-card__icon"><CategoryIcon kind={cat.icon} /></div>
              <div className="cat-card__body">
                <div className="cat-card__head">
                  <h3>{cat.name}</h3>
                  <span className="cat-card__count">{cat.count}</span>
                </div>
                <p>{cat.sub}</p>
              </div>
              <div className="cat-card__arrow"><ArrowIcon /></div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

// SECTION 3 — Segments
function SegmentsSection() {
  const segs = [
    { title: 'Combustíveis', items: ['Diesel', 'Gasolina', 'Etanol', 'Querosene'], color: 'var(--fauko-navy)' },
    { title: 'ARLA 32', items: ['Bombas dedicadas', 'Medidores em inox', 'Bicos não-metálicos'], color: 'var(--fauko-green)' },
    { title: 'Lubrificantes', items: ['Óleo de motor', 'Hidráulico', 'Engrenagem', 'Residual'], color: 'var(--fauko-near-black)' },
  ];
  return (
    <section className="section section--soft">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Segmentos atendidos</span>
          <h2 className="section-title">Equipamentos para os fluidos da sua operação</h2>
          <p className="section-lead">
            A Fauko fornece os <strong>equipamentos</strong> de manuseio e abastecimento.
            Não comercializamos combustíveis.
          </p>
        </div>
        <div className="seg-grid">
          {segs.map(s => (
            <div key={s.title} className="seg-card" style={{ '--seg-accent': s.color }}>
              <div className="seg-card__head">
                <h3>{s.title}</h3>
                <span className="seg-card__dot" />
              </div>
              <ul>
                {s.items.map(i => <li key={i}>{i}</li>)}
              </ul>
              <Link to={`/produtos?seg=${encodeURIComponent(s.title.replace(' 32',''))}`} className="seg-card__link">
                Ver equipamentos <ArrowIcon />
              </Link>
            </div>
          ))}
        </div>
        <div className="seg-disclaimer">
          <span className="seg-disclaimer__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
              <line x1="12" y1="9" x2="12" y2="13" />
              <circle cx="12" cy="17" r="1" fill="currentColor" />
            </svg>
          </span>
          <div className="seg-disclaimer__body">
            <strong>Importante</strong>
            <p>A Fauko Import é distribuidora de equipamentos de abastecimento. Não comercializa combustíveis, ARLA ou lubrificantes.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// SECTION 4 — Bento highlights
function BentoSection({ products }) {
  const featured = [
    { match: p => p.nome === 'FR 701', size: 'lg', tag: 'Mais procurada' },
    { match: p => p.nome === 'AF 3000', size: 'md', tag: 'Bombas elétricas' },
    { match: p => p.nome.includes('GPI M150S'), size: 'md', tag: 'Linha bateria' },
    { match: p => p.nome === 'FR 1211', size: 'sm', tag: '12V' },
    { match: p => p.nome.includes('TT10'), size: 'sm', tag: 'Medidor digital' },
    { match: p => p.nome.includes('TD 20A'), size: 'sm', tag: 'Bico automático' },
  ];
  const items = featured.map(f => ({ ...f, p: products.find(f.match) })).filter(i => i.p);

  return (
    <section className="section">
      <div className="container">
        <div className="section-head section-head--row">
          <div>
            <span className="eyebrow">Em destaque</span>
            <h2 className="section-title">Os equipamentos mais procurados</h2>
          </div>
          <Link to="/produtos" className="btn btn--ghost">
            Ver todo o catálogo <ArrowIcon />
          </Link>
        </div>
        <div className="bento">
          {items.map(({ p, size, tag }, i) => (
            <Link key={p.id} to={window.FaukoSEO.productPath(p)} className={`bento__item bento__item--${size}`}>
              <div className="bento__media">
                {p.images && p.images.length > 0 ? (
                  <img src={p.images[0]} alt={p.nome} loading="lazy" />
                ) : (
                  <div className="fk-ph" style={{ position: 'absolute', inset: 0 }}>
                    <span className="fk-ph__label">[FOTO] {p.nome}</span>
                  </div>
                )}
                {p.inmetro && <span className="bento__inmetro badge badge--inmetro">INMETRO</span>}
              </div>
              <div className="bento__body">
                <span className="badge badge--gray">{tag}</span>
                <h3>{p.nome}</h3>
                <p>{[p.vazao && `Vazão ${window.FaukoChrome.formatSpec(p.vazao)}`, p.voltagem && `${window.FaukoChrome.formatSpec(p.voltagem)}V`, p.combustivel].filter(Boolean).slice(0,2).join(' · ')}</p>
                <span className="bento__cta">Ver detalhes <ArrowIcon /></span>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

// SECTION 5 — Brands
function BrandsSection() {
  const brands = [
    { name: 'FILL-RITE', sub: 'EUA · Marca principal' },
    { name: 'Adam Pumps', sub: 'Itália · Linha agrícola' },
    { name: 'GPI', sub: 'EUA · Bombas a bateria' },
    { name: 'Wertco', sub: 'Brasil' },
    { name: 'Gespasa', sub: 'Espanha' },
    { name: 'Outras', sub: 'Marcas parceiras' },
  ];
  return (
    <section className="section section--brands">
      <div className="container">
        <div className="section-head text-center">
          <span className="eyebrow" style={{ justifyContent: 'center' }}>Distribuidor oficial</span>
          <h2 className="section-title">Marcas que a Fauko representa no Brasil</h2>
        </div>
        <div className="brand-grid">
          {brands.map(b => (
            <div key={b.name} className="brand-card">
              <div className="brand-card__name">{b.name}</div>
              <div className="brand-card__sub">{b.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// SECTION 6 — Institutional banner
function InstitutionalSection() {
  return (
    <section className="institutional">
      <div className="institutional__bg" />
      <div className="container institutional__inner">
        <img src="assets/fauko-symbol.png" alt="" className="institutional__symbol" />
        <div className="institutional__copy">
          <span className="eyebrow eyebrow--light">Nossa estrutura</span>
          <h2>Tradição que se constrói abastecendo o Brasil</h2>
          <p>
            Estoque próprio em São Paulo, equipe técnica especializada e relação direta com fabricantes
            internacionais — desde 1990.
          </p>
        </div>
      </div>
    </section>
  );
}

// SECTION 7 — Differentiators
function DifferentiatorsSection() {
  const items = [
    { title: '+35 anos de experiência', desc: 'Operando desde 1990 com a mesma especialidade técnica.', icon: 'clock' },
    { title: 'Importação direta', desc: 'Relação direta com fabricantes — melhor preço e disponibilidade.', icon: 'globe' },
    { title: 'Assistência técnica', desc: 'Equipe qualificada para instalação, manutenção e peças.', icon: 'wrench' },
    { title: 'Certificação INMETRO', desc: 'Equipamentos à prova de explosão sob a Portaria 179/2010.', icon: 'shield' },
    { title: 'Vendas especializadas', desc: 'Consultoria técnica para você comprar o equipamento certo.', icon: 'chat' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Por que Fauko</span>
          <h2 className="section-title">Cinco motivos para abastecer com a gente</h2>
        </div>
        <div className="diff-grid">
          {items.map(it => (
            <div key={it.title} className="diff-card">
              <DiffIcon kind={it.icon} />
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DiffIcon({ kind }) {
  const props = { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'clock': return (<svg {...props}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>);
    case 'globe': return (<svg {...props}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>);
    case 'wrench': return (<svg {...props}><path d="M14 6a4 4 0 0 1 5.5 5.5l-10 10A2 2 0 1 1 6.5 18.5l10-10A4 4 0 0 1 14 6z" /></svg>);
    case 'shield': return (<svg {...props}><path d="M12 3l8 4v5c0 5-4 8-8 9-4-1-8-4-8-9V7l8-4z" /><path d="M9 12l2 2 4-4" /></svg>);
    case 'chat': return (<svg {...props}><path d="M21 12a8 8 0 0 1-12 7l-5 1 1-5a8 8 0 1 1 16-3z" /></svg>);
    default: return null;
  }
}

// SECTION 8 — Contact
function ContactSection() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contato" className="section section--contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-info">
            <span className="eyebrow">Fale com a Fauko</span>
            <h2 className="section-title" style={{ color: 'white' }}>
              Solicite um orçamento ou tire dúvidas técnicas com a equipe.
            </h2>
            <ul className="contact-list">
              <li>
                <strong>WhatsApp comercial</strong>
                <a href={WHATSAPP_URL} target="_blank" rel="noopener">Falar agora →</a>
              </li>
              <li>
                <strong>E-mail</strong>
                <a href="mailto:comercial@fauko.com.br">comercial@fauko.com.br</a>
              </li>
              <li>
                <strong>Endereço</strong>
                Av. Padre Arlindo Vieira, 213 - 12<br />
                Vila Vermelha, São Paulo - SP, 04297-000
              </li>
              <li>
                <strong>Trabalhe conosco</strong>
                <a href="mailto:comercial@fauko.com.br?subject=Trabalhe%20conosco">comercial@fauko.com.br</a>
              </li>
            </ul>
            <a className="btn btn--whats" href={WHATSAPP_URL} target="_blank" rel="noopener" style={{ marginTop: 8 }}>
              <WhatsIcon /> Enviar mensagem
            </a>
          </div>
          <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            <h3>Formulário de contato</h3>
            {sent ? (
              <div className="contact-form__success">
                <strong>Recebemos seu contato.</strong>
                <p>Nossa equipe comercial responderá em até 1 dia útil.</p>
                <button type="button" className="btn btn--ghost" onClick={() => setSent(false)}>Enviar outra mensagem</button>
              </div>
            ) : (
              <React.Fragment>
                <label>
                  <span>Nome</span>
                  <input type="text" required placeholder="Como podemos te chamar?" />
                </label>
                <div className="contact-form__row">
                  <label>
                    <span>E-mail</span>
                    <input type="email" required placeholder="seu@email.com" />
                  </label>
                  <label>
                    <span>Telefone</span>
                    <input type="tel" placeholder="(11) 90000-0000" />
                  </label>
                </div>
                <label>
                  <span>Segmento</span>
                  <select required defaultValue="">
                    <option value="" disabled>Selecione…</option>
                    <option>Posto de combustíveis</option>
                    <option>Frota / transporte</option>
                    <option>Indústria</option>
                    <option>Agronegócio</option>
                    <option>Construção / mineração</option>
                    <option>Outro</option>
                  </select>
                </label>
                <label>
                  <span>Mensagem</span>
                  <textarea rows="4" required placeholder="Conte qual equipamento você precisa." />
                </label>
                <button className="btn btn--primary" type="submit">Enviar mensagem <ArrowIcon /></button>
                <small>Ao enviar, você concorda com a Política de Privacidade.</small>
              </React.Fragment>
            )}
          </form>
        </div>
        <div className="contact-map">
          <iframe
            title="Localização da Fauko Import — Av. Padre Arlindo Vieira, 213 - 12, Vila Vermelha, São Paulo - SP"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3655.4567008856934!2d-46.60647471324415!3d-23.623810109101594!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5b653e2baed5%3A0x30c93c97e79c6e38!2sFauko%20Import!5e0!3m2!1spt-BR!2sbr!4v1786647919491!5m2!1spt-BR!2sbr"
            loading="lazy"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen></iframe>
          <a className="contact-map__link" href="https://share.google/gAKKBk8tidnEyGx6L" target="_blank" rel="noopener">
            Abrir no Google Maps <ArrowIcon />
          </a>
        </div>
      </div>
    </section>
  );
}

function HomePage({ products }) {
  return (
    <main>
      <Hero />
      <CategoriesSection />
      <SegmentsSection />
      <BentoSection products={products} />
      <BrandsSection />
      <InstitutionalSection />
      <DifferentiatorsSection />
      <ContactSection />
    </main>
  );
}

window.HomePage = HomePage;
window.ContactSection = ContactSection;

})();