// Group VIDA'S Digital Studios — landing components (v2: purple/black, modern sans)
const { useState, useEffect, useRef } = React;

// ---------- Primitives ----------

// Realistic Lisbon scene placeholder — SVG-composed skyline/landmark illustrations
// No photos available; we compose stylised scene illustrations with purple duotone.
const LisbonScene = ({ kind = "tejo", label, ratio = "16/9" }) => {
  const scenes = {
    // River Tejo + 25 de Abril bridge silhouette
    tejo: (
      <svg viewBox="0 0 400 225" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
        <defs>
          <linearGradient id="skyT" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1a0f2e"/><stop offset="1" stopColor="#3d1470"/>
          </linearGradient>
          <linearGradient id="waterT" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#2a0f4a"/><stop offset="1" stopColor="#0a0415"/>
          </linearGradient>
        </defs>
        <rect width="400" height="225" fill="url(#skyT)"/>
        {/* sun */}
        <circle cx="300" cy="90" r="22" fill="#C6F03C" opacity="0.9"/>
        <circle cx="300" cy="90" r="40" fill="#C6F03C" opacity="0.15"/>
        {/* far hills */}
        <path d="M0,140 L60,120 L120,135 L180,115 L240,130 L300,118 L360,128 L400,120 L400,160 L0,160 Z" fill="#0a0415" opacity="0.8"/>
        {/* bridge towers */}
        <rect x="120" y="85" width="4" height="55" fill="#0a0415"/>
        <rect x="240" y="85" width="4" height="55" fill="#0a0415"/>
        {/* bridge cables */}
        <path d="M122,85 Q180,110 242,85" stroke="#0a0415" strokeWidth="1.2" fill="none"/>
        <path d="M122,85 Q180,120 242,85" stroke="#0a0415" strokeWidth="0.8" fill="none" opacity="0.6"/>
        {/* bridge deck */}
        <rect x="60" y="140" width="280" height="2" fill="#0a0415"/>
        {/* water */}
        <rect y="142" width="400" height="83" fill="url(#waterT)"/>
        {/* water reflections */}
        {[150, 160, 170, 180, 190, 200, 210].map((y, i) => (
          <rect key={i} x={0} y={y} width="400" height="0.5" fill="#C6F03C" opacity={0.08 + Math.random()*0.1}/>
        ))}
        <rect x="290" y="150" width="20" height="1" fill="#C6F03C" opacity="0.5"/>
        <rect x="295" y="155" width="12" height="1" fill="#C6F03C" opacity="0.4"/>
      </svg>
    ),
    // Alfama rooftops
    alfama: (
      <svg viewBox="0 0 400 225" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
        <defs>
          <linearGradient id="skyA" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#4a1f7a"/><stop offset="1" stopColor="#1a0a35"/>
          </linearGradient>
        </defs>
        <rect width="400" height="225" fill="url(#skyA)"/>
        {/* rooftops layered */}
        {[...Array(30)].map((_, i) => {
          const x = i * 14;
          const h = 40 + (i % 7) * 12;
          const y = 225 - h;
          return (
            <g key={i}>
              <rect x={x} y={y} width="14" height={h} fill={i % 2 ? "#0a0415" : "#180828"} stroke="#3d1470" strokeWidth="0.3"/>
              {/* roof triangle */}
              <polygon points={`${x},${y} ${x+7},${y-6} ${x+14},${y}`} fill="#C6F03C" opacity="0.35"/>
              {/* windows */}
              {h > 60 && <rect x={x+3} y={y+10} width="3" height="4" fill="#C6F03C" opacity="0.7"/>}
              {h > 80 && <rect x={x+8} y={y+22} width="3" height="4" fill="#C6F03C" opacity="0.5"/>}
            </g>
          );
        })}
        {/* church spire */}
        <rect x="180" y="80" width="18" height="70" fill="#0a0415"/>
        <polygon points="180,80 189,50 198,80" fill="#0a0415"/>
        <circle cx="189" cy="95" r="3" fill="#C6F03C"/>
      </svg>
    ),
    // Eléctrico 28 tram on cobbled street
    tram: (
      <svg viewBox="0 0 400 225" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
        <defs>
          <linearGradient id="skyTr" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#2a0f4a"/><stop offset="1" stopColor="#6a2aa8"/>
          </linearGradient>
        </defs>
        <rect width="400" height="225" fill="url(#skyTr)"/>
        {/* buildings left */}
        <rect x="0" y="40" width="100" height="185" fill="#0a0415"/>
        <rect x="100" y="60" width="80" height="165" fill="#160625"/>
        {/* buildings right */}
        <rect x="300" y="50" width="100" height="175" fill="#0a0415"/>
        <rect x="220" y="70" width="80" height="155" fill="#160625"/>
        {/* windows glow */}
        {[[20,70],[20,110],[60,90],[60,140],[120,100],[120,150],[240,90],[240,140],[320,80],[320,130],[360,100]].map(([x,y],i)=>(
          <rect key={i} x={x} y={y} width="6" height="8" fill="#C6F03C" opacity="0.55"/>
        ))}
        {/* street */}
        <rect y="180" width="400" height="45" fill="#0a0415"/>
        {/* tram rails */}
        <rect x="0" y="195" width="400" height="1" fill="#C6F03C" opacity="0.4"/>
        <rect x="0" y="208" width="400" height="1" fill="#C6F03C" opacity="0.4"/>
        {/* tram body */}
        <rect x="150" y="145" width="100" height="45" fill="#C6F03C"/>
        <rect x="155" y="152" width="20" height="14" fill="#1a0a35"/>
        <rect x="180" y="152" width="20" height="14" fill="#1a0a35"/>
        <rect x="205" y="152" width="20" height="14" fill="#1a0a35"/>
        <rect x="230" y="152" width="14" height="14" fill="#1a0a35"/>
        <circle cx="170" cy="192" r="5" fill="#0a0415"/>
        <circle cx="230" cy="192" r="5" fill="#0a0415"/>
        {/* tram number */}
        <text x="160" y="182" fontFamily="monospace" fontSize="8" fill="#1a0a35" fontWeight="700">28</text>
        {/* pole */}
        <rect x="198" y="120" width="1.5" height="25" fill="#0a0415"/>
      </svg>
    ),
    // Aerial / drone shot over Baixa
    aerial: (
      <svg viewBox="0 0 400 225" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
        <defs>
          <radialGradient id="aerG" cx="0.5" cy="0.4" r="0.7">
            <stop offset="0" stopColor="#6a2aa8"/><stop offset="1" stopColor="#0a0415"/>
          </radialGradient>
        </defs>
        <rect width="400" height="225" fill="url(#aerG)"/>
        {/* grid streets */}
        {[0,1,2,3,4,5,6,7].map(i => (
          <rect key={`h${i}`} y={30+i*26} width="400" height="1" fill="#C6F03C" opacity="0.18"/>
        ))}
        {[0,1,2,3,4,5,6,7,8,9,10].map(i => (
          <rect key={`v${i}`} x={20+i*36} width="1" height="225" fill="#C6F03C" opacity="0.18"/>
        ))}
        {/* blocks */}
        {[...Array(40)].map((_, i) => {
          const x = 22 + (i % 10) * 36;
          const y = 32 + Math.floor(i / 10) * 26;
          return <rect key={i} x={x} y={y} width="32" height="22" fill="#1a0a35" opacity={0.6 + (i%3)*0.15}/>;
        })}
        {/* drone reticle */}
        <circle cx="200" cy="110" r="30" fill="none" stroke="#C6F03C" strokeWidth="1" opacity="0.6"/>
        <line x1="170" y1="110" x2="185" y2="110" stroke="#C6F03C" strokeWidth="1"/>
        <line x1="215" y1="110" x2="230" y2="110" stroke="#C6F03C" strokeWidth="1"/>
        <line x1="200" y1="80" x2="200" y2="95" stroke="#C6F03C" strokeWidth="1"/>
        <line x1="200" y1="125" x2="200" y2="140" stroke="#C6F03C" strokeWidth="1"/>
      </svg>
    ),
    // Praça do Comércio arch
    praca: (
      <svg viewBox="0 0 400 225" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
        <defs>
          <linearGradient id="skyP" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#3d1470"/><stop offset="1" stopColor="#8a3ad0"/>
          </linearGradient>
        </defs>
        <rect width="400" height="225" fill="url(#skyP)"/>
        <circle cx="200" cy="90" r="30" fill="#C6F03C" opacity="0.85"/>
        {/* arch */}
        <rect x="140" y="100" width="120" height="100" fill="#0a0415"/>
        <path d="M160,200 L160,140 Q160,115 200,115 Q240,115 240,140 L240,200 Z" fill="#3d1470"/>
        {/* columns */}
        <rect x="148" y="120" width="4" height="80" fill="#C6F03C" opacity="0.4"/>
        <rect x="248" y="120" width="4" height="80" fill="#C6F03C" opacity="0.4"/>
        {/* top statue */}
        <rect x="195" y="85" width="10" height="15" fill="#0a0415"/>
        {/* ground */}
        <rect y="200" width="400" height="25" fill="#0a0415"/>
        {/* wings */}
        <rect x="0" y="140" width="140" height="60" fill="#0a0415"/>
        <rect x="260" y="140" width="140" height="60" fill="#0a0415"/>
        {[...Array(8)].map((_,i)=><rect key={i} x={15+i*15} y={155} width="6" height="10" fill="#C6F03C" opacity="0.5"/>)}
        {[...Array(8)].map((_,i)=><rect key={i} x={275+i*15} y={155} width="6" height="10" fill="#C6F03C" opacity="0.5"/>)}
      </svg>
    ),
    // Cais (dock) with boats
    cais: (
      <svg viewBox="0 0 400 225" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
        <defs>
          <linearGradient id="skyC" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1a0a35"/><stop offset="1" stopColor="#5a1f95"/>
          </linearGradient>
        </defs>
        <rect width="400" height="225" fill="url(#skyC)"/>
        <circle cx="80" cy="60" r="18" fill="#C6F03C" opacity="0.9"/>
        {/* far skyline */}
        <path d="M0,130 L40,120 L80,128 L120,118 L160,125 L200,115 L240,122 L280,112 L320,120 L360,115 L400,125 L400,160 L0,160 Z" fill="#0a0415"/>
        {/* water */}
        <rect y="145" width="400" height="80" fill="#160625"/>
        {[...Array(12)].map((_,i) => (
          <rect key={i} x={0} y={155 + i*6} width="400" height="1" fill="#C6F03C" opacity={0.05 + (i%3)*0.04}/>
        ))}
        {/* boat silhouettes */}
        <path d="M140,150 L180,150 L175,158 L145,158 Z" fill="#0a0415"/>
        <rect x="156" y="138" width="2" height="12" fill="#0a0415"/>
        <path d="M156,140 L170,148 L156,148 Z" fill="#C6F03C" opacity="0.6"/>

        <path d="M240,152 L290,152 L283,162 L247,162 Z" fill="#0a0415"/>
        <rect x="262" y="135" width="2" height="17" fill="#0a0415"/>
      </svg>
    ),
  };
  return (
    <div style={{
      aspectRatio: ratio, width: "100%", position: "relative", overflow: "hidden",
      background: "#0a0415", border: "1px solid rgba(198,240,60,0.15)",
    }}>
      {scenes[kind] || scenes.tejo}
      {label && (
        <div style={{
          position: "absolute", bottom: 12, left: 12,
          fontFamily: "'Geist', sans-serif", fontSize: 11, fontWeight: 500,
          letterSpacing: "0.14em", textTransform: "uppercase",
          color: "#F2EEE8", background: "rgba(10,4,21,0.7)",
          padding: "4px 10px", backdropFilter: "blur(8px)",
        }}>{label}</div>
      )}
      {/* corner ticks */}
      {[["top","left"],["top","right"],["bottom","right"]].map(([v,h],i)=>(
        <div key={i} style={{ position:"absolute", [v]:8, [h]:8, width:8, height:8,
          borderTop: v==="top" ? "1px solid #C6F03C" : "none",
          borderRight: h==="right" ? "1px solid #C6F03C" : "none",
          borderLeft: h==="left" ? "1px solid #C6F03C" : "none",
          opacity: 0.7,
        }} />
      ))}
    </div>
  );
};

