import Iridescence from "./components/Iridescence";
import SiteHeader from "./components/SiteHeader";
import Hero from "./components/Hero";
import Marquee from "./components/Marquee";
import Reveal from "./components/Reveal";
import KineticText from "./components/KineticText";
import ServicesJourney from "./components/ServicesJourney";
import Packages from "./components/Packages";
import PillMark from "./components/PillMark";

const advantages = [
  {
    k: "Más rápido",
    metric: "días",
    sub: "no semanas",
    d: "Nuestra plataforma hace el trabajo pesado. Entregamos en días lo que una agencia tradicional tarda en arrancar.",
  },
  {
    k: "Más medible",
    metric: "100%",
    sub: "trazable",
    d: "Cada acción tiene su dashboard y su resultado. Sabes qué funciona y qué no — sin humo ni informes de relleno.",
  },
  {
    k: "Mejor coste",
    metric: "0",
    sub: "horas vacías",
    d: "No pagas por horas: pagas por resultado. La IA absorbe lo repetitivo, el equipo se concentra en la estrategia.",
  },
];

const sectors = [
  { t: "Clínicas estéticas", d: "Captación de pacientes, reputación y agenda llena." },
  { t: "Servicios profesionales", d: "Autoridad, leads cualificados y cierre." },
  { t: "E-commerce", d: "ROAS sostenible y catálogo que convierte." },
  { t: "SaaS & Tech", d: "Activación, retención y growth medible." },
];

export default function Home() {
  return (
    <>
      <Iridescence />
      <SiteHeader />

      <main id="main">
        <span id="top" />
        <Hero />

        <Marquee />

        {/* VENTAJA INJUSTA — dark chapter */}
        <section id="ventaja" className="band band--ink advantage">
          <div className="wrap">
            <Reveal>
              <p className="kicker kicker--light">01 — Ventaja injusta</p>
              <h2 className="band__title">
                <KineticText as="span" text="No alquilamos herramientas." />{" "}
                <KineticText
                  as="span"
                  className="band__title-grad"
                  text="Construimos la máquina."
                  highlight={[0, 2]}
                />
              </h2>
            </Reveal>

            <div className="advantage__grid">
              {advantages.map((a, i) => (
                <Reveal className="advantage__item" key={a.k} y={56}>
                  <span className="advantage__index">0{i + 1}</span>
                  <p className="advantage__metric">
                    {a.metric}
                    <span className="advantage__metric-sub">{a.sub}</span>
                  </p>
                  <h3 className="advantage__k">{a.k}</h3>
                  <p className="advantage__d">{a.d}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* SERVICIOS — horizontal journey */}
        <ServicesJourney />

        {/* SECTORES — deep dive */}
        <section id="sectores" className="band sectors">
          <div className="wrap sectors__wrap">
            <div className="sectors__intro">
              <Reveal>
                <p className="kicker">03 — Profundidad por sector</p>
                <h2 className="sectors__title">
                  No hacemos marketing genérico.{" "}
                  <span className="serif-em">Hablamos tu negocio.</span>
                </h2>
                <p className="sectors__lead">
                  Construimos soluciones a medida de cada sector: el mismo motor de
                  IA, afinado con el contexto, el vocabulario y los KPIs que de verdad
                  importan en tu mercado.
                </p>
                <a className="link-arrow hoverable" href="#contacto">
                  ¿Tu sector no está? Cuéntanoslo
                  <span aria-hidden="true">→</span>
                </a>
              </Reveal>
            </div>

            <Reveal className="sectors__list" stagger={0.1}>
              {sectors.map((s) => (
                <div className="sector hoverable" key={s.t} data-cursor="ver">
                  <PillMark className="sector__mark" />
                  <div>
                    <h3 className="sector__t">{s.t}</h3>
                    <p className="sector__d">{s.d}</p>
                  </div>
                </div>
              ))}
            </Reveal>
          </div>
        </section>

        {/* PAQUETES */}
        <Packages />

        {/* CTA — light iridescent close */}
        <section id="contacto" className="cta">
          <Reveal className="wrap cta__wrap">
            <PillMark className="cta__mark" animate breathe />
            <h2 className="cta__title">
              <KineticText as="span" text="¿Hablamos de tu" />{" "}
              <KineticText
                as="span"
                className="cta__title-grad"
                text="crecimiento?"
                highlight={[0, 0]}
              />
            </h2>
            <p className="cta__lead">
              Cuéntanos dónde estás y te enseñamos, con datos, cómo llegar al
              siguiente nivel. Respuesta en menos de 24h.
            </p>
            <a
              className="btn btn--primary btn--lg hoverable"
              href="mailto:feedback.studios.design@gmail.com"
              data-cursor="escríbenos"
            >
              <span>Habla con nosotros</span>
            </a>
            <p className="cta__mail">
              o escríbenos a{" "}
              <a className="hoverable" href="mailto:feedback.studios.design@gmail.com">
                feedback.studios.design@gmail.com
              </a>
            </p>
          </Reveal>
        </section>
      </main>

      <footer className="site-footer">
        <div className="wrap site-footer__inner">
          <div className="site-footer__brand">
            <span className="brand__word brand__word--lg">
              feedback<span className="brand__word-2">studios</span>
            </span>
            <p className="site-footer__tag">
              La agencia de marketing AI-native. Estrategia humana,
              infraestructura propia.
            </p>
          </div>
          <nav className="site-footer__nav" aria-label="Pie">
            <a className="hoverable" href="#servicios">Servicios</a>
            <a className="hoverable" href="#paquetes">Paquetes</a>
            <a className="hoverable" href="#sectores">Sectores</a>
            <a className="hoverable" href="mailto:feedback.studios.design@gmail.com">Contacto</a>
          </nav>
          <p className="site-footer__legal">
            © 2026 Feedback Studios · Marketing AI-native con infraestructura propia
          </p>
        </div>
      </footer>
    </>
  );
}