/* global React */
const { useState: useSenState, useEffect: useSenEffect } = React;
const senInputStyle = {
  width: "100%", padding: "14px 16px", borderRadius: 3, border: "1px solid var(--sen-line)",
  background: "rgba(255,255,255,0.04)", color: "var(--sen-fg)", fontSize: 14.5, fontFamily: "inherit", outline: "none",
};

/* ===== Nav ===== */
function SenNav() {
  const [solid, setSolid] = useSenState(false);
  useSenEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 200);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50, padding: "22px 40px",
      background: solid ? "#141110" : "transparent",
      borderBottom: solid ? "1px solid var(--sen-line)" : "1px solid transparent",
      transition: "background 200ms ease, border-color 200ms",
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontFamily: "'Playfair Display', serif", fontStyle: "italic", fontWeight: 500, fontSize: 22, color: "var(--sen-fg)" }}>sensual<span style={{ color: "var(--sen-accent)" }}>.ia</span></span>
        <a href="#pacotes" style={{
          padding: "11px 22px", borderRadius: 2, fontSize: 13, fontWeight: 700,
          letterSpacing: "0.03em", textTransform: "uppercase", color: "#F5F1EA", background: "var(--sen-accent)",
        }}>Encomendar</a>
      </div>
    </nav>
  );
}

/* ===== Hero — full-height split, large image panel ===== */
function SenHero() {
  return (
    <section style={{ position: "relative", background: "var(--sen-bg)", minHeight: "100vh", display: "grid", gridTemplateColumns: "1.1fr 1fr", overflow: "hidden" }}>
      <div style={{ padding: "160px 56px 80px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <span style={{
          display: "inline-block", marginBottom: 28, padding: "6px 14px", borderRadius: 2,
          border: "1px solid var(--sen-accent)", color: "var(--sen-accent)", fontFamily: "inherit",
          fontWeight: 700, fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", width: "fit-content",
        }}>Ensaios por IA · Exclusivo 18+</span>
        <h1 style={{
          margin: "0 0 32px", fontFamily: "'Playfair Display', serif", fontWeight: 500,
          fontSize: "clamp(46px, 6.2vw, 88px)", lineHeight: 1.12, letterSpacing: "-0.01em",
          color: "var(--sen-fg)", maxWidth: "14ch", textWrap: "balance",
        }}>
          Sua foto. Sua <span style={{ color: "var(--sen-accent)" }}>versão</span> mais confiante.
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--sen-fg-mut)", maxWidth: "42ch", margin: "0 0 40px" }}>
          Envie uma foto sua e receba, em poucos dias, um ensaio sensual e artístico editado com IA —
          sem agendar estúdio, sem fotógrafo, sem sair de casa. Sensual, nunca explícito.
        </p>
        <a href="#pacotes" style={{
          display: "inline-flex", alignItems: "center", gap: 10, padding: "18px 32px", borderRadius: 2,
          fontSize: 15, fontWeight: 700, letterSpacing: "0.02em",
          textTransform: "uppercase", color: "#F5F1EA", background: "var(--sen-accent)", width: "fit-content",
        }}>Ver pacotes →</a>
      </div>
      <div style={{ position: "relative" }}>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--sen-bg) 0%, transparent 12%)", zIndex: 2, pointerEvents: "none" }}></div>
        <img src="assets/sen-hero.webp" alt="Exemplo de ensaio sensual editado por IA" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
    </section>
  );
}