// Logo mark — real brand logo
const Logo = ({ size = 36 }) => (
  <img src="assets/logo.jpeg" alt="Group VIDA'S" width={size} height={size}
    style={{ width: size, height: size, borderRadius: "50%", objectFit: "cover", display: "block" }} />
);

const MonoLabel = ({ children, color }) => (
  <span style={{
    fontFamily: "'Geist Mono', 'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
    color: color || "var(--muted)", display: "inline-flex", alignItems: "center", gap: 10,
  }}>
    <span style={{ width: 6, height: 6, background: "var(--accent)", display:"inline-block", borderRadius: 1 }} />
    {children}
  </span>
);

// ---------- Nav ----------

const Nav = ({ onCta }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [["serviços","services"],["trabalho","work"],["consultoria","consultoria"],["2026","stats"],["contacto","contact"]];
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? "14px 32px" : "22px 32px",
      background: scrolled ? "rgba(10,4,21,0.82)" : "transparent",
      backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      borderBottom: scrolled ? "1px solid rgba(198,240,60,0.1)" : "1px solid transparent",
      transition: "all 260ms cubic-bezier(.2,.6,.2,1)",
      display: "flex", alignItems: "center", justifyContent: "space-between",
    }}>
      <a href="#top" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none", color: "inherit" }}>
        <Logo size={38}/>
        <div style={{ lineHeight: 1.1 }}>
          <div style={{ fontFamily: "'Geist', sans-serif", fontWeight: 600, fontSize: 15, letterSpacing: "-0.01em" }}>
            Group VIDA'S
          </div>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 9, letterSpacing: "0.28em", opacity: 0.55, marginTop: 2 }}>
            DIGITAL&nbsp;STUDIOS
          </div>
        </div>
      </a>

      <div style={{ display: "flex", gap: 28, alignItems: "center" }}>
        {links.map(([label, id]) => (
          <a key={id} href={`#${id}`} style={{
            fontFamily: "'Geist', sans-serif",
            fontSize: 13, fontWeight: 500, letterSpacing: "0.01em",
            color: "var(--fg)", opacity: 0.75, textDecoration: "none",
          }} onMouseEnter={e=>e.currentTarget.style.opacity=1}
             onMouseLeave={e=>e.currentTarget.style.opacity=0.75}>
            {label}
          </a>
        ))}
        <button onClick={onCta} style={{
          border: "none",
          background: "var(--accent)", color: "#0a0415",
          padding: "11px 20px", cursor: "pointer", borderRadius: 999,
          fontFamily: "'Geist', sans-serif", fontSize: 13, fontWeight: 600,
          letterSpacing: "0.01em",
        }}>
          Falar connosco →
        </button>
      </div>
    </nav>
  );
};

