// Sections.jsx — the four service groups + methodology + contact + footer
const DemandGeneration = () => (
  <section id="servicios" className="section">
    <div className="container">
      <SectionHead
        num="[01]"
        eyebrow="// 01 · DEMAND GENERATION"
        title="El motor de captación."
        aside="Lead Acquisition es el protagonista. Social Media y ads dan soporte al motor."
      />
      <div className="card-grid" style={{marginBottom: 16}}>
        <LeadAcquisitionCard />
      </div>
      <div className="card-grid social-tiers">
        <ServiceCard
          variant="social"
          num="[01.B] // SOCIAL · GROWTH"
          title="Growth"
          desc="Gestión y optimización profesional de Meta Ads + contenido visual de alto impacto."
          features={[
            "Gestión y optimización de Meta Ads",
            "Creación de 3 flyers / mes",
            "Creación de 1 video / mes",
            "Diseño + copy estratégico",
            "Reporte mensual de desempeño",
          ]}
          price="$250"
          priceMo="/mes"
          href="pages/social/growth.html"
        />
        <ServiceCard
          variant="social"
          num="[01.B] // SOCIAL · PRO"
          title="Pro"
          desc="Gestión integral de Meta Ads con mayor volumen de contenido y estrategia avanzada."
          features={[
            "12 publicaciones / mes",
            "Gestión y optimización de Meta Ads",
            "Diseño + copy estratégico",
            "Creación de flyers y video",
            "Reporte mensual ampliado",
          ]}
          price="$350"
          priceMo="/mes"
          featured
          href="pages/social/pro.html"
        />
      </div>
    </div>
  </section>
);

const DigitalInfrastructure = () => (
  <section className="section section-light">
    <div className="container">
      <SectionHead
        num="[02]"
        eyebrow="// 02 · DIGITAL INFRASTRUCTURE"
        title="Sitios que convierten."
        aside="No portfolios. Activos digitales con foco en captura, velocidad y SEO técnico."
      />
      <div className="card-grid web">
        <ServiceCard
          num="[02.A] // LANDING"
          title="Landing Page"
          desc="Página única con foco quirúrgico en conversión."
          ideal="Capturar leads con una página de conversión."
          price="$200"
          includes={["2 revisiones", "Hosting 6 meses incluido"]}
          href="pages/web/landing.html"
        />
        <ServiceCard
          num="[02.B] // CORPORATIVO"
          title="Sitio Corporativo"
          desc="Sitio multi-página con CMS, blog y SEO técnico para presencia institucional."
          ideal="Empresas que necesitan presencia digital completa."
          price="$450"
          includes={["Hosting 1 año incluido"]}
          featured
          href="pages/web/corporativo.html"
        />
        <ServiceCard
          num="[02.C] // E-COMMERCE"
          title="E-Commerce"
          desc="Tienda online con catálogo, pasarela y analítica de conversión."
          ideal="Negocios que venden en línea."
          price="$1,250"
          includes={["Desarrollo a medida"]}
          href="pages/web/ecommerce.html"
        />
      </div>
    </div>
  </section>
);

const BusinessIntelligence = () => (
  <section className="section">
    <div className="container">
      <SectionHead
        num="[03]"
        eyebrow="// 03 · BUSINESS INTELLIGENCE"
        title="Decidir con datos, no con intuición."
        aside="Dashboards conectados a tus fuentes reales — ads, CRM, ventas. Una sola pantalla."
      />
      <div className="card-grid data">
        <ServiceCard
          num="[03.A] // DATA ESSENTIALS"
          title="Data Essentials"
          desc="Dashboard único con métricas core de marketing y ventas. Setup + mantenimiento."
          price="$450 + $60/mo"
          features={["Hasta 3 fuentes", "Refresh diario", "1 dashboard core"]}
        />
        <ServiceCard
          num="[03.B] // DATA PRO"
          title="Data Pro"
          desc="Suite multi-dashboard con modelado, alertas y panel ejecutivo."
          price="$900 + $120/mo"
          features={["Hasta 8 fuentes", "Refresh por hora", "Alertas + modelo de atribución"]}
          featured
        />
      </div>
    </div>
  </section>
);

const ComingSoon = () => (
  <section className="section">
    <div className="container">
      <SectionHead
        num="[04]"
        eyebrow="// 04 · COMING SOON"
        title="Próximamente: AI Sales Agent."
        aside="Atención y calificación 24/7 sobre WhatsApp Business."
      />
      <div className="cs-card">
        <div>
          <span className="cs-badge"><span className="dot"></span>2026 · EN PREPARACIÓN</span>
          <h2>AI Sales Agent <span className="dim">— para WhatsApp.</span></h2>
          <p className="cs-desc">
            Califica, responde y agenda mientras tu equipo duerme. Conectado a tu CRM y a las campañas que ya generan leads. No es un chatbot — es un agente comercial.
          </p>
          <div className="cs-meta">v.2026 · LISTA DE ESPERA ABIERTA</div>
        </div>
        <div className="cs-mock">
          <div className="cs-mock-head">// WHATSAPP · DEMO</div>
          <div className="cs-bubble in">Hola, vi su anuncio. ¿Hacen instalación en Panamá Oeste?</div>
          <div className="cs-bubble out">Hola María. Sí, tenemos cobertura en toda la provincia. ¿Para cuándo necesitas la instalación?</div>
          <div className="cs-bubble in">Idealmente esta semana</div>
          <div className="cs-typing"><span></span><span></span><span></span></div>
        </div>
      </div>
    </div>
  </section>
);

