// 22K hi-fi — Sections 09–10 + Footer.

function Clientes() {
  // Removed in v0.3 — kept as a no-op so the App composition doesn't change.
  return null;
}

// Set this to a Formspree (or compatible) endpoint to capture leads, e.g.
// "https://formspree.io/f/xxxxxxx". When empty, the form falls back to a
// pre-filled e-mail to contato@22k.com.br.
const LEAD_ENDPOINT = "";
const LEAD_EMAIL = "info@22k.film";

function ContactField({ label, name, type = "text", value, onChange, required, textarea }) {
  const common = {
    name,
    value,
    onChange,
    required,
    style: {
      width: "100%",
      background: "transparent",
      border: "none",
      borderBottom: "1px solid rgba(255,255,255,.22)",
      color: "#fff",
      fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
      fontSize: 15,
      padding: "10px 0",
      outline: "none",
      resize: "none",
      transition: "border-color .25s",
    },
    onFocus: (e) => (e.currentTarget.style.borderBottomColor = "var(--accent)"),
    onBlur: (e) => (e.currentTarget.style.borderBottomColor = "rgba(255,255,255,.22)"),
  };
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span className="mono" style={{ fontSize: 10, color: "var(--text-mute)" }}>
        {label}{required ? " *" : ""}
      </span>
      {textarea ? <textarea rows={3} {...common} /> : <input type={type} {...common} />}
    </label>
  );
}

function ContactForm() {
  const [form, setForm] = React.useState({ nome: "", email: "", empresa: "", telefone: "", mensagem: "" });
  const [status, setStatus] = React.useState("idle"); // idle | sending | ok | error
  const set = (e) => setForm((f) => ({ ...f, [e.target.name]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    try {
      if (LEAD_ENDPOINT) {
        const res = await fetch(LEAD_ENDPOINT, {
          method: "POST",
          headers: { "Content-Type": "application/json", Accept: "application/json" },
          body: JSON.stringify(form),
        });
        if (!res.ok) throw new Error("bad response");
        setStatus("ok");
      } else {
        // Fallback: open a pre-filled e-mail.
        const subject = encodeURIComponent(`Novo contato — ${form.nome || "site 22K"}`);
        const body = encodeURIComponent(
          `Nome: ${form.nome}\nE-mail: ${form.email}\nEmpresa: ${form.empresa}\nTelefone: ${form.telefone}\n\n${form.mensagem}`
        );
        window.location.href = `mailto:${LEAD_EMAIL}?subject=${subject}&body=${body}`;
        setStatus("ok");
      }
    } catch (err) {
      setStatus("error");
    }
  };

  if (status === "ok") {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 16, paddingTop: 8 }}>
        <span className="mono" style={{ fontSize: 11, color: "var(--accent-soft)" }}>[ Recebido ]</span>
        <p style={{ margin: 0, fontSize: 20, lineHeight: 1.4, color: "#fff", maxWidth: 380 }}>
          Obrigado. Recebemos sua mensagem e retornaremos em breve.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 26 }}>
      <div className="r-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 26 }}>
        <ContactField label="Nome" name="nome" value={form.nome} onChange={set} required />
        <ContactField label="E-mail" name="email" type="email" value={form.email} onChange={set} required />
        <ContactField label="Empresa / incorporadora" name="empresa" value={form.empresa} onChange={set} />
        <ContactField label="Telefone" name="telefone" type="tel" value={form.telefone} onChange={set} />
      </div>
      <ContactField label="Conte sobre o projeto" name="mensagem" textarea value={form.mensagem} onChange={set} />
      <div style={{ display: "flex", alignItems: "center", gap: 20, marginTop: 8 }}>
        <button
          type="submit"
          disabled={status === "sending"}
          style={{
            display: "inline-flex", alignItems: "center", gap: 12,
            padding: "16px 36px",
            background: "#fff", color: "#000", border: "none",
            fontWeight: 700, fontSize: 13, letterSpacing: "0.1em",
            textTransform: "uppercase", cursor: "pointer",
            opacity: status === "sending" ? 0.6 : 1,
            transition: "all .25s",
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--accent)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "#fff"; }}
        >
          {status === "sending" ? "Enviando…" : "Enviar mensagem"}
          <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
            <path d="M9 1l4 4-4 4M0 5h13" stroke="currentColor" strokeWidth="1.4" />
          </svg>
        </button>
        {status === "error" && (
          <span className="mono" style={{ fontSize: 10, color: "var(--accent-soft)" }}>
            Erro ao enviar — escreva para {LEAD_EMAIL}
          </span>
        )}
      </div>
    </form>
  );
}

