/* DonnoWeb hub — UI kit components.
   All components attach to window for cross-script availability. */

const { useState, useEffect } = React;

/* ============ WHATSAPP — prefilled message ============ */
const WHATSAPP_MESSAGE = 'Olá! Estou no site, quero saber mais informações sobre um projeto!';
const WHATSAPP_URL = 'https://wa.me/5511991417434?text=' + encodeURIComponent(WHATSAPP_MESSAGE);
window.DW_WHATSAPP_URL = WHATSAPP_URL;

/* Scroll-to-contact helper used by "Solicitar orçamento via formulário" */
function scrollToContact() {
  const el = document.getElementById('contact');
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

/* ============ SIDEBAR ============ */
function Sidebar({ activeSection, onNavigate, isOpen }) {
  const items = [
    { id: 'home',      icon: 'fa-home',      label: 'Início' },
    { id: 'products',  icon: 'fa-cubes',     label: 'Nossos Apps' },
    { id: 'services',  icon: 'fa-cogs',      label: 'Serviços' },
    { id: 'portfolio', icon: 'fa-briefcase', label: 'Portfólio' },
    { id: 'about',     icon: 'fa-users',     label: 'Sobre' },
    { id: 'contact',   icon: 'fa-envelope',  label: 'Contato' },
  ];
  return (
    <aside className={`dw-sidebar ${isOpen ? 'is-open' : ''}`}>
      <div className="dw-sidebar__brand">
        <img src="./assets/logos/donnoweb-mark.png" alt="DonnoWeb" />
        <div className="dw-sidebar__brand-text">
          <span className="dw-sidebar__brand-name">DonnoWeb</span>
          <span className="dw-sidebar__brand-tag">Holding · SaaS</span>
        </div>
      </div>

      <nav className="dw-sidebar__menu">
        <div className="dw-sidebar__section-label">Navegação</div>
        <ul>
          {items.map(item => (
            <li
              key={item.id}
              className={`dw-sidebar__item ${activeSection === item.id ? 'is-active' : ''}`}
              onClick={() => onNavigate(item.id)}
            >
              <i className={`fas ${item.icon}`}></i>
              <span>{item.label}</span>
            </li>
          ))}
        </ul>

        <hr className="dw-sidebar__divider" />
        <div className="dw-sidebar__section-label">Ecossistema</div>
        <ul>
          {[
            { name: 'Lead-Donno', icon: 'fa-bullseye',    dot: '#a78bfa' },
            { name: 'Nutrion',    icon: 'fa-apple-whole', dot: '#34d399' },
            { name: 'ServeFlow',  icon: 'fa-users-gear',  dot: '#60a5fa' },
            { name: 'Pulsynx',    icon: 'fa-wave-square', dot: '#22d3ee' },
            { name: 'WeGimenes',  icon: 'fa-heart',       dot: '#d4a574' },
          ].map(p => (
            <li key={p.name} className="dw-sidebar__item" onClick={() => onNavigate('products')}>
              <span className="dw-sidebar__item-dot" style={{ background: p.dot, boxShadow: `0 0 8px ${p.dot}` }}></span>
              <span>{p.name}</span>
            </li>
          ))}
        </ul>
      </nav>

      <div className="dw-sidebar__footer">
        <div className="dw-sidebar__socials">
          <a href="#" aria-label="LinkedIn"><i className="fab fa-linkedin"></i></a>
          <a href="#" aria-label="GitHub"><i className="fab fa-github"></i></a>
          <a href="#" aria-label="Instagram"><i className="fab fa-instagram"></i></a>
        </div>
      </div>
    </aside>
  );
}

/* ============ HERO ============ */
function Hero({ onPrimary }) {
  return (
    <section id="home" className="dw-hero" data-screen-label="Hero">
      <div className="dw-hero__bg" />
      <div className="dw-hero__grid" />
      <div className="dw-hero__ember" />
      <div className="dw-hero__sparks">
        <span className="dw-spark s1" />
        <span className="dw-spark is-gold s2" />
        <span className="dw-spark s3" />
        <span className="dw-spark is-gold s4" />
        <span className="dw-spark s5" />
      </div>

      <div className="dw-container">
        <div className="dw-hero__content">
          <div>
            <div className="dw-hero__eyebrow">
              <span className="dw-hero__eyebrow-line" />
              <span className="dw-eyebrow">HOLDING · IA · AUTOMAÇÃO</span>
            </div>
            <h1 className="dw-hero__title">
              O <span className="dw-gild-text">ecossistema digital</span>{' '}
              criado para escalar ideias.
            </h1>
            <p className="dw-hero__subtitle">
              Da inteligência artificial à automação de processos,
              construímos plataformas que conectam tecnologia, pessoas e
              crescimento.
            </p>
            <div className="dw-hero__buttons">
              <button className="dw-btn dw-btn--primary" onClick={onPrimary}>
                <i className="fas fa-rocket" /> Conhecer soluções
              </button>
              <a className="dw-btn dw-btn--outline" href="#products">
                <i className="fas fa-cubes" /> Explorar plataformas
              </a>
            </div>
            <div className="dw-hero__taglines">
              <span>Desenvolvido para escalar.</span>
              <span className="dot" />
              <span>Tecnologia com propósito.</span>
              <span className="dot" />
              <span>Estrutura para crescer.</span>
            </div>
          </div>

          <div className="dw-hero__visual">
            <div className="dw-orbit" />
            <div className="dw-orbit is-2" />
            <div className="dw-orbit is-3" />
            <div className="dw-orbit__core">
              <img src="./assets/logos/donnoweb-mark.png" alt="DonnoWeb" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ PRODUCTS DATA ============ */
const PRODUCTS_DATA = [
  {
    id: 'lead-donno',
    name: 'Lead-Donno',
    eyebrow: 'LEAD-GEN · IA',
    tagline: 'Pare de perder leads todo dia.',
    short: 'Funis inteligentes, qualificação automática e CRM integrado.',
    long: 'Lead-Donno é a plataforma de geração e qualificação de leads do ecossistema DonnoWeb. Combina funis com IA, CRM kanban, automações multi-canal e o módulo Caça Lead (busca de empresas e contatos por IA) — tudo num workspace só.',
    icon: 'fa-bullseye',
    url: 'https://lead.donnoweb.com.br',
    loginUrl: 'https://lead.donnoweb.com.br',
    gradient: 'linear-gradient(135deg,#a78bfa,#6d28d9)',
    glow: '0 0 28px rgba(139,92,246,0.45)',
    color: '#8b5cf6',
    colorSoft: 'rgba(139,92,246,0.14)',
    metrics: [
      { label: 'Usuários', value: '2.4k+' },
      { label: 'Taxa de melhora', value: '89%' },
      { label: 'Avaliação', value: '4.9★' },
    ],
    features: [
      { icon: 'fa-filter', title: 'Funis inteligentes', desc: 'Construa funis com drag-and-drop e teste variações em poucos cliques.' },
      { icon: 'fa-people-arrows', title: 'CRM integrado', desc: 'Pipeline kanban com pontuação automática de leads e movimentação por estágios.' },
      { icon: 'fa-rocket', title: 'Templates prontos', desc: 'Marketing, saúde, imóveis, agência, e-commerce, educação, alimentação, B2B.' },
      { icon: 'fa-crosshairs', title: 'Caça Lead com IA', desc: 'Encontre empresas, pessoas, produtos e concorrentes com busca em linguagem natural.' },
    ],
    shots: [
      { src: '../../assets/products/lead-donno-dashboard.png', label: 'Dashboard com métricas e ações rápidas' },
      { src: '../../assets/products/lead-donno-crm.png',       label: 'Pipeline CRM com scoring automático' },
      { src: '../../assets/products/lead-donno-templates.png', label: 'Templates prontos por segmento' },
      { src: '../../assets/products/lead-donno-caca-lead.png', label: 'Caça Lead — busca por IA' },
    ],
  },
  {
    id: 'nutrion',
    name: 'Nutrion',
    eyebrow: 'NUTRIÇÃO · IA',
    tagline: 'Seu plano alimentar personalizado em 2 minutos.',
    short: 'Calcule meta calórica, acompanhe alimentação com IA e alcance seu objetivo.',
    long: 'Nutrion calcula sua necessidade calórica com fórmula científica validada, identifica alimentos por foto via IA e gera previsões de evolução de peso. Disponível em 11 idiomas — para emagrecer, manter ou ganhar massa.',
    icon: 'fa-apple-whole',
    url: 'https://nutrion.donnoweb.com.br',
    loginUrl: 'https://nutrion.donnoweb.com.br/auth',
    gradient: 'linear-gradient(135deg,#34d399,#047857)',
    glow: '0 0 28px rgba(16,185,129,0.4)',
    color: '#10b981',
    colorSoft: 'rgba(16,185,129,0.14)',
    metrics: [
      { label: 'Usuários ativos', value: '2.000+' },
      { label: 'Idiomas', value: '11' },
      { label: 'Avaliação', value: '4.9★' },
    ],
    features: [
      { icon: 'fa-bullseye',  title: 'Meta calórica precisa', desc: 'Necessidade calórica calculada com fórmula científica e ajustada ao objetivo real.' },
      { icon: 'fa-camera',    title: 'Foto do alimento',      desc: 'Registre refeições tirando uma foto — IA identifica e contabiliza por você.' },
      { icon: 'fa-chart-line',title: 'Acompanhamento diário', desc: 'Gráficos claros mostram onde você está e a projeção para 30 dias.' },
      { icon: 'fa-globe',     title: '11 idiomas',            desc: 'Português, inglês, espanhol, alemão, árabe, hebraico e muito mais.' },
    ],
    shots: [
      { src: '../../assets/products/nutrion-landing.png',   label: 'Landing — plano em 2 minutos' },
      { src: '../../assets/products/nutrion-home.png',      label: 'Dashboard do usuário' },
      { src: '../../assets/products/nutrion-camera.png',    label: 'Câmera — refeição por foto' },
      { src: '../../assets/products/nutrion-historico.png', label: 'Histórico de 30 dias' },
    ],
  },
  {
    id: 'serveflow',
    name: 'ServeFlow',
    eyebrow: 'GESTÃO · EQUIPES',
    tagline: 'Gerencie sua equipe de voluntários com propósito.',
    short: 'Escalas automáticas, check-in por culto e comunicação em tempo real.',
    long: 'ServeFlow é o SaaS de gestão de voluntários e escalas. Matriz de permissões granular (Master Gestor, Admin, Coordenador, Líder, Voluntário), check-in digital, ranking, sugestões de IA por afinidade — tudo o que líderes de equipe precisam num só lugar.',
    icon: 'fa-users-gear',
    url: 'https://serveflow.com.br',
    loginUrl: 'https://serveflow.com.br/login',
    gradient: 'linear-gradient(135deg,#60a5fa,#1e40af)',
    glow: '0 0 28px rgba(59,92,255,0.45)',
    color: '#3b5cff',
    colorSoft: 'rgba(59,92,255,0.14)',
    metrics: [
      { label: 'Cargos', value: '5 níveis' },
      { label: 'Check-in', value: 'Digital' },
      { label: 'IA Match', value: 'Sim' },
    ],
    features: [
      { icon: 'fa-calendar-check', title: 'Escalas automáticas', desc: 'O sistema escala sua equipe respeitando afinidades e disponibilidade.' },
      { icon: 'fa-qrcode',         title: 'Check-in digital',     desc: 'Voluntário registra serviço com 1 clique e ganha pontos por dedicação.' },
      { icon: 'fa-sliders',        title: 'Matriz de permissões', desc: 'Controle granular do que cada cargo pode acessar — 5 níveis configuráveis.' },
      { icon: 'fa-wand-magic-sparkles', title: 'Sugestões com IA', desc: 'Análise de perfil identifica oportunidades por afinidade (% de match).' },
    ],
    shots: [
      { src: '../../assets/products/serveflow-landing.png',    label: 'Landing — gerencie com propósito' },
      { src: '../../assets/products/serveflow-dashboard.png',  label: 'Dashboard com sugestões de IA' },
      { src: '../../assets/products/serveflow-checkin.png',    label: 'Check-in digital de voluntário' },
      { src: '../../assets/products/serveflow-permissoes.png', label: 'Matriz de permissões granular' },
    ],
  },
  {
    id: 'pulsynx',
    name: 'Pulsynx',
    eyebrow: 'AGÊNCIA · SINAIS',
    tagline: 'Inteligência de sinais para agências modernas.',
    short: 'Monitore o pulso dos ecossistemas sociais dos seus clientes em tempo real.',
    long: 'Pulsynx vai além do analytics tradicional: monitora múltiplos clientes simultaneamente, traduz dados brutos em decisões estratégicas e mantém uma visão de saúde de sinal por cliente. Multi-cliente, multi-rede, multi-camada.',
    icon: 'fa-wave-square',
    url: 'https://pulsynx.com.br',
    loginUrl: 'https://pulsynx.com.br/login',
    gradient: 'linear-gradient(135deg,#22d3ee,#0e7490)',
    glow: '0 0 28px rgba(34,211,238,0.4)',
    color: '#22d3ee',
    colorSoft: 'rgba(34,211,238,0.14)',
    metrics: [
      { label: 'Versão', value: 'v2.0' },
      { label: 'Multi-cliente', value: 'Sim' },
      { label: 'Inteligência', value: 'Ativa' },
    ],
    features: [
      { icon: 'fa-chart-pulse',  title: 'Pulso em tempo real',  desc: 'Sinais sociais de cada cliente atualizados continuamente.' },
      { icon: 'fa-layer-group',  title: 'Gestão multi-cliente', desc: 'Visão consolidada e detalhamento por marca — todos no mesmo painel.' },
      { icon: 'fa-bell',         title: 'Alertas inteligentes', desc: 'Notificações quando saúde de sinal cai ou alcance dispara.' },
      { icon: 'fa-tag',          title: 'Marca branca',         desc: 'Painel customizável com a identidade da sua agência.' },
    ],
    shots: [
      { src: '../../assets/products/pulsynx-landing.png',  label: 'Landing — inteligência de sinais' },
      { src: '../../assets/products/pulsynx-overview.png', label: 'Visão geral multi-cliente' },
      { src: '../../assets/products/pulsynx-clients.png',  label: 'Gestão de clientes da agência' },
    ],
  },
  {
    id: 'wegimenes',
    name: 'WeGimenes',
    eyebrow: 'CASAIS · JORNADA',
    tagline: 'A plataforma para casais que escolhem crescer juntos.',
    short: 'Jornadas práticas, radar do relacionamento e mentoria especializada.',
    long: 'WeGimenes oferece jornadas guiadas para casais, com radar do relacionamento, tarefas diárias, chat com mentor e análise semanal com IA. Trilhas curtas (7 dias) e profundas (30 dias), gratuitas e premium.',
    icon: 'fa-heart',
    url: 'https://we.wegimenes.com.br',
    loginUrl: 'https://we.wegimenes.com.br/login',
    gradient: 'linear-gradient(135deg,#d4a574,#7a5023)',
    glow: '0 0 28px rgba(212,165,116,0.4)',
    color: '#0d3826',
    colorSoft: 'rgba(212,165,116,0.18)',
    metrics: [
      { label: 'Jornadas gratuitas', value: '3' },
      { label: 'Dias por jornada', value: '7' },
      { label: 'Para começar', value: '5 min' },
    ],
    features: [
      { icon: 'fa-map-signs',  title: 'Jornadas guiadas',  desc: 'Trilhas de 7 e 30 dias com exercícios diários para o casal.' },
      { icon: 'fa-chart-pie',  title: 'Radar do relacionamento', desc: 'Visualização das áreas que precisam de atenção, semana a semana.' },
      { icon: 'fa-user-md',    title: 'Mentoria especializada',  desc: 'Conexão com psicólogos, terapeutas e mentores certificados.' },
      { icon: 'fa-brain',      title: 'Feedback semanal com IA', desc: 'Análise da jornada — pontos da semana e próximos passos.' },
    ],
    shots: [
      { src: '../../assets/products/wegimenes-landing.png',  label: 'Landing — crescer juntos' },
      { src: '../../assets/products/wegimenes-login.png',    label: 'Login com identidade visual' },
      { src: '../../assets/products/wegimenes-jornadas.png', label: 'Explorar jornadas' },
      { src: '../../assets/products/wegimenes-feedback.png', label: 'Feedback da IA — semanal' },
    ],
  },
];

/* ============ PRODUCT CARD ============ */
function ProductCard({ product, onOpen }) {
  return (
    <button className="dw-product-card" onClick={() => onOpen(product.id)} type="button">
      <div
        className="dw-product-card__icon"
        style={{ background: product.gradient, boxShadow: product.glow }}
      >
        <i className={`fas ${product.icon}`} />
      </div>
      <div className="dw-product-card__eyebrow">{product.eyebrow}</div>
      <h3 className="dw-product-card__title">{product.name}</h3>
      <p className="dw-product-card__desc">{product.short}</p>
      <span className="dw-product-card__link">
        Ver detalhes <i className="fas fa-arrow-right" />
      </span>
    </button>
  );
}

/* ============ PRODUCT DETAIL (inline page) ============ */
function ProductDetail({ product, onBack }) {
  useEffect(() => {
    // Scroll to top of products section when detail opens
    const el = document.getElementById('products');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, [product.id]);

  return (
    <article
      className="dw-pdetail"
      style={{
        '--p-color': product.color,
        '--p-color-soft': product.colorSoft,
        '--p-gradient': product.gradient,
      }}
    >
      <button className="dw-pdetail__back" onClick={onBack}>
        <i className="fas fa-arrow-left" /> Voltar aos apps
      </button>

      <header className="dw-pdetail__hero">
        <div className="dw-pdetail__hero-bg" />
        <div className="dw-pdetail__hero-content">
          <div
            className="dw-pdetail__icon"
            style={{ background: product.gradient, boxShadow: product.glow }}
          >
            <i className={`fas ${product.icon}`} />
          </div>
          <div className="dw-eyebrow" style={{ color: product.color }}>{product.eyebrow}</div>
          <h2 className="dw-pdetail__name">{product.name}</h2>
          <p className="dw-pdetail__tagline">{product.tagline}</p>
          <p className="dw-pdetail__short">{product.long}</p>

          <div className="dw-pdetail__metrics">
            {product.metrics.map(m => (
              <div className="dw-pdetail__metric" key={m.label}>
                <div className="dw-pdetail__metric-num" style={{ color: product.color }}>{m.value}</div>
                <div className="dw-pdetail__metric-label">{m.label}</div>
              </div>
            ))}
          </div>
        </div>
      </header>

      <section className="dw-pdetail__features">
        <div className="dw-eyebrow">RECURSOS · DESTAQUES</div>
        <h3 className="dw-pdetail__section-title">O que está dentro</h3>
        <div className="dw-pdetail__feature-grid">
          {product.features.map(f => (
            <div className="dw-pdetail__feature" key={f.title}>
              <div className="dw-pdetail__feature-icon" style={{ color: product.color, background: product.colorSoft }}>
                <i className={`fas ${f.icon}`} />
              </div>
              <h4>{f.title}</h4>
              <p>{f.desc}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="dw-pdetail__gallery">
        <div className="dw-eyebrow">EM AÇÃO · TELAS REAIS</div>
        <h3 className="dw-pdetail__section-title">Como funciona na prática</h3>
        <div className="dw-pdetail__shots">
          {product.shots.map((s, i) => (
            <figure className="dw-pdetail__shot" key={i}>
              <div className="dw-pdetail__shot-frame">
                <img src={s.src} alt={s.label} loading="lazy" />
              </div>
              <figcaption>{s.label}</figcaption>
            </figure>
          ))}
        </div>
      </section>

      <section className="dw-pdetail__cta" style={{ background: `linear-gradient(135deg, ${product.colorSoft}, transparent 70%)` }}>
        <div className="dw-pdetail__cta-inner">
          <div>
            <div className="dw-eyebrow" style={{ color: product.color }}>COMECE AGORA</div>
            <h3>Pronto para usar {product.name}?</h3>
            <p>Acesse a plataforma — login direto, sem intermediários.</p>
          </div>
          <div className="dw-pdetail__cta-buttons">
            <a className="dw-btn dw-pdetail__cta-primary" href={product.url} target="_blank" rel="noreferrer"
               style={{ background: product.gradient, boxShadow: product.glow }}>
              <i className="fas fa-rocket" /> Acessar {product.name}
            </a>
            <a className="dw-btn dw-btn--ghost" href={product.loginUrl} target="_blank" rel="noreferrer">
              <i className="fas fa-right-to-bracket" /> Fazer login
            </a>
          </div>
        </div>
        <div className="dw-pdetail__cta-signature">
          <span className="dot" /> Desenvolvido por{' '}
          <a href="https://donnoweb.com.br" target="_blank" rel="noreferrer">donnoweb.com.br</a>
        </div>
      </section>
    </article>
  );
}

/* ============ PRODUCT SECTION (grid OR detail) ============ */
function ProductGrid() {
  const [selectedId, setSelectedId] = useState(null);
  const selected = PRODUCTS_DATA.find(p => p.id === selectedId);

  return (
    <section id="products" className="dw-section dw-section--surface" data-screen-label="Products">
      <div className="dw-container">
        {!selected && (
          <>
            <div className="dw-section__header">
              <div className="dw-eyebrow">ECOSSISTEMA · 5 PLATAFORMAS</div>
              <h2 className="dw-section__title">Nossos Apps</h2>
              <p className="dw-section__subtitle">
                Cinco plataformas SaaS sob a mesma holding. Clique para ver
                cada uma em detalhe — recursos, telas reais e acesso direto.
              </p>
              <div className="dw-section__divider" />
            </div>
            <div className="dw-products">
              {PRODUCTS_DATA.map(p => (
                <ProductCard key={p.id} product={p} onOpen={setSelectedId} />
              ))}
            </div>
          </>
        )}
        {selected && (
          <ProductDetail product={selected} onBack={() => setSelectedId(null)} />
        )}
      </div>
    </section>
  );
}

/* ============ SERVICES DATA ============ */
const SERVICES_DATA = [
  {
    id: 'wordpress',
    title: 'Sites WordPress',
    iconClass: 'fab fa-wordpress',
    eyebrow: 'SERVIÇO · WORDPRESS',
    tagline: 'Sites profissionais que convertem visitantes em clientes.',
    intro: 'WordPress é a plataforma mais flexível do mercado — e a base ideal para sites institucionais, lojas virtuais e portais de conteúdo. Nossa equipe entrega projetos com design moderno, performance otimizada e SEO técnico do início ao fim.',
    color: '#e30613',
    colorSoft: 'rgba(227,6,19,0.14)',
    gradient: 'var(--grad-ignite)',
    glow: 'var(--shadow-glow-red)',
    subcards: [
      {
        title: 'Site Institucional',
        subtitle: 'Presença digital profissional',
        icon: 'fa-building',
        features: ['Design responsivo', 'Páginas otimizadas', 'Painel administrativo'],
      },
      {
        title: 'E-commerce',
        subtitle: 'Loja virtual com WooCommerce',
        icon: 'fa-bag-shopping',
        features: ['Integração de pagamentos', 'Gestão de estoque', 'Relatórios de vendas'],
      },
      {
        title: 'Blog & Conteúdo',
        subtitle: 'Plataforma de publicação editorial',
        icon: 'fa-newspaper',
        features: ['SEO técnico embutido', 'Categorias e tags', 'Newsletter integrada'],
      },
    ],
  },
  {
    id: 'manuais',
    title: 'Manuais Técnicos',
    iconClass: 'fas fa-book',
    eyebrow: 'SERVIÇO · DOCUMENTAÇÃO',
    tagline: 'Documentação que realmente é usada — e atualizada.',
    intro: 'Criamos manuais técnicos, guias de usuário e documentação interativa que combinam clareza técnica com design intuitivo. Foco no usuário final, conteúdo multimídia e sistema fácil de manter por dentro da sua equipe.',
    color: '#c99416',
    colorSoft: 'rgba(201,148,22,0.16)',
    gradient: 'var(--grad-gild)',
    glow: 'var(--shadow-glow-gold)',
    subcards: [
      {
        title: 'Manual Técnico',
        subtitle: 'Documentação detalhada para engenharia',
        icon: 'fa-file-code',
        features: ['Estrutura padronizada', 'Versionamento', 'Pesquisa avançada'],
      },
      {
        title: 'Manual do Usuário',
        subtitle: 'Guia prático para o cliente final',
        icon: 'fa-circle-user',
        features: ['Linguagem acessível', 'Passo a passo visual', 'FAQ integrado'],
      },
      {
        title: 'Documentação Interativa',
        subtitle: 'Guias com vídeo e simulações',
        icon: 'fa-circle-play',
        features: ['Vídeo embutido', 'Simulações guiadas', 'Atualizações fáceis'],
      },
    ],
  },
  {
    id: 'automacoes',
    title: 'Automações',
    iconClass: 'fas fa-robot',
    eyebrow: 'SERVIÇO · AUTOMAÇÃO',
    tagline: 'Automações inteligentes que reduzem custo e tempo.',
    intro: 'Otimize processos, reduza custos e aumente a produtividade com soluções de automação personalizadas. Integramos seus sistemas, criamos workflows inteligentes e medimos os resultados em dashboards próprios.',
    color: '#e30613',
    colorSoft: 'rgba(227,6,19,0.14)',
    gradient: 'var(--grad-ignite)',
    glow: 'var(--shadow-glow-red)',
    subcards: [
      {
        title: 'Chatbot Inteligente',
        subtitle: 'Atendimento automático 24/7',
        icon: 'fa-comments',
        features: ['Respostas automáticas', 'Integração com WhatsApp', 'Machine Learning'],
      },
      {
        title: 'Automação de Leads',
        subtitle: 'Captação e nutrição automática',
        icon: 'fa-filter',
        features: ['E-mail marketing automático', 'Segmentação inteligente', 'Análise de comportamento'],
      },
      {
        title: 'Automação de Processos',
        subtitle: 'Fluxos de trabalho otimizados',
        icon: 'fa-diagram-project',
        features: ['Integração entre sistemas', 'Redução de erros', 'Relatórios automatizados'],
      },
    ],
  },
];

/* ============ SERVICES ============ */
function ServiceCard({ service, onOpen }) {
  return (
    <button className="dw-service-card" type="button" onClick={() => onOpen(service.id)}>
      <div className="dw-service-card__icon" style={{ background: service.gradient, boxShadow: service.glow }}>
        <i className={service.iconClass} />
      </div>
      <h3 className="dw-service-card__title">{service.title}</h3>
      <p className="dw-service-card__desc">{service.tagline}</p>
      <ul className="dw-service-card__list">
        {service.subcards.map(s => (
          <li key={s.title}><i className="fas fa-check" />{s.title}</li>
        ))}
      </ul>
      <span className="dw-service-card__more">
        Saiba Mais <i className="fas fa-arrow-right" />
      </span>
    </button>
  );
}

function ServiceDetail({ service, onBack }) {
  useEffect(() => {
    const el = document.getElementById('services');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, [service.id]);

  return (
    <article
      className="dw-pdetail"
      style={{
        '--p-color': service.color,
        '--p-color-soft': service.colorSoft,
        '--p-gradient': service.gradient,
      }}
    >
      <button className="dw-pdetail__back" onClick={onBack}>
        <i className="fas fa-arrow-left" /> Voltar aos serviços
      </button>

      <header className="dw-pdetail__hero">
        <div className="dw-pdetail__hero-bg" />
        <div className="dw-pdetail__hero-content">
          <div className="dw-pdetail__icon" style={{ background: service.gradient, boxShadow: service.glow }}>
            <i className={service.iconClass} />
          </div>
          <div className="dw-eyebrow" style={{ color: service.color }}>{service.eyebrow}</div>
          <h2 className="dw-pdetail__name">{service.title}</h2>
          <p className="dw-pdetail__tagline">{service.tagline}</p>
          <p className="dw-pdetail__short">{service.intro}</p>
        </div>
      </header>

      <section className="dw-pdetail__features">
        <div className="dw-eyebrow">FRENTES · ESPECIALIDADES</div>
        <h3 className="dw-pdetail__section-title">Como atuamos em {service.title}</h3>
        <div className="dw-sub-grid">
          {service.subcards.map(s => (
            <div className="dw-sub-card" key={s.title}>
              <div className="dw-sub-card__icon" style={{ color: service.color, background: service.colorSoft }}>
                <i className={`fas ${s.icon}`} />
              </div>
              <h4 className="dw-sub-card__title">{s.title}</h4>
              <p className="dw-sub-card__subtitle">{s.subtitle}</p>
              <ul className="dw-sub-card__features">
                {s.features.map(f => (
                  <li key={f}><i className="fas fa-check" style={{ color: service.color }} />{f}</li>
                ))}
              </ul>
              <div className="dw-sub-card__ctas">
                <a className="dw-btn dw-sub-card__cta-primary"
                   href={WHATSAPP_URL} target="_blank" rel="noreferrer"
                   style={{ background: service.gradient, boxShadow: service.glow }}>
                  <i className="fab fa-whatsapp" /> Orçamento por WhatsApp
                </a>
                <button className="dw-btn dw-btn--ghost dw-sub-card__cta-ghost"
                        onClick={(e) => { e.preventDefault(); scrollToContact(); }}>
                  <i className="fas fa-paper-plane" /> Pelo formulário
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="dw-pdetail__cta" style={{ background: `linear-gradient(135deg, ${service.colorSoft}, transparent 70%)` }}>
        <div className="dw-pdetail__cta-inner">
          <div>
            <div className="dw-eyebrow" style={{ color: service.color }}>SOLICITAR ORÇAMENTO</div>
            <h3>Vamos conversar sobre {service.title}?</h3>
            <p>Resposta em até 24h úteis. Sem custo inicial, sem pegadinha.</p>
          </div>
          <div className="dw-pdetail__cta-buttons">
            <a className="dw-btn dw-pdetail__cta-primary"
               href={WHATSAPP_URL} target="_blank" rel="noreferrer"
               style={{ background: service.gradient, boxShadow: service.glow }}>
              <i className="fab fa-whatsapp" /> WhatsApp
            </a>
            <button className="dw-btn dw-btn--ghost"
                    onClick={(e) => { e.preventDefault(); scrollToContact(); }}>
              <i className="fas fa-paper-plane" /> Formulário
            </button>
          </div>
        </div>
        <div className="dw-pdetail__cta-signature">
          <span className="dot" /> Desenvolvido por{' '}
          <a href="https://donnoweb.com.br" target="_blank" rel="noreferrer">donnoweb.com.br</a>
        </div>
      </section>
    </article>
  );
}

function Services() {
  const [selectedId, setSelectedId] = useState(null);
  const selected = SERVICES_DATA.find(s => s.id === selectedId);

  return (
    <section id="services" className="dw-section" data-screen-label="Services">
      <div className="dw-container">
        {!selected && (
          <>
            <div className="dw-section__header">
              <div className="dw-eyebrow">SERVIÇOS · AGÊNCIA</div>
              <h2 className="dw-section__title">Soluções completas para sua presença digital</h2>
              <p className="dw-section__subtitle">
                Três frentes, uma equipe. WordPress, manuais e automações entregues
                com a mesma exigência técnica.
              </p>
              <div className="dw-section__divider" />
            </div>
            <div className="dw-services">
              {SERVICES_DATA.map(s => (
                <ServiceCard key={s.id} service={s} onOpen={setSelectedId} />
              ))}
            </div>
          </>
        )}
        {selected && (
          <ServiceDetail service={selected} onBack={() => setSelectedId(null)} />
        )}
      </div>
    </section>
  );
}

/* ============ PORTFOLIO ============ */
function Portfolio() {
  const items = [
    {
      title: 'E-commerce Premium',
      desc: 'Loja virtual completa com design exclusivo, integração de pagamentos e gestão de estoque.',
      tags: [['WordPress', 'red'], ['WooCommerce', 'red'], ['UI/UX', 'gold']],
      icon: 'fa-bag-shopping',
    },
    {
      title: 'Manual Interativo',
      desc: 'Manual técnico com recursos multimídia, pesquisa avançada e navegação intuitiva.',
      tags: [['HTML5', 'red'], ['JavaScript', 'red'], ['Interativo', 'gold']],
      icon: 'fa-book-open',
    },
    {
      title: 'Sistema de Automação',
      desc: 'Workflow automatizado para gestão de leads com integração API e dashboard em tempo real.',
      tags: [['Python', 'neutral'], ['API', 'red'], ['Dashboard', 'gold']],
      icon: 'fa-diagram-project',
    },
    {
      title: 'Plataforma SaaS',
      desc: 'Backend Firebase + Next.js com painel admin financeiro e gestão multi-tenant.',
      tags: [['Next.js', 'red'], ['Firebase', 'gold'], ['SaaS', 'neutral']],
      icon: 'fa-layer-group',
    },
  ];
  return (
    <section id="portfolio" className="dw-section dw-section--surface" data-screen-label="Portfolio">
      <div className="dw-container">
        <div className="dw-section__header">
          <div className="dw-eyebrow">CASES · PORTFÓLIO</div>
          <h2 className="dw-section__title">Projetos que entregamos</h2>
          <p className="dw-section__subtitle">
            Uma amostra do que sai da DonnoWeb — sites, sistemas, manuais e
            automações vivendo em produção.
          </p>
          <div className="dw-section__divider" />
        </div>
        <div className="dw-portfolio">
          {items.map(item => (
            <div className="dw-portfolio-item" key={item.title}>
              <div className="dw-portfolio-item__image">
                <i className={`fas ${item.icon}`} />
              </div>
              <div className="dw-portfolio-item__body">
                <h3 className="dw-portfolio-item__title">{item.title}</h3>
                <p className="dw-portfolio-item__desc">{item.desc}</p>
                <div className="dw-portfolio-item__tags">
                  {item.tags.map(([t, v]) => (
                    <span key={t} className={`dw-tag ${v === 'gold' ? 'is-gold' : v === 'neutral' ? 'is-neutral' : ''}`}>{t}</span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ ABOUT + STATS + TESTIMONIALS ============ */
function About() {
  return (
    <section id="about" className="dw-section" data-screen-label="About">
      <div className="dw-container">
        <div className="dw-about">
          <div className="dw-about__text">
            <div className="dw-eyebrow">SOBRE · DESDE 2020</div>
            <h2>Tecnologia que liberta tempo, não consome.</h2>
            <p>
              Somos uma equipe de engenharia e design focada em criar
              infraestrutura digital que de fato move o ponteiro do negócio.
              Sites, manuais e automações entregues com exigência técnica.
            </p>
            <p>
              A holding DonnoWeb mantém cinco SaaS em produção e atende
              dezenas de PMEs com soluções sob medida — do funil ao backoffice.
            </p>
          </div>
          <div>
            <div className="dw-stats">
              <div className="dw-stat">
                <div className="dw-stat__num">50+</div>
                <div className="dw-stat__label">Projetos Concluídos</div>
              </div>
              <div className="dw-stat">
                <div className="dw-stat__num">100%</div>
                <div className="dw-stat__label">Clientes Satisfeitos</div>
              </div>
              <div className="dw-stat">
                <div className="dw-stat__num">5+</div>
                <div className="dw-stat__label">Anos de Experiência</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const quotes = [
    {
      text: 'A DonnoWeb assumiu nosso site WordPress quando estava performando mal e em três semanas tudo girava no novo padrão. Conversões dobraram.',
      name: 'Ricardo M.', role: 'CEO · Distribuidora Vértice',
    },
    {
      text: 'O manual interativo que entregaram virou referência interna. O time de suporte parou de responder as mesmas perguntas dez vezes por dia.',
      name: 'Juliana P.', role: 'Líder de Operações · Apex',
    },
    {
      text: 'Implementaram nossa automação de leads em menos tempo do que esperávamos. Hoje rodamos integração com CRM, WhatsApp e e-mail sem dor.',
      name: 'André S.', role: 'Diretor Comercial · Hub60',
    },
  ];
  return (
    <section className="dw-section dw-section--surface" data-screen-label="Testimonials">
      <div className="dw-container">
        <div className="dw-section__header">
          <div className="dw-eyebrow">DEPOIMENTOS · CLIENTES</div>
          <h2 className="dw-section__title">O que dizem por aí</h2>
          <div className="dw-section__divider" />
        </div>
        <div className="dw-testimonials">
          {quotes.map(q => (
            <div className="dw-testimonial" key={q.name}>
              <div className="dw-testimonial__quote">“</div>
              <p className="dw-testimonial__text">{q.text}</p>
              <div className="dw-testimonial__author">
                <div className="dw-testimonial__avatar">{q.name[0]}</div>
                <div>
                  <div className="dw-testimonial__name">{q.name}</div>
                  <div className="dw-testimonial__role">{q.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CONTACT ============ */
function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', phone: '', service: '', message: '', lgpd: false });
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const [sending, setSending] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.service || !form.lgpd) return;
    setSending(true);
    try {
      await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      });
      setSubmitted(true);
      setTimeout(() => setSubmitted(false), 6000);
      setForm({ name: '', email: '', phone: '', service: '', message: '', lgpd: false });
    } catch(err) {
      console.error(err);
    } finally {
      setSending(false);
    }
  };

  return (
    <section id="contact" className="dw-section" data-screen-label="Contact">
      <div className="dw-container">
        <div className="dw-section__header">
          <div className="dw-eyebrow">CONTATO · LGPD</div>
          <h2 className="dw-section__title">Vamos trabalhar juntos</h2>
          <p className="dw-section__subtitle">
            Conte o gargalo. Te respondemos em menos de 24h úteis com um plano
            inicial — sem custo e sem pegadinha.
          </p>
          <div className="dw-section__divider" />
        </div>

        <div className="dw-contact-grid">
          <div className="dw-contact-info">
            <div className="dw-contact-info__item">
              <i className="fas fa-envelope" />
              <div>
                <h3>E-mail</h3>
                <p>contato@donnoweb.com.br</p>
              </div>
            </div>
            <a className="dw-contact-info__item dw-contact-info__item--link"
               href={WHATSAPP_URL} target="_blank" rel="noreferrer">
              <i className="fab fa-whatsapp" />
              <div>
                <h3>WhatsApp</h3>
                <p>+55 (11) 99141-7434</p>
              </div>
            </a>
            <div className="dw-contact-info__item">
              <i className="fas fa-map-marker-alt" />
              <div>
                <h3>Localização</h3>
                <p>São Paulo, SP — Brasil</p>
              </div>
            </div>
            <div className="dw-contact-info__item">
              <i className="fas fa-clock" />
              <div>
                <h3>Resposta</h3>
                <p>Até 24h úteis · Seg–Sex</p>
              </div>
            </div>
          </div>

          <form className="dw-form" onSubmit={submit}>
            <div className="dw-form__group">
              <input className="dw-input" placeholder="Seu Nome" value={form.name} onChange={e => update('name', e.target.value)} required />
            </div>
            <div className="dw-form__group">
              <input className="dw-input" type="email" placeholder="Seu Email" value={form.email} onChange={e => update('email', e.target.value)} required />
            </div>
            <div className="dw-form__group">
              <input className="dw-input" placeholder="Seu WhatsApp (com DDD)" value={form.phone} onChange={e => update('phone', e.target.value)} />
            </div>
            <div className="dw-form__group">
              <select className="dw-select" value={form.service} onChange={e => update('service', e.target.value)} required>
                <option value="">Selecione um serviço</option>
                <option value="wordpress">Site WordPress</option>
                <option value="manual">Manual Técnico</option>
                <option value="automation">Automação</option>
                <option value="consultation">Consultoria</option>
              </select>
            </div>
            <div className="dw-form__group">
              <textarea className="dw-textarea" placeholder="Descreva seu projeto" rows="3" value={form.message} onChange={e => update('message', e.target.value)} />
            </div>
            <label className="dw-form__lgpd">
              <input type="checkbox" checked={form.lgpd} onChange={e => update('lgpd', e.target.checked)} required />
              <span>Autorizo o uso das minhas informações para contato e orçamentos, conforme a LGPD.</span>
            </label>
            <button type="submit" className="dw-btn dw-btn--primary dw-btn--full">
              <i className="fas fa-paper-plane" /> Enviar Mensagem
            </button>
            {submitted && (
              <div className="dw-form__success">
                ✅ Solicitação enviada com sucesso! Retornamos em até 24h úteis.
              </div>
            )}
            <p style={{ fontSize: 12, marginTop: 10, color: 'var(--fg-4)' }}>
              🔒 Seus dados estão protegidos conforme a <strong>LGPD</strong>.
            </p>
          </form>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer className="dw-footer">
      <div className="dw-container">
        <div className="dw-footer__grid">
          <div>
            <img className="dw-footer__brand-img" src="../../assets/logos/donnoweb-horizontal.png" alt="DonnoWeb" />
            <p className="dw-footer__brand-tag">
              Holding de SaaS e agência de tecnologia. Sites, manuais e
              automações que eliminam gargalos invisíveis.
            </p>
          </div>
          <div className="dw-footer__col">
            <h4>Serviços</h4>
            <ul>
              <li><a href="#services">WordPress</a></li>
              <li><a href="#services">Manuais</a></li>
              <li><a href="#services">Automações</a></li>
              <li><a href="#contact">Consultoria</a></li>
            </ul>
          </div>
          <div className="dw-footer__col">
            <h4>Ecossistema</h4>
            <ul>
              <li><a href="#">Lead-Donno</a></li>
              <li><a href="#">Nutrion</a></li>
              <li><a href="#">ServeFlow</a></li>
              <li><a href="#">Pulsynx</a></li>
              <li><a href="#">WeGimenes</a></li>
            </ul>
          </div>
          <div className="dw-footer__col">
            <h4>Contato</h4>
            <ul>
              <li><a href="mailto:contato@donnoweb.com.br">contato@donnoweb.com.br</a></li>
              <li><a href={WHATSAPP_URL} target="_blank" rel="noreferrer">+55 11 99141-7434</a></li>
              <li><a href="#">São Paulo, SP</a></li>
            </ul>
          </div>
        </div>
        <div className="dw-footer__bottom">
          <span>© 2025 DonnoWeb. Todos os direitos reservados.</span>
          <span className="dw-footer__signature">
            <span className="dot" />
            Desenvolvido por DonnoWeb
          </span>
        </div>
      </div>
    </footer>
  );
}

/* expose globally */
Object.assign(window, { Sidebar, Hero, ProductGrid, ProductCard, ProductDetail, Services, ServiceCard, ServiceDetail, Portfolio, About, Testimonials, Contact, Footer });