// ---------- Hero ----------

// Animated purple orb + particles
const HeroVisual = () => {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current; if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let w, h, raf;
    const resize = () => {
      const r = canvas.getBoundingClientRect();
      canvas.width = r.width * devicePixelRatio;
      canvas.height = r.height * devicePixelRatio;
      w = r.width; h = r.height;
      ctx.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0);
    };
    resize();
    window.addEventListener("resize", resize);
    const particles = Array.from({length: 60}, () => ({
      x: Math.random()*1, y: Math.random()*1,
      vx: (Math.random()-0.5)*0.0004, vy: (Math.random()-0.5)*0.0004,
      r: Math.random()*1.6+0.4,
    }));
    let t = 0;
    const draw = () => {
      t += 0.005;
      ctx.clearRect(0,0,w,h);
      // orb glow
      const cx = w*0.55, cy = h*0.5;
      const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.min(w,h)*0.55);
      grad.addColorStop(0, "rgba(138, 58, 208, 0.55)");
      grad.addColorStop(0.4, "rgba(92, 30, 160, 0.25)");
      grad.addColorStop(1, "rgba(10, 4, 21, 0)");
      ctx.fillStyle = grad;
      ctx.fillRect(0,0,w,h);

      // concentric rings
      for (let i=0; i<6; i++) {
        const r = 40 + i*28 + Math.sin(t+i)*4;
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, Math.PI*2);
        ctx.strokeStyle = `rgba(198, 240, 60, ${0.22 - i*0.03})`;
        ctx.lineWidth = 0.6;
        ctx.stroke();
      }

      // rotating dashed ring
      ctx.save();
      ctx.translate(cx, cy); ctx.rotate(t*2);
      ctx.beginPath();
      ctx.arc(0,0, 110, 0, Math.PI*2);
      ctx.setLineDash([4, 10]);
      ctx.strokeStyle = "rgba(198,240,60,0.6)";
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.translate(cx, cy); ctx.rotate(-t*1.3);
      ctx.beginPath();
      ctx.arc(0,0, 170, 0, Math.PI*2);
      ctx.setLineDash([2, 18]);
      ctx.strokeStyle = "rgba(138,58,208,0.7)";
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.restore();

      // particles
      particles.forEach(p => {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0 || p.x > 1) p.vx *= -1;
        if (p.y < 0 || p.y > 1) p.vy *= -1;
        ctx.beginPath();
        ctx.arc(p.x*w, p.y*h, p.r, 0, Math.PI*2);
        ctx.fillStyle = `rgba(198,240,60,${0.2 + p.r*0.2})`;
        ctx.fill();
      });

      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, []);
  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
      <canvas ref={canvasRef} style={{ width: "100%", height: "100%", display: "block" }}/>
    </div>
  );
};