function CtaFinal() {
  return (
    <section
      id="contato"
      className="r-sec"
      style={{
        background: "#000",
        color: "#fff",
        padding: "200px 36px",
        position: "relative"
      }}>

      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          paddingBottom: 28,
          borderBottom: "1px solid rgba(255,255,255,.18)",
          marginBottom: 96
        }}>
          <span className="mono" style={{ color: "var(--text-mute)", fontSize: 11 }}>[ Reach out ]</span>
          <span className="mono" style={{ color: "var(--text-mute)", fontSize: 11 }}>(10)</span>
        </div>

        <div className="r-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "clamp(48px, 8vw, 120px)",
          alignItems: "start",
        }}>
          {/* Left — headline + context */}
          <div style={{ display: "flex", flexDirection: "column", gap: 40, alignItems: "flex-start" }}>
            <h2 style={{
              margin: 0,
              fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
              fontWeight: 700,
              fontSize: "clamp(56px, 7vw, 110px)",
              lineHeight: 0.95,
              letterSpacing: "-0.04em",
              color: "#fff"
            }}>
              VAMOS<br />FILMAR
            </h2>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,.7)", maxWidth: 360 }}>
              Atendemos incorporadoras, escritórios de arquitetura e marcas premium
              em São Paulo, Rio e Lisboa. Conte sobre o empreendimento e desenhamos o filme.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <span className="mono" style={{ fontSize: 10, color: "var(--text-mute)" }}>[ Direto ]</span>
              <a href={`mailto:${LEAD_EMAIL}`} style={{ fontSize: 16, color: "#fff" }}
                onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent-soft)"}
                onMouseLeave={(e) => e.currentTarget.style.color = "#fff"}>
                {LEAD_EMAIL}
              </a>
            </div>
          </div>

          {/* Right — lead form */}
          <div style={{ paddingTop: 8 }}>
            <ContactForm />
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer
      className="r-padx"
      style={{
        background: "var(--ink)",
        borderTop: "1px solid var(--line-strong)",
        padding: "60px 36px 32px"
      }}>

      <div
        className="r-grid"
        style={{
          maxWidth: 1280, margin: "0 auto",
          display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", gap: 48
        }}>

        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <Wordmark22K size={28} color="var(--text)" />
          <span style={{ fontSize: 13, color: "var(--text-mute)", lineHeight: 1.55, maxWidth: 280 }}>
            Produtora de cinema publicitário.
          </span>
        </div>
        {[
        { title: "Navegar", items: [["Trabalhos", "#trabalhos"], ["Sobre", "#sobre"], ["Contato", "#contato"]] },
        { title: "Sociais", items: [["Instagram", "#"], ["Vimeo", "#"], ["LinkedIn", "#"]] },
        { title: "Cidades", items: [["São Paulo · BR", "#"], ["Lisboa · PT", "#"], ["carreira@22k.com.br", "mailto:carreira@22k.com.br"]] }].
        map((col, i) =>
        <div key={i} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <span className="mono" style={{ color: "var(--text-mute)", fontSize: 10 }}>{col.title}</span>
            {col.items.map(([it, href], j) =>
          <a
            key={j}
            href={href}
            style={{
              fontSize: 14, color: "var(--text)",
              fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
              transition: "color .2s"
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent-soft)"}
            onMouseLeave={(e) => e.currentTarget.style.color = "var(--text)"}>

                {it}
              </a>
          )}
          </div>
        )}
      </div>
      <div
        style={{
          maxWidth: 1280, margin: "60px auto 0", paddingTop: 24,
          borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between",
          fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
          fontSize: 11, color: "var(--text-mute)"
        }}>

        <span>© 2026 22K Filmes · CNPJ 22.022.220/0001-22</span>
        <span>São Paulo · Rio · Lisboa</span>
      </div>
    </footer>);

}

Object.assign(window, { Clientes, CtaFinal, Footer, ContactForm });