/* ===== Como funciona — solid accent band, horizontal numbers ===== */
function SenHowItWorks() {
  const steps = [
    { n: "01", t: "Envie sua foto", d: "Qualquer foto nítida serve — uma selfie ou foto de corpo, do jeito que você tiver hoje." },
    { n: "02", t: "Escolha o estilo", d: "Sensual clássico, boudoir suave ou editorial em preto e branco. Ou deixe por nossa conta." },
    { n: "03", t: "Receba o resultado", d: "Fotos editadas com IA, entregues no seu e-mail ou WhatsApp, só para você ver." },
  ];
  return (
    <section id="como-funciona" style={{ background: "var(--sen-accent)", padding: "100px 40px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <h2 style={{ margin: "0 0 56px", fontFamily: "'Playfair Display', serif", fontWeight: 500, fontSize: "clamp(30px, 4vw, 46px)", color: "#F5F1EA" }}>
          Como funciona
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "2px solid rgba(245,241,234,0.4)" }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{ padding: "28px 28px 0", borderLeft: i > 0 ? "2px solid rgba(245,241,234,0.25)" : "none" }}>
              <span style={{ fontFamily: "'Playfair Display', serif", fontSize: 48, color: "#F5F1EA", opacity: 0.55 }}>{s.n}</span>
              <h4 style={{ margin: "12px 0 8px", color: "#F5F1EA", fontWeight: 700, fontSize: 18 }}>{s.t}</h4>
              <p style={{ margin: 0, color: "#F5F1EA", opacity: 0.8, fontSize: 14.5, lineHeight: 1.6 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Galeria — masonry ===== */
function SenGallery() {
  const ids = ["sen-1", "sen-2", "sen-3", "sen-4", "sen-5", "sen-6", "sen-7", "sen-8", "sen-9", "sen-10", "sen-11", "sen-12"];
  return (
    <section id="exemplos" style={{ padding: "120px 40px", background: "var(--sen-bg)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ marginBottom: 40 }}>
          <h2 style={{ margin: 0, fontFamily: "'Playfair Display', serif", fontWeight: 500, fontSize: "clamp(28px, 3.6vw, 40px)", color: "var(--sen-fg)" }}>
            Exemplos de resultado
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {ids.map((id) => (
            <div key={id} style={{ aspectRatio: "3 / 4", borderRadius: 4, overflow: "hidden", background: "rgba(255,255,255,0.04)", position: "relative" }}>
              <img src={`assets/${id}.webp`} alt="Exemplo de resultado" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Depoimentos ===== */
function SenTestimonials() {
  const items = [
    { q: "Nunca me senti confortável na frente de uma câmera. Enviei uma foto qualquer e o resultado pareceu ensaio de estúdio.", n: "Camila R." },
    { q: "Recém depois dos 40 e queria me ver diferente. Chegou rápido e sem nenhum constrangimento no processo.", n: "Fernanda A." },
    { q: "Escolhi o estilo boudoir suave e o resultado ficou elegante, nada vulgar. Recomendo pra quem tem receio de ensaio presencial.", n: "Juliana M." },
  ];
  return (
    <section id="depoimentos" style={{ padding: "120px 40px", background: "#1B1615", borderTop: "1px solid var(--sen-line)", borderBottom: "1px solid var(--sen-line)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <h2 style={{ margin: "0 0 48px", fontFamily: "'Playfair Display', serif", fontWeight: 500, fontSize: "clamp(28px, 3.6vw, 42px)", color: "var(--sen-fg)" }}>
          Quem já experimentou
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {items.map((it) => (
            <div key={it.n} style={{ borderTop: "2px solid var(--sen-accent)", paddingTop: 20 }}>
              <p style={{ margin: "0 0 16px", color: "var(--sen-fg)", fontSize: 15, lineHeight: 1.65 }}>"{it.q}"</p>
              <span style={{ color: "var(--sen-fg-mut)", fontSize: 13, fontWeight: 700 }}>{it.n}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Confiança ===== */
function SenTrust() {
  const items = [
    { t: "Maiores de 18 anos", d: "Atendimento exclusivo a adultas. Confirmação de idade obrigatória no cadastro." },
    { t: "Sem nudez explícita", d: "Conteúdo sensual e artístico, nunca explícito — em todos os estilos oferecidos." },
    { t: "Você autoriza cada uso", d: "Sua foto só gera as suas próprias imagens. Nunca é publicada ou compartilhada." },
    { t: "Exclusão automática", d: "Foto original e arquivos de geração são apagados após a entrega." },
  ];
  return (
    <section id="confianca" style={{ padding: "56px 40px 64px", background: "#1B1615", borderTop: "1px solid var(--sen-line)", borderBottom: "1px solid var(--sen-line)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <h2 style={{ margin: "0 0 32px", fontFamily: "'Playfair Display', serif", fontWeight: 500, fontSize: "clamp(24px, 2.8vw, 32px)", color: "var(--sen-fg)" }}>
          Por que confiar no sensual.ia
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "32px 40px" }}>
          {items.map((it) => (
            <div key={it.t} style={{ borderTop: "2px solid var(--sen-accent)", paddingTop: 20 }}>
              <h4 style={{ margin: "0 0 10px", color: "var(--sen-accent)", fontWeight: 700, fontSize: 15.5, textTransform: "uppercase", letterSpacing: "0.01em" }}>{it.t}</h4>
              <p style={{ margin: 0, color: "var(--sen-fg-mut)", fontSize: 13.5, lineHeight: 1.6 }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Pacotes + formulário — split layout ===== */
function SenPricing() {
  const [checked, setChecked] = useSenState(false);
  const [form, setForm] = useSenState({ nome: "", contato: "", pacote: "Autoral", estilo: "Sem preferência (fica a nosso critério)", mensagem: "" });
  const [nextUrl, setNextUrl] = useSenState("");
  const [sent, setSent] = useSenState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const estilos = ["Sensual clássico", "Boudoir suave", "Editorial em preto e branco", "Sem preferência (fica a nosso critério)"];
  useSenEffect(() => {
    setNextUrl(window.location.origin + window.location.pathname + "#obrigado");
    if (window.location.hash === "#obrigado") setSent(true);
  }, []);
  const canSubmit = checked && form.nome.trim() && form.contato.trim();
  const plans = [
    { t: "Essencial", price: "R$ 149", d: "5 fotos editadas", items: ["1 estilo", "5 fotos em alta resolução", "Entrega em 3 dias"] },
    { t: "Autoral", price: "R$ 249", d: "10 fotos editadas", items: ["Até 3 estilos", "10 fotos em alta resolução", "Entrega em 3 dias"], featured: true },
    { t: "Completo", price: "R$ 399", d: "20 fotos editadas", items: ["Todos os estilos", "20 fotos em alta resolução", "Entrega prioritária em 48h"] },
  ];
  return (
    <section id="pacotes" style={{ padding: "120px 40px", background: "var(--sen-bg)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 420px", gap: 56, alignItems: "start" }}>
        <div>
          <h2 style={{ margin: "0 0 12px", fontFamily: "'Playfair Display', serif", fontWeight: 500, fontSize: "clamp(30px, 3.8vw, 44px)", color: "var(--sen-fg)" }}>
            Pacotes
          </h2>
          <p style={{ margin: "0 0 40px", color: "var(--sen-fg-mut)", fontSize: 15.5, lineHeight: 1.6, maxWidth: "46ch" }}>
            Escolha o pacote, envie sua foto e a gente cuida do resto. Pagamento por Pix ou link de pagamento, combinado depois do contato.
          </p>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {plans.map((p, i) => (
              <div key={p.t} style={{
                display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center",
                padding: "28px 0", borderTop: i === 0 ? "2px solid var(--sen-line)" : "1px solid var(--sen-line)",
              }}>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 6 }}>
                    <h4 style={{ margin: 0, color: "var(--sen-fg)", fontWeight: 700, fontSize: 20 }}>{p.t}</h4>
                    {p.featured && <span style={{ fontSize: 11, fontWeight: 700, color: "#F5F1EA", background: "var(--sen-accent)", padding: "3px 9px", borderRadius: 2, textTransform: "uppercase" }}>Popular</span>}
                  </div>
                  <span style={{ color: "var(--sen-fg-mut)", fontSize: 13.5 }}>{p.d} · {p.items.slice(1).join(" · ")}</span>
                </div>
                <span style={{ fontFamily: "'Playfair Display', serif", fontSize: 30, color: "var(--sen-fg)" }}>{p.price}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: "36px 32px", borderRadius: 6, background: "#1B1615", border: "1px solid var(--sen-line)" }}>
          {sent ? (
            <div style={{ textAlign: "center", padding: "24px 0" }}>
              <h4 style={{ margin: "0 0 10px", color: "var(--sen-accent)", fontFamily: "'Playfair Display', serif", fontWeight: 500, fontSize: 19 }}>Encomenda enviada</h4>
              <p style={{ margin: 0, color: "var(--sen-fg-mut)", fontSize: 14, lineHeight: 1.6 }}>Recebemos seu pedido. Vamos entrar em contato para combinar o envio da foto e o pagamento.</p>
            </div>
          ) : (
          <form action="https://formsubmit.co/ensaio@sensual.ia.br" method="POST">
          <input type="hidden" name="_subject" value={"Encomenda — " + form.pacote} />
          <input type="hidden" name="_template" value="table" />
          <input type="hidden" name="_captcha" value="false" />
          <input type="hidden" name="_next" value={nextUrl} />
          <h4 style={{ margin: "0 0 20px", color: "var(--sen-fg)", fontWeight: 700, fontSize: 17 }}>Encomendar</h4>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <input name="nome" required value={form.nome} onChange={set("nome")} placeholder="Seu nome" style={senInputStyle} />
            <input name="contato" required value={form.contato} onChange={set("contato")} placeholder="E-mail ou WhatsApp" style={senInputStyle} />
            <select name="pacote" value={form.pacote} onChange={set("pacote")} style={senInputStyle}>
              {plans.map((p) => <option key={p.t} value={p.t}>{p.t} — {p.price}</option>)}
            </select>
            <select name="estilo" value={form.estilo} onChange={set("estilo")} style={senInputStyle}>
              {estilos.map((e) => <option key={e} value={e}>{e}</option>)}
            </select>
            <div>
              <span style={{ display: "block", fontSize: 12.5, color: "var(--sen-fg-mut)", marginBottom: 8 }}>Foto de referência (opcional)</span>
              <input type="file" name="referencia" accept="image/*" style={{ ...senInputStyle, padding: "11px 16px" }} />
            </div>
            <textarea name="mensagem" value={form.mensagem} onChange={set("mensagem")} placeholder="Alguma observação? (opcional)" rows={3} style={{ ...senInputStyle, resize: "vertical" }} />
            <label style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "var(--sen-fg-mut)", cursor: "pointer", marginTop: 2 }}>
              <input type="checkbox" required name="confirma_idade" checked={checked} onChange={(e) => setChecked(e.target.checked)} style={{ width: 16, height: 16, accentColor: "var(--sen-accent)", flex: "none" }} />
              Confirmo que tenho 18 anos ou mais
            </label>
            <div style={{ opacity: canSubmit ? 1 : 0.4, pointerEvents: canSubmit ? "auto" : "none", transition: "opacity 200ms", marginTop: 6 }}>
              <button type="submit" style={{
                display: "flex", alignItems: "center", justifyContent: "center", width: "100%",
                padding: "15px 24px", borderRadius: 2, fontSize: 14, fontWeight: 700,
                textTransform: "uppercase", letterSpacing: "0.02em", color: "#F5F1EA", background: "var(--sen-accent)", border: "none", cursor: "pointer",
              }}>Enviar encomenda</button>
            </div>
          </div>
          </form>
          )}
        </div>
      </div>
    </section>
  );
}

/* ===== FAQ — two-column, no accordion ===== */
function SenFAQ() {
  const items = [
    { q: "Preciso ter 18 anos?", a: "Sim. Atendimento exclusivo a maiores de idade, com confirmação obrigatória no cadastro." },
    { q: "As fotos têm nudez?", a: "Não. O foco é sensual e artístico — não trabalhamos com conteúdo explícito." },
    { q: "O que acontece com a foto que eu enviar?", a: "É usada só para gerar as suas imagens e apagada dos nossos sistemas depois da entrega." },
    { q: "Alguém mais vê minhas fotos?", a: "Não. Suas fotos não são publicadas nem compartilhadas sem sua autorização." },
    { q: "Quanto custa?", a: "Os pacotes vão de R$ 149 (5 fotos) a R$ 399 (20 fotos, todos os estilos e entrega prioritária)." },
    { q: "Como funciona o pagamento?", a: "Após o contato, enviamos um link de pagamento ou chave Pix. A edição começa assim que o pagamento é confirmado." },
  ];
  return (
    <section id="faq" style={{ padding: "120px 40px", background: "var(--sen-bg)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <h2 style={{ margin: "0 0 48px", fontFamily: "'Playfair Display', serif", fontWeight: 500, fontSize: "clamp(30px, 3.8vw, 44px)", color: "var(--sen-fg)" }}>
          Perguntas frequentes
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "40px 56px" }}>
          {items.map((it) => (
            <div key={it.q} style={{ borderTop: "1px solid var(--sen-line)", paddingTop: 20 }}>
              <h4 style={{ margin: "0 0 8px", color: "var(--sen-accent)", fontWeight: 700, fontSize: 15.5 }}>{it.q}</h4>
              <p style={{ margin: 0, color: "var(--sen-fg-mut)", fontSize: 14.5, lineHeight: 1.65 }}>{it.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Footer ===== */
function SenFooter() {
  return (
    <footer style={{ padding: "56px 40px", background: "#1B1615", borderTop: "1px solid var(--sen-line)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24, flexWrap: "wrap" }}>
        <div>
          <span style={{ fontFamily: "'Playfair Display', serif", fontStyle: "italic", fontWeight: 500, fontSize: 20, color: "var(--sen-fg)" }}>sensual<span style={{ color: "var(--sen-accent)" }}>.ia</span></span>
          <p style={{ margin: "12px 0 0", color: "var(--sen-fg-mut)", fontSize: 12.5, lineHeight: 1.7, maxWidth: "48ch" }}>
            Serviço exclusivo para maiores de 18 anos. Conteúdo sensual e artístico, sem nudez explícita.
            Fotos enviadas são usadas apenas para gerar suas próprias imagens e apagadas após a entrega.
          </p>
          <a href="sensual-ia-termos.html" style={{ display: "inline-block", marginTop: 14, color: "var(--sen-accent)", fontSize: 12.5 }}>Termos de uso e privacidade</a>
        </div>
        <span style={{ color: "var(--sen-fg-mut)", fontSize: 12 }}>© 2026 sensual.ia</span>
      </div>
    </footer>
  );
}

Object.assign(window, { SenNav, SenHero, SenHowItWorks, SenGallery, SenTestimonials, SenTrust, SenPricing, SenFAQ, SenFooter });