;(() => {
// PRODUCT DETAIL — template
const { Link, navigate, WhatsIcon, WHATSAPP_URL, formatSpec, parseFluids } = window.FaukoChrome;

function ProdutoDetailPage({ products }) {
  const route = window.FaukoChrome.useHashRoute();
  const segment = (route.split('?')[0].split('/')[2] || '').trim();
  const product = window.FaukoSEO.findProduct(segment, products);
  const [activeImg, setActiveImg] = React.useState(0);

  if (!product) {
    return (
      <main className="container" style={{ padding: '120px 0' }}>
        <h1 style={{ fontSize: 32 }}>Produto não encontrado</h1>
        <p style={{ marginTop: 12, color: 'var(--fauko-gray-dark)' }}>O equipamento solicitado não existe ou foi descontinuado.</p>
        <Link to="/produtos" className="btn btn--primary" style={{ marginTop: 24 }}>← Voltar para o catálogo</Link>
      </main>
    );
  }
  const p = product;

  // Specs table
  const specRows = [
    ['Código', p.codigo],
    ['Marca', p.brand],
    ['Categoria', p.categoria],
    ['Subcategoria / tipo', (p.subcategorias || [p.subcategoria]).filter(Boolean).join(' · ')],
    ['Vazão', p.vazao],
    ['Voltagem', p.voltagem],
    ['Motor', p.motor],
    ['Capacidade', p.capacidade],
    ['Material', p.material],
    ['Espessura', p.espessura],
    ['Entrada', p.entrada],
    ['Saída', p.saida],
    ['Dígitos', p.digitos],
    ['Precisão', p.precisao],
    ['Micra', p.micra],
    ['Elemento', p.elemento],
    ['Cúpula', p.cupula],
    ['Combustível compatível', p.combustivel],
    ['Dimensões', p.dimensoes],
    ['Peso', p.peso],
    ['Certificação', p.certificacao],
    ['Padrão para conjunto', p.padrao],
    ['Opcional', p.opcional],
  ].filter(([, v]) => v && String(v).trim());

  // Related products: same category + subcategoria
  const related = products.filter(x => x.id !== p.id && x.categoria === p.categoria).slice(0, 3);

  return (
    <main>
      <div className="container produto-detail">
        <nav className="breadcrumb">
          <Link to="/">Home</Link> <span>/</span>
          <Link to="/produtos">Produtos</Link> <span>/</span>
          <Link to={`/produtos?cat=${encodeURIComponent(p.categoria)}`}>{p.categoria}</Link> <span>/</span>
          <span className="breadcrumb__current">{p.nome}</span>
        </nav>

        {/* REGION 1 — Hero do produto */}
        <div className="produto-detail__layout">
          {/* Gallery */}
          <div className="gallery">
            {(p.images && p.images.length > 0) ? (
              <React.Fragment>
                {p.images.length > 1 && (
                  <div className="gallery__thumbs">
                    {p.images.map((img, i) => (
                      <button key={img}
                        className={'gallery__thumb ' + (activeImg === i ? 'active' : '')}
                        onClick={() => setActiveImg(i)}>
                        <img src={img} alt={`${p.nome} — miniatura ${i + 1}`} loading="lazy" />
                      </button>
                    ))}
                  </div>
                )}
                <div className="gallery__main gallery__main--photo" style={p.images.length === 1 ? { gridColumn: '1 / -1' } : undefined}>
                  <img src={p.images[Math.min(activeImg, p.images.length - 1)]} alt={p.nome} />
                  {p.inmetro && (
                    <div className="gallery__inmetro">
                      <span className="badge badge--inmetro">INMETRO Portaria 179/2010</span>
                    </div>
                  )}
                </div>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <div className="gallery__thumbs">
                  {[0,1,2,3].map(i => (
                    <button key={i}
                      className={'gallery__thumb fk-ph ' + (activeImg === i ? 'active' : '')}
                      onClick={() => setActiveImg(i)}>
                      <span className="fk-ph__label" style={{ fontSize: 9, padding: '2px 4px' }}>view {i+1}</span>
                    </button>
                  ))}
                </div>
                <div className="gallery__main fk-ph">
                  <span className="fk-ph__label">[FOTO {activeImg + 1}/4] {p.nome} — vista {['frontal','lateral','superior','detalhe'][activeImg]}</span>
                  {p.inmetro && (
                    <div className="gallery__inmetro">
                      <span className="badge badge--inmetro">INMETRO Portaria 179/2010</span>
                    </div>
                  )}
                </div>
              </React.Fragment>
            )}
          </div>

          {/* Right column — compact hero info */}
          <div className="produto-detail__info">
            <div className="produto-detail__tags">
              <span className="badge badge--navy">{p.categoria}</span>
              {(p.subcategorias || [p.subcategoria]).filter(Boolean).map(s => (
                <span key={s} className="badge badge--gray">{s}</span>
              ))}
              {p.brand && <span className="badge badge--yellow">{p.brand}</span>}
              {(p.segments || []).map(s => <span key={s} className="badge badge--green">{s}</span>)}
            </div>
            <h1>{p.nome}</h1>
            {p.codigo && <div className="produto-detail__code">Código de referência: <strong>{p.codigo}</strong></div>}

            {(() => {
              const stats = [];
              if (p.vazao) stats.push(<KeyStat key="vazao" k="Vazão" v={formatSpec(p.vazao)} />);
              if (p.voltagem) { const volt = String(formatSpec(p.voltagem)); stats.push(<KeyStat key="volt" k="Voltagem" v={/v$/i.test(volt) ? volt : volt + 'V'} />); }
              if (p.motor) stats.push(<KeyStat key="motor" k="Motor" v={formatSpec(p.motor)} />);
              if (p.capacidade && !p.motor) stats.push(<KeyStat key="cap" k="Capacidade" v={formatSpec(p.capacidade)} />);
              if (!p.voltagem && !p.motor && p.entrada) stats.push(<KeyStat key="ent" k="Entrada/Saída" v={formatSpec(p.entrada) + (p.saida ? ' / ' + formatSpec(p.saida) : '')} />);
              if (!p.voltagem && !p.motor && !p.entrada && p.precisao) stats.push(<KeyStat key="prec" k="Precisão" v={formatSpec(p.precisao)} />);
              if (p.material && stats.length < 3) stats.push(<KeyStat key="mat" k="Material" v={p.material} />);
              if (p.dimensoes && stats.length < 3) stats.push(<KeyStat key="dim" k="Dimensões" v={p.dimensoes} />);
              if (stats.length === 0) return null;
              return <div className="produto-detail__highlights">{stats}</div>;
            })()}

            <div className="produto-detail__cta">
              <a className="btn btn--whats" href={`https://wa.me/5511999905029?text=${encodeURIComponent(`Olá, Estou entrando em contato através do site e gostaria de mais informações do produto ${p.nome}`)}`} target="_blank" rel="noopener">
                <WhatsIcon /> Solicitar orçamento via WhatsApp
              </a>
              <a className="btn btn--ghost" href={`mailto:comercial@fauko.com.br?subject=Or%C3%A7amento%20${encodeURIComponent(p.nome)}%20(${encodeURIComponent(p.codigo || '')})`}>
                Orçamento por e-mail
              </a>
            </div>

            <div className="produto-detail__safe">
              <ShieldIcon />
              <div>
                <strong>Garantia, segurança e assistência</strong>
                <p>
                  {p.inmetro
                    ? 'Certificação INMETRO Portaria nº 179/2010 — à prova de explosão. '
                    : 'Conformidade verificada conforme aplicação. '}
                  Garantia padrão de 1 ano e assistência técnica autorizada Fauko em todo o Brasil.
                </p>
              </div>
            </div>

            {p.combustivel && parseFluids(p.combustivel).length > 0 && (
              <div className="produto-detail__compat">
                <h4>Compatível com</h4>
                <div className="produto-detail__compat-chips">
                  {parseFluids(p.combustivel).map(fluid => (
                    <span key={fluid} className="compat-chip">
                      <DropletIcon />{fluid}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* REGION 2 — Detalhes completos (full-width) */}
        <section className="produto-detail__specs produto-detail__specs--full">
          <h2>Especificações técnicas</h2>
          <div className="spec-grid">
            {specRows.map(([k, v]) => (
              <div className="spec-row" key={k}>
                <div className="spec-row__k">{k}</div>
                <div className="spec-row__v">{(() => {
                  const fv = String(formatSpec(v));
                  return k === 'Voltagem' && !/v$/i.test(fv) ? fv + 'V' : fv;
                })()}</div>
              </div>
            ))}
            {p.padrao && !specRows.find(([k]) => k === 'Padrão para conjunto') && (
              <div className="spec-row">
                <div className="spec-row__k">Padrão para conjunto</div>
                <div className="spec-row__v">{p.padrao}</div>
              </div>
            )}
          </div>
        </section>

        {p.descricao && (
          <section className="produto-detail__desc">
            <h2>Descrição completa e características técnicas</h2>
            <pre className="produto-detail__desc-body">{p.descricao}</pre>
          </section>
        )}

        {related.length > 0 && (
          <section className="produto-related">
            <div className="section-head section-head--row">
              <h2 className="section-title">Produtos relacionados</h2>
              <Link to={`/produtos?cat=${encodeURIComponent(p.categoria)}`} className="btn btn--ghost">
                Ver todos em {p.categoria} →
              </Link>
            </div>
            <div className="product-grid">
              {related.map(rp => <window.ProductCard key={rp.id} product={rp} />)}
            </div>
          </section>
        )}
      </div>

      {/* Reuse contact section */}
      {React.createElement(window.ContactSection)}
    </main>
  );
}

function KeyStat({ k, v }) {
  return (
    <div className="key-stat">
      <span className="key-stat__k">{k}</span>
      <span className="key-stat__v">{v}</span>
    </div>
  );
}

function ShieldIcon() {
  return (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <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>
  );
}

function DropletIcon() {
  return (
    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2.5s6 7 6 11.5a6 6 0 0 1-12 0c0-4.5 6-11.5 6-11.5z" />
    </svg>
  );
}

window.ProdutoDetailPage = ProdutoDetailPage;
// Expose ProductCard for related (already on window from produtos.jsx)

})();