/* global React, FramerMotion */
/* Página /websites — serviço Captixy Websites */
const { motion: mw, AnimatePresence: APw } = FramerMotion;
const { useState: uSw } = React;
const {
  FadeUp, WordsPullUpMultiStyle,
  IconCheck, IconArrowRight, IconSparkle, IconPlus, IconMinus,
  Navbar: NBw, CtaPill: CPw, Footer: FTw,
  EASE_EXPO: EEw,
} = window;

/* ============================================================
   HERO
============================================================ */
function WebsitesHero() {
  return (
    <section className="relative w-full p-3 md:p-5" style={{ minHeight: "max(720px, 100svh)" }}>
      <div className="relative w-full rounded-2xl md:rounded-[2rem] overflow-hidden bg-[#070B1F]"
        style={{ minHeight: "max(704px, calc(100svh - 2.5rem))" }}>

        <video autoPlay loop muted playsInline preload="auto" poster="assets/hero-poster.jpg"
          className="absolute inset-0 w-full h-full object-cover pointer-events-none">
          <source src="assets/hero.webm" type="video/webm" />
          <source src="assets/hero.mp4" type="video/mp4" />
        </video>
        <div className="absolute inset-0 dot-grid opacity-[0.18] pointer-events-none" />
        <div className="absolute inset-0 noise-overlay opacity-[0.18] mix-blend-overlay pointer-events-none" />
        <div className="absolute inset-0 pointer-events-none"
          style={{ background: "radial-gradient(ellipse at 50% 55%, transparent 0%, transparent 38%, rgba(7,11,31,0.65) 90%)" }} />
        <div className="absolute inset-0 pointer-events-none hidden md:block"
          style={{ background: "linear-gradient(90deg, rgba(7,11,31,0.90) 0%, rgba(7,11,31,0.65) 42%, rgba(7,11,31,0.22) 75%, rgba(7,11,31,0.05) 100%)" }} />
        <div className="absolute inset-0 pointer-events-none md:hidden"
          style={{ background: "linear-gradient(180deg, rgba(7,11,31,0.55) 0%, rgba(7,11,31,0.18) 38%, rgba(7,11,31,0.60) 100%)" }} />
        <div className="absolute -top-32 -left-32 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] pointer-events-none ai-glow opacity-45" />

        <NBw />

        {/* Eyebrow */}
        <mw.div
          initial={{ opacity: 0, y: -8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.4, ease: EEw }}
          className="absolute top-16 md:top-20 left-6 md:left-9 z-20 flex items-center gap-2.5"
        >
          <span className="relative inline-flex w-2 h-2">
            <span className="absolute inset-0 rounded-full bg-orange/70 animate-ping" />
            <span className="relative inline-flex w-2 h-2 rounded-full bg-orange" />
          </span>
          <span className="eyebrow-orange">Websites · feito em Portugal</span>
        </mw.div>

        {/* Content */}
        <div className="relative z-10 px-5 sm:px-7 md:px-10 py-10 md:py-20">
          <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
            <div className="lg:col-span-7">
              <mw.h1
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 1, delay: 0.35, ease: EEw }}
                className="text-primary tracking-[-0.04em] leading-[0.95] font-medium"
                style={{ fontSize: "clamp(36px, 6.5vw, 96px)" }}
              >
                O teu negócio<br />
                merece um site<br />
                <span className="serif italic text-orange">à altura.</span>
              </mw.h1>

              <mw.p
                initial={{ y: 18, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.9, delay: 0.6, ease: EEw }}
                className="mt-7 md:mt-9 text-primary/70 text-base md:text-lg max-w-lg leading-[1.5]"
              >
                Sites profissionais para pequenos negócios e profissionais.
                Entregues em dias, não meses. Com formação incluída para geres
                o conteúdo sozinho.
              </mw.p>

              <mw.div
                initial={{ y: 18, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.9, delay: 0.8, ease: EEw }}
                className="mt-8 md:mt-10 flex flex-wrap items-center gap-4"
              >
                <CPw href="#proposta" size="lg" variant="orange">Pedir proposta gratuita</CPw>
                <a href="#pacotes" className="text-sm text-primary/70 hover:text-primary transition-colors link-underline inline-flex items-center gap-2">
                  Ver pacotes
                  <IconArrowRight className="w-3.5 h-3.5" />
                </a>
              </mw.div>

              <mw.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 1, delay: 1.0 }}
                className="mt-7 flex flex-wrap items-center gap-5 text-[11px] text-primary/45 tracking-wide"
              >
                {["Mobile-first", "Optimizado para Google", "Formação incluída"].map((t) => (
                  <span key={t} className="flex items-center gap-2">
                    <IconCheck className="w-3 h-3 text-orange" />
                    {t}
                  </span>
                ))}
              </mw.div>
            </div>

            {/* Right: mini site preview card */}
            <div className="hidden lg:flex lg:col-span-5 justify-end items-center">
              <WebsitesMockup />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WebsitesMockup() {
  const ready = window.useDeferredMount(300);
  return (
    <mw.div
      initial={{ opacity: 0, y: 30, scale: 0.96 }}
      animate={ready ? { opacity: 1, y: 0, scale: 1 } : {}}
      transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1], delay: 0.2 }}
      className="relative w-[300px] md:w-[320px]"
    >
      {/* Browser mockup */}
      <div className="rounded-2xl bg-[#111530]"
        style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.08), 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 60px -20px rgba(255,107,115,0.18)" }}>
        {/* Browser chrome */}
        <div className="flex items-center gap-2 px-4 py-3 border-b border-white/5">
          <span className="w-2.5 h-2.5 rounded-full bg-[#FF5F57]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#FEBC2E]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#28C840]" />
          <div className="flex-1 mx-3 rounded-full bg-[#1A1E3A] hairline px-3 py-1 text-[10px] text-primary/40">
            meusite.pt
          </div>
        </div>
        {/* Site content preview */}
        <div className="p-5 space-y-3">
          {/* Hero bar */}
          <div className="rounded-xl bg-[#1A1E3A] p-4">
            <div className="w-3/4 h-3 rounded-full bg-primary/20 mb-2" />
            <div className="w-1/2 h-2 rounded-full bg-primary/10 mb-4" />
            <div className="w-28 h-7 rounded-full bg-orange/50" />
          </div>
          {/* Content blocks */}
          <div className="grid grid-cols-2 gap-2">
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className="rounded-lg bg-[#1A1E3A] p-3">
                <div className="w-6 h-6 rounded-lg bg-orange/20 mb-2" />
                <div className="w-full h-2 rounded-full bg-primary/15 mb-1" />
                <div className="w-2/3 h-2 rounded-full bg-primary/10" />
              </div>
            ))}
          </div>
          {/* Widget badge */}
          <div className="flex items-center justify-end">
            <div className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-full bg-orange/15 hairline"
              style={{ boxShadow: "0 0 0 1px rgba(255,107,115,0.3)" }}>
              <span className="w-1.5 h-1.5 rounded-full bg-orange" />
              <span className="text-[10px] text-orange">Assistente AI</span>
            </div>
          </div>
        </div>
      </div>
    </mw.div>
  );
}

