// Box de Vidro Temperado — página de produto (Hero + Personalização). Padrão derivado de persianas.jsx.

// Esconde a imagem se o arquivo ainda não foi enviado, deixando só o fundo do container.
const hideOnError = (e) => { e.currentTarget.style.display = "none"; };

// Fonte de dados única do configurador.
const boxModels = [
{
  familia: "correr",
  label: "Box Frontal de Correr",
  thumb: "assets/box/box_correr4.webp",
  subopcoes: [
  { id: "correr_2", label: "2 peças", imagem: "assets/box/box_correr2.webp",
    descricao: "Composição com uma parte fixa e uma porta deslizante. Ideal para vãos menores, sem abrir mão da elegância e da praticidade do sistema de correr." },
  { id: "correr_3", label: "3 peças", imagem: "assets/box/box_correr3.webp",
    descricao: "Composição com duas partes fixas e uma porta deslizante, num arranjo equilibrado que se adapta a diferentes disposições de vão." },
  { id: "correr_4", label: "4 peças", imagem: "assets/box/box_correr4.webp",
    descricao: "Duas portas deslizantes entre duas partes fixas, para vãos mais amplos. Permite acesso por ambos os lados, com máxima flexibilidade de uso." }]

},
{
  familia: "abrir",
  label: "Box Frontal de Abrir",
  thumb: "assets/box/box_abrir_semtranspasse.webp",
  subopcoes: [
  { id: "abrir_comtranspasse", label: "Com transpasse", imagem: "assets/box/box_abrir_comtranspasse.webp",
    descricao: "Abertura em charneira, com uma folha se sobrepondo parcialmente à outra no fechamento." },
  { id: "abrir_semtranspasse", label: "Sem transpasse", imagem: "assets/box/box_abrir_semtranspasse.webp",
    descricao: "Mesma abertura em charneira, mas com encontro justo entre as folhas, sem sobreposição." }]

},
{
  familia: "articulado",
  label: "Box Articulado",
  thumb: "assets/box/box_articulado.webp",
  subopcoes: [
  { id: "articulado", label: "Box Articulado", imagem: "assets/box/box_articulado.webp",
    descricao: "Também conhecido como Box Flex: as portas se dobram e recolhem lateralmente, liberando quase todo o vão de entrada." }]

},
{
  familia: "transfer",
  label: "Box Transfer",
  thumb: "assets/box/box_transfer.webp",
  subopcoes: [
  { id: "transfer", label: "Box Transfer", imagem: "assets/box/box_transfer.webp",
    descricao: "Três painéis com sistema de engrenagem: ao puxar a porta principal, a secundária desliza junto, abrindo até 2/3 do vão total." }]

},
{
  familia: "canto",
  label: "Box de Canto",
  thumb: "assets/box/box_canto.webp",
  subopcoes: [
  { id: "canto", label: "Box de Canto", imagem: "assets/box/box_canto.webp",
    descricao: "Aproveita a quina do banheiro, formada por duas paredes existentes em 90°." }]

}];

// Links de WhatsApp com mensagem pré-preenchida, reaproveitando o número já usado em WA_LINK.
const waLink = (msg) => WA_LINK.split("?")[0] + "?text=" + encodeURIComponent(msg);
const WA_ACABAMENTOS = waLink("Olá! Gostaria de saber mais sobre opções de acabamento especiais para o meu box.");

// Vidro: cores reais da tabela de amostras física do fornecedor.
const VIDRO_SWATCHES = [
{ label: "Incolor", style: { background: "rgba(228,234,230,0.35)", border: "1px solid var(--cinza)" } },
{ label: "Verde", style: { background: "#9DBFAE" } },
{ label: "Cinza", style: { background: "#3E4144" } },
{ label: "Bronze", style: { background: "#7C6A52" } },
{ label: "Pontilhado", style: { background: "radial-gradient(#EAF6F2 1.4px, #A8D5C7 1.5px) 0 0/7px 7px" } }];


// Perfil de alumínio: cores ilustrativas/aproximadas — trocar pelos hex oficiais quando o cliente fornecer.
const PERFIL_SWATCHES = [
{ label: "Branco", style: { background: "#FFFFFF", border: "1px solid var(--cinza)" } },
{ label: "Preto", style: { background: "#1A1A1A" } },
{ label: "Bronze", style: { background: "#6E4B32" } },
{ label: "Rosé", style: { background: "#C48A7A" } },
{ label: "Dourado", style: { background: "#CBA135" } },
{ label: "Alumínio Fosco", style: { background: "#B0B0B0" } },
{ label: "Alumínio Brilhante", style: { background: "linear-gradient(135deg, #D6D6D6, #F2F2F2, #D6D6D6)" } }];