const Hero = () => {
  const words = ["visíveis", "desejadas", "rentáveis"];
  const [w, setW] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setW(x => (x+1) % words.length), 2200);
    return () => clearInterval(id);
  }, []);
  return (
    <section id="top" style={{
      minHeight: "100vh", position: "relative", padding: "140px 32px 120px",
      display: "grid", gridTemplateColumns: "1fr", gap: 48, alignItems: "start",
      overflow: "hidden",
    }}>
      <HeroVisual/>
      <div style={{ position: "relative", zIndex: 2, maxWidth: 1100, margin: "0 auto", width: "100%" }}>
        <MonoLabel>Estúdio · Portugal Continental · 2024 — 2026</MonoLabel>
        <h1 style={{
          fontFamily: "'Geist', sans-serif", fontWeight: 500,
          fontSize: "clamp(52px, 8.5vw, 128px)",
          lineHeight: 0.94, margin: "32px 0 0",
          letterSpacing: "-0.035em",
        }}>
          Negócios locais<br/>
          tornam-se marcas<br/>
          <span style={{
            display: "inline-block",
            background: "linear-gradient(135deg, #C6F03C 0%, #8a3ad0 100%)",
            WebkitBackgroundClip: "text", backgroundClip: "text",
            color: "transparent", fontStyle: "italic", fontWeight: 400,
            position: "relative",
          }}>
            <span key={w} style={{ display: "inline-block", animation: "fadeUp 600ms cubic-bezier(.2,.6,.2,1) both" }}>
              {words[w]}.
            </span>
          </span>
        </h1>

        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end" }}>
          <p style={{
            maxWidth: 520, fontSize: 18, lineHeight: 1.55,
            color: "var(--muted-strong)", fontFamily: "'Geist', sans-serif", margin: 0,
          }}>
            Produção audiovisual, captação aérea com drone e gestão de presença digital
            para empresas locais e mediadores imobiliários em Portugal.
            Um estúdio. Três operações: <strong style={{color: "var(--fg)"}}>Produção · Distribuição · Visibilidade.</strong>
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap" }}>
            <a href="https://wa.me/351933137204" target="_blank" rel="noreferrer" style={{
              background: "var(--accent)", color: "#0a0415", padding: "16px 26px",
              textDecoration: "none", borderRadius: 999,
              fontFamily: "'Geist', sans-serif", fontSize: 14, fontWeight: 600,
              display: "inline-flex", alignItems: "center", gap: 10,
            }}>
              Agendar diagnóstico gratuito
              <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7h12m-4-4l4 4-4 4" stroke="#0a0415" strokeWidth="1.6" fill="none"/></svg>
            </a>
            <a href="#work" style={{
              border: "1px solid rgba(242,238,232,0.25)", color: "var(--fg)",
              padding: "16px 26px", textDecoration: "none", borderRadius: 999,
              fontFamily: "'Geist', sans-serif", fontSize: 14, fontWeight: 500,
            }}>
              Ver trabalho
            </a>
          </div>
        </div>

      </div>

      {/* scroll indicator */}
      <div style={{
        position: "absolute", bottom: 24, left: 32, right: 32, zIndex: 2,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontFamily: "'Geist Mono', monospace", fontSize: 10,
        letterSpacing: "0.22em", color: "var(--muted)",
      }}>
        <span>↓ SCROLL</span>
        <span>001 / 006</span>
      </div>
    </section>
  );
};

// ---------- Marquee ----------

const Marquee = () => {
  const items = ["VÍDEO INSTITUCIONAL", "DRONE 4K", "GOOGLE BUSINESS", "LANDING PAGES", "META ADS", "VÍDEO TOUR IMOBILIÁRIO", "FOTOGRAFIA AÉREA", "STORYTELLING", "RETAINERS MENSAIS", "CONSULTORIA DIGITAL"];
  return (
    <div style={{
      borderTop: "1px solid rgba(198,240,60,0.12)",
      borderBottom: "1px solid rgba(198,240,60,0.12)",
      padding: "24px 0", overflow: "hidden", position: "relative",
      background: "linear-gradient(90deg, rgba(138,58,208,0.08) 0%, rgba(10,4,21,0) 50%, rgba(138,58,208,0.08) 100%)",
    }}>
      <div style={{
        display: "flex", gap: 48, whiteSpace: "nowrap",
        animation: "marquee 40s linear infinite",
        fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: 22, letterSpacing: "-0.01em",
      }}>
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 48 }}>
            {it}
            <span style={{ color: "var(--accent)", fontSize: 18 }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
};

// ---------- Services ----------

const services = [
  {
    num: "01", title: "Audiovisual Comercial", scene: "alfama", sceneLabel: "Alfama, Lisboa",
    short: "Vídeos que vendem percepção.",
    detail: "Institucionais, promocionais, storytelling de marca e conteúdo nativo para redes sociais. Direção criativa própria — do briefing ao entregável final.",
    items: ["Vídeos institucionais", "Promocionais", "Storytelling", "Reels & Shorts"],
  },
  {
    num: "02", title: "Drone & Captação Aérea", scene: "aerial", sceneLabel: "Baixa · vista aérea",
    short: "Perspectiva que o concorrente não tem.",
    detail: "Fotografia e vídeo aéreo comercial, vídeos imobiliários, inspeções visuais e mapeamento. Equipamento certificado ANAC, operação com seguro.",
    items: ["Fotografia aérea 4K", "Vídeo imobiliário", "Inspeções visuais", "Mapeamento"],
  },
  {
    num: "03", title: "Presença Digital Local", scene: "tram", sceneLabel: "Chiado · eléctrico 28",
    short: "Visibilidade onde o cliente procura.",
    detail: "Google Business otimizado, landing pages que convertem, funis simples de aquisição e conteúdo estratégico pensado para mercado local.",
    items: ["Google Business", "Landing pages", "Funis de aquisição", "Conteúdo SEO local"],
  },
  {
    num: "04", title: "Imobiliário", scene: "tejo", sceneLabel: "Tejo · 25 de Abril",
    short: "Anúncios que fecham visitas.",
    detail: "Vídeo tour de imóveis, fotografia profissional, vídeos de impacto para anúncios e branding visual para mediadores. Vendemos o imóvel antes da visita.",
    items: ["Vídeo tour", "Fotografia profissional", "Anúncios de impacto", "Branding mediadores"],
  },
];

