/* global React, SEQ_UI, SEQ_DATA */
const { Wordmark, SectionHead, brl, Icon } = window.SEQ_UI;
const { FUNNEL } = window.SEQ_DATA;

function Landing() {
  return (
    <main style={{ paddingTop: 0 }}>
      <TopNav />
      <Hero />
      <Ticker />
      <ProblemSection />
      <HowItWorks />
      <FeaturesSection />
      <SocialProof />
      <PricingSection />
      <FinalCTA />
      <Footer />
    </main>
  );
}

// ─── TopNav ─────────────────────────────────────────────
function TopNav() {
  const items = [
    { label: "Produto", href: "#produto" },
    { label: "Como funciona", href: "#como" },
    { label: "Pricing", href: "#pricing" },
    { label: "Login", href: "#/propostas", route: true },
  ];
  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "color-mix(in srgb, var(--kp-paper) 92%, transparent)",
      backdropFilter: "blur(10px)",
      borderBottom: "1.5px solid var(--kp-ink)",
    }}>
      <div className="kp-container" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 16, padding: "12px 24px",
      }}>
        <Wordmark size={22} />
        <ul style={{
          display: "flex", listStyle: "none", margin: 0, padding: 0, gap: 0,
        }}>
          {items.map(it => (
            <li key={it.label}>
              <a href={it.href} style={{
                display: "block", padding: "7px 14px",
                fontFamily: "var(--kp-mono)", fontSize: 10,
                letterSpacing: "0.16em", textTransform: "uppercase",
                color: "var(--kp-ink)",
              }}>{it.label}</a>
            </li>
          ))}
        </ul>
        <div style={{ display: "flex", gap: 8 }}>
          <a href="#/login" className="kp-btn kp-btn-sm">Entrar</a>
          <a href="#waitlist" className="kp-btn kp-btn-sm kp-btn-ink">Começar grátis →</a>
        </div>
      </div>
    </nav>
  );
}

// ─── Hero ───────────────────────────────────────────────
function Hero() {
  return (
    <header id="waitlist" style={{
      padding: "clamp(56px,6vw,96px) 0 clamp(40px,5vw,72px)",
      borderBottom: "1.5px solid var(--kp-ink)",
      position: "relative", overflow: "hidden",
    }}>
      <div className="kp-container" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
        alignItems: "center", gap: 56,
      }}>
        <div className="kp-reveal">
          <span className="kp-eyebrow">
            <span className="kp-dot" />
            Nº 01 · Propostas com inteligência embarcada
          </span>

          <h1 className="kp-display" style={{
            fontSize: "clamp(44px, 6.4vw, 88px)", lineHeight: 1.0,
            letterSpacing: "-0.025em", fontWeight: 400, margin: "20px 0 0",
          }}>
            <span style={{ display: "block" }}>
              Saiba <em>exatamente</em>
            </span>
            <span style={{ display: "block" }}>
              quando o cliente <span className="kp-splash">vai fechar.</span>
            </span>
          </h1>

          <p style={{
            fontSize: 18, lineHeight: 1.5, color: "var(--kp-muted)",
            maxWidth: 520, marginTop: 24,
          }}>
            Mande proposta, acompanhe cada abertura, releitura e segundo de leitura.
            Uma IA aprende seu funil e te diz <em style={{ color: "var(--kp-ink)" }}>quando
            ligar, com que tom e qual a chance real de fechar.</em>
          </p>

          <form onSubmit={(e) => e.preventDefault()} style={{
            marginTop: 32, display: "flex", gap: 8, maxWidth: 480,
          }}>
            <input className="kp-input" placeholder="seu@email.com" type="email" required />
            <button className="kp-btn kp-btn-ink" type="submit">Começar grátis →</button>
          </form>

          <div style={{
            marginTop: 28, display: "flex", flexWrap: "wrap", gap: "14px 24px",
            fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.18em",
            textTransform: "uppercase", color: "var(--kp-muted)",
          }}>
            {[
              ["pink", "Tracking real-time"],
              ["green", "IA preditiva"],
              ["pink", "Follow-up automático"],
            ].map(([c, l]) => (
              <span key={l} style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <span style={{ color: c === "pink" ? "var(--kp-pink)" : "var(--kp-ink)" }}>✦</span>
                {l}
              </span>
            ))}
          </div>
        </div>

        <div className="kp-reveal" style={{ position: "relative" }}>
          <HeroMock />
        </div>
      </div>

      {/* corner number */}
      <span style={{
        position: "absolute", top: 24, right: 32,
        fontFamily: "var(--kp-mono)", fontSize: 10,
        letterSpacing: "0.2em", color: "var(--kp-muted)",
      }}>FIG.01 — DASH</span>
    </header>
  );
}

