// Tendências — HOME: História, Como Funciona, Depoimentos, Contato
function About() {
  return (
    <section className="section section-off" id="historia" data-screen-label="Nossa História">
      <div className="wrap">
        <div className="historia-label reveal">
          <span className="label" style={{ color: 'var(--camel-texto)' }}>Nossa História</span>
        </div>
        <div className="about-hero reveal">
          <img
            src="assets/frente-loja-tratado.webp"
            alt="Frente da loja Tendências Box e Persianas" loading="lazy"
            className="about-hero-img"
          />
          <div className="about-hero-overlay">
            <div className="about-hero-content">
              <h2>Há 23 anos criando Tendências no mercado.</h2>
            </div>
          </div>
        </div>
        <div className="historia-grid reveal">
          <div className="historia-text">
            <p>
              Fundada em <strong>setembro de 2003</strong>, a Tendências nasceu como um negócio
              familiar. Mais de duas décadas depois, a mesma gestão continua, sustentando a
              proximidade e o cuidado presentes em cada atendimento.
            </p>
            <p>
              São mais de <strong>17.000 pedidos atendidos</strong>, sempre por <strong>
              equipe própria</strong>, do orçamento à instalação, com manutenção disponível
              sempre que for preciso. O resultado: mais consistência em todas as etapas do
              projeto.
            </p>
          </div>
          <div className="historia-partners">
            <span className="label">Parceiros oficiais</span>
            <div className="partner-photo">
              <img src="assets/painel-parceiros3.png" alt="Parceiros oficiais: Blindex, Amorim, Guardian, SKF" loading="lazy" />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

const TESTIMONIALS = [
{ quote: "Excelentes profissionais, serviço impecável. Fiz 3 boxes, 6 espelhos e 4 persianas rolôs e recomendo tremendamente.", who: "Cliente residencial", what: "Cliente Final" },
{ quote: "Já fizemos vários serviços, entre box e espelhos, fazem um ótimo trabalho, temos várias experiências boas. Tem produtos de qualidade, excelente atendimento e profissionalismo.", who: "Empresa parceira", what: "Obra corporativa" },
{ quote: "Foi excelente do começo ao fim! Empresa correta e funcionários atenciosos. Serviços de qualidade extrema e valores justos.", who: "Cliente Residencial", what: "Cliente Final" }];


function Testimonials() {
  return (
    <section className="section section-off" id="depoimentos" data-screen-label="Depoimentos">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label">Depoimentos</span>
          <h2>O que dizem sobre o nosso trabalho</h2>
          <hr className="rule" />

        </div>
        <div className="testi-grid">
          {TESTIMONIALS.map((t, i) =>
          <div className={"testi-card reveal" + (i ? " reveal-d" + i : "")} key={i}>
              <span className="testi-stars">★★★★★</span>
              <blockquote>“{t.quote}”</blockquote>
              <div className="testi-who"><strong>{t.who}</strong>{t.what}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Showroom() {
  return (
    <section className="section" id="showroom" data-screen-label="Showroom">
      <div className="wrap">
        <div className="showroom-grid">
            <div className="showroom-text reveal">
              <span className="label">Showroom</span>
              <h2 style={{ marginTop: "14px" }}>Conheça o nosso Showroom</h2>
              <hr className="rule" />
              <p>
                Estamos estabelecidos no bairro de Pinheiros. Venha nos visitar e aproveite
                para ver de perto os tecidos, os vidros e os acabamentos. Converse
                pessoalmente com quem vai cuidar do seu projeto.
              </p>
              <div className="showroom-addr">
                <strong>R. Fernão Dias, 356</strong><br />
                Pinheiros, São Paulo — SP, 05427-000
              </div>
              <div className="showroom-cta">
                <a className="btn btn-outline" href={MAPS_DIR} target="_blank" rel="noopener">
                  Como chegar
                </a>
              </div>
            </div>
            <div className="showroom-map reveal reveal-d1">
              <iframe
                src={MAPS_EMBED}
                title="Localização da Tendências Box e Persianas — R. Fernão Dias, 356, Pinheiros, São Paulo"
                loading="lazy"
                allowFullScreen
                referrerPolicy="no-referrer-when-downgrade"
              ></iframe>
            </div>
        </div>
      </div>
    </section>);

}

/* Confere, antes de enviar, se ha pelo menos um meio de resposta.
   O send.php faz a mesma checagem no servidor; esta aqui existe para
   a pessoa saber na hora, em vez de perder a mensagem digitada. */
function validarContato(e) {
  var form = e.target;
  var tel = (form.telefone.value || "").trim();
  var mail = (form.email.value || "").trim();
  if (tel === "" && mail === "") {
    e.preventDefault();
    form.telefone.setCustomValidity("Informe um telefone ou um e-mail para podermos responder.");
    form.telefone.reportValidity();
    return false;
  }
  form.telefone.setCustomValidity("");
  return true;
}

function Contact() {
  return (
    <section className="section section-off" id="contato" data-screen-label="Contato">
      <div className="wrap">
        <div className="contact-grid">
          <div className="reveal">
            <span className="label">Contato</span>
            <h2 style={{ marginTop: "14px" }}>Comece pelo WhatsApp</h2>
            <hr className="rule" />
            <p style={{ marginTop: "26px", color: "#555", maxWidth: "480px" }}>É o nosso canal mais rápido: mande uma imagem do ambiente, ou uma medida aproximada para apresentarmos uma estimativa de valor. Ou se preferir, venha conhecer a nossa loja.


            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">Chamar no WhatsApp</a>
              <a className="btn btn-outline" href={PAGE_OBRAS}>Sou arquiteto / construtora</a>
            </div>
            <div className="contact-form-sep">
              <span className="contact-form-or">OU DEIXE SUA MENSAGEM</span>
            </div>
            <form action="send.php" method="POST" className="contact-form" onSubmit={validarContato}>
              {/* Armadilha anti-spam: escondida por CSS, invisivel para
                  pessoas. Robo de spam preenche tudo o que encontra, entao
                  se este campo chegar preenchido o send.php descarta. */}
              <div className="cf-hp" aria-hidden="true">
                <label htmlFor="cf-website">Website</label>
                <input type="text" id="cf-website" name="website" tabIndex="-1" autoComplete="off" />
              </div>
              <div className="cf-field">
                <label className="cf-label" htmlFor="cf-nome">Nome</label>
                <input className="cf-input" type="text" id="cf-nome" name="nome" placeholder="Seu nome" required />
              </div>
              <div className="cf-field">
                <label className="cf-label" htmlFor="cf-tel">Telefone</label>
                <input className="cf-input" type="text" id="cf-tel" name="telefone" placeholder="(11) 99999-9999" />
              </div>
              <div className="cf-field">
                <label className="cf-label" htmlFor="cf-email">E-mail</label>
                <input className="cf-input" type="email" id="cf-email" name="email" placeholder="seu@email.com" />
              </div>
              <div className="cf-field">
                <label className="cf-label" htmlFor="cf-msg">Mensagem</label>
                <textarea className="cf-input cf-textarea" id="cf-msg" name="mensagem" rows="4" placeholder="Descreva o que precisa..."></textarea>
              </div>
              <button type="submit" className="btn btn-primary cf-submit">Enviar mensagem</button>
            </form>
          </div>
          <div className="contact-card reveal reveal-d1">
            <span className="big">Tendências Box &amp; Persianas</span>
            <div className="contact-line">
              <span className="label">WhatsApp</span>
              <span>+55 11 96305-2949</span>
            </div>
            <div className="contact-line">
              <span className="label">TELEFONE FIXO (SEG A SEX, 9H - 17H)</span>
              <span>+55 11 3816-0003</span>
            </div>
            <div className="contact-line">
              <span className="label">E-mail</span>
              <span><a href={EMAIL_LINK} style={{ color: "inherit", textDecoration: "none" }}>{EMAIL}</a></span>
            </div>
            <div className="contact-line">
              <span className="label">Instagram</span>
              <span><a href={INSTA} target="_blank" rel="noopener" style={{ color: "inherit", textDecoration: "none" }}>@tendenciasbp</a></span>
            </div>
            <div className="contact-line">
              <span className="label">Endereço</span>
              <span>Rua Fernão Dias, 356 - Pinheiros<br />São Paulo, São Paulo, Brasil</span>
            </div>
            <div className="contact-line">
              <span className="label">Horário</span>
              <span>Segunda a Sexta, 9h às 17h<br />Sábado (Por agendamento ou WhatsApp)</span>
            </div>
          </div>
        </div>
      </div>
    </section>);}

Object.assign(window, { About, Testimonials, Showroom, Contact });