const ServiceRow = ({ s, open, onToggle }) => (
  <div style={{ borderTop: "1px solid rgba(198,240,60,0.1)" }}>
    <button onClick={onToggle} style={{
      width: "100%", background: "transparent", border: "none", color: "var(--fg)",
      padding: "36px 0", cursor: "pointer", textAlign: "left",
      display: "grid", gridTemplateColumns: "70px 1fr 1fr 50px", gap: 32, alignItems: "center",
    }}>
      <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, color: "var(--muted)", letterSpacing: "0.18em" }}>
        {s.num}
      </span>
      <span style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: "clamp(30px, 4vw, 52px)", lineHeight: 1, letterSpacing: "-0.025em" }}>
        {s.title}
      </span>
      <span style={{ fontFamily: "'Geist', sans-serif", fontSize: 15, color: "var(--muted-strong)" }}>
        {s.short}
      </span>
      <span style={{
        justifySelf: "end",
        width: 40, height: 40, borderRadius: "50%", border: "1px solid rgba(198,240,60,0.3)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        transition: "all 240ms", background: open ? "var(--accent)" : "transparent",
        color: open ? "#0a0415" : "var(--fg)",
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14">
          <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" strokeWidth="1.4" style={{ transition: "transform 240ms", transform: open ? "scaleY(0)" : "scaleY(1)", transformOrigin: "center" }}/>
          <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="1.4"/>
        </svg>
      </span>
    </button>
    <div style={{
      display: "grid", gridTemplateColumns: "70px 1fr 1fr 50px", gap: 32,
      maxHeight: open ? 700 : 0, overflow: "hidden",
      transition: "max-height 500ms cubic-bezier(.2,.6,.2,1), opacity 400ms",
      opacity: open ? 1 : 0,
    }}>
      <div/>
      <div style={{ paddingBottom: 48 }}>
        <p style={{ fontFamily: "'Geist', sans-serif", fontSize: 16, lineHeight: 1.6, color: "var(--fg)", maxWidth: 500, margin: 0 }}>
          {s.detail}
        </p>
        <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexWrap: "wrap", gap: 8 }}>
          {s.items.map(it => (
            <li key={it} style={{
              fontFamily: "'Geist', sans-serif", fontSize: 12, fontWeight: 500,
              padding: "8px 14px", border: "1px solid rgba(198,240,60,0.25)", borderRadius: 999,
              color: "var(--muted-strong)",
            }}>{it}</li>
          ))}
        </ul>
      </div>
      <div style={{ paddingBottom: 48, maxWidth: 420 }}>
        <LisbonScene kind={s.scene} label={s.sceneLabel} ratio="4/3"/>
      </div>
      <div/>
    </div>
  </div>
);

const Services = () => {
  const [openIdx, setOpenIdx] = useState(0);
  return (
    <section id="services" style={{ padding: "140px 32px 120px", position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "70px 1fr", gap: 32, marginBottom: 72 }}>
        <MonoLabel>§ 01</MonoLabel>
        <div>
          <h2 style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: "clamp(42px, 6vw, 82px)", margin: 0, lineHeight: 0.95, letterSpacing: "-0.035em" }}>
            Quatro pilares. <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 400 }}>Uma operação.</span>
          </h2>
          <p style={{ marginTop: 24, maxWidth: 560, fontSize: 16, lineHeight: 1.55, color: "var(--muted-strong)", fontFamily: "'Geist', sans-serif" }}>
            O mercado separa videomaker, marketing e drone em silos. Nós juntamos os três — produção, distribuição e visibilidade — num só estúdio.
          </p>
        </div>
      </div>
      <div>
        {services.map((s, i) => (
          <ServiceRow key={s.num} s={s} open={openIdx === i} onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}/>
        ))}
        <div style={{ borderTop: "1px solid rgba(198,240,60,0.1)" }} />
      </div>
    </section>
  );
};

// ---------- Consultoria (phased roadmap) ----------

const phases = [
  {
    n: "FASE 01", dur: "30 MIN · GRATUITO", t: "Diagnóstico digital",
    d: "Sessão inicial por videochamada. Mapeamos a presença atual — Google Business, redes sociais, website, concorrência local. Saem um relatório visual e três hipóteses de ganho imediato.",
    bullets: ["Auditoria de visibilidade", "Análise de concorrentes locais", "Identificação de 3 oportunidades prioritárias"],
    scene: "praca", sceneLabel: "Praça do Comércio",
  },
  {
    n: "FASE 02", dur: "SEMANA 1", t: "Plano editorial & estratégia",
    d: "Desenhamos um calendário de produção mensal alinhado ao funil do negócio: atração, autoridade e conversão. Definimos formatos, tom e pilares de conteúdo específicos para o segmento.",
    bullets: ["Calendário editorial 90 dias", "Pilares de conteúdo & narrativa", "Métricas de sucesso acordadas"],
    scene: "alfama", sceneLabel: "Alfama",
  },
  {
    n: "FASE 03", dur: "2 – 3 DIAS", t: "Produção no terreno",
    d: "Dias de captação com equipa completa: vídeo, drone e fotografia na mesma sessão. Optimizamos deslocações e logística para extrair volume útil de conteúdo para 30 a 60 dias.",
    bullets: ["Vídeo multicâmara", "Captação aérea ANAC", "Fotografia editorial & still"],
    scene: "tram", sceneLabel: "Chiado",
  },
  {
    n: "FASE 04", dur: "CONTÍNUO", t: "Distribuição & tráfego",
    d: "Publicação calendarizada, optimização do perfil Google Business, SEO local, e — quando o plano inclui — gestão de anúncios Meta e Google para o bairro ou cidade onde o negócio está.",
    bullets: ["Publicação multicanal", "Google Business contínuo", "Meta Ads geolocalizado"],
    scene: "aerial", sceneLabel: "Vista aérea · Baixa",
  },
  {
    n: "FASE 05", dur: "MENSAL", t: "Relatório & iteração",
    d: "Revisão mensal: alcance, contactos gerados, custo por lead, evolução face ao mês anterior. Iteramos sobre dados, nunca sobre achismo. Ajustamos formatos, horários e foco geográfico.",
    bullets: ["Painel de métricas", "Revisão estratégica mensal", "Iteração com base em dados"],
    scene: "cais", sceneLabel: "Cais do Sodré",
  },
];

