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

const TIMELINE = [
  { year: '1990', title: 'Fundação', desc: 'A Fauko Import nasce em São Paulo com foco em importação de equipamentos para abastecimento de combustíveis.' },
  { year: '1998', title: 'Distribuidor FILL-RITE', desc: 'Fauko se torna distribuidora oficial da FILL-RITE no Brasil — referência mundial em bombas para combustíveis.' },
  { year: '2005', title: 'Linha agrícola', desc: 'Início da parceria com a Adam Pumps para atender o agronegócio com bombas e medidores específicos.' },
  { year: '2010', title: 'Conformidade INMETRO', desc: 'Adequação à Portaria INMETRO nº 179/2010. Toda a linha à prova de explosão certificada.' },
  { year: '2015', title: 'Expansão de portfólio', desc: 'Inclusão de filtros, tanques, mangueiras e acessórios complementares ao catálogo.' },
  { year: '2020', title: 'Linha ARLA 32', desc: 'Lançamento da linha completa de equipamentos dedicados ao manuseio de ARLA 32.' },
  { year: '2026', title: 'Novo site, mesma essência', desc: '+35 anos depois — uma nova plataforma digital para servir clientes em todo o Brasil.' },
];

const VALUES = [
  { icon: 'target', title: 'Missão', body: 'Fornecer equipamentos confiáveis e certificados para o abastecimento seguro de combustíveis, ARLA e lubrificantes — sustentando a operação dos nossos clientes com tecnologia e atendimento técnico próximo.' },
  { icon: 'eye', title: 'Visão', body: 'Ser a referência brasileira em importação de equipamentos para abastecimento, reconhecida pela qualidade do portfólio, conformidade técnica e relação de longo prazo com clientes e fabricantes.' },
  { icon: 'heart', title: 'Valores', body: 'Tradição com atualização técnica. Conformidade rigorosa. Atendimento técnico honesto. Respeito ao meio ambiente. Compromisso com a segurança operacional dos clientes.' },
];