/* ============================================================
   O PROBLEMA
============================================================ */
function TheProblem() {
  return (
    <section className="bg-[#070B1F] px-5 md:px-8 py-20 md:py-28 border-y border-white/5">
      <div className="max-w-5xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
          <FadeUp>
            <div>
              <div className="eyebrow-orange mb-5">O problema</div>
              <h2 className="text-primary text-2xl sm:text-3xl md:text-4xl tracking-tight leading-[1.05] mb-6">
                Sem site, o teu negócio<br />
                <span className="serif italic text-orange/85">não existe online.</span>
              </h2>
              <p className="text-primary/60 text-sm md:text-base leading-relaxed">
                As redes sociais não substituem ter uma casa própria online. Um perfil
                de Instagram ou Facebook não transmite a mesma confiança que um site profissional
                — e não aparece no Google quando alguém pesquisa o teu serviço.
              </p>
            </div>
          </FadeUp>
          <FadeUp delay={0.2}>
            <div className="space-y-3">
              {[
                { bad: "«Não encontro o teu site»", good: "Site profissional e encontrável" },
                { bad: "«Parece pouco profissional»", good: "Design que transmite confiança" },
                { bad: "«Não sabia que existias»", good: "Visível no Google" },
                { bad: "«Onde é que contacto?»", good: "Assistente capta o lead 24/7" },
              ].map((it, i) => (
                <div key={i} className="flex items-start gap-3 p-4 rounded-xl bg-[#1A1E3A] hairline">
                  <div className="flex-1 min-w-0">
                    <div className="text-[11px] text-primary/35 line-through mb-0.5">{it.bad}</div>
                    <div className="text-sm text-primary/80">{it.good}</div>
                  </div>
                  <IconCheck className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
                </div>
              ))}
            </div>
          </FadeUp>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PACOTES
============================================================ */
function PackagesSection() {
  return (
    <section id="pacotes" className="relative bg-[#070B1F] px-5 md:px-8 py-24 md:py-36 overflow-hidden">
      <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[80vw] h-[80vw] max-w-[900px] max-h-[900px] rounded-full pointer-events-none"
        style={{ background: "radial-gradient(circle, rgba(255,107,115,0.08), transparent 60%)", filter: "blur(60px)" }} />
      <div className="max-w-7xl mx-auto relative">
        <div className="text-center mb-14 md:mb-20">
          <FadeUp><div className="eyebrow-orange mb-5">Pacotes</div></FadeUp>
          <WordsPullUpMultiStyle
            justify="center"
            className="text-3xl sm:text-4xl md:text-5xl text-primary leading-[1.02] max-w-3xl mx-auto"
            segments={[
              { text: "Dois pacotes,",  className: "font-normal" },
              { text: "sem surpresas.", className: "serif italic font-normal text-orange" },
            ]}
          />
          <FadeUp delay={0.25}>
            <p className="mt-6 max-w-xl mx-auto text-primary/60 text-sm md:text-base leading-relaxed">
              Preço fixo, sem custos escondidos. O que está na lista, está entregue.
            </p>
          </FadeUp>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5 max-w-4xl mx-auto">
          <PackageCard
            name="Landing Page Profissional"
            price="350€"
            priceNote="pagamento único"
            tagline="Para quem precisa de uma presença online rápida e profissional."
            deliveryTime="5–7 dias úteis"
            features={[
              "One-pager profissional, mobile-first",
              "Formulário ou CTA de contacto",
              "Optimização básica para Google (SEO)",
              "Domínio configurado (.pt ou .com)",
              "Certificado SSL incluído",
              "Formação de 1 hora para gerir o conteúdo",
            ]}
            highlight={false}
          />
          <PackageCard
            name="Website Completo"
            price="850€"
            priceNote="pagamento único"
            tagline="Para negócios que precisam de mais páginas e maior flexibilidade."
            deliveryTime="10–14 dias úteis"
            features={[
              "Tudo da Landing Page",
              "Site multi-página (até 6 páginas)",
              "Backoffice para gerir conteúdo",
              "Secções: serviços, sobre, galeria",
              "Blog opcional",
              "Email profissional configurado",
              "Formação de 2 horas + suporte 30 dias",
            ]}
            highlight
          />
        </div>

        <FadeUp delay={0.5}>
          <p className="mt-10 text-center text-xs text-primary/40 max-w-xl mx-auto leading-relaxed">
            Todos os sites podem incluir o Captixy Assistente Virtual integrado para quem subscrever o serviço.
            Alojamento anual não incluído (recomendamos fornecedores nacionais).
          </p>
        </FadeUp>
      </div>
    </section>
  );
}

function PackageCard({ name, price, priceNote, tagline, deliveryTime, features, highlight }) {
  return (
    <FadeUp>
      <div
        className={`relative rounded-2xl md:rounded-3xl p-7 md:p-9 h-full flex flex-col ${
          highlight ? "bg-[#1A1E3A]" : "bg-[#111530]"
        }`}
        style={highlight
          ? { boxShadow: "0 0 0 1px rgba(255,107,115,0.25), 0 30px 80px -20px rgba(0,0,0,0.5)" }
          : { boxShadow: "0 0 0 1px rgba(255,255,255,0.07), 0 20px 60px -15px rgba(0,0,0,0.4)" }
        }
      >
        {highlight && (
          <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3.5 py-1 rounded-full popular-badge text-[10px] tracking-[0.18em] uppercase font-medium z-10">
            Mais popular
          </div>
        )}

        <div className="mb-2">
          <h3 className="text-primary text-xl md:text-2xl tracking-tight font-medium leading-tight">{name}</h3>
        </div>

        <div className="mt-5">
          <div className="flex items-baseline gap-2">
            <span className={`text-4xl md:text-5xl font-medium tracking-tight ${highlight ? "text-gradient-brand" : "text-primary"}`}>
              {price}
            </span>
          </div>
          <div className="text-xs text-primary/45 mt-1">{priceNote}</div>
        </div>

        <p className="mt-5 text-sm text-primary/60 leading-relaxed">{tagline}</p>

        <div className="mt-5 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-orange/10 text-[11px] text-orange self-start">
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="w-3 h-3">
            <circle cx="8" cy="8" r="6" /><path d="M8 5v3l2 2" />
          </svg>
          Entrega em {deliveryTime}
        </div>

        <ul className="mt-7 space-y-3 flex-1">
          {features.map((f, i) => (
            <li key={i} className="flex items-start gap-2.5 text-sm text-primary/80 leading-snug">
              <IconCheck className="w-3.5 h-3.5 mt-0.5 shrink-0 text-emerald-400/80" />
              <span>{f}</span>
            </li>
          ))}
        </ul>

        <div className="mt-8">
          <CPw href="#proposta" variant={highlight ? "orange" : "ghost-cream"} size="sm">
            Pedir proposta gratuita
          </CPw>
        </div>
      </div>
    </FadeUp>
  );
}

/* ============================================================
   PROCESSO
============================================================ */
function ProcessSection() {
  const steps = [
    {
      n: "01",
      title: "Conversa inicial",
      body: "Falas-nos do negócio, do que precisas e o que já tens. Sem formulários, sem jargão.",
    },
    {
      n: "02",
      title: "Proposta",
      body: "Enviamos uma proposta detalhada com o que incluímos, o prazo e o preço. Sem surpresas.",
    },
    {
      n: "03",
      title: "Construção",
      body: "Tratamos de tudo: design, textos, imagens, domínio e configuração técnica.",
    },
    {
      n: "04",
      title: "Entrega e formação",
      body: "Entregamos o site, fazemos a formação para geres sozinho e ficamos disponíveis para dúvidas.",
    },
  ];

  return (
    <section className="bg-[#111530] px-5 md:px-8 py-24 md:py-32 border-y border-white/5">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-14 md:mb-20">
          <FadeUp><div className="eyebrow-orange mb-5">O processo</div></FadeUp>
          <WordsPullUpMultiStyle
            justify="center"
            className="text-3xl sm:text-4xl md:text-5xl text-primary leading-[1.02] max-w-3xl mx-auto"
            segments={[
              { text: "Em 4 passos,", className: "font-normal" },
              { text: "tens um site pronto.", className: "serif italic font-normal text-orange" },
            ]}
          />
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
          {steps.map((s, i) => (
            <FadeUp key={s.n} delay={i * 0.1}>
              <div className="relative bg-[#1A1E3A] rounded-2xl p-6 md:p-7 h-full hairline">
                <div className="absolute -top-4 -right-4 text-[80px] leading-none font-medium tracking-tighter pointer-events-none select-none"
                  style={{ color: "rgba(247,248,255,0.04)" }}>
                  {s.n}
                </div>
                <div className="eyebrow-orange mb-4">Passo {s.n}</div>
                <h3 className="text-primary text-lg md:text-xl tracking-tight leading-tight mb-3">{s.title}</h3>
                <p className="text-primary/55 text-sm leading-relaxed">{s.body}</p>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SINERGIA COM ASSISTANT
============================================================ */
function WebsitesSynergy() {
  return (
    <section className="relative bg-[#070B1F] px-5 md:px-8 py-20 md:py-28 overflow-hidden border-b border-white/5">
      <div className="max-w-5xl mx-auto">
        <div className="relative overflow-hidden rounded-2xl md:rounded-3xl bg-[#111530] hairline-strong px-6 sm:px-10 md:px-14 py-12 md:py-16">
          <div className="absolute inset-0 mesh opacity-30 pointer-events-none" />

          <div className="relative grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
            <div className="md:col-span-8">
              <FadeUp>
                <div className="eyebrow-orange mb-5 flex items-center gap-2">
                  <IconSparkle className="w-3 h-3" />
                  Integração incluída
                </div>
              </FadeUp>
              <WordsPullUpMultiStyle
                justify="flex-start"
                className="text-2xl sm:text-3xl md:text-4xl text-primary leading-[1.05] max-w-2xl"
                segments={[
                  { text: "Todos os sites incluem o",       className: "font-normal" },
                  { text: "Assistente Virtual",             className: "serif italic font-normal text-orange" },
                  { text: "integrado, se o subscreveres.",  className: "font-normal" },
                ]}
              />
              <FadeUp delay={0.4}>
                <p className="mt-6 max-w-lg text-primary/60 text-sm leading-relaxed">
                  O widget do Assistente Virtual fica disponível no teu site, capturando
                  leads 24/7 enquanto os visitantes navegam. Um ecossistema completo.
                </p>
              </FadeUp>
              <FadeUp delay={0.5}>
                <div className="mt-7">
                  <a href="/assistant" className="group inline-flex items-center gap-2 text-sm text-primary/60 hover:text-primary transition-colors link-underline">
                    Saber mais sobre o Assistente Virtual
                    <IconArrowRight className="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform" />
                  </a>
                </div>
              </FadeUp>
            </div>
            <div className="md:col-span-4 flex justify-center md:justify-end">
              <div className="flex flex-col items-center gap-2">
                <div className="w-16 h-16 rounded-2xl bg-orange/15 flex items-center justify-center text-orange">
                  <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className="w-7 h-7">
                    <path d="M10 2a6 6 0 016 6v1a2 2 0 01-2 2H6a2 2 0 01-2-2V8a6 6 0 016-6z" />
                    <path d="M7 18h6M10 14v4" />
                  </svg>
                </div>
                <div className="text-xs text-primary/50 text-center">Assistente<br />Virtual</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FORMULÁRIO DE PROPOSTA
============================================================ */
function ProposalForm() {
  const [status, setStatus] = uSw("idle");
  const [form, setForm] = uSw({ nome: "", negocio: "", contacto: "", necessidade: "" });

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("loading");
    try {
      const res = await fetch("https://api.captixy.com/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tipo: "proposta", ...form }),
      });
      const data = await res.json();
      setStatus(data.success ? "success" : "error");
    } catch {
      setStatus("error");
    }
  }

  const field = (id, label, placeholder, type = "text") => (
    <div>
      <label htmlFor={id} className="block text-xs text-primary/50 mb-1.5 tracking-wide">{label}</label>
      <input
        id={id}
        type={type}
        value={form[id]}
        onChange={(e) => setForm((f) => ({ ...f, [id]: e.target.value }))}
        placeholder={placeholder}
        required
        className="w-full bg-[#1A1E3A] hairline rounded-xl px-4 py-3 text-sm text-primary placeholder-primary/30 outline-none focus:ring-1 focus:ring-orange/50 transition-shadow"
      />
    </div>
  );

  return (
    <section id="proposta" className="relative bg-[#070B1F] px-5 md:px-8 py-24 md:py-36 overflow-hidden">
      <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] rounded-full pointer-events-none"
        style={{ background: "radial-gradient(circle, rgba(255,107,115,0.08), transparent 60%)", filter: "blur(60px)" }} />
      <div className="max-w-4xl mx-auto relative">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-16">
          {/* Left */}
          <div className="md:col-span-5">
            <FadeUp><div className="eyebrow-orange mb-5">Pedir proposta</div></FadeUp>
            <WordsPullUpMultiStyle
              justify="flex-start"
              className="text-2xl sm:text-3xl md:text-4xl text-primary leading-[1.05] max-w-2xl"
              segments={[
                { text: "Proposta",    className: "font-normal" },
                { text: "gratuita",    className: "serif italic font-normal text-orange" },
                { text: "e sem compromisso.", className: "font-normal" },
              ]}
            />
            <FadeUp delay={0.35}>
              <p className="mt-7 text-primary/55 text-sm leading-relaxed">
                Preenche o formulário e respondemos em menos de 24 horas úteis.
                Se preferires, podes falar connosco directamente pelo email:
              </p>
              <a href="mailto:contact@captixy.com" className="mt-3 inline-block text-sm text-orange hover:text-orange/80 transition-colors link-underline">
                contact@captixy.com
              </a>
            </FadeUp>
          </div>

          {/* Right: form */}
          <div className="md:col-span-7">
            <FadeUp delay={0.2}>
              {status === "success" ? (
                <div className="rounded-2xl bg-[#1A1E3A] hairline p-8 text-center">
                  <div className="w-12 h-12 rounded-full bg-emerald-400/15 flex items-center justify-center mx-auto mb-4">
                    <IconCheck className="w-5 h-5 text-emerald-400" />
                  </div>
                  <h3 className="text-primary text-lg font-medium mb-2">Recebemos o pedido!</h3>
                  <p className="text-primary/55 text-sm leading-relaxed">
                    Respondemos em menos de 24 horas úteis com uma proposta personalizada.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  {field("nome",       "Nome",                   "O teu nome")}
                  {field("negocio",    "Negócio / profissão",    "Ex: Barbearia, Clínica, Consultor...")}
                  {field("contacto",   "Email ou telefone",      "Para te contactarmos")}
                  <div>
                    <label htmlFor="necessidade" className="block text-xs text-primary/50 mb-1.5 tracking-wide">
                      O que precisas?
                    </label>
                    <textarea
                      id="necessidade"
                      value={form.necessidade}
                      onChange={(e) => setForm((f) => ({ ...f, necessidade: e.target.value }))}
                      placeholder="Landing page, website completo, tens algum site existente que queres refazer..."
                      rows={4}
                      className="w-full bg-[#1A1E3A] hairline rounded-xl px-4 py-3 text-sm text-primary placeholder-primary/30 outline-none focus:ring-1 focus:ring-orange/50 transition-shadow resize-none"
                    />
                  </div>
                  <button
                    type="submit"
                    disabled={status === "loading"}
                    className="group inline-flex items-center gap-2 btn-coral rounded-full pl-5 pr-1.5 py-1.5 text-sm font-medium disabled:opacity-60"
                  >
                    {status === "loading" ? "A enviar..." : "Enviar pedido"}
                    <span className="inline-flex items-center justify-center bg-[#070B1F]/30 text-white rounded-full w-9 h-9 transition-transform group-hover:scale-110">
                      <IconArrowRight className="w-4 h-4" />
                    </span>
                  </button>
                  {status === "error" && (
                    <p className="text-xs text-red-400 mt-2">
                      Erro ao enviar. Tenta novamente ou contacta-nos pelo email.
                    </p>
                  )}
                </form>
              )}
            </FadeUp>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ
============================================================ */
function WebsitesFAQ() {
  const items = [
    { q: "O que preciso de fornecer?", a: "Idealmente, o logótipo do negócio, algumas fotos (ou avisas e tratamos nós), os textos principais e as informações de contacto. Se não tiveres nada, não há problema — ajudamos a criar." },
    { q: "O alojamento está incluído?", a: "O alojamento não está incluído no preço. Recomendamos fornecedores nacionais com preços anuais acessíveis (normalmente 30–60€/ano) e ajudamos a configurar." },
    { q: "Posso pedir alterações depois?", a: "Sim. Durante os primeiros 30 dias após entrega, pequenas alterações de conteúdo são gratuitas. Para alterações maiores ou novas funcionalidades, orçamentamos à parte." },
    { q: "Quanto tempo demora?", a: "Uma landing page demora 5 a 7 dias úteis após termos toda a informação. Um website completo demora 10 a 14 dias." },
    { q: "Trabalham com negócios fora de Portugal?", a: "Sim, trabalhamos com qualquer negócio de língua portuguesa. O nosso horário e suporte são em PT-PT." },
  ];
  const [open, setOpen] = uSw(-1);

  return (
    <section className="bg-[#070B1F] px-5 md:px-8 py-20 md:py-28">
      <div className="max-w-3xl mx-auto">
        <FadeUp><div className="eyebrow-orange mb-5">FAQ</div></FadeUp>
        <WordsPullUpMultiStyle
          justify="flex-start"
          className="text-2xl sm:text-3xl md:text-4xl text-primary leading-[1.02] mb-12"
          segments={[
            { text: "Perguntas",   className: "font-normal" },
            { text: "frequentes.", className: "serif italic font-normal text-orange" },
          ]}
        />
        <ul className="divide-y divide-white/5 border-t border-white/5">
          {items.map((it, i) => (
            <li key={i}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                className="w-full text-left py-5 flex items-center justify-between gap-4 group"
              >
                <span className="text-primary text-base md:text-lg pr-4 group-hover:translate-x-1 transition-transform">{it.q}</span>
                <span className="shrink-0 w-7 h-7 rounded-full bg-[#1A1E3A] hairline flex items-center justify-center text-primary/80">
                  {open === i ? <IconMinus className="w-3.5 h-3.5" /> : <IconPlus className="w-3.5 h-3.5" />}
                </span>
              </button>
              <APw initial={false}>
                {open === i && (
                  <mw.div key="x" initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.4, ease: EEw }} style={{ overflow: "hidden" }}>
                    <p className="pb-5 pr-8 text-primary/60 text-sm md:text-base leading-relaxed max-w-2xl">{it.a}</p>
                  </mw.div>
                )}
              </APw>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ============================================================
   ASSEMBLE
============================================================ */
function WebsitesApp() {
  return (
    <>
      <WebsitesHero />
      <TheProblem />
      <PackagesSection />
      <ProcessSection />
      <WebsitesSynergy />
      <ProposalForm />
      <WebsitesFAQ />
      <FTw />
    </>
  );
}

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