const Consultoria = () => {
  const [active, setActive] = useState(0);
  return (
    <section id="consultoria" style={{ padding: "140px 32px 120px", borderTop: "1px solid rgba(198,240,60,0.1)", background: "var(--panel)", position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "70px 1fr", gap: 32, marginBottom: 64 }}>
        <MonoLabel>§ 02</MonoLabel>
        <div>
          <h2 style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: "clamp(42px, 6vw, 82px)", margin: 0, lineHeight: 0.95, letterSpacing: "-0.035em" }}>
            Consultoria <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 400 }}>fase a fase.</span>
          </h2>
          <p style={{ marginTop: 24, maxWidth: 620, fontSize: 16, lineHeight: 1.55, color: "var(--muted-strong)", fontFamily: "'Geist', sans-serif" }}>
            Um processo claro, executado mês a mês. Começa com um diagnóstico gratuito e evolui até um sistema recorrente de aquisição — sem projeto único, sem surpresas.
          </p>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 48 }}>
        {/* phase list */}
        <div>
          {phases.map((p, i) => (
            <button key={p.n} onClick={() => setActive(i)} style={{
              width: "100%", textAlign: "left", cursor: "pointer",
              background: active === i ? "rgba(198,240,60,0.06)" : "transparent",
              border: "none", borderLeft: `2px solid ${active === i ? "var(--accent)" : "rgba(198,240,60,0.15)"}`,
              padding: "22px 24px", color: "var(--fg)",
              display: "flex", flexDirection: "column", gap: 8,
              transition: "all 220ms",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: active === i ? "var(--accent)" : "var(--muted)" }}>{p.n}</span>
                <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 9, letterSpacing: "0.18em", color: "var(--muted)" }}>{p.dur}</span>
              </div>
              <div style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: 24, letterSpacing: "-0.02em" }}>
                {p.t}
              </div>
            </button>
          ))}
        </div>

        {/* active detail */}
        <div key={active} style={{ animation: "fadeUp 500ms cubic-bezier(.2,.6,.2,1) both" }}>
          <LisbonScene kind={phases[active].scene} label={phases[active].sceneLabel} ratio="16/10"/>
          <div style={{ marginTop: 28 }}>
            <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "var(--accent)" }}>{phases[active].n}</div>
            <h3 style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: 40, letterSpacing: "-0.025em", margin: "8px 0 16px", lineHeight: 1 }}>
              {phases[active].t}
            </h3>
            <p style={{ fontFamily: "'Geist', sans-serif", fontSize: 16, lineHeight: 1.6, color: "var(--muted-strong)", margin: 0, maxWidth: 560 }}>
              {phases[active].d}
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
              {phases[active].bullets.map(b => (
                <li key={b} style={{ display: "flex", gap: 12, alignItems: "baseline", fontFamily: "'Geist', sans-serif", fontSize: 15, color: "var(--fg)" }}>
                  <span style={{ width: 16, height: 1, background: "var(--accent)", flexShrink: 0, transform: "translateY(-4px)" }}/>
                  {b}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      {/* CTA within consultoria */}
      <div style={{
        marginTop: 80, padding: "40px 48px", display: "flex",
        justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24,
        border: "1px solid rgba(198,240,60,0.2)",
        background: "linear-gradient(135deg, rgba(138,58,208,0.15) 0%, rgba(198,240,60,0.06) 100%)",
      }}>
        <div>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "var(--accent)" }}>PRÓXIMO PASSO</div>
          <div style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: 30, letterSpacing: "-0.02em", marginTop: 6 }}>
            Fase 01 — <em style={{ color: "var(--muted-strong)", fontWeight: 400 }}>diagnóstico gratuito, 30 minutos.</em>
          </div>
        </div>
        <a href="https://wa.me/351933137204" target="_blank" rel="noreferrer" style={{
          background: "var(--accent)", color: "#0a0415", padding: "16px 28px",
          textDecoration: "none", borderRadius: 999,
          fontFamily: "'Geist', sans-serif", fontSize: 14, fontWeight: 600,
          display: "inline-flex", alignItems: "center", gap: 10,
        }}>
          Marcar agora
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7h12m-4-4l4 4-4 4" stroke="#0a0415" strokeWidth="1.6" fill="none"/></svg>
        </a>
      </div>
    </section>
  );
};

// ---------- Portfolio ----------

const portfolio = [
  { title: "Restaurante à beira-rio", segment: "local", scene: "tejo", meta: "VÍDEO + STILLS · 00:48", location: "Doca de Santo Amaro" },
  { title: "Empreendimento residencial", segment: "imobiliário", scene: "aerial", meta: "DRONE + TOUR · 02:04", location: "Parque das Nações" },
  { title: "Clínica boutique", segment: "local", scene: "alfama", meta: "BRANDING + FOTOGRAFIA", location: "Príncipe Real" },
  { title: "Apartamento de charme", segment: "imobiliário", scene: "tram", meta: "VÍDEO TOUR · 01:12", location: "Bairro Alto" },
  { title: "Ginásio urbano", segment: "local", scene: "praca", meta: "REEL MENSAL + ADS", location: "Baixa-Chiado" },
  { title: "Villa com vista", segment: "imobiliário", scene: "cais", meta: "AERIAL + CAMPANHA", location: "Cascais" },
];

const Portfolio = () => {
  const [filter, setFilter] = useState("tudo");
  const filters = ["tudo", "imobiliário", "local"];
  const shown = portfolio.filter(p => filter === "tudo" || p.segment === filter);
  return (
    <section id="work" style={{ padding: "120px 32px", borderTop: "1px solid rgba(198,240,60,0.1)" }}>
      <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 56, flexWrap: "wrap", gap: 24 }}>
        <div style={{ display: "grid", gridTemplateColumns: "70px 1fr", gap: 32 }}>
          <MonoLabel>§ 03</MonoLabel>
          <h2 style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: "clamp(42px, 6vw, 82px)", margin: 0, lineHeight: 0.95, letterSpacing: "-0.035em" }}>
            Trabalho selecionado
          </h2>
        </div>
        <div style={{ display: "flex", gap: 0, border: "1px solid rgba(198,240,60,0.2)", borderRadius: 999, padding: 4 }}>
          {filters.map(f => (
            <button key={f} onClick={() => setFilter(f)} style={{
              background: filter === f ? "var(--accent)" : "transparent",
              color: filter === f ? "#0a0415" : "var(--fg)",
              border: "none", padding: "8px 18px", cursor: "pointer", borderRadius: 999,
              fontFamily: "'Geist', sans-serif", fontSize: 12, fontWeight: 500,
              transition: "all 200ms",
            }}>{f}</button>
          ))}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16 }}>
        {shown.map((p, i) => {
          const span = i % 5 === 0 ? 4 : i % 5 === 1 ? 2 : i % 5 === 2 ? 3 : i % 5 === 3 ? 3 : 2;
          return (
            <div key={p.title} style={{ gridColumn: `span ${span}`, cursor: "pointer" }}
              onMouseEnter={e => { const img = e.currentTarget.querySelector(".ph"); if (img) img.style.transform = "scale(1.02)"; }}
              onMouseLeave={e => { const img = e.currentTarget.querySelector(".ph"); if (img) img.style.transform = "scale(1)"; }}
            >
              <div className="ph" style={{ transition: "transform 500ms cubic-bezier(.2,.6,.2,1)" }}>
                <LisbonScene kind={p.scene} label={p.location} ratio={span >= 4 ? "21/9" : span === 3 ? "4/3" : "3/4"}/>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14, alignItems: "baseline" }}>
                <div>
                  <div style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: 20, letterSpacing: "-0.015em" }}>{p.title}</div>
                  <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "var(--muted)", marginTop: 4, textTransform: "uppercase" }}>
                    {p.segment}
                  </div>
                </div>
                <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.16em", color: "var(--muted)" }}>
                  {p.meta}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
};