function QuemSomosPage() {
  return (
    <main>
      <section className="page-hero page-hero--lg">
        <div className="page-hero__bg" />
        <div className="container page-hero__inner">
          <span className="eyebrow eyebrow--light">Quem Somos</span>
          <h1>Desde 1990, equipamentos que abastecem o Brasil.</h1>
          <p>
            Fundada em São Paulo, a Fauko Import é distribuidora oficial das marcas FILL-RITE (EUA) e
            Adam Pumps no mercado brasileiro. +35 anos de especialização técnica em equipamentos
            para combustíveis, ARLA 32 e lubrificantes.
          </p>
          <div className="page-hero__metrics">
            <div><strong>1990</strong><span>fundação</span></div>
            <div><strong>+35</strong><span>anos de mercado</span></div>
            <div><strong>86</strong><span>equipamentos</span></div>
            <div><strong>2</strong><span>marcas oficiais</span></div>
          </div>
        </div>
      </section>

      {/* TIMELINE */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Nossa história</span>
            <h2 className="section-title">Uma linha do tempo construída de 1990 até hoje</h2>
            <p className="section-lead">
              Começamos como uma jovem importadora especializada em bombas para combustíveis.
              Hoje, atendemos postos, frotas, indústria e agronegócio em todo o território nacional.
            </p>
          </div>
          <div className="timeline">
            <div className="timeline__line" />
            {TIMELINE.map((t, i) => (
              <div key={t.year} className="timeline__item">
                <div className="timeline__dot" />
                <div className="timeline__year">{t.year}</div>
                <div className="timeline__card">
                  <h3>{t.title}</h3>
                  <p>{t.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MVV */}
      <section className="section section--soft">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Missão · Visão · Valores</span>
            <h2 className="section-title">O que orienta a Fauko todos os dias</h2>
          </div>
          <div className="mvv-grid">
            {VALUES.map(v => (
              <div key={v.title} className="mvv-card">
                <MvvIcon kind={v.icon} />
                <h3>{v.title}</h3>
                <p>{v.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Compromisso */}
      <section className="section">
        <div className="container">
          <div className="commit">
            <div className="commit__copy">
              <span className="eyebrow">Compromisso técnico</span>
              <h2 className="section-title">Conformidade, segurança e responsabilidade operacional</h2>
              <p style={{ color: 'var(--fauko-gray-dark)', fontSize: 17, lineHeight: 1.6 }}>
                Trabalhamos exclusivamente com equipamentos que atendem às normas brasileiras de
                segurança operacional. Nossa linha à prova de explosão é certificada conforme a
                <strong> Portaria INMETRO nº 179/2010</strong>, garantindo operação segura em
                ambientes com vapores inflamáveis.
              </p>
              <ul className="commit__list">
                <li><CheckIcon /> Equipamentos certificados pelo INMETRO</li>
                <li><CheckIcon /> Linha à prova de explosão conforme Portaria 179/2010</li>
                <li><CheckIcon /> Assistência técnica autorizada em todo o Brasil</li>
                <li><CheckIcon /> Peças originais e suporte de pós-venda</li>
                <li><CheckIcon /> Documentação técnica completa para auditoria</li>
              </ul>
            </div>
            <div className="commit__seals">
              <SealCard label="INMETRO" sub="Portaria 179/2010" tone="green" />
              <SealCard label="Ex-proof" sub="À prova de explosão" tone="navy" />
              <SealCard label="ATEX" sub="Ambientes classificados" tone="yellow" />
              <SealCard label="ISO" sub="Padrões internacionais" tone="navy" />
            </div>
          </div>
        </div>
      </section>

      {/* Meio ambiente */}
      <section className="section section--green">
        <div className="container env-grid env-grid--solo">
          <div>
            <span className="eyebrow eyebrow--light">Meio ambiente</span>
            <h2 className="section-title" style={{ color: 'white' }}>Equipamentos que respeitam a operação e o ambiente.</h2>
            <p style={{ color: 'rgba(255,255,255,0.85)', fontSize: 17, lineHeight: 1.6 }}>
              A Fauko adota práticas que minimizam o impacto ambiental: bombas com selos de baixa
              emissão, mangueiras certificadas para evitar vazamentos, filtros que prolongam a
              vida útil do combustível e consultoria técnica para uso eficiente.
            </p>
            <div className="env-pillars">
              <div><strong>Vazamento zero</strong><span>Mangueiras e conexões certificadas</span></div>
              <div><strong>Eficiência</strong><span>Bombas com motor de alto rendimento</span></div>
              <div><strong>Descarte</strong><span>Programa de devolução de equipamentos antigos</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* Marcas e certificações */}
      <section className="section section--soft">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Marcas e certificações</span>
            <h2 className="section-title">Parcerias que sustentam o nosso catálogo</h2>
          </div>
          <div className="brand-grid">
            {[
              { name: 'FILL-RITE', sub: 'EUA · Distribuidor oficial' },
              { 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: 'INMETRO', sub: 'Certificadora oficial' },
            ].map(b => (
              <div key={b.name} className="brand-card brand-card--mono">
                <div className="brand-card__name">{b.name}</div>
                <div className="brand-card__sub">{b.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {React.createElement(window.ContactSection)}
    </main>
  );
}

function MvvIcon({ kind }) {
  const props = { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'target') return (<svg {...props}><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill="currentColor" /></svg>);
  if (kind === 'eye') return (<svg {...props}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" /></svg>);
  if (kind === 'heart') return (<svg {...props}><path d="M12 21s-7-4.5-9-9.5A5 5 0 0 1 12 6a5 5 0 0 1 9 5.5C19 16.5 12 21 12 21z" /></svg>);
  return null;
}

function SealCard({ label, sub, tone }) {
  return (
    <div className={'seal seal--' + tone}>
      <div className="seal__ring">
        <span>{label}</span>
      </div>
      <div className="seal__sub">{sub}</div>
    </div>
  );
}

function CheckIcon() {
  return (<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--fauko-green)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4L19 7" /></svg>);
}

window.QuemSomosPage = QuemSomosPage;

})();