// app.jsx — SPCK landing page (single-page, dark, original brand)
const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ─────────────── CONFIG ─────────────── */
const SPCK_CONFIG = {
  accent: "#2E7DB8",
  accentDeep: "#1F5A8C",
  accentLight: "#A8C9E0",
  accentSoft: "rgba(46,125,184,0.18)",
  headlineIdx: 0,
  showCircuit: true,
  density: "regular",
};

const ACCENT_PRESETS = {
  "#2E7DB8": { deep: "#1F5A8C", light: "#A8C9E0", soft: "rgba(46,125,184,0.18)" }, // brand azul
  "#7C5CFF": { deep: "#4E36C7", light: "#C8BCFF", soft: "rgba(124,92,255,0.18)" }, // violeta
  "#22C55E": { deep: "#0F8A47", light: "#A9E9C2", soft: "rgba(34,197,94,0.18)" }, // verde lima
  "#F0682E": { deep: "#B14820", light: "#F9C5A8", soft: "rgba(240,104,46,0.18)" } // âmbar
};

const HEADLINES = [
{ line1: "Tecnologia sob medida", line2: "para empresas que não têm tempo de errar." },
{ line1: "Sistemas de verdade,", line2: "construídos por quem também faz produto." },
{ line1: "Sai do improviso.", line2: "Entra software que dá conta do recado." }];


/* ─────────────── Reveal-on-scroll ─────────────── */
function Reveal({ children, delay = 0, as: As = "div", className = "" }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => e.target.classList.add("in"), delay);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={`reveal ${className}`}>{children}</As>;
}

/* ─────────────── Card with mouse glow ─────────────── */
function GlowCard({ children, className = "", ...rest }) {
  const ref = useRef(null);
  const onMove = (e) => {
    const el = ref.current;if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty("--mx", `${e.clientX - rect.left}px`);
    el.style.setProperty("--my", `${e.clientY - rect.top}px`);
  };
  return (
    <div ref={ref} onMouseMove={onMove} className={`card ${className}`} {...rest}>
      <div className="card-glow" />
      {children}
    </div>);

}

/* ─────────────── Header ─────────────── */
function Header({ onCTA }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 8);
    onS();window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  const nav = [
  { href: "#servicos", label: "Serviços" },
  { href: "#processo", label: "Processo" },
  { href: "#porque", label: "Por que a SPCK" },
  { href: "#contato", label: "Contato" }];

  return (
    <header className={`fixed top-0 inset-x-0 z-40 transition-all ${scrolled ? "nav-scrolled" : ""}`}>
      <div className="max-w-[1200px] mx-auto flex items-center justify-between px-5 md:px-8 h-[64px]">
        <a href="#top" className="flex items-center gap-2.5 group">
          <span className="relative w-10 h-10 grid place-items-center">
            <img src="assets/spck-mono.png" alt=""
            className="logo-mono w-10 h-10 object-contain select-none"
            style={{ marginTop: 1, objectFit: "contain", height: "40px", width: "40px" }} draggable="false" />
          </span>
          <span className="text-[17px] font-semibold tracking-[-0.01em]">SPCK</span>
          <span className="hidden md:inline-block ml-2 px-2 py-[3px] text-[10px] font-mono uppercase tracking-[0.14em] text-chrome-300 border border-white/10 rounded-md">EMPRESA DE TECNOLOGIA

          </span>
        </a>

        <nav className="hidden md:flex items-center gap-7 text-[13.5px] text-chrome-200">
          {nav.map((n) =>
          <a key={n.href} href={n.href}
          className="hover:text-white transition-colors duration-200">{n.label}</a>
          )}
        </nav>

        <div className="flex items-center gap-2">
          <button onClick={onCTA} className="btn btn-ghost h-9 px-3.5 text-[13px] hidden sm:inline-flex">
            Falar com a gente
            <IconArrowRight size={14} />
          </button>
          <button onClick={() => setOpen((o) => !o)} aria-label="Menu"
          className="md:hidden btn btn-ghost h-9 w-9 px-0">
            {open ? <IconX size={16} /> : <IconMenu size={16} />}
          </button>
        </div>
      </div>

      {/* mobile menu */}
      {open &&
      <div className="md:hidden border-t border-white/5 bg-[var(--bg)]/95 backdrop-blur">
          <div className="px-6 py-4 flex flex-col gap-3">
            {nav.map((n) =>
          <a key={n.href} href={n.href} onClick={() => setOpen(false)}
          className="py-2 text-chrome-100">{n.label}</a>
          )}
            <button onClick={() => {setOpen(false);onCTA?.();}} className="btn btn-primary mt-2">
              Falar com a gente
            </button>
          </div>
        </div>
      }
    </header>);

}