function BoxHero() {
  return (
    <section className="box-hero" data-screen-label="Box — Hero">
      <div className="hero-media">
        <img src="assets/box/box_hero.webp" alt="Box de vidro temperado instalado pela Tendências" fetchpriority="high" onError={hideOnError} />
      </div>
      <div className="box-hero-scrim"></div>
      <div className="wrap">
        <div className="box-hero-content">
          <h1>Seu box, do seu jeito</h1>
          <p className="box-hero-sub">Vidro temperado Blindex, personalizável de acordo com o seu espaço. Conheça todos os modelos e escolha o que combine melhor com você.</p>
          <span className="box-hero-badge">
            <img src="assets/partner-blindex.png" alt="Blindex" className="box-hero-badge-logo" onError={hideOnError} />
            Revenda Certificada
          </span>
          <div className="box-hero-cta">
            <a className="btn btn-primary" href="#personalizacao" onClick={(e) => {e.preventDefault();scrollToId("personalizacao");}}>Veja qual opção combina com você</a>
          </div>
        </div>
      </div>
    </section>);

}

function BoxPersonalizacao() {
  const [familiaId, setFamiliaId] = React.useState("correr");
  const [subId, setSubId] = React.useState("correr_4");

  React.useEffect(() => {
    const cfg = new URLSearchParams(window.location.search).get("cfg");
    if (!cfg) return;
    let fam = null, sub = null;
    for (const f of boxModels) {
      const s = f.subopcoes.find((o) => o.id === cfg);
      if (s) { fam = f; sub = s; break; }
      if (f.familia === cfg) { fam = f; sub = f.subopcoes[0]; break; }
    }
    if (!fam) return;
    setFamiliaId(fam.familia);
    setSubId(sub.id);
    const r = requestAnimationFrame(() => setTimeout(() => scrollToId("personalizacao"), 140));
    return () => cancelAnimationFrame(r);
  }, []);

  const familia = boxModels.find((f) => f.familia === familiaId) || boxModels[0];
  const sub = familia.subopcoes.find((s) => s.id === subId) || familia.subopcoes[0];

  const selectFamilia = (f) => {
    setFamiliaId(f.familia);
    setSubId(f.subopcoes[0].id);
  };

  return (
    <section className="section section-off" id="personalizacao" data-screen-label="Box — Personalização">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label" style={{ color: "var(--camel-texto)" }}>Personalização</span>
          <h2>Personalize o seu box</h2>
          <hr className="rule" />
        </div>

        <div className="cfg-grid reveal">
          <div className="cfg-media">
            <img src={sub.imagem} alt={familia.label + " — " + sub.label} loading="lazy" onError={hideOnError} />
          </div>

          <div className="cfg-panel">
            <div className="cfg-block">
              <span className="cfg-label">Escolha o modelo</span>
              <div className="cfg-thumbs">
                {boxModels.map((f) =>
                <button
                  key={f.familia}
                  type="button"
                  className={"cfg-thumb" + (familiaId === f.familia ? " is-active" : "")}
                  aria-pressed={familiaId === f.familia}
                  onClick={() => selectFamilia(f)}>

                    <span className="cfg-thumb-img">
                      <img src={f.thumb} alt="" loading="lazy" onError={hideOnError} />
                    </span>
                    <span className="cfg-thumb-label">{f.label}</span>
                  </button>
                )}
              </div>
            </div>

            {familia.subopcoes.length > 1 &&
            <div className="cfg-pills">
                {familia.subopcoes.map((s) =>
              <button
                key={s.id}
                type="button"
                className={"cfg-pill" + (subId === s.id ? " is-active" : "")}
                aria-pressed={subId === s.id}
                onClick={() => setSubId(s.id)}>

                    {s.label}
                  </button>
              )}
              </div>
            }

            <div className="cfg-detail">
              <h3>{sub.label}</h3>
              <p>{sub.descricao}</p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function BoxAcabamentos() {
  return (
    <section className="section" data-screen-label="Box — Acabamentos">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label" style={{ color: "var(--camel-texto)" }}>Acabamentos</span>
          <h2>Mais formas de personalizar o seu box</h2>
          <hr className="rule" />
        </div>

        <div className="acab-block reveal">
          <h3>Roldana</h3>
          <div className="acab-roldana-grid">
            <figure className="acab-roldana-item">
              <div className="acab-roldana-img">
                <img src="assets/box/roldana-padrao.webp" alt="Roldana padrão (embutida)" loading="lazy" onError={hideOnError} />
              </div>
              <figcaption>Padrão (Embutida)</figcaption>
            </figure>
            <figure className="acab-roldana-item">
              <div className="acab-roldana-img">
                <img src="assets/box/roldana-externa.webp" alt="Roldana externa (exposta)" loading="lazy" onError={hideOnError} />
              </div>
              <figcaption>Externa (Exposta)</figcaption>
            </figure>
          </div>
        </div>

        <div className="acab-block reveal">
          <h3>Vidro</h3>
          <div className="acab-swatches">
            {VIDRO_SWATCHES.map((s) =>
            <div className="acab-swatch" key={s.label}>
                <span className="acab-swatch-color" style={s.style}></span>
                <span className="acab-swatch-label">{s.label}</span>
              </div>
            )}
          </div>
        </div>

        <div className="acab-block reveal">
          <h3>Perfil de Alumínio</h3>
          <div className="acab-swatches">
            {PERFIL_SWATCHES.map((s) =>
            <div className="acab-swatch" key={s.label}>
                <span className="acab-swatch-color" style={s.style}></span>
                <span className="acab-swatch-label">{s.label}</span>
              </div>
            )}
          </div>
        </div>

        <p className="acab-note reveal">
          Precisa de um acabamento fora do catálogo padrão?{" "}
          <a href={WA_ACABAMENTOS} target="_blank" rel="noopener">Fale com a nossa equipe.</a>
        </p>
      </div>
    </section>);

}

function BoxBlindex() {
  return (
    <section className="section-sm section-off" data-screen-label="Box — Blindex">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label" style={{ color: "var(--camel-texto)" }}>Segurança e Qualidade</span>
          <h2>Por que vidro temperado Blindex</h2>
          <hr className="rule" />
        </div>

        <div className="amorim-band reveal">
          <div className="amorim-logo">
            <img src="assets/partner-blindex.png" alt="Blindex" loading="lazy" onError={hideOnError} />
          </div>
          <div className="amorim-text">
            <ul className="blindex-points">
              <li><strong>Resistência:</strong> até 5x mais resistente que o vidro comum.</li>
              <li><strong>Resistência térmica:</strong> suporta variações de até 200°C.</li>
              <li><strong>Quebra segura:</strong> em caso de ruptura, fragmenta-se em pedaços pequenos e pouco cortantes, reduzindo o risco de acidentes.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

function BoxPeliculas() {
  return (
    <section className="section" data-screen-label="Box — Películas">
      <div className="wrap">
        <div className="peliculas-grid reveal">
          <div className="peliculas-img">
            <img src="assets/box/box-pelicula.webp" alt="Película aplicada em box de vidro" loading="lazy" onError={hideOnError} />
          </div>
          <div>
            <span className="label" style={{ color: "var(--camel-texto)" }}>Complemento</span>
            <h2>Películas para o seu box</h2>
            <hr className="rule" />
            <p>Aplicamos película de segurança (PS04) incolor ou jateada, proporcionando assim segurança e privacidade.</p>
            <a className="btn btn-primary peliculas-cta" href="peliculas.html">Conheça as opções de película</a>
          </div>
        </div>
      </div>
    </section>);

}

function BoxCta() {
  return (
    <section className="cta-band" data-screen-label="CTA">
      <div className="wrap">
        <span className="label" style={{ color: "#D9B894" }}>Orçamento sem compromisso</span>
        <h2>Vamos começar o seu projeto?</h2>
        <p>Fale com a nossa equipe e receba um orçamento sem compromisso.</p>
        <div className="hero-ctas">
          <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">Solicitar orçamento</a>
        </div>
      </div>
    </section>);

}

function App() {
  React.useEffect(() => {
    setupReveal();
  }, []);
  return (
    <React.Fragment>
      <Navbar />
      <main>
        <BoxHero />
        <BoxPersonalizacao />
        <BoxAcabamentos />
        <BoxBlindex />
        <BoxPeliculas />
        <BoxCta />
      </main>
      <Footer />
      <WaFloat />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);