// ---------- Stats 2026 ----------

const Stats2026 = () => {
  const stats = [
    { big: "87%", label: "dos portugueses pesquisam um negócio online antes de o visitar", src: "Marktest Digital" },
    { big: "6h 42m", label: "tempo médio diário de utilização de internet em Portugal em 2026", src: "We Are Social PT" },
    { big: "72%", label: "dos consumidores locais confiam mais em empresas com vídeo", src: "Wyzowl 2026" },
    { big: "+184%", label: "crescimento do consumo de vídeo vertical em Portugal (2024 → 2026)", src: "Meta for Business" },
    { big: "3.2×", label: "mais pedidos de contacto em perfis Google Business com fotos profissionais", src: "Google Business Insights" },
    { big: "8 seg", label: "é o tempo médio de atenção de um visitante num anúncio imobiliário", src: "Idealista Labs" },
  ];
  // animated bars
  return (
    <section id="stats" style={{ padding: "140px 32px 120px", borderTop: "1px solid rgba(198,240,60,0.1)", position: "relative", overflow: "hidden" }}>
      {/* faint grid bg */}
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        backgroundImage: `linear-gradient(to right, rgba(198,240,60,0.04) 1px, transparent 1px),
                          linear-gradient(to bottom, rgba(198,240,60,0.04) 1px, transparent 1px)`,
        backgroundSize: "60px 60px", pointerEvents: "none",
      }}/>

      <div style={{ display: "grid", gridTemplateColumns: "70px 1fr auto", gap: 32, marginBottom: 72, alignItems: "end", position: "relative" }}>
        <MonoLabel>§ 04</MonoLabel>
        <h2 style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: "clamp(42px, 6vw, 82px)", margin: 0, lineHeight: 0.95, letterSpacing: "-0.035em" }}>
          Portugal digital <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 400 }}>2026.</span>
        </h2>
        <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "var(--muted)" }}>
          LIVE · ATUALIZADO Q1 2026
        </div>
      </div>

      {/* main chart strip */}
      <div style={{ position: "relative", marginBottom: 64, height: 220, border: "1px solid rgba(198,240,60,0.15)", padding: 24, background: "rgba(138,58,208,0.04)" }}>
        <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "var(--muted)", textTransform: "uppercase", marginBottom: 12 }}>
          Consumo de vídeo em Portugal · 2022 → 2026 (índice)
        </div>
        <svg viewBox="0 0 800 160" width="100%" height="160" preserveAspectRatio="none">
          {/* grid */}
          {[0,1,2,3,4].map(i => (
            <line key={i} x1="0" y1={i*40} x2="800" y2={i*40} stroke="rgba(198,240,60,0.1)" strokeWidth="0.5"/>
          ))}
          {/* bars */}
          {[
            ["2022", 45], ["2023", 62], ["2024", 84], ["2025", 118], ["2026", 160],
          ].map(([y, v], i) => {
            const x = 40 + i * 155;
            const h = (v/180) * 140;
            return (
              <g key={y}>
                <rect x={x} y={160-h} width="70" height={h} fill="#8a3ad0"/>
                <rect x={x} y={160-h} width="70" height="3" fill="#C6F03C"/>
                <text x={x+35} y={158-h-6} textAnchor="middle" fontFamily="Geist Mono" fontSize="11" fill="#C6F03C" fontWeight="600">+{v}%</text>
                <text x={x+35} y={175} textAnchor="middle" fontFamily="Geist Mono" fontSize="10" fill="rgba(242,238,232,0.55)">{y}</text>
              </g>
            );
          })}
          {/* trend line */}
          <polyline
            points="75,115 230,97 385,79 540,61 695,40"
            fill="none" stroke="#C6F03C" strokeWidth="1.5" strokeDasharray="3,4"
          />
          {[75,230,385,540,695].map((x, i) => <circle key={i} cx={x} cy={[115,97,79,61,40][i]} r="3" fill="#C6F03C"/>)}
        </svg>
      </div>

      {/* stat tiles */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {stats.map((s, i) => (
          <div key={i} style={{
            padding: "28px 24px", border: "1px solid rgba(198,240,60,0.12)",
            background: i === 1 || i === 4 ? "rgba(138,58,208,0.12)" : "transparent",
            position: "relative", minHeight: 180, display: "flex", flexDirection: "column",
          }}>
            <div style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: 56, letterSpacing: "-0.035em", color: "var(--accent)", lineHeight: 1 }}>
              {s.big}
            </div>
            <div style={{ fontFamily: "'Geist', sans-serif", fontSize: 14, lineHeight: 1.45, color: "var(--fg)", marginTop: 16, flex: 1 }}>
              {s.label}
            </div>
            <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 9, letterSpacing: "0.22em", color: "var(--muted)", textTransform: "uppercase", marginTop: 16, paddingTop: 14, borderTop: "1px solid rgba(198,240,60,0.1)" }}>
              Fonte · {s.src}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ---------- Contact ----------

