// Formulário, Footer, App principal
const Orcamento = () => {
  const [form, setForm] = React.useState({
    nome: "", whatsapp: "", tipo: "Casamento", data: "",
    convidados: "Até 50", localConfirmado: "Ainda não", nomeLocal: "",
    assessoria: "", origem: "Google",
  });
  const [sent, setSent] = React.useState(false);
  const handle = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  // Máscara WhatsApp: (XX) XXXXX-XXXX
  const maskPhone = (v) => {
    const d = v.replace(/\D/g, "").slice(0, 11);
    if (d.length <= 2) return d.length ? `(${d}` : "";
    if (d.length <= 7) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
    if (d.length <= 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`;
    return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
  };
  const handlePhone = (e) => setForm({ ...form, whatsapp: maskPhone(e.target.value) });

  const inputBase = {
    width: "100%",
    background: "transparent",
    border: "none",
    borderBottom: "0.5px solid rgba(31,20,16,.3)",
    fontFamily: "'Cormorant Garamond', serif",
    fontSize: 18,
    color: "#1F1410",
    padding: "12px 0",
    outline: "none",
    transition: "border-color .3s",
  };
  const labelBase = {
    fontFamily: "'Cormorant Garamond', serif",
    fontSize: 11,
    letterSpacing: "0.32em",
    textTransform: "uppercase",
    color: "#6B3D2A",
    display: "block",
    marginBottom: 6,
    fontWeight: 500,
  };

  return (
    <section id="orcamento" style={{
      background: "linear-gradient(180deg, #F5EFE6 0%, #EDE3D2 100%)",
      color: "#1F1410",
      padding: "140px 32px",
    }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <Reveal style={{ textAlign: "center" }}>
          <Ornament color="#6B3D2A" width={80} />
        </Reveal>
        <Reveal delay={150} style={{ textAlign: "center", marginTop: 28 }}>
          <Eyebrow>Solicitar proposta</Eyebrow>
          <h2 style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontWeight: 300,
            fontSize: "clamp(34px, 4.5vw, 60px)",
            lineHeight: 1.05,
            margin: "20px 0 0",
            letterSpacing: "-0.01em",
            textWrap: "balance",
          }}>
            Solicite sua <em style={{ fontStyle: "italic", color: "#6B3D2A" }}>proposta personalizada</em>.
          </h2>
          <p style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 19,
            marginTop: 24,
            maxWidth: 600,
            margin: "24px auto 0",
            opacity: 0.78,
            lineHeight: 1.55,
          }}>
            Preencha os dados e receba a sua proposta personalizada.
          </p>
        </Reveal>

        {sent ? (
          <Reveal style={{
            marginTop: 80,
            textAlign: "center",
            padding: "80px 40px",
            background: "#FFFFFF",
            border: "0.5px solid rgba(31,20,16,.15)",
          }}>
            <Logo height={60} />
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", fontSize: 32, marginTop: 28, fontWeight: 300 }}>
              Recebemos seu pedido.
            </div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 17, marginTop: 14, color: "#6B3D2A" }}>
              Em até 24 horas entraremos em contato pelo WhatsApp informado.
            </div>
          </Reveal>
        ) : (
          <Reveal delay={300} as="form" onSubmit={(e) => { e.preventDefault(); setSent(true); }} className="orcamento-form" style={{
            marginTop: 80,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: "36px 48px",
            background: "#FFFFFF",
            padding: "60px 56px",
            border: "0.5px solid rgba(31,20,16,.12)",
          }}>
            <div>
              <label style={labelBase}>Seu nome *</label>
              <input style={inputBase} value={form.nome} onChange={handle("nome")} required />
            </div>
            <div>
              <label style={labelBase}>WhatsApp *</label>
              <input style={inputBase} value={form.whatsapp} onChange={handlePhone} placeholder="(41) 99999-9999" inputMode="tel" maxLength={15} required />
            </div>
            <div>
              <label style={labelBase}>Tipo de evento *</label>
              <select style={{ ...inputBase, appearance: "none", cursor: "pointer" }} value={form.tipo} onChange={handle("tipo")}>
                <option>Casamento</option>
                <option>Festa de 15 Anos</option>
                <option>Corporativo</option>
                <option>Outro</option>
              </select>
            </div>
            <div>
              <label style={labelBase}>Data prevista do evento *</label>
              <input type="date" style={inputBase} value={form.data} onChange={handle("data")} required />
            </div>
            <div>
              <label style={labelBase}>Número aproximado de convidados *</label>
              <select style={{ ...inputBase, appearance: "none", cursor: "pointer" }} value={form.convidados} onChange={handle("convidados")}>
                <option>Até 50</option>
                <option>51–100</option>
                <option>101–200</option>
                <option>201–300</option>
                <option>Acima de 300</option>
              </select>
            </div>
            <div>
              <label style={labelBase}>Já tem espaço/local confirmado?</label>
              <select style={{ ...inputBase, appearance: "none", cursor: "pointer" }} value={form.localConfirmado} onChange={handle("localConfirmado")}>
                <option>Ainda não</option>
                <option>Sim</option>
              </select>
            </div>
            <div>
              <label style={labelBase}>Nome do espaço (se sim)</label>
              <input style={inputBase} value={form.nomeLocal} onChange={handle("nomeLocal")} />
            </div>
            <div>
              <label style={labelBase}>Assessoria ou cerimonial envolvida?</label>
              <input style={inputBase} value={form.assessoria} onChange={handle("assessoria")} />
            </div>
            <div style={{ gridColumn: "1 / -1" }}>
              <label style={labelBase}>Como nos encontrou? *</label>
              <select style={{ ...inputBase, appearance: "none", cursor: "pointer" }} value={form.origem} onChange={handle("origem")}>
                <option>Google</option>
                <option>Instagram</option>
                <option>Indicação</option>
                <option>Facebook</option>
                <option>Outro</option>
              </select>
            </div>

            <div style={{ gridColumn: "1 / -1", display: "flex", flexDirection: "column", alignItems: "center", marginTop: 28, gap: 16 }}>
              <button type="submit" style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontSize: 14,
                letterSpacing: "0.34em",
                textTransform: "uppercase",
                color: "#F5EFE6",
                background: "#1F1410",
                border: "none",
                padding: "24px 48px",
                cursor: "pointer",
                display: "inline-flex",
                alignItems: "center",
                gap: 16,
                fontWeight: 500,
              }}>
                Quero minha proposta em até 24 horas <span>→</span>
              </button>
              <div style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontStyle: "italic",
                fontSize: 14,
                color: "#6B3D2A",
                opacity: 0.85,
                textAlign: "center",
              }}>
                Seus dados são confidenciais. Entramos em contato apenas pelo WhatsApp informado, no horário comercial.
              </div>
            </div>
          </Reveal>
        )}

        <Reveal delay={500} style={{ marginTop: 56, textAlign: "center" }}>
          <a href="https://wa.me/5541987921533?text=Ol%C3%A1%2C%20gostaria%20de%20solicitar%20um%20or%C3%A7amento%20para%20meu%20evento." style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 16,
            color: "#1F1410",
            textDecoration: "none",
            display: "inline-flex",
            alignItems: "center",
            gap: 12,
          }}>
            <span style={{ fontStyle: "italic", opacity: 0.7 }}>Prefere falar agora?</span>
            <span style={{
              borderBottom: "0.5px solid #1F1410",
              paddingBottom: 4,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              fontSize: 13,
              fontWeight: 500,
            }}>Abrir conversa no WhatsApp ↗</span>
          </a>
        </Reveal>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer style={{ background: "#150B07", color: "#F5EFE6", padding: "80px 32px 32px" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 56 }}>
      <div>
        <Logo height={70} light />
        <div style={{
          marginTop: 24,
          fontFamily: "'Cormorant Garamond', serif",
          fontSize: 13,
          letterSpacing: "0.32em",
          textTransform: "uppercase",
          color: "#D9B68A",
        }}>Curitiba · Paraná</div>
        <div style={{
          marginTop: 16,
          fontFamily: "'Cormorant Garamond', serif",
          fontStyle: "italic",
          fontSize: 17,
          opacity: 0.7,
          maxWidth: 320,
          lineHeight: 1.5,
        }}>
          Doces finos para celebrações que merecem ser inesquecíveis.
        </div>
      </div>
      <div style={{ display: "flex", gap: 80, fontFamily: "'Cormorant Garamond', serif", flexWrap: "wrap" }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "#D9B68A", marginBottom: 16 }}>Atendimento</div>
          <div style={{ fontSize: 16, lineHeight: 2, opacity: 0.8 }}>
            <div>Curitiba, RMC e litoral de SC</div>
            <div>Visitas com hora marcada</div>
            <div>Atendimento 9h–18h</div>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "#D9B68A", marginBottom: 16 }}>Contato</div>
          <div style={{ fontSize: 16, lineHeight: 2, opacity: 0.8 }}>
            <div>(41) 98792-1533</div>
            <div>contato@swdoces.com.br</div>
            <div>
              <a
                href="https://www.instagram.com/swdocesexclusivos/"
                target="_blank"
                rel="noopener noreferrer"
                style={{ color: "inherit", textDecoration: "none", borderBottom: "0.5px solid rgba(245,239,230,.3)" }}
              >@swdocesexclusivos</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style={{
      borderTop: "0.5px solid rgba(245,239,230,.15)",
      marginTop: 64,
      paddingTop: 24,
      display: "flex",
      justifyContent: "space-between",
      flexWrap: "wrap",
      gap: 16,
      fontFamily: "'Cormorant Garamond', serif",
      fontSize: 12,
      letterSpacing: "0.28em",
      textTransform: "uppercase",
      color: "rgba(245,239,230,.5)",
    }}>
      <span>© SW Doces Exclusivos · 2026</span>
      <span>Projeto SABER · Inside Sales</span>
    </div>
  </footer>
);

// WhatsApp flutuante
const WhatsAppFloat = () => (
  <a
    href="https://wa.me/5541987921533?text=Ol%C3%A1%2C%20gostaria%20de%20solicitar%20um%20or%C3%A7amento%20para%20meu%20evento."
    aria-label="Falar no WhatsApp"
    className="wa-float"
    style={{
      position: "fixed",
      bottom: 28,
      right: 28,
      width: 60,
      height: 60,
      borderRadius: "50%",
      background: "#1F1410",
      color: "#F5EFE6",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      textDecoration: "none",
      boxShadow: "0 12px 32px rgba(0,0,0,.3)",
      zIndex: 50,
      border: "0.5px solid #D9B68A",
    }}
  >
    <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
    </svg>
  </a>
);

const App = () => (
  <>
    <HeroFull />
    <Publico />
    <Diferenciais />
    <Depoimentos />
    <Galeria />
    <ComoFunciona />
    <Sobre />
    <FAQ />
    <Orcamento />
    <Footer />
    <WhatsAppFloat />
  </>
);

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