// ─── Hero mock — mini version of the proposta detalhe ──
function HeroMock() {
  return (
    <div style={{ position: "relative", maxWidth: 560, marginInline: "auto" }}>
      <span className="kp-sticker" style={{
        position: "absolute", top: -12, right: -8, zIndex: 10,
        background: "var(--kp-green)", transform: "rotate(5deg)",
      }}>✦ 62% chance de fechar</span>
      <span className="kp-sticker" style={{
        position: "absolute", bottom: 60, left: -16, zIndex: 10,
        background: "var(--kp-pink)", transform: "rotate(-4deg)",
      }}>12 aberturas · 71min</span>

      <div className="kp-mock">
        <div className="kp-mock-titlebar">
          <div className="kp-mock-dots">
            <span style={{ background: "var(--kp-pink)" }} />
            <span style={{ background: "var(--kp-yellow)" }} />
            <span style={{ background: "var(--kp-green)" }} />
          </div>
          <span>sequencia.app/p/agendamento-ia</span>
          <span>ao vivo</span>
        </div>
        <div style={{ padding: 22 }}>
          <div style={{ display: "flex", gap: 8, marginBottom: 14, flexWrap: "wrap" }}>
            <span className="status-chip status-chip--accept">Aceita</span>
            <span className="status-chip status-chip--sent">Quente</span>
          </div>
          <div className="kp-display" style={{ fontSize: 22, lineHeight: 1.1, marginBottom: 18 }}>
            Módulo de Agendamento Inteligente <em>com IA</em>
          </div>

          {/* Mini metrics */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8, marginBottom: 16 }}>
            {[
              ["VIEWS", "12"],
              ["TEMPO", "71m"],
              ["SCORE", "62%"],
              ["VALOR", "R$4k"],
            ].map(([k,v]) => (
              <div key={k} style={{
                border: "1.5px solid var(--kp-ink)", padding: "8px 10px", background: "var(--kp-soft)",
              }}>
                <div style={{ fontFamily: "var(--kp-mono)", fontSize: 8, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>{k}</div>
                <div className="kp-display" style={{ fontSize: 20, fontStyle: "italic", marginTop: 2 }}>{v}</div>
              </div>
            ))}
          </div>

          {/* Mini timeline */}
          <div style={{ borderTop: "1.5px dashed rgba(10,10,10,0.2)", paddingTop: 12 }}>
            {[
              { c: "var(--kp-green)", t: "Proposta aceita · 30 abr 17:49" },
              { c: "var(--kp-pink)", t: "Insight IA: 62% chance de fechar" },
              { c: "var(--kp-soft)", t: "Cliente abriu pelo WhatsApp · 19 abr" },
            ].map((r,i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 0", fontSize: 12.5 }}>
                <span style={{
                  width: 10, height: 10, background: r.c,
                  border: "1.5px solid var(--kp-ink)", flexShrink: 0,
                }} />
                <span style={{ color: "var(--kp-ink)" }}>{r.t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Ticker ─────────────────────────────────────────────
function Ticker() {
  const items = [
    "Aberta · 12x", "71 min de leitura", "62% chance de fechar",
    "Insight da IA: ligar agora", "Re-lida em 30 abr · 17h42",
    "Compartilhada internamente", "Follow-up automático",
  ];
  const doubled = [...items, ...items];
  return (
    <div className="kp-ticker">
      <div className="kp-ticker-track">
        {doubled.map((t, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 36 }}>
            <span><span className="kp-hl">{t.split(" ")[0]}</span> {t.split(" ").slice(1).join(" ")}</span>
            <span className="kp-star">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── Problem ────────────────────────────────────────────
function ProblemSection() {
  const items = [
    { tag: "01", title: "“Será que ele leu?”", copy: "PDF foi pra inbox. Cliente sumiu por 2 semanas. Você liga e descobre que nem abriu.", bg: "var(--kp-white)" },
    { tag: "02", title: "Follow-up no escuro", copy: "Você manda “e aí, conseguiu olhar?” num momento aleatório. Quase sempre o errado.", bg: "var(--kp-green)" },
    { tag: "03", title: "Funil que some", copy: "21 propostas no ar, planilha do Excel. Quem tá quente? Quem desistiu? Ninguém sabe.", bg: "var(--kp-pink)" },
  ];
  return (
    <section id="produto" className="kp-section">
      <div className="kp-container">
        <SectionHead num="02" sub="O problema" tag="Nº 02">
          Mandar proposta <em>às cegas</em><br/>devia ser crime.
        </SectionHead>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {items.map(it => (
            <div key={it.tag} className="kp-card" style={{ background: it.bg, padding: 28 }}>
              <div className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.2em" }}>{it.tag}</div>
              <h3 className="kp-display" style={{ fontSize: 26, lineHeight: 1.1, marginTop: 12 }}>{it.title}</h3>
              <p style={{
                marginTop: 12, fontSize: 15, lineHeight: 1.55,
                color: it.bg === "var(--kp-white)" ? "var(--kp-muted)" : "var(--kp-ink)",
              }}>{it.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── How it works ───────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: "01", t: "Cria a proposta", d: "Editor com blocos prontos. Em 5 minutos vira link único, com a sua marca, mobile-first." },
    { n: "02", t: "Envia por onde quiser", d: "E-mail, WhatsApp, link cru. Cada envio gera um track-id único pra saber quem abriu." },
    { n: "03", t: "Acompanha em real-time", d: "Vê o cliente abrir, scrollar, voltar 3 dias depois. Cada segundo vira sinal." },
    { n: "04", t: "IA te diz a hora certa", d: "Score de fechamento, melhor horário pra ligar e mensagem sugerida pelo seu histórico." },
  ];
  return (
    <section id="como" className="kp-section" style={{ background: "var(--kp-soft)" }}>
      <div className="kp-container">
        <SectionHead num="03" sub="Como funciona" tag="Nº 03">
          Quatro <em>passos.</em><br/>Zero achismo.
        </SectionHead>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20 }}>
          {steps.map(s => (
            <div key={s.n} className="kp-card" style={{ padding: 22 }}>
              <div className="kp-mono" style={{
                width: 40, height: 40, background: "var(--kp-ink)", color: "var(--kp-paper)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 12, letterSpacing: "0.1em", fontWeight: 600,
              }}>{s.n}</div>
              <h3 className="kp-display" style={{ fontSize: 22, lineHeight: 1.1, marginTop: 16 }}>{s.t}</h3>
              <p style={{ marginTop: 8, color: "var(--kp-muted)", fontSize: 14, lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Features ───────────────────────────────────────────
function FeaturesSection() {
  const feats = [
    { t: "Tracking por evento", d: "Abertura, scroll por seção, tempo em cada bloco, IP, device, compartilhamentos.", icon: <Icon.eye /> },
    { t: "Score preditivo", d: "Modelo treinado nas suas propostas anteriores. Aprende seu funil específico.", icon: <Icon.sparkle /> },
    { t: "Temperatura ao vivo", d: "Cada proposta tem um indicador de calor: frio, morno, quente, fervendo.", icon: <Icon.flame /> },
    { t: "Follow-up que pensa", d: "Mensagens sugeridas no momento certo, com tom do seu cliente, prontas pra enviar.", icon: <Icon.send /> },
    { t: "Timeline narrada", d: "Cada acesso, cada re-leitura. Eventos viram história contada em português.", icon: <Icon.clock /> },
    { t: "Editor de proposta", d: "Blocos prontos: capa, sobre, escopo, investimento, cronograma, prova social.", icon: <Icon.edit /> },
  ];
  return (
    <section className="kp-section">
      <div className="kp-container">
        <SectionHead num="04" sub="Features" tag="Nº 04">
          Tudo que <em>nenhum PDF</em><br/>nunca fez por você.
        </SectionHead>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {feats.map(f => (
            <div key={f.t} className="kp-card" style={{ padding: 28 }}>
              <div style={{
                width: 44, height: 44, background: "var(--kp-green)",
                border: "1.5px solid var(--kp-ink)", boxShadow: "2px 2px 0 0 var(--kp-ink)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
              }}>{f.icon}</div>
              <h3 className="kp-display" style={{ fontSize: 24, lineHeight: 1.1, marginTop: 20 }}>{f.t}</h3>
              <p style={{ marginTop: 8, color: "var(--kp-muted)", fontSize: 14.5, lineHeight: 1.55 }}>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Social proof / story ───────────────────────────────
function SocialProof() {
  return (
    <section className="kp-section" style={{ background: "var(--kp-soft)" }}>
      <div className="kp-container kp-container-narrow" style={{ maxWidth: 920 }}>
        <SectionHead num="05" sub="História real" tag="Caso · 01">
          Mandei proposta <em>em 19 de abril.</em>
        </SectionHead>

        <div className="kp-card" style={{ padding: 36 }}>
          <p className="kp-display" style={{ fontSize: "clamp(22px,2.6vw,32px)", lineHeight: 1.25, margin: 0 }}>
            Cliente abriu pelo WhatsApp na hora.<br/>
            Voltou <em>20, 27, 28 e 30 de abril.</em><br/>
            <span className="kp-splash-pink">12 visualizações.</span> 71 minutos lendo (provavelmente ficou aberta a proposta e pensando…)
          </p>
          <p className="kp-display" style={{ fontSize: "clamp(22px,2.6vw,32px)", lineHeight: 1.25, marginTop: 24 }}>
            <em>30 de abril, 17h49:</em> <span className="kp-splash">Proposta aceita.</span>
          </p>
          <hr style={{ border: "none", borderTop: "1.5px dashed rgba(10,10,10,0.25)", margin: "28px 0" }} />
          <p style={{ fontSize: 17, lineHeight: 1.55, margin: 0, color: "var(--kp-muted)" }}>
            <em style={{ color: "var(--kp-ink)" }}>Antes eu não saberia nada disso.</em><br/>
            Hoje a IA me dizia <strong>62% de chance de fechar</strong>, e eu sabia exatamente quando ligar.
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── Pricing ────────────────────────────────────────────
function PricingSection() {
  const plans = [
    {
      name: "Solo", desc: "Pra freelancer mandando 2-5 propostas por semana.",
      price: "0", unit: "grátis pra sempre",
      features: ["Até 10 propostas/mês", "Tracking básico", "Templates da galeria", "Sem IA preditiva"],
      cta: "Começar grátis", bg: "var(--kp-white)", highlight: false,
    },
    {
      name: "Pro", desc: "Pra agência e estúdio que vive de proposta.",
      price: "97", unit: "/mês · sem fidelidade",
      features: ["Propostas ilimitadas", "IA preditiva + insights", "Follow-up automático", "Marca branca + domínio", "Suporte direto com o time"],
      cta: "Começar 14 dias grátis", bg: "var(--kp-green)", highlight: true,
    },
  ];
  return (
    <section id="pricing" className="kp-section">
      <div className="kp-container">
        <SectionHead num="06" sub="Pricing" tag="Nº 06">
          Dois <em>planos.</em> Sem<br/>conversinha de SDR.
        </SectionHead>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 24 }}>
          {plans.map(p => (
            <div key={p.name} className="kp-card" style={{
              background: p.bg, padding: 36,
              boxShadow: p.highlight ? "6px 6px 0 0 var(--kp-ink)" : "4px 4px 0 0 var(--kp-ink)",
              display: "flex", flexDirection: "column",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                <span className="kp-mono" style={{
                  fontSize: 10, letterSpacing: "0.2em", padding: "4px 10px",
                  border: "1.5px solid var(--kp-ink)", background: "var(--kp-white)",
                  boxShadow: "2px 2px 0 0 var(--kp-ink)",
                }}>{p.name}</span>
                {p.highlight && <span className="kp-mono" style={{
                  fontSize: 9, letterSpacing: "0.2em", padding: "4px 10px",
                  background: "var(--kp-ink)", color: "var(--kp-paper)",
                }}>Recomendado</span>}
              </div>
              <h3 className="kp-display" style={{ fontSize: 28, lineHeight: 1.05, marginTop: 20 }}>{p.desc}</h3>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 24 }}>
                <span className="kp-display" style={{ fontSize: 72, lineHeight: 0.95, fontStyle: "italic" }}>R${p.price}</span>
                <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--kp-muted)" }}>{p.unit}</span>
              </div>
              <ul style={{ marginTop: 28, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                {p.features.map(f => (
                  <li key={f} style={{ display: "flex", alignItems: "start", gap: 10, fontSize: 14.5 }}>
                    <Icon.check />
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a href="#waitlist" className={"kp-btn " + (p.highlight ? "kp-btn-ink" : "")} style={{ marginTop: 28 }}>
                {p.cta} →
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA ──────────────────────────────────────────
function FinalCTA() {
  return (
    <section className="kp-section" style={{ background: "var(--kp-ink)", color: "var(--kp-paper)", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle at 20% 10%, rgba(124,240,103,.10) 0%, transparent 50%), radial-gradient(circle at 80% 90%, rgba(210,98,178,.10) 0%, transparent 50%)",
        pointerEvents: "none",
      }} />
      <div className="kp-container kp-container-narrow" style={{ position: "relative", textAlign: "center", maxWidth: 920 }}>
        <span className="kp-eyebrow" style={{ background: "var(--kp-paper)" }}>
          <span className="kp-dot" /> Beta aberto
        </span>
        <h2 className="kp-display" style={{
          fontSize: "clamp(40px,5.6vw,76px)", lineHeight: 1.0,
          color: "var(--kp-paper)", margin: "28px 0 0",
        }}>
          Pare de mandar PDF<br/>
          <span className="kp-splash">e começar a ler.</span>
        </h2>
        <p style={{
          fontSize: 16, lineHeight: 1.55, maxWidth: 540, margin: "24px auto 0",
          color: "rgba(247,241,232,0.7)",
        }}>
          14 dias de Pro grátis. Sem cartão. Cancela com um clique.
        </p>
        <form onSubmit={(e) => e.preventDefault()} style={{
          marginTop: 36, display: "flex", gap: 8, maxWidth: 480, marginInline: "auto",
        }}>
          <input className="kp-input" placeholder="seu@email.com" type="email" required />
          <button className="kp-btn kp-btn-green" type="submit">Quero ver propostas →</button>
        </form>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: "var(--kp-paper)", padding: "48px 0 32px" }}>
      <div className="kp-container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
        <Wordmark size={20} />
        <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>
          © 2026 · Sequência · Feito por quem manda proposta
        </div>
      </div>
    </footer>
  );
}

window.SEQ_LANDING = Landing;