const services = [
  { t: "Web & Desarrollo", d: "Sitios en código, rápidos y editables. Sin plantillas genéricas." },
  { t: "SEO", d: "Posicionamiento técnico y de contenido, con reporting real." },
  { t: "Paid Ads", d: "Google, Meta, TikTok, LinkedIn — creatividad + optimización con IA." },
  { t: "Contenido", d: "Artículos y piezas optimizadas para Google y para IA (GEO)." },
  { t: "Diseño & Marca", d: "Identidad y dirección de arte con criterio, no plantillas." },
  { t: "Automatización", d: "Flujos que ahorran horas: leads, reporting, operativa." },
];

const pillars = [
  { k: "Más rápido", d: "Entregamos en días lo que una agencia tradicional tarda semanas." },
  { k: "Más medible", d: "Cada acción con su dashboard y su resultado, no humo." },
  { k: "Mejor coste", d: "Nuestra plataforma hace el trabajo pesado. Pagas resultado, no horas." },
];

const packages = [
  { n: "Sitio AI-native", who: "Necesitas web ya", f: ["Web editable en código", "SEO base + tracking", "Listo en tiempo récord"] },
  { n: "Base", who: "Estás arrancando", f: ["Fundamentos SEO", "Contenido inicial", "Analítica"] },
  { n: "Motor", who: "Quieres crecer", f: ["Ads + SEO + contenido", "Dashboard de resultados", "Optimización mensual"], featured: true },
  { n: "Partner", who: "Quieres escalar", f: ["Full-stack de crecimiento", "Automatización a medida", "Prioridad y plataforma"] },
];

const steps = [
  { n: "01", t: "Diagnóstico", d: "Analizamos tu negocio, tu mercado y tus números." },
  { n: "02", t: "Sistema", d: "Montamos el motor: web, canales, automatización." },
  { n: "03", t: "Crecimiento", d: "Iteramos sobre datos. Tú ves el resultado en tu dashboard." },
];

export default function Home() {
  return (
    <>
      <header className="hd">
        <span className="logo">Feedback Studios</span>
        <nav className="hd-nav">
          <a href="#servicios">Servicios</a>
          <a href="#paquetes">Paquetes</a>
          <a href="#contacto" className="hd-cta">Habla con nosotros</a>
        </nav>
      </header>

      <main>
        {/* HERO */}
        <section className="hero">
          <div className="wrap">
            <p className="eyebrow">Agencia de marketing AI-native</p>
            <h1>
              La mayoría de agencias alquilan sus herramientas.
              <br />
              <span className="grad">Nosotros construimos la nuestra.</span>
            </h1>
            <p className="sub">
              Estrategia humana + nuestra propia plataforma de IA. Web, SEO, ads
              y contenido — más rápido, más medible y a mejor coste que una
              agencia tradicional.
            </p>
            <div className="actions">
              <a className="btn primary" href="#contacto">Habla con nosotros</a>
              <a className="btn ghost" href="#servicios">Ver qué hacemos</a>
            </div>
          </div>
        </section>

        {/* PROOF STRIP */}
        <section className="strip wrap">
          <span>+60 marcas confían en nosotros</span>
          <span className="dot">·</span>
          <span>Web · SEO · Ads · Contenido</span>
          <span className="dot">·</span>
          <span>Resultados medibles</span>
        </section>

        {/* VENTAJA INJUSTA */}
        <section className="band">
          <div className="wrap">
            <h2>Nuestra ventaja injusta</h2>
            <p className="lead">
              No alquilamos herramientas ni envolvemos un ChatGPT. Operamos tu
              marketing sobre <strong>nuestra propia plataforma de IA</strong>.
            </p>
            <div className="grid3">
              {pillars.map((p) => (
                <div className="card" key={p.k}>
                  <h3>{p.k}</h3>
                  <p>{p.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* SERVICIOS */}
        <section id="servicios" className="band alt">
          <div className="wrap">
            <h2>Qué hacemos</h2>
            <p className="lead">Todo lo que necesita tu crecimiento, bajo un mismo techo y un mismo sistema.</p>
            <div className="grid3">
              {services.map((s) => (
                <div className="card" key={s.t}>
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* PROFUNDIDAD POR SECTOR */}
        <section className="band">
          <div className="wrap vertical">
            <div>
              <p className="eyebrow">Soluciones a medida</p>
              <h2>Generalistas por fuera, profundos por dentro</h2>
              <p className="lead">
                Para sectores exigentes construimos soluciones específicas sobre
                nuestra plataforma — por ejemplo, clínicas estéticas con captación,
                seguimiento y operativa a medida. Profundidad que un generalista no tiene.
              </p>
            </div>
          </div>
        </section>

        {/* PAQUETES */}
        <section id="paquetes" className="band alt">
          <div className="wrap">
            <h2>Paquetes</h2>
            <p className="lead">Cada uno con un resultado prometido y su dashboard. No listas de tareas.</p>
            <div className="grid4">
              {packages.map((p) => (
                <div className={"pkg" + (p.featured ? " featured" : "")} key={p.n}>
                  {p.featured && <span className="tag">Más popular</span>}
                  <h3>{p.n}</h3>
                  <p className="who">{p.who}</p>
                  <ul>
                    {p.f.map((x) => (
                      <li key={x}>{x}</li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* PROCESO */}
        <section className="band">
          <div className="wrap">
            <h2>Cómo trabajamos</h2>
            <div className="grid3">
              {steps.map((s) => (
                <div className="card" key={s.n}>
                  <span className="step">{s.n}</span>
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CONTACTO */}
        <section id="contacto" className="cta">
          <div className="wrap">
            <h2>¿Hablamos de tu crecimiento?</h2>
            <p className="lead">Cuéntanos dónde estás y te enseñamos cómo llegar al siguiente nivel.</p>
            <a className="btn primary big" href="mailto:feedback.studios.design@gmail.com">Habla con nosotros</a>
          </div>
        </section>
      </main>

      <footer className="ft">
        <div className="wrap">
          <span>© 2026 Feedback Studios</span>
          <span className="muted">Agencia de marketing AI-native · construido sobre infraestructura propia</span>
        </div>
      </footer>
    </>
  );
}