const Contact = () => {
  const [form, setForm] = useState({ nome: "", empresa: "", email: "", segmento: "local", mensagem: "" });
  const [sent, setSent] = useState(false);
  const [errors, setErrors] = useState({});

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.nome.trim()) errs.nome = "obrigatório";
    if (!form.email.includes("@")) errs.email = "email inválido";
    if (!form.mensagem.trim()) errs.mensagem = "obrigatório";
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  };

  const field = (key, label, type = "text") => (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)" }}>
        {label} {errors[key] && <span style={{ color: "var(--accent)" }}>— {errors[key]}</span>}
      </span>
      <input type={type} value={form[key]} onChange={e => setForm({ ...form, [key]: e.target.value })} style={{
        background: "transparent", border: "none", borderBottom: "1px solid rgba(242,238,232,0.2)",
        padding: "10px 0", color: "var(--fg)", fontFamily: "'Geist', sans-serif", fontSize: 16, outline: "none",
      }} onFocus={e => e.target.style.borderBottomColor = "var(--accent)"}
         onBlur={e => e.target.style.borderBottomColor = "rgba(242,238,232,0.2)"} />
    </label>
  );

  return (
    <section id="contact" style={{ padding: "120px 32px 60px", borderTop: "1px solid rgba(198,240,60,0.1)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        <div>
          <MonoLabel>§ 05 · contacto</MonoLabel>
          <h2 style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: "clamp(52px, 7vw, 104px)", margin: "24px 0 0", lineHeight: 0.92, letterSpacing: "-0.035em" }}>
            Vamos construir<br/>
            <span style={{ fontStyle: "italic", fontWeight: 400, background: "linear-gradient(135deg, #C6F03C 0%, #8a3ad0 100%)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>a sua visibilidade.</span>
          </h2>
          <div style={{ marginTop: 48, display: "flex", flexDirection: "column", gap: 24, fontFamily: "'Geist', sans-serif" }}>
            {[
              ["WhatsApp direto", "+351 933 137 204", "https://wa.me/351933137204"],
              ["Email", "group.vidas@gmail.com", "mailto:group.vidas@gmail.com"],
              ["Instagram", "@groupvidas.negocios", "https://instagram.com/groupvidas.negocios"],
              ["Operação", "Portugal Continental · Rubens Ruan, gestor", null],
            ].map(([l, v, h]) => (
              <div key={l}>
                <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "var(--muted)", textTransform: "uppercase" }}>{l}</div>
                {h ? <a href={h} style={{ fontSize: 22, fontWeight: 500, color: "var(--fg)", textDecoration: "none", fontFamily: "'Geist', sans-serif", letterSpacing: "-0.01em" }}>{v}</a>
                   : <div style={{ fontSize: 18, color: "var(--fg)" }}>{v}</div>}
              </div>
            ))}
          </div>
        </div>

        <div>
          {sent ? (
            <div style={{ border: "1px solid var(--accent)", padding: 40, background: "rgba(198,240,60,0.06)" }}>
              <MonoLabel>✓ pedido recebido</MonoLabel>
              <div style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: 36, marginTop: 16, lineHeight: 1.05, letterSpacing: "-0.02em" }}>
                Obrigado, {form.nome.split(" ")[0]}.
              </div>
              <p style={{ fontFamily: "'Geist', sans-serif", fontSize: 15, color: "var(--muted-strong)", marginTop: 16, lineHeight: 1.55 }}>
                Respondemos em 24h úteis. Entretanto, pode adiantar por WhatsApp.
              </p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              {field("nome", "Nome")}
              {field("empresa", "Empresa (opcional)")}
              {field("email", "Email", "email")}
              <label style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)" }}>Segmento</span>
                <div style={{ display: "flex", gap: 8 }}>
                  {[["local","Negócio local"],["imobiliario","Imobiliário"],["media","Empresa média"]].map(([v,l]) => (
                    <button key={v} type="button" onClick={() => setForm({...form, segmento: v})} style={{
                      flex: 1, padding: "10px 12px",
                      background: form.segmento === v ? "var(--fg)" : "transparent",
                      color: form.segmento === v ? "#0a0415" : "var(--fg)",
                      border: "1px solid rgba(242,238,232,0.2)", borderRadius: 999,
                      fontFamily: "'Geist', sans-serif", fontSize: 12, fontWeight: 500, cursor: "pointer",
                    }}>{l}</button>
                  ))}
                </div>
              </label>
              <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)" }}>
                  Mensagem {errors.mensagem && <span style={{ color: "var(--accent)" }}>— {errors.mensagem}</span>}
                </span>
                <textarea rows={4} value={form.mensagem} onChange={e => setForm({ ...form, mensagem: e.target.value })} style={{
                  background: "transparent", border: "none", borderBottom: "1px solid rgba(242,238,232,0.2)",
                  padding: "10px 0", color: "var(--fg)", fontFamily: "'Geist', sans-serif", fontSize: 16,
                  resize: "vertical", outline: "none",
                }} onFocus={e => e.target.style.borderBottomColor = "var(--accent)"}
                   onBlur={e => e.target.style.borderBottomColor = "rgba(242,238,232,0.2)"} />
              </label>
              <button type="submit" style={{
                alignSelf: "flex-start", marginTop: 12,
                background: "var(--accent)", color: "#0a0415", border: "none",
                padding: "16px 28px", cursor: "pointer", borderRadius: 999,
                fontFamily: "'Geist', sans-serif", fontSize: 14, fontWeight: 600,
              }}>
                Enviar pedido →
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

// ---------- Footer ----------

const Footer = () => (
  <footer style={{ padding: "60px 32px 40px", borderTop: "1px solid rgba(198,240,60,0.1)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 24, alignItems: "center" }}>
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <div style={{ fontFamily: "'Geist', sans-serif", fontWeight: 500, fontSize: 15 }}>
        Group VIDA'S <span style={{ color: "var(--muted)" }}>— Digital Studios</span>
      </div>
    </div>
    <div style={{ display: "flex", gap: 32, fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "var(--muted)", textTransform: "uppercase" }}>
      <span>© 2026</span>
      <span>Portugal Continental</span>
      <span>v2.0</span>
    </div>
  </footer>
);

// ---------- WhatsApp float ----------

const WhatsFloat = () => (
  <a href="https://wa.me/351933137204" target="_blank" rel="noreferrer" aria-label="WhatsApp" style={{
    position: "fixed", bottom: 28, right: 28, zIndex: 40,
    width: 58, height: 58, borderRadius: "50%",
    background: "var(--accent)", color: "#0a0415",
    display: "flex", alignItems: "center", justifyContent: "center",
    textDecoration: "none", boxShadow: "0 10px 30px rgba(138,58,208,0.45), 0 0 0 0 rgba(198,240,60,0.5)",
    transition: "transform 200ms", animation: "pulseRing 2.4s ease-out infinite",
  }} onMouseEnter={e=>e.currentTarget.style.transform="scale(1.08)"}
     onMouseLeave={e=>e.currentTarget.style.transform="scale(1)"}>
    <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.5 14.4c-.3-.1-1.8-.9-2.1-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5s-.7-1.7-1-2.3c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1.1 2.8 1.2 3c.1.2 2.1 3.3 5.2 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.5A10 10 0 1012 2z"/>
    </svg>
  </a>
);

// expose
Object.assign(window, {
  Nav, Hero, Marquee, Services, Consultoria, Portfolio, Stats2026, Contact, Footer, WhatsFloat,
});