const Methodology = () => (
  <section id="metodologia" className="section section-light">
    <div className="container">
      <SectionHead
        num="[//]"
        eyebrow="// METODOLOGÍA"
        title="Cómo opera el sistema."
        aside="Cuatro fases. Cada una con entregables, métricas y ventana de revisión."
      />
      <div className="methodology">
        <div className="method-step">
          <div className="num">[01] DIAGNÓSTICO</div>
          <h3>Mapeo del funnel</h3>
          <p>Auditoría de operación, audiencia y stack actual. Salida: hipótesis y baseline.</p>
        </div>
        <div className="method-step">
          <div className="num">[02] ESTRATEGIA</div>
          <h3>Plan de captación</h3>
          <p>Segmentación, mensajes, presupuesto y KPIs por canal. Salida: roadmap 90 días.</p>
        </div>
        <div className="method-step">
          <div className="num">[03] EJECUCIÓN</div>
          <h3>Lanzamiento</h3>
          <p>Setup técnico, creatividades, campañas y entrega de leads al equipo comercial.</p>
        </div>
        <div className="method-step">
          <div className="num">[04] OPTIMIZACIÓN</div>
          <h3>Mejora continua</h3>
          <p>Iteración semanal sobre CPL, CAC y ROAS. Reporting transparente.</p>
        </div>
      </div>
    </div>
  </section>
);

const Contact = () => {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section id="contacto" className="section">
      <div className="container">
        <SectionHead
          num="[//]"
          eyebrow="// CONTACTO"
          title="Hablemos de tu pipeline."
          aside="Diagnóstico inicial sin costo. Respuesta en menos de 24 horas hábiles."
        />
        <div className="contact-grid">
          <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
            <div className="row-2">
              <label><span className="lab">Nombre</span><input type="text" placeholder="Tu nombre" required /></label>
              <label><span className="lab">Empresa</span><input type="text" placeholder="Empresa" required /></label>
            </div>
            <label><span className="lab">Email</span><input type="email" placeholder="contacto@empresa.com" required /></label>
            <label><span className="lab">Servicio de interés</span>
              <select defaultValue="lead">
                <option value="lead">[01] Lead Acquisition</option>
                <option value="social">[01] Social Media</option>
                <option value="web">[02] Sitio web</option>
                <option value="data">[03] Business Intelligence</option>
                <option value="ai">[04] AI Sales Agent (lista de espera)</option>
              </select>
            </label>
            <label><span className="lab">Cuéntanos de tu operación</span><textarea placeholder="Sector, tamaño, objetivos comerciales, retos actuales."></textarea></label>
            <button type="submit" className="btn btn-primary" style={{alignSelf:'start', marginTop: 8}}>
              {submitted ? 'Recibido. Te escribimos pronto. ✓' : <>Enviar diagnóstico <span className="ar">→</span></>}
            </button>
          </form>
          <aside className="contact-info">
            <div className="contact-block">
              <div className="l">// WHATSAPP</div>
              <a className="v" href="https://wa.me/50762057395">+507 6205 7395</a>
            </div>
            <div className="contact-block">
              <div className="l">// EMAIL</div>
              <a className="v" href="mailto:contacto@mercuryfishtech.com">contacto@mercuryfishtech.com</a>
            </div>
            <div className="contact-block">
              <div className="l">// LOCATION</div>
              <div className="v">Panamá, PA</div>
            </div>
            <div className="contact-block">
              <div className="l">// HORARIO</div>
              <div className="v" style={{fontSize: 14}}>Lun–Vie · 09:00 – 18:00 ET</div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const base = (typeof window !== 'undefined' && window.__BASE) || '';
  return (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="logo">
            <img src={base + 'img/mft-fish-logo.png'} alt="MFT" />
            <span className="name">Mercury Fish Agency</span>
          </div>
          <p>Sistemas de captación de leads para empresas que ya operan. Panamá, 2026.</p>
        </div>
        <div className="footer-col">
          <h4>// Servicios</h4>
          <ul>
            <li><a href={base + 'index.html#servicios'}>Lead Acquisition</a></li>
            <li><a href={base + 'pages/social/growth.html'}>Social · Growth</a></li>
            <li><a href={base + 'pages/social/pro.html'}>Social · Pro</a></li>
            <li><a href={base + 'pages/web/landing.html'}>Sitio web</a></li>
            <li><a href={base + 'index.html#servicios'}>Business Intelligence</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>// Empresa</h4>
          <ul>
            <li><a href={base + 'index.html#metodologia'}>Metodología</a></li>
            <li><a href={base + 'index.html#contacto'}>Contacto</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>// Contacto</h4>
          <ul>
            <li><a href="https://wa.me/50762057395">WhatsApp</a></li>
            <li><a href="mailto:contacto@mercuryfishtech.com">Email</a></li>
            <li><a>Panamá, PA</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span className="meta">© 2026 Mercury Fish Tech · Hecho en Panamá</span>
        <span className="meta">v.2026 · ● ACTIVE</span>
      </div>
    </div>
  </footer>
  );
};

Object.assign(window, { DemandGeneration, DigitalInfrastructure, BusinessIntelligence, ComingSoon, Methodology, Contact, Footer });