// All site sections for DigitallGood

const { useState, useEffect, useRef } = React;

const WA_LINK = "https://wa.me/5517992465472?text=Olá!%20Vi%20o%20site%20da%20DigitallGood%20e%20quero%20saber%20mais%20sobre%20fazer%20um%20site.";

/* ---------- Reusable: WhatsApp Icon ---------- */
function WAIcon({ className = "w-5 h-5" }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.272-.099-.471-.149-.67.15-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.371-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.263.489 1.694.626.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413"/>
    </svg>
  );
}

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

/* ---------- Reusable: Animated counter ---------- */
function Counter({ to, suffix = "", duration = 1600, decimals = 0 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let started = false;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const step = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(to * eased);
            if (p < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.5 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{decimals ? val.toFixed(decimals) : Math.round(val)}{suffix}</span>;
}

/* ---------- Navbar ---------- */
function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { href: '#inicio', label: 'Início' },
    { href: '#portfolio', label: 'Portfólio' },
    { href: '#servicos', label: 'Serviços' },
    { href: '#contato', label: 'Contato' },
  ];
  return (
    <header className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${scrolled ? 'nav-scrolled' : ''}`}>
      <nav className="max-w-7xl mx-auto px-5 sm:px-8 h-[68px] flex items-center justify-between">
        <a href="#inicio" className="flex items-center group">
          <img src="src/assets/logo/digitallgood-logo.svg" alt="DigitallGood" height="32" style={{height:'32px'}} />
        </a>
        <div className="hidden md:flex items-center gap-7">
          {links.map(l => (
            <a key={l.href} href={l.href} className="text-sm text-white/70 hover:text-white transition-colors font-medium">{l.label}</a>
          ))}
        </div>
        <div className="flex items-center gap-3">
          <a href={WA_LINK} target="_blank" rel="noopener" className="hidden sm:inline-flex items-center gap-2 bg-wa hover:bg-[#1fb858] transition-colors text-white text-sm font-semibold px-4 py-2.5 rounded-full">
            <WAIcon className="w-4 h-4" /> Falar no WhatsApp
          </a>
          <button aria-label="Menu" onClick={() => setOpen(o => !o)} className="md:hidden w-10 h-10 grid place-items-center rounded-full border border-white/10">
            <div className="space-y-1.5">
              <span className={`block w-5 h-px bg-white transition-transform ${open?'translate-y-[3px] rotate-45':''}`}></span>
              <span className={`block w-5 h-px bg-white transition-opacity ${open?'opacity-0':''}`}></span>
              <span className={`block w-5 h-px bg-white transition-transform ${open?'-translate-y-[3px] -rotate-45':''}`}></span>
            </div>
          </button>
        </div>
      </nav>
      {/* mobile menu */}
      <div className={`md:hidden overflow-hidden transition-all duration-300 ${open?'max-h-80':'max-h-0'} bg-[#0a0a0f]/95 backdrop-blur border-b border-white/10`}>
        <div className="px-6 py-4 flex flex-col gap-3">
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="text-white/80 hover:text-white text-base py-2 border-b border-white/5">{l.label}</a>
          ))}
          <a href={WA_LINK} target="_blank" rel="noopener" className="mt-2 inline-flex items-center justify-center gap-2 bg-wa text-white text-sm font-semibold px-4 py-3 rounded-full">
            <WAIcon className="w-4 h-4" /> Falar no WhatsApp
          </a>
        </div>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  const stackRef = useRef(null);
  useEffect(() => {
    const el = stackRef.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width - 0.5) * 2;
      const y = ((e.clientY - r.top) / r.height - 0.5) * 2;
      el.style.setProperty('--rx', `${-y * 6}deg`);
      el.style.setProperty('--ry', `${x * 8}deg`);
    };
    const onLeave = () => { el.style.setProperty('--rx', '0deg'); el.style.setProperty('--ry', '0deg'); };
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); };
  }, []);

  // parallax on scroll for hero glow
  const glowRef = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (!glowRef.current) return;
      glowRef.current.style.transform = `translate3d(0, ${window.scrollY * 0.25}px, 0)`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="inicio" className="relative pt-32 pb-24 lg:pt-40 lg:pb-32 overflow-hidden">
      {/* bg */}
      <div className="absolute inset-0 grid-bg opacity-[0.35] [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"></div>
      <div ref={glowRef} className="absolute inset-0 radial-violet parallax pointer-events-none"></div>
      <div className="absolute top-40 -left-20 w-72 h-72 rounded-full bg-brand/20 blur-[120px] pointer-events-none"></div>

      <div className="relative max-w-7xl mx-auto px-5 sm:px-8 grid lg:grid-cols-12 gap-12 items-center">
        <div className="lg:col-span-6">
          <Reveal>
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-brand/30 bg-brand/10 text-xs font-medium text-brandLight mb-6">
              <span className="w-1.5 h-1.5 rounded-full bg-brandLight animate-pulse"></span>
              Especialista em sites para negócios
            </div>
          </Reveal>
          <Reveal delay={0.08}>
            <h1 className="text-[40px] sm:text-5xl lg:text-[64px] font-extrabold leading-[1.02] tracking-tight text-gradient">
              Seu negócio merece estar na internet do jeito certo.
            </h1>
          </Reveal>
          <Reveal delay={0.16}>
            <p className="mt-6 text-white/70 text-lg max-w-xl leading-relaxed">
              Instagram cai. WhatsApp trava. Seu site, nunca.
              Pare de depender de plataformas externas — tenha controle do seu próprio negócio.
            </p>
          </Reveal>
          <Reveal delay={0.24}>
            <div className="mt-8 flex flex-wrap gap-3">
              <a href="#portfolio" className="btn-primary inline-flex items-center gap-2 bg-brand hover:bg-brandLight transition-colors text-white font-semibold px-6 py-3.5 rounded-full shadow-glow">
                Ver portfólio
                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </a>
              <a href={WA_LINK} target="_blank" rel="noopener" className="inline-flex items-center gap-2 border border-white/20 hover:border-white/40 hover:bg-white/5 transition-colors text-white font-semibold px-6 py-3.5 rounded-full">
                <WAIcon className="w-4 h-4" /> Falar no WhatsApp
              </a>
            </div>
          </Reveal>
          <Reveal delay={0.32}>
            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-2 text-sm text-white/60">
              {['Entrega em dias', 'Design profissional', '100% personalizado', 'Suporte incluso'].map((b,i) => (
                <span key={i} className="inline-flex items-center gap-2">
                  <svg className="w-4 h-4 text-brand" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
                  {b}
                </span>
              ))}
            </div>
          </Reveal>
        </div>

        {/* Right: 4 sites stacked in perspective */}
        <div className="lg:col-span-6 relative">
          <Reveal delay={0.2}>
            <div ref={stackRef} className="perspective-stack relative h-[440px] sm:h-[520px]" style={{ '--rx': '0deg', '--ry': '0deg' }}>
              {/* glow behind */}
              <div className="absolute inset-10 rounded-3xl bg-brand/30 blur-[80px]"></div>

              {/* Card 4 — back */}
              <div className="absolute top-0 left-[18%] w-[68%] h-[58%] stack-card" style={{ transform: 'translateZ(-180px) rotateX(calc(var(--rx)*0.6)) rotateY(calc(var(--ry)*0.6)) rotate(-3deg) translateY(-10px)' }}>
                <div className="w-full h-full opacity-60 rounded-xl overflow-hidden"><img src="src/assets/savegnagosemijoias2.png" alt="Savegnago Semi Joias" className="w-full h-full object-cover object-top" /></div>
              </div>
              {/* Card 3 */}
              <div className="absolute top-[8%] left-[6%] w-[72%] h-[62%] stack-card floaty rounded-xl overflow-hidden" style={{ animationDelay: '0.4s', transform: 'rotateX(calc(var(--rx)*0.8)) rotateY(calc(var(--ry)*0.8)) rotate(3deg)' }}>
                <img src="src/assets/vsimports.png" alt="VS Imports" className="w-full h-full object-cover object-top" />
              </div>
              {/* Card 2 */}
              <div className="absolute bottom-[6%] right-[4%] w-[74%] h-[62%] stack-card floaty rounded-xl overflow-hidden" style={{ animationDelay: '0.2s', transform: 'rotateX(var(--rx)) rotateY(var(--ry)) rotate(-2deg)' }}>
                <img src="src/assets/jacobmodafitness2.png" alt="Jacob Moda Fitness" className="w-full h-full object-cover object-top" />
              </div>
              {/* Card 1 — front, biggest */}
              <div className="absolute bottom-0 left-[12%] w-[80%] h-[64%] stack-card rounded-xl overflow-hidden" style={{ transform: 'translateZ(80px) rotateX(calc(var(--rx)*1.2)) rotateY(calc(var(--ry)*1.2)) rotate(2deg)' }}>
                <img src="src/assets/reddmotos.png" alt="Redd Motos" className="w-full h-full object-cover object-top" />
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Problem / Solution ---------- */
function ProblemSolution() {
  const problems = [
    { icon: '📵', title: 'Perfil derrubado', desc: 'Anos de conteúdo sumindo da noite pro dia.' },
    { icon: '📉', title: 'Refém do algoritmo', desc: 'Seu alcance depende do humor da plataforma.' },
    { icon: '💬', title: 'Catálogo que some', desc: 'WhatsApp Business trava, catálogo desaparece.' },
  ];
  const solutions = [
    { icon: '🌐', title: 'É seu para sempre', desc: 'Ninguém tira do ar, ninguém muda as regras.' },
    { icon: '🔍', title: 'Aparece no Google', desc: 'Clientes te encontram sem você postar nada.' },
    { icon: '📲', title: 'Integrado ao WhatsApp', desc: 'Cada página leva o cliente direto pra você.' },
  ];
  return (
    <section className="relative py-24 lg:py-32 bg-surface2 overflow-hidden">
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand/40 to-transparent"></div>
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        {/* Problem */}
        <Reveal>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight max-w-3xl">
            Seu negócio existe.<br/>
            <span className="text-white/40">Mas está invisível.</span>
          </h2>
        </Reveal>

        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {problems.map((p, i) => (
            <Reveal key={i} delay={0.08 * i}>
              <div className="lift h-full p-7 rounded-2xl border border-white/[0.08] bg-white/[0.02]">
                <div className="text-3xl mb-4">{p.icon}</div>
                <div className="text-lg font-semibold text-white/90 mb-1.5">{p.title}</div>
                <div className="text-white/55 text-[15px] leading-relaxed">{p.desc}</div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Divider arrow */}
        <Reveal delay={0.1}>
          <div className="flex flex-col items-center my-16">
            <div className="v-divider"></div>
            <div className="w-12 h-12 rounded-full grid place-items-center border border-brand/40 bg-brand/10 my-2">
              <svg viewBox="0 0 24 24" className="w-5 h-5 text-brandLight" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
            </div>
            <div className="v-divider"></div>
          </div>
        </Reveal>

        {/* Solution */}
        <Reveal>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">
            Um site <span className="text-brand">resolve tudo isso.</span>
          </h2>
        </Reveal>

        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {solutions.map((s, i) => (
            <Reveal key={i} delay={0.08 * i}>
              <div className="lift h-full p-7 rounded-2xl border border-brand/20 bg-gradient-to-br from-brand/[0.06] to-white/[0.01] relative overflow-hidden group">
                <div className="absolute -right-8 -top-8 w-24 h-24 rounded-full bg-brand/10 blur-2xl group-hover:bg-brand/20 transition-all"></div>
                <div className="text-3xl mb-4 relative">{s.icon}</div>
                <div className="text-lg font-semibold text-white mb-1.5 relative">{s.title}</div>
                <div className="text-white/65 text-[15px] leading-relaxed relative">{s.desc}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Portfolio ---------- */
function Portfolio() {
  const cases = [
    { img: 'src/assets/reddmotos.png',            name: 'Redd Motos',           segment: 'Loja de motos',       link: 'https://redd-motos.vercel.app',           desc: 'Catálogo completo com filtros, financiamento e mapa.' },
    { img: 'src/assets/jacobmodafitness2.png',     name: 'Jacob Moda Fitness',   segment: 'Moda fitness',        link: 'https://jacobmodafitness.com.br',         desc: 'Loja com catálogo e WhatsApp integrado.' },
    { img: 'src/assets/vsimports.png',            name: 'VS Imports',           segment: 'Produtos importados', link: 'https://vsimports.vercel.app',            desc: 'Vitrine de importados com catálogo e contato.' },
    { img: 'src/assets/savegnagosemijoias2.png',  name: 'Savegnago Semi Joias', segment: 'Semijoias',           link: 'https://savegnago-semi-joias.vercel.app', desc: 'Catálogo de prata 925 com galeria de produtos.' },
  ];
  return (
    <section id="portfolio" className="relative py-24 lg:py-32 overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_20%,transparent_70%)]"></div>
      <div className="relative max-w-7xl mx-auto px-5 sm:px-8">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-14">
          <div>
            <Reveal>
              <div className="text-xs tracking-[0.25em] font-bold text-brandLight mb-3">PORTFÓLIO</div>
            </Reveal>
            <Reveal delay={0.05}>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">Sites que já estão no ar</h2>
            </Reveal>
            <Reveal delay={0.1}>
              <p className="mt-3 text-white/60 text-lg max-w-2xl">Cada um feito do zero, com design único para o negócio do cliente.</p>
            </Reveal>
          </div>
        </div>

        <div className="grid md:grid-cols-2 gap-6 lg:gap-8">
          {cases.map((c, i) => (
            <Reveal key={c.name} delay={0.06 * i}>
              <a href={c.link} target="_blank" rel="noopener" className="group block">
                <div className="rounded-3xl border border-white/[0.08] bg-gradient-to-br from-white/[0.03] to-transparent p-3 lift hover:shadow-card">
                  <div className="aspect-[16/10] rounded-2xl overflow-hidden relative">
                    <div className="w-full h-full transition-transform duration-700 group-hover:scale-[1.03]">
                      <img src={c.img} alt={c.name} className="w-full h-full object-cover object-top" />
                    </div>
                    {/* responsive badge */}
                    <div className="absolute top-3 left-3 inline-flex items-center gap-1.5 bg-bg/70 backdrop-blur-sm border border-white/10 text-white/80 text-[11px] font-semibold px-2.5 py-1 rounded-full">
                      <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="7" y="2" width="10" height="20" rx="2"/><circle cx="12" cy="18" r="1" fill="currentColor"/></svg>
                      Responsivo
                    </div>
                    {/* hover overlay */}
                    <div className="absolute inset-0 grid place-items-center bg-bg/0 group-hover:bg-bg/55 transition-colors duration-300">
                      <span className="opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all duration-300 inline-flex items-center gap-2 bg-brand text-white font-semibold px-5 py-2.5 rounded-full">
                        Ver site
                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M9 7h8v8"/></svg>
                      </span>
                    </div>
                  </div>
                  <div className="px-3 pt-5 pb-3 flex flex-col gap-1.5">
                    <div className="flex items-center justify-between gap-3">
                      <div className="text-xl font-bold tracking-tight">{c.name}</div>
                      <span className="text-[11px] uppercase tracking-wider font-bold text-brandLight bg-brand/10 border border-brand/20 px-2.5 py-1 rounded-full whitespace-nowrap">{c.segment}</span>
                    </div>
                    <div className="text-white/60 text-[15px]">{c.desc}</div>
                  </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Sobre mim ---------- */
function Sobre() {
  return (
    <section id="sobre" className="relative py-24 lg:py-32 bg-surface2 overflow-hidden">
      <div className="absolute -left-20 top-20 w-80 h-80 rounded-full bg-brand/15 blur-[120px]"></div>
      <div className="relative max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal>
          <div className="text-xs tracking-[0.25em] font-bold text-brandLight mb-3 text-center">SOBRE</div>
        </Reveal>
        <Reveal delay={0.05}>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-center mb-14">
            Quem está por trás disso tudo
          </h2>
        </Reveal>

        <div className="grid md:grid-cols-[280px,1fr] gap-12 items-center">
          <Reveal delay={0.1}>
            <div className="relative w-[220px] sm:w-[260px] aspect-square mx-auto">
              <div className="absolute inset-0 rounded-full bg-brand/30 blur-2xl"></div>
              <div className="relative w-full h-full rounded-full bg-gradient-to-br from-brand to-[#4a3fd9] grid place-items-center border-4 border-brand/40 shadow-glow">
                <span className="text-[140px] sm:text-[160px] font-black text-white leading-none">M</span>
              </div>
              <div className="absolute -bottom-2 -right-2 w-12 h-12 rounded-full bg-wa grid place-items-center border-4 border-surface2">
                <WAIcon className="w-5 h-5 text-white" />
              </div>
            </div>
          </Reveal>

          <div>
            <Reveal delay={0.15}>
              <p className="text-lg text-white/80 leading-relaxed">
                Sou <span className="text-white font-semibold">Michel Claro</span>, desenvolvedor com mais de 4 anos de experiência criando sites, softwares e produtos digitais que geram resultado de verdade para os clientes.
              </p>
            </Reveal>
            <Reveal delay={0.22}>
              <p className="mt-5 text-lg text-white/70 leading-relaxed">
                Fundei a <span className="text-brand font-semibold">DigitallGood</span> com uma missão simples: colocar negócios na internet do jeito certo. Sem enrolação, sem contrato complicado, sem agência que some depois da entrega.
              </p>
            </Reveal>
            <Reveal delay={0.28}>
              <p className="mt-5 text-lg text-white/70 leading-relaxed">
                Você fala comigo diretamente. Do primeiro "oi" até o site no ar.
              </p>
            </Reveal>

            <Reveal delay={0.35}>
              <div className="mt-10 grid grid-cols-3 gap-4 sm:gap-6 border-t border-white/10 pt-8">
                <div>
                  <div className="text-3xl sm:text-4xl font-extrabold text-brand">
                    <Counter to={4.5} decimals={1} suffix="+" />
                  </div>
                  <div className="text-xs sm:text-sm text-white/50 mt-1.5 leading-tight">anos de experiência</div>
                </div>
                <div>
                  <div className="text-3xl sm:text-4xl font-extrabold text-brand">
                    <Counter to={10} suffix="+" />
                  </div>
                  <div className="text-xs sm:text-sm text-white/50 mt-1.5 leading-tight">sites entregues</div>
                </div>
                <div>
                  <div className="text-3xl sm:text-4xl font-extrabold text-brand">
                    <Counter to={100} suffix="%" />
                  </div>
                  <div className="text-xs sm:text-sm text-white/50 mt-1.5 leading-tight">atendimento direto</div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Serviços ---------- */
function Servicos() {
  const services = [
    { icon: '🏪', title: 'Lojas e e-commerce', desc: 'Moda, joias, importados, qualquer produto.' },
    { icon: '🏍️', title: 'Lojas de veículos', desc: 'Motos, carros, com catálogo e filtros.' },
    { icon: '🦷', title: 'Saúde e estética', desc: 'Dentistas, clínicas, botox, procedimentos.' },
    { icon: '⚖️', title: 'Profissionais liberais', desc: 'Advogados, contadores, consultores.' },
    { icon: '🍔', title: 'Alimentação', desc: 'Restaurantes, lanchonetes, deliveries.' },
    { icon: '✨', title: 'Qualquer negócio', desc: 'Se você vende algo, eu faço o site.' },
  ];
  const diffs = [
    'Site entregue em dias (não semanas)',
    'Design feito para converter, não só para bonito',
    'Integração total com WhatsApp',
    'Otimizado para aparecer no Google (SEO)',
    'Funciona perfeitamente no celular',
    'Sem mensalidade — você paga uma vez',
  ];
  return (
    <section id="servicos" className="relative py-24 lg:py-32 overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 sm:px-8 relative">
        <div className="text-center mb-14">
          <Reveal>
            <div className="text-xs tracking-[0.25em] font-bold text-brandLight mb-3">SERVIÇOS</div>
          </Reveal>
          <Reveal delay={0.05}>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">O que eu faço</h2>
          </Reveal>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {services.map((s, i) => (
            <Reveal key={s.title} delay={0.05 * i}>
              <div className="lift h-full p-7 rounded-2xl border border-white/[0.08] bg-white/[0.02] hover:bg-white/[0.04] group">
                <div className="w-12 h-12 rounded-xl bg-brand/15 border border-brand/25 grid place-items-center text-2xl mb-5 group-hover:scale-110 transition-transform">
                  {s.icon}
                </div>
                <div className="text-lg font-semibold mb-1.5">{s.title}</div>
                <div className="text-white/55 text-[15px] leading-relaxed">{s.desc}</div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Diferenciais */}
        <div className="mt-20">
          <Reveal>
            <div className="text-center mb-8">
              <div className="inline-block text-xs tracking-[0.25em] font-bold text-white/50 px-3 py-1 border border-white/10 rounded-full">DIFERENCIAIS</div>
            </div>
          </Reveal>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 max-w-5xl mx-auto">
            {diffs.map((d, i) => (
              <Reveal key={i} delay={0.04 * i}>
                <div className="flex items-start gap-3 py-3 border-b border-white/5">
                  <svg className="w-5 h-5 mt-0.5 text-brand shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12l5 5L20 7"/></svg>
                  <span className="text-white/85 text-[15px]">{d}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Processo ---------- */
function Processo() {
  const steps = [
    { n: '01', title: 'Conversa', desc: 'Você me conta sobre o negócio, o que vende e o que precisa. Sem formulário complicado — só uma conversa no WhatsApp.' },
    { n: '02', title: 'Criação', desc: 'Desenvolvo o site com design profissional, conteúdo e fotos organizados. Você acompanha e aprova.' },
    { n: '03', title: 'No ar', desc: 'Site publicado, domínio configurado, pronto para receber clientes. Suporte incluso.' },
  ];
  return (
    <section className="relative py-24 lg:py-32 bg-surface2 overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_20%,transparent_70%)]"></div>
      <div className="relative max-w-7xl mx-auto px-5 sm:px-8">
        <div className="text-center mb-16">
          <Reveal>
            <div className="text-xs tracking-[0.25em] font-bold text-brandLight mb-3">PROCESSO</div>
          </Reveal>
          <Reveal delay={0.05}>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">Do zero ao ar em 3 passos</h2>
          </Reveal>
        </div>

        <div className="relative">
          {/* connecting line */}
          <div className="hidden md:block absolute top-[34px] left-[16%] right-[16%] h-px bg-gradient-to-r from-transparent via-brand/40 to-transparent"></div>

          <div className="grid md:grid-cols-3 gap-8 md:gap-6">
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={0.1 * i}>
                <div className="relative text-center md:text-left">
                  <div className="flex md:block items-center gap-4">
                    <div className="relative inline-flex w-[68px] h-[68px] shrink-0">
                      <div className="absolute inset-0 rounded-full bg-brand/20 blur-md"></div>
                      <div className="relative w-full h-full rounded-full grid place-items-center bg-bg border border-brand/40 text-brand font-extrabold text-lg">
                        {s.n}
                      </div>
                    </div>
                    <div className="md:hidden text-2xl font-bold">{s.title}</div>
                  </div>
                  <div className="hidden md:block mt-6 text-2xl font-bold">{s.title}</div>
                  <div className="mt-3 text-white/65 leading-relaxed">{s.desc}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA final ---------- */
function CTAFinal() {
  return (
    <section id="contato" className="relative py-24 lg:py-32 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-brand/20 via-bg to-bg"></div>
      <div className="absolute inset-0 radial-violet"></div>
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-brand/20 blur-[140px] pointer-events-none"></div>

      <div className="relative max-w-3xl mx-auto px-5 sm:px-8 text-center">
        <Reveal>
          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-gradient leading-[1.05]">
            Pronto para ter seu site?
          </h2>
        </Reveal>
        <Reveal delay={0.08}>
          <p className="mt-6 text-lg sm:text-xl text-white/70 max-w-xl mx-auto">
            Me manda uma mensagem e a gente resolve. Sem enrolação.
          </p>
        </Reveal>
        <Reveal delay={0.16}>
          <a href={WA_LINK} target="_blank" rel="noopener"
             className="btn-primary mt-10 inline-flex items-center gap-3 bg-wa hover:bg-[#1fb858] transition-all text-white text-lg font-bold px-8 py-5 rounded-full shadow-[0_20px_60px_-10px_rgba(37,211,102,0.5)] hover:scale-[1.03]">
            <WAIcon className="w-6 h-6" />
            Falar no WhatsApp agora
            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </Reveal>
        <Reveal delay={0.24}>
          <div className="mt-6 text-sm text-white/40">Resposta normalmente em poucas horas · Atendimento direto com o Michel</div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="relative border-t border-white/10 pt-16 pb-10 overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <div className="grid md:grid-cols-3 gap-10 mb-12">
          <div>
            <div>
              <img src="src/assets/logo/digitallgood-logo.svg" alt="DigitallGood" height="28" style={{height:'28px'}} />
            </div>
            <div className="mt-3 text-white/55 leading-relaxed max-w-xs">
              Seu negócio na internet do jeito certo.
            </div>
          </div>
          <div>
            <div className="text-xs tracking-[0.2em] font-bold text-white/40 mb-4">NAVEGAÇÃO</div>
            <ul className="space-y-2.5">
              <li><a href="#portfolio" className="text-white/75 hover:text-white transition-colors">Portfólio</a></li>
              <li><a href="#servicos" className="text-white/75 hover:text-white transition-colors">Serviços</a></li>
              <li><a href="#contato" className="text-white/75 hover:text-white transition-colors">Contato</a></li>
            </ul>
          </div>
          <div>
            <div className="text-xs tracking-[0.2em] font-bold text-white/40 mb-4">CONTATO</div>
            <ul className="space-y-2.5">
              <li>
                <a href={WA_LINK} target="_blank" rel="noopener" className="inline-flex items-center gap-2 text-white/75 hover:text-white transition-colors">
                  <WAIcon className="w-4 h-4 text-wa" /> WhatsApp
                </a>
              </li>
              <li>
                <a href="https://instagram.com/digitallgood" target="_blank" rel="noopener" className="inline-flex items-center gap-2 text-white/75 hover:text-white transition-colors">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-4 h-4"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
                  @digitallgood
                </a>
              </li>
              <li>
                <a href="mailto:digitallgood.oficial@gmail.com" className="inline-flex items-center gap-2 text-white/75 hover:text-white transition-colors">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-4 h-4"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
                  digitallgood.oficial@gmail.com
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="border-t border-white/10 pt-6 text-center text-white/40 text-sm">
          © 2025 DigitallGood · Desenvolvido com <span className="text-brand">💜</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Floating WhatsApp ---------- */
function FloatingWA() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setShow(true), 600);
    return () => clearTimeout(t);
  }, []);
  return (
    <a href={WA_LINK} target="_blank" rel="noopener"
       aria-label="Falar no WhatsApp"
       className={`group fixed bottom-6 right-6 z-50 transition-all duration-500 ${show ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
      <div className="relative">
        <div className="absolute right-full mr-3 top-1/2 -translate-y-1/2 whitespace-nowrap bg-white text-bg text-sm font-semibold px-3.5 py-2 rounded-lg shadow-lg opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 pointer-events-none">
          Fale comigo!
          <span className="absolute right-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-white rotate-45"></span>
        </div>
        <div className="w-14 h-14 rounded-full bg-wa hover:bg-[#1fb858] grid place-items-center text-white shadow-[0_10px_40px_-5px_rgba(37,211,102,0.6)] wa-pulse transition-colors">
          <WAIcon className="w-7 h-7" />
        </div>
      </div>
    </a>
  );
}

Object.assign(window, { Navbar, Hero, ProblemSolution, Portfolio, Sobre, Servicos, Processo, CTAFinal, Footer, FloatingWA });