import Hero from "./components/Hero";
import Reveal from "./components/Reveal";

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 services = [
  { n: "01", t: "Web & Desarrollo", d: "Sitios en código, rápidos y editables. Sin plantillas." },
  { n: "02", t: "SEO", d: "Posicionamiento técnico y de contenido, con reporting real." },
  { n: "03", t: "Paid Ads", d: "Google, Meta, TikTok, LinkedIn — creatividad + IA." },
  { n: "04", t: "Contenido", d: "Piezas optimizadas para Google y para IA (GEO)." },
  { n: "05", t: "Diseño & Marca", d: "Identidad y dirección de arte con criterio." },
  { n: "06", t: "Automatización", d: "Flujos que ahorran horas: leads, reporting, operativa." },
];

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"] },
];

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

      <main>
        <Hero />

        {/* MARQUEE */}
        <div className="marquee" aria-hidden>
          <div className="marquee-track">
            {Array.from({ length: 2 }).map((_, i) => (
              <span key={i}>
                Web · SEO · Paid Ads · Contenido · Diseño · Automatización · IA ·&nbsp;
              </span>
            ))}
          </div>
        </div>

        {/* VENTAJA INJUSTA */}
        <section className="band ink">
          <div className="wrap">
            <Reveal>
              <p className="kicker">01 — Ventaja injusta</p>
              <h2 className="band-h2">
                No alquilamos herramientas. <span className="grad">Construimos la máquina.</span>
              </h2>
            </Reveal>
            <Reveal className="grid3" stagger={0.12}>
              {pillars.map((p) => (
                <div className="card" key={p.k}>
                  <h3>{p.k}</h3>
                  <p>{p.d}</p>
                </div>
              ))}
            </Reveal>
          </div>
        </section>

        {/* SERVICIOS */}
        <section id="servicios" className="band ink">
          <div className="wrap">
            <Reveal>
              <p className="kicker">02 — Qué hacemos</p>
              <h2 className="band-h2">Todo tu crecimiento, un mismo sistema.</h2>
            </Reveal>
            <Reveal className="svc-list" stagger={0.1}>
              {services.map((s) => (
                <div className="svc hoverable" key={s.t}>
                  <span className="svc-n">{s.n}</span>
                  <span className="svc-t">{s.t}</span>
                  <span className="svc-d">{s.d}</span>
                </div>
              ))}
            </Reveal>
          </div>
        </section>

        {/* PAQUETES */}
        <section id="paquetes" className="band ink">
          <div className="wrap">
            <Reveal>
              <p className="kicker">03 — Paquetes</p>
              <h2 className="band-h2">Cada uno con un resultado. No listas de tareas.</h2>
            </Reveal>
            <Reveal className="grid4" stagger={0.1}>
              {packages.map((p) => (
                <div className={"pkg hoverable" + (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>
              ))}
            </Reveal>
          </div>
        </section>

        {/* CTA */}
        <section id="contacto" className="cta">
          <div className="mesh mesh-cta" aria-hidden>
            <span className="blob b1" /><span className="blob b3" />
          </div>
          <Reveal className="wrap">
            <h2 className="cta-h2">¿Hablamos de tu <span className="grad">crecimiento</span>?</h2>
            <p className="hero-sub">Cuéntanos dónde estás y te enseñamos cómo llegar al siguiente nivel.</p>
            <a className="btn primary big hoverable" href="mailto:feedback.studios.design@gmail.com">Habla con nosotros</a>
          </Reveal>
        </section>
      </main>

      <footer className="ft">
        <div className="wrap">
          <span className="logo">feedback<span className="logo-dot">studios</span></span>
          <span className="muted">© 2026 · Agencia de marketing AI-native · infraestructura propia</span>
        </div>
      </footer>
    </>
  );
}