/* ─────────────── Hero ─────────────── */
function Hero({ headlineIdx, showCircuit, density, onCTA }) {
  const auroraRef = useRef(null);
  useEffect(() => {
    const onMove = (e) => {
      const el = auroraRef.current;if (!el) return;
      const x = (e.clientX / window.innerWidth - 0.5) * 12;
      const y = (e.clientY / window.innerHeight - 0.5) * 8;
      el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);
  const h = HEADLINES[headlineIdx % HEADLINES.length];
  return (
    <section id="top" className="relative pt-[120px] md:pt-[160px] pb-20 md:pb-32 overflow-hidden">
      {/* aurora */}
      <div ref={auroraRef} className="aurora aurora-anim" aria-hidden="true" />
      {/* circuit */}
      {showCircuit &&
      <div className="absolute inset-0 grid-fade pointer-events-none" aria-hidden="true">
          <CircuitGrid density={density} className="absolute inset-0 w-full h-full opacity-[0.55]" />
        </div>
      }
      {/* top glow line */}
      <div className="absolute left-1/2 -translate-x-1/2 top-0 w-[60%] h-px"
      style={{ background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent)" }} />

      <div className="relative max-w-[1200px] mx-auto px-5 md:px-8">
        <Reveal>
          <div className="flex items-center gap-2 mb-7">
            <span className="inline-flex h-1.5 w-1.5 rounded-full" style={{ background: "var(--accent-light)" }} />
            <span className="eyebrow">spck · são paulo · brasil</span>
          </div>
        </Reveal>

        <Reveal delay={60}>
          <h1 className="display text-[44px] sm:text-[60px] md:text-[76px] lg:text-[88px] max-w-[14ch]">
            {h.line1}<br />
            <span className="text-chrome-300">{h.line2}</span>
          </h1>
        </Reveal>

        <Reveal delay={130}>
          <p className="mt-7 max-w-[58ch] text-chrome-200 text-[16.5px] md:text-[18px] leading-[1.55]">
            Sistemas sob medida, automações, dashboards e consultoria —
            construídos por uma equipe que também desenvolve seus próprios produtos SaaS.
            Repertório de produto, não só de código.
          </p>
        </Reveal>

        <Reveal delay={200}>
          <div className="mt-9 flex flex-wrap gap-3">
            <button onClick={onCTA} className="btn btn-primary">
              Agendar diagnóstico
              <IconArrowRight size={16} />
            </button>
            <a href="#servicos" className="btn btn-ghost">Ver serviços</a>
          </div>
        </Reveal>

        {/* stack chips */}
        <Reveal delay={280}>
          <div className="mt-12 flex flex-wrap items-center gap-x-6 gap-y-3 text-[12.5px] font-mono text-chrome-300">
            <span className="opacity-70">stack:</span>
            {["Next.js", "TypeScript", "Postgres", "Supabase", "Vercel", "n8n"].map((s, i) =>
            <span key={s} className="inline-flex items-center gap-2">
                <span className="h-1 w-1 rounded-full bg-white/30" />
                <span>{s}</span>
              </span>
            )}
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ─────────────── Credibility strip ─────────────── */
function CredStrip() {
  const items = [
  "Baseados em São Paulo",
  "Equipe técnica enxuta",
  "Produtos próprios em produção",
  "Stack moderna"];

  return (
    <section className="hairline-t hairline-b">
      <div className="max-w-[1200px] mx-auto px-5 md:px-8 py-5
                      flex flex-wrap items-center justify-center gap-x-6 gap-y-2
                      text-[12.5px] text-chrome-300">

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        
        {items.map((it, i) =>
        <span key={i} className="inline-flex items-center gap-6">
            {i > 0 && <span className="text-white/15">·</span>}
            <span>{it}</span>
          </span>
        )}
      </div>
    </section>);

}

/* ─────────────── Services ─────────────── */
const SERVICES = [
{ i: IconCode, title: "Sistemas sob medida",
  desc: "Aplicações web completas para automatizar processos internos ou abrir novos canais. Stack moderna (Next.js, Supabase, Postgres) e código que sua equipe consegue manter no futuro.",
  tag: "01" },
{ i: IconWorkflow, title: "Automações",
  desc: "Integrações entre sistemas, robôs de processo e fluxos de trabalho que eliminam tarefas repetitivas. Do disparo de WhatsApp ao fechamento mensal.",
  tag: "02" },
{ i: IconGlobe, title: "Sites institucionais",
  desc: "Sites rápidos, performáticos e otimizados para SEO. Nada de templates engessados.",
  tag: "03" },
{ i: IconChart, title: "Dashboards e BI",
  desc: "Painéis sob medida conectados aos seus dados. Indicadores que sua diretoria realmente vai abrir todo dia.",
  tag: "04" },
{ i: IconCompass, title: "Consultoria em tecnologia",
  desc: "Avaliação de stack, escolha de ferramentas, arquitetura e roadmap. Para quando você precisa de uma segunda opinião técnica antes de investir.",
  tag: "05" }];


function Services() {
  return (
    <section id="servicos" className="relative py-24 md:py-32">
      <div className="max-w-[1200px] mx-auto px-5 md:px-8">
        <Reveal>
          <div className="eyebrow mb-4">[ serviços ]</div>
          <h2 className="display-sm text-[34px] md:text-[52px] max-w-[18ch]">O que fazemos?

          </h2>
          <p className="mt-4 text-chrome-200 max-w-[58ch] text-[15.5px] md:text-[17px] leading-[1.55]">
            Cinco áreas de atuação. Tudo construído com a mesma stack moderna,
            com escopo fechado e prazo realista.
          </p>
        </Reveal>

        <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
          {SERVICES.map((s, i) => {
            const Icon = s.i;
            const isWide = i === 3; // dashboards card spans more on lg
            return (
              <Reveal key={s.title} delay={i * 60}
              className={`${i === 3 ? "lg:col-span-2" : ""} ${i === 4 ? "lg:col-span-1" : ""}`}>
                <GlowCard className="h-full p-6 md:p-7">
                  <div className="flex items-start justify-between">
                    <div className="w-11 h-11 rounded-xl grid place-items-center"
                    style={{
                      background: "color-mix(in oklab, var(--accent) 14%, transparent)",
                      border: "1px solid color-mix(in oklab, var(--accent) 36%, transparent)",
                      color: "var(--accent-light)"
                    }}>
                      <Icon size={20} />
                    </div>
                    <span className="font-mono text-[11px] text-chrome-300/70 tracking-[0.12em]">
                      {s.tag}
                    </span>
                  </div>
                  <h3 className="mt-6 text-[19px] md:text-[20px] font-semibold tracking-[-0.01em]">
                    {s.title}
                  </h3>
                  <p className="mt-2.5 text-[14.5px] leading-[1.6] text-chrome-200/90">
                    {s.desc}
                  </p>

                  {/* dashboard preview embedded only for card 4 */}
                  {i === 3 &&
                  <div className="mt-6 h-[120px] rounded-lg border border-white/5 bg-[var(--surface-1)]/60 p-4 flex items-end gap-2">
                      {[42, 28, 60, 38, 75, 52, 88, 64, 70, 95, 58, 80].map((h, k) =>
                    <div key={k}
                    className="flex-1 rounded-t-[3px] transition-all"
                    style={{
                      height: `${h}%`,
                      background: k % 4 === 3 ?
                      "color-mix(in oklab, var(--accent) 80%, white 0%)" :
                      "color-mix(in oklab, var(--accent) 35%, transparent)"
                    }} />
                    )}
                    </div>
                  }
                </GlowCard>
              </Reveal>);

          })}
        </div>
      </div>
    </section>);

}

/* ─────────────── Process ─────────────── */
const STEPS = [
{ n: "01", title: "Diagnóstico",
  body: "Conversa de 30 minutos para entender o problema real, não o sintoma.",
  meta: "30 min · sem compromisso" },
{ n: "02", title: "Proposta enxuta",
  body: "Escopo claro, prazo realista, preço fechado. Sem surpresa.",
  meta: "em até 5 dias úteis" },
{ n: "03", title: "Entrega iterativa",
  body: "Você acompanha cada release. Nada de \"vamos voltar daqui a 3 meses\".",
  meta: "releases semanais" }];


function Process() {
  return (
    <section id="processo" className="relative py-24 md:py-32 hairline-t">
      <div className="max-w-[1200px] mx-auto px-5 md:px-8">
        <Reveal>
          <div className="eyebrow mb-4">[ processo ]</div>
          <h2 className="display-sm text-[34px] md:text-[52px] max-w-[18ch]">
            Como entregamos?
          </h2>
        </Reveal>

        <div className="mt-14 relative">
          {/* connecting line */}
          <div className="hidden md:block absolute top-[26px] left-[10%] right-[10%] h-px"
          style={{ background: "linear-gradient(90deg, transparent, var(--hairline-strong), var(--hairline-strong), transparent)" }} />

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-6 relative">
            {STEPS.map((s, i) =>
            <Reveal key={s.n} delay={i * 100}>
                <div className="flex flex-col">
                  <div className="flex items-center gap-3">
                    <div className="w-[52px] h-[52px] rounded-full grid place-items-center font-mono text-[13px] font-medium tabular"
                  style={{
                    background: "var(--surface-2)",
                    border: "1px solid var(--hairline-strong)",
                    color: "var(--accent-light)"
                  }}>
                      {s.n}
                    </div>
                    <span className="font-mono text-[11px] tracking-[0.14em] uppercase text-chrome-300">
                      {s.meta}
                    </span>
                  </div>
                  <h3 className="mt-6 text-[22px] font-semibold tracking-[-0.01em]">{s.title}</h3>
                  <p className="mt-2 text-chrome-200/90 text-[15px] leading-[1.6] max-w-[36ch]">
                    {s.body}
                  </p>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ─────────────── Why SPCK ─────────────── */
const REASONS = [
{ i: IconLayers,
  title: "Pensamento de produto, não só de código",
  body: "Construímos nossos próprios SaaS. Sabemos o que escala e o que vai dar dor de cabeça em 6 meses." },
{ i: IconUsers,
  title: "Time enxuto, comunicação direta",
  body: "Você fala com quem está construindo. Sem intermediários." },
{ i: IconSpark,
  title: "Stack moderna e padrão de mercado",
  body: "Next.js, TypeScript, Postgres, Supabase, Vercel. Você não fica refém de tecnologia obscura." },
{ i: IconBook,
  title: "Documentação e handoff",
  body: "Se um dia você quiser internalizar, vai conseguir. Tudo entregue documentado." }];


function Why() {
  return (
    <section id="porque" className="relative py-24 md:py-32 hairline-t">
      <div className="max-w-[1200px] mx-auto px-5 md:px-8">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
          <div className="md:col-span-5">
            <Reveal>
              <div className="eyebrow mb-4">[ por que ]</div>
              <h2 className="display-sm text-[34px] md:text-[52px]">
                Por que escolher<br />a SPCK?
              </h2>
              <p className="mt-5 text-chrome-200/90 text-[15.5px] leading-[1.6] max-w-[42ch]">
                Quatro razões concretas. Sem promessa vazia.
              </p>
            </Reveal>
          </div>
          <div className="md:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-5">
            {REASONS.map((r, i) => {
              const Icon = r.i;
              return (
                <Reveal key={r.title} delay={i * 70}>
                  <div className="h-full p-5 md:p-6 rounded-2xl border border-white/5 bg-white/[0.015]">
                    <div className="w-10 h-10 rounded-lg grid place-items-center mb-4"
                    style={{
                      background: "color-mix(in oklab, var(--accent) 12%, transparent)",
                      color: "var(--accent-light)"
                    }}>
                      <Icon size={18} />
                    </div>
                    <h3 className="text-[15.5px] font-semibold tracking-[-0.005em] leading-[1.3]">
                      {r.title}
                    </h3>
                    <p className="mt-2 text-[13.5px] leading-[1.55] text-chrome-300">
                      {r.body}
                    </p>
                  </div>
                </Reveal>);

            })}
          </div>
        </div>
      </div>
    </section>);

}

/* ─────────────── Mid CTA banner ─────────────── */
function MidCTA({ onCTA }) {
  return (
    <section className="relative py-20 md:py-28">
      <div className="max-w-[1200px] mx-auto px-5 md:px-8">
        <div className="relative overflow-hidden rounded-[20px] border border-white/8
                        px-8 py-14 md:px-14 md:py-20 text-center"





















        style={{
          background: `radial-gradient(80% 120% at 50% -10%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%),
                          linear-gradient(180deg, var(--surface-1), var(--bg))`
        }}>
          <div className="absolute inset-x-0 top-0 h-px"
          style={{ background: "linear-gradient(90deg, transparent, var(--accent-light), transparent)" }} />
          <Reveal>
            <h3 className="display-sm text-[30px] md:text-[44px] max-w-[22ch] mx-auto">
              Vamos conversar sobre o seu projeto?
            </h3>
            <p className="mt-4 text-chrome-200 text-[15px] md:text-[16.5px]">
              Diagnóstico inicial sem compromisso, em 30 minutos.
            </p>
            <div className="mt-8 flex justify-center">
              <button onClick={onCTA} className="btn btn-primary h-12 px-6 text-[15px]">
                Agendar conversa
                <IconArrowRight size={16} />
              </button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

/* ─────────────── Contact ─────────────── */
function Contact({ formRef }) {
  const [data, setData] = useState({ nome: "", email: "", empresa: "", telefone: "", tipo: "", msg: "" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  const validate = () => {
    const e = {};
    if (!data.nome.trim()) e.nome = "Nome é obrigatório.";
    if (!data.email.trim()) e.email = "E-mail é obrigatório.";else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = "E-mail inválido.";
    if (!data.tipo) e.tipo = "Selecione um tipo.";
    if (!data.msg.trim() || data.msg.trim().length < 12) e.msg = "Conte um pouco mais (mín. 12 caracteres).";
    return e;
  };

  const submit = async (e) => {
    e.preventDefault();
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: "d34dc0ee-45c1-4989-9aad-4f6746a872f5",
          subject: `Novo lead SPCK — ${data.nome}`,
          from_name: "Site SPCK",
          ...data,
        }),
      });
      if (res.ok) setSent(true);
      else alert("Erro ao enviar. Manda direto pro spck@spck.com.br.");
    } catch {
      alert("Erro ao enviar. Manda direto pro spck@spck.com.br.");
    }
  };

  return (
    <section id="contato" ref={formRef} className="relative py-24 md:py-32 hairline-t">
      <div className="max-w-[1200px] mx-auto px-5 md:px-8">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-16">
          <div className="md:col-span-5">
            <Reveal>
              <div className="eyebrow mb-4">[ contato ]</div>
              <h2 className="display-sm text-[34px] md:text-[48px]">
                Conta o que<br />você precisa.
              </h2>
              <p className="mt-5 text-chrome-200/90 text-[15.5px] leading-[1.6] max-w-[42ch]">
                Diagnóstico em 30 minutos, sem compromisso.
                Respondemos em até um dia útil.
              </p>

              <div className="mt-10 flex flex-col gap-4">
                <a href="mailto:spck@spck.com.br" className="group flex items-center gap-3 text-[14.5px] text-chrome-100 hover:text-white transition">
                  <span className="w-9 h-9 rounded-lg grid place-items-center border border-white/10 group-hover:border-white/30 transition" style={{ color: "var(--accent-light)" }}>
                    <IconMail size={16} />
                  </span>
                  spck@spck.com.br
                </a>
              </div>
            </Reveal>
          </div>

          <div className="md:col-span-7">
            <Reveal delay={80}>
              <form onSubmit={submit} noValidate
              className="relative rounded-2xl p-6 md:p-8 border border-white/8 bg-[var(--surface-1)]/40">
                {sent ?
                <div className="py-10 text-center">
                    <div className="mx-auto w-14 h-14 rounded-full grid place-items-center mb-5"
                  style={{ background: "color-mix(in oklab, var(--accent) 22%, transparent)",
                    color: "#fff",
                    border: "1px solid color-mix(in oklab, var(--accent) 45%, transparent)" }}>
                      <IconCheck size={22} />
                    </div>
                    <h3 className="text-[22px] font-semibold tracking-[-0.01em]">Recebemos.</h3>
                    <p className="mt-3 text-chrome-200 max-w-[42ch] mx-auto text-[14.5px]">
                      Vamos responder em até um dia útil com próximos passos.
                      Enquanto isso, fica à vontade pra mandar mais contexto pelo WhatsApp.
                    </p>
                  </div> :

                <>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                      <FormField label="Nome" required error={errors.nome}>
                        <input type="text" className={`field ${errors.nome ? "field-invalid" : ""}`}
                      value={data.nome} onChange={set("nome")} placeholder="Como prefere ser chamado" />
                      </FormField>
                      <FormField label="E-mail" required error={errors.email}>
                        <input type="email" className={`field ${errors.email ? "field-invalid" : ""}`}
                      value={data.email} onChange={set("email")} placeholder="voce@empresa.com.br" />
                      </FormField>
                      <FormField label="Empresa">
                        <input type="text" className="field"
                      value={data.empresa} onChange={set("empresa")} placeholder="Opcional" />
                      </FormField>
                      <FormField label="Telefone / WhatsApp">
                        <input type="tel" className="field"
                      value={data.telefone} onChange={set("telefone")} placeholder="Opcional" />
                      </FormField>
                      <FormField label="Tipo de projeto" required error={errors.tipo} className="sm:col-span-2">
                        <div className="relative">
                          <select className={`field appearance-none pr-10 ${errors.tipo ? "field-invalid" : ""}`}
                        value={data.tipo} onChange={set("tipo")}>
                            <option value="">Selecione…</option>
                            <option>Sistema sob medida</option>
                            <option>Automação</option>
                            <option>Site institucional</option>
                            <option>Dashboard / BI</option>
                            <option>Consultoria</option>
                            <option>Outro</option>
                          </select>
                          <svg width="12" height="12" viewBox="0 0 12 12" className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-chrome-300">
                            <path d="M2 4l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </div>
                      </FormField>
                      <FormField label="Sobre o que você precisa" required error={errors.msg} className="sm:col-span-2">
                        <textarea rows="5" className={`field resize-none ${errors.msg ? "field-invalid" : ""}`}
                      value={data.msg} onChange={set("msg")}
                      placeholder="O problema, o que já tentou, prazos, qualquer contexto que ajude." />
                      </FormField>
                    </div>

                    <div className="mt-6 flex items-center justify-between gap-4 flex-wrap">
                      <p className="text-[12px] text-chrome-300 max-w-[36ch]">
                        Ao enviar, você concorda em receber uma resposta por e-mail.
                        Não fazemos disparo em massa.
                      </p>
                      <button type="submit" className="btn btn-primary">
                        Enviar
                        <IconArrowRight size={16} />
                      </button>
                    </div>
                  </>
                }
              </form>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);

}

function FormField({ label, required, error, children, className = "" }) {
  return (
    <label className={`flex flex-col gap-1.5 ${className}`}>
      <span className="text-[12px] font-medium text-chrome-200 tracking-[-0.005em]">
        {label}{required && <span className="text-chrome-300 ml-1">*</span>}
      </span>
      {children}
      {error && <span className="text-[11.5px]" style={{ color: "#E08597" }}>{error}</span>}
    </label>);

}

/* ─────────────── Footer ─────────────── */
function Footer() {
  return (
    <footer className="relative pt-20 pb-10 hairline-t">
      <div className="max-w-[1200px] mx-auto px-5 md:px-8">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
          <div className="md:col-span-5">
            <a href="#top" className="inline-flex items-center gap-3 select-none">
              <img src="assets/spck-mono.png" alt=""
              className="logo-mono w-14 h-14 object-contain" draggable="false" />
              <span className="text-[26px] font-semibold tracking-[-0.015em]">SPCK</span>
            </a>
            <p className="mt-5 text-chrome-200 text-[14.5px] max-w-[36ch] leading-[1.55]">
              Empresa de tecnologia para PMEs e empreendedores no Brasil.
            </p>
            <p className="mt-3 text-chrome-300 text-[12.5px]">Em memória ao Spock 🐾 

            </p>
          </div>
          <div className="md:col-span-3">
            <h4 className="eyebrow mb-4">Navegação</h4>
            <ul className="flex flex-col gap-2.5 text-[14px] text-chrome-100">
              <li><a className="hover:text-white" href="#servicos">Serviços</a></li>
              <li><a className="hover:text-white" href="#processo">Processo</a></li>
              <li><a className="hover:text-white" href="#porque">Por que a SPCK</a></li>
              <li><a className="hover:text-white" href="#contato">Contato</a></li>
            </ul>
          </div>
          <div className="md:col-span-4">
            <h4 className="eyebrow mb-4">Contato</h4>
            <ul className="flex flex-col gap-2.5 text-[14px] text-chrome-100">
              <li><a className="hover:text-white inline-flex items-center gap-2" href="mailto:spck@spck.com.br"><IconMail size={14} />spck@spck.com.br</a></li>
            </ul>
          </div>
        </div>

        <div className="mt-14 pt-6 hairline-t flex flex-col md:flex-row items-start md:items-center justify-between gap-3
                        text-[12px] text-chrome-300 font-mono">
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          <span>© 2026 SPCK Desenvolvimento de Software</span>
          <span>CNPJ 00.000.000/0001-00 · São Paulo, BR</span>
        </div>
      </div>
    </footer>);

}



/* ─────────────── App ─────────────── */
function App() {
  const formRef = useRef(null);

  // apply accent vars to :root
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--accent", SPCK_CONFIG.accent);
    r.setProperty("--accent-deep", SPCK_CONFIG.accentDeep);
    r.setProperty("--accent-light", SPCK_CONFIG.accentLight);
    r.setProperty("--accent-soft", SPCK_CONFIG.accentSoft);
  }, []);

  const goContact = useCallback(() => {
    document.getElementById("contato")?.scrollIntoView
    // safe alternative
;
    const el = document.getElementById("contato");
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  }, []);

  return (
    <div className="min-h-screen">
      <Header onCTA={goContact} />
      <main>
        <Hero
          headlineIdx={SPCK_CONFIG.headlineIdx}
          showCircuit={SPCK_CONFIG.showCircuit}
          density={SPCK_CONFIG.density}
          onCTA={goContact} />
        <CredStrip />
        <Services />
        <Process />
        <Why />
        <MidCTA onCTA={goContact} />
        <Contact formRef={formRef} />
      </main>
      <Footer />
    </div>);

}

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