
// ============================================================
// ESTUDIO RETÓRICA · Home
// ============================================================

const RETORICA_IMAGES = {
  logo: getRetoricaAssetUrl('assets/retorica-logo.png'),
  diada: getRetoricaAssetUrl('assets/Proyecto-nuevo-1.png'),
  redbuzz: getRetoricaAssetUrl('assets/Proyecto-nuevo.jpg'),
  signature: getRetoricaAssetUrl('assets/Proyecto-nuevo-3.png'),
  matrix: getRetoricaAssetUrl('assets/matrix-events-1.png'),
  disruptivos: getRetoricaAssetUrl('assets/Logo-Disruptivos-1.png'),
  tucanes: getRetoricaAssetUrl('assets/los-tucanes.png'),
  cultural: getRetoricaAssetUrl('assets/cultural-bytes.png'),
  eco: getRetoricaAssetUrl('assets/Eco3Planet-03.jpg'),
  editorial: getRetoricaAssetUrl('assets/1.png'),
  radical: getRetoricaAssetUrl('assets/3-1.png'),
};

const WHATSAPP_NUMBER = '34617492461';
const BRIEF_LINK = '/brief/';

const bgImage = (url, overlay = 'linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.30) 100%)') => ({
  backgroundImage: `${overlay}, url(${url})`,
});

const serviceCards = [
  {
    title: 'Branding e identidad corporativa',
    text: 'Retórica construye marcas con criterio, personalidad y coherencia para que cada punto de contacto se sienta sólido, recordable y comercialmente útil.',
    image: RETORICA_IMAGES.radical,
  },
  {
    title: 'Diseño y desarrollo web',
    text: 'Creamos sitios web que ordenan la oferta, elevan la percepción de marca y convierten visitas en oportunidades reales de contacto y venta.',
    image: RETORICA_IMAGES.eco,
  },
  {
    title: 'Marketing, contenido y audiovisual',
    text: 'Desde redes sociales y posicionamiento hasta piezas audiovisuales, podcast y campañas, articulamos contenido para que la marca mantenga presencia y tracción.',
    image: RETORICA_IMAGES.disruptivos,
  },
];

const clients = [
  { name: 'Matrix Events', image: RETORICA_IMAGES.matrix },
  { name: 'Radical Trainer', image: RETORICA_IMAGES.radical },
  { name: 'Disruptivos', image: RETORICA_IMAGES.disruptivos },
  { name: 'Diada Tec', image: RETORICA_IMAGES.diada },
  { name: 'Cultural Bytes', image: RETORICA_IMAGES.cultural },
  { name: 'Eco3Planet', image: RETORICA_IMAGES.eco },
  { name: 'Redbuzz', image: RETORICA_IMAGES.redbuzz },
  { name: 'Proyecto firma', image: RETORICA_IMAGES.signature },
  { name: 'Los Tucanes', image: RETORICA_IMAGES.tucanes },
];

const portfolioCards = [
  {
    slug: 'matrix-events',
    meta: 'Branding y activaciones',
    title: 'Matrix Events',
    text: 'Sistema visual de alto impacto para eventos, piezas promocionales y comunicación de marca con lectura inmediata.',
    image: RETORICA_IMAGES.matrix,
    span: 'medium',
  },
  {
    slug: 'radical-trainer',
    meta: 'Identidad corporativa',
    title: 'Radical Trainer',
    text: 'Marca con carácter deportivo y comercial, diseñada para ganar reconocimiento en fachada, piezas y medios digitales.',
    image: RETORICA_IMAGES.radical,
    span: 'medium',
  },
  {
    slug: 'disruptivos',
    meta: 'Contenido y audiovisual',
    title: 'Disruptivos',
    text: 'Identidad flexible para covers, clips, podcast y activos digitales dentro de una comunicación más expresiva.',
    image: RETORICA_IMAGES.disruptivos,
    span: 'medium',
  },
  {
    slug: 'diada-tec',
    meta: 'Marca corporativa',
    title: 'Diada Tec',
    text: 'Lenguaje visual limpio para una percepción técnica, actual y más confiable frente a clientes y aliados.',
    image: RETORICA_IMAGES.diada,
    span: 'medium',
  },
  {
    slug: 'cultural-bytes',
    meta: 'Digital y comunidad',
    title: 'Cultural Bytes',
    text: 'Activos visuales orientados a educación, comunidad y posicionamiento digital con una voz más cercana.',
    image: RETORICA_IMAGES.cultural,
    span: 'medium',
  },
  {
    slug: 'eco3planet',
    meta: 'Diseño web y presentación',
    title: 'Eco3Planet',
    text: 'Puesta en escena digital para reforzar innovación, producto y claridad comercial en la presentación de valor.',
    image: RETORICA_IMAGES.eco,
    span: 'medium',
  },
];

const trustStats = [
  { value: 10, suffix: '+', label: 'Proyectos y clientes visibles', detail: 'El portafolio aporta respaldo visual desde el primer recorrido por la home.' },
  { value: 6, suffix: '', label: 'Líneas de servicio claras', detail: 'Identidad, diseño web, redes, audiovisual, activaciones y marketing dentro de una misma narrativa.' },
  { value: 3, suffix: '', label: 'Rutas directas de contacto', detail: 'Portafolio, brief y WhatsApp reducen fricción para iniciar una conversación.' },
  { value: 1, suffix: '', label: 'Lenguaje de marca consistente', detail: 'La experiencia mantiene una dirección visual sólida entre home, servicios, casos y contacto.' },
];

const conversionBlocks = [
  {
    icon: 'eye',
    title: 'Oferta mejor explicada',
    text: 'Desde Retórica, cada servicio se presenta como parte de una propuesta integral de marca, web, marketing y contenido.',
  },
  {
    icon: 'layers',
    title: 'Autoridad desde el portafolio',
    text: 'Los proyectos funcionan como evidencia de criterio, capacidad de ejecución y variedad de soluciones para distintos tipos de cliente.',
  },
  {
    icon: 'star',
    title: 'Más intención comercial',
    text: 'La navegación, el brief y el acceso directo a WhatsApp acompañan mejor la decisión de pedir propuesta o iniciar una conversación.',
  },
];

const processSteps = [
  { n: '01', title: 'Diagnóstico', text: 'Leemos el estado de la marca, el objetivo comercial, el público y los canales donde necesita ganar claridad o presencia.' },
  { n: '02', title: 'Dirección retórica', text: 'Definimos el mensaje central, la jerarquía de contenido y la línea visual que ordenará la comunicación del proyecto.' },
  { n: '03', title: 'Diseño, desarrollo y producción', text: 'Construimos identidad, sitio web, piezas, campañas o contenidos con una ejecución alineada a la estrategia planteada.' },
  { n: '04', title: 'Salida al mercado', text: 'Entregamos una base lista para publicar, presentar y convertir mejor en medios digitales, sociales o comerciales.' },
];

const featuredCases = [
  {
    name: 'Matrix Events',
    slug: 'matrix-events',
    category: 'Branding y activaciones',
    image: RETORICA_IMAGES.matrix,
    headline: 'Un sistema visual de alto impacto para eventos, piezas promocionales y escenarios donde la marca debe entrar con fuerza desde el primer vistazo.',
    bullets: ['Marca visible en entornos exigentes', 'Aplicación rápida en formatos promocionales', 'Mayor recordación en activaciones'],
  },
  {
    name: 'Radical Trainer',
    slug: 'radical-trainer',
    category: 'Identidad corporativa',
    image: RETORICA_IMAGES.radical,
    headline: 'Una marca de energía alta, diseñada para sostener presencia comercial en fachada, piezas físicas y comunicación digital.',
    bullets: ['Lenguaje deportivo y comercial', 'Lectura sólida en gran formato', 'Mayor fuerza de marca'],
  },
  {
    name: 'Cultural Bytes',
    slug: 'cultural-bytes',
    category: 'Digital y comunidad',
    image: RETORICA_IMAGES.cultural,
    headline: 'Activos visuales pensados para educación, comunidad y presencia digital continua con una comunicación más clara y cercana.',
    bullets: ['Ecosistema visual para contenido', 'Mejor conexión con comunidad', 'Identidad adaptable para digital'],
  },
];

const trustMessages = [
  {
    tag: 'Centro',
    title: 'Retórica no es solo el nombre del estudio: es la forma de ordenar una marca para que diga mejor lo que vale.',
    text: 'La web parte de esa idea y convierte cada sección en una extensión del discurso comercial, visual y estratégico de la agencia.',
  },
  {
    tag: 'Oferta',
    title: 'Branding, desarrollo web, marketing digital, contenido y audiovisual dentro de un mismo relato.',
    text: 'La experiencia deja ver que la agencia puede acompañar desde la construcción de marca hasta su activación en medios y canales digitales.',
  },
  {
    tag: 'Conversión',
    title: 'Primero se entiende la propuesta, luego se validan los proyectos y finalmente se facilita el contacto.',
    text: 'Ese orden ayuda a que el visitante llegue mejor preparado a pedir una propuesta o iniciar una conversación.',
  },
];

const serviceList = [
  {
    n: '01',
    title: 'Estrategia de marca e identidad corporativa',
    desc: 'Definimos el corazón visual y verbal de la marca para que cada pieza tenga coherencia, intención y una mejor percepción comercial.',
    items: ['Naming y dirección conceptual', 'Logo y sistema visual', 'Paleta, tipografía y tono', 'Piezas institucionales y comerciales'],
  },
  {
    n: '02',
    title: 'Diseño y desarrollo web',
    desc: 'Construimos sitios que presentan mejor el valor de la empresa y convierten el tráfico en oportunidades de negocio.',
    items: ['Arquitectura de contenido', 'Diseño UI y experiencia', 'Desarrollo de páginas comerciales', 'Portafolio, formularios y CTA'],
  },
  {
    n: '03',
    title: 'Marketing digital y posicionamiento',
    desc: 'Alineamos contenido, SEO, campañas y social media para darle mayor visibilidad a la marca en canales digitales.',
    items: ['Gestión de redes sociales', 'SEO y contenido estratégico', 'Campañas digitales', 'Landing pages y captación'],
  },
  {
    n: '04',
    title: 'Contenido, audiovisual y activaciones',
    desc: 'Producimos piezas que sostienen la presencia de la marca en video, podcast, fotografía, calle y formatos editoriales.',
    items: ['Producción audiovisual y podcast', 'Fotografía y video de marca', 'Piezas para campañas', 'Buzoneo y street marketing'],
  },
];

const briefBenefits = [
  'Aclara objetivos, alcance y prioridad comercial.',
  'Permite cotizar con más contexto y mejor criterio.',
  'Ordena referencias, públicos, tiempos y entregables.',
  'Hace que la conversación inicial con Retórica sea más ágil y productiva.',
];

const faqItems = [
  {
    q: '¿Qué tipo de agencia es Retórica?',
    a: 'Retórica se presenta como un estudio que articula branding, diseño y desarrollo web, marketing digital, contenido, audiovisual y activaciones dentro de una misma propuesta de comunicación.',
  },
  {
    q: '¿Cómo se inicia un proyecto con la agencia?',
    a: 'La forma más rápida es compartir el contexto por WhatsApp o correo y, si el proyecto ya tiene una idea clara, completar el brief para acelerar la propuesta.',
  },
  {
    q: '¿Se pueden integrar branding, web y marketing en un mismo alcance?',
    a: 'Sí. La lógica del sitio y de la oferta parte de que Retórica puede acompañar la marca desde su definición hasta su activación digital y comercial.',
  },
  {
    q: '¿Retórica también trabaja producción audiovisual y campañas?',
    a: 'Sí. La agencia puede cubrir piezas audiovisuales, podcast, fotografía, campañas, contenido social y activaciones de marca según la necesidad del proyecto.',
  },
];

const buildWhatsappUrl = ({ name, email, service, message }) => {
  const text = [
    'Hola, quiero hablar con Estudio Retórica.',
    '',
    `Nombre: ${name || ''}`,
    `Email: ${email || ''}`,
    `Servicio de interés: ${service || ''}`,
    'Mensaje:',
    message || '',
  ].join('\n');
  return `https://api.whatsapp.com/send/?app_absent=0&phone=${WHATSAPP_NUMBER}&text=${encodeURIComponent(text)}&type=phone_number`;
};

const Hero = () => (
  <section className="hp-hero">
    <div className="hp-hero__noise" aria-hidden="true" />
    <div className="hp-hero__inner">
      <div className="hp-hero__grid">
        <div className="hp-hero__copy" data-reveal>
          <div className="t-eyebrow hp-hero__eyebrow">Identidad corporativa, diseño web y comunicación</div>
          <h1 className="hp-hero__title">Retórica convierte estrategia, diseño y contenido en una presencia de marca más clara, atractiva y comercial.</h1>
          <p className="hp-hero__sub">
            Desde la identidad corporativa hasta el desarrollo web, el marketing digital y la producción audiovisual, Retórica ordena la comunicación de las marcas para que se vean mejor, se entiendan mejor y conviertan mejor.
          </p>
          <div className="hp-hero__ctas">
            <a href="#contact" className="btn btn--secondary btn--xl">Solicitar propuesta</a>
            <a href={BRIEF_LINK} className="btn btn--primary btn--xl">Descargar brief</a>
          </div>
          <div className="hp-hero__badges">
            {['Identidad corporativa', 'Diseño web', 'Redes y marketing', 'Audiovisual y podcast'].map((item) => (
              <span key={item} className="hp-hero__badge">{item}</span>
            ))}
          </div>
        </div>

        <div className="hp-hero__visual" data-reveal>
          <div className="hp-hero__ring hp-hero__ring--one" />
          <div className="hp-hero__ring hp-hero__ring--two" />
          <div className="hp-hero__panel">
            <div className="hp-hero__panel-art" style={bgImage(RETORICA_IMAGES.matrix, 'linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.24) 100%)')} />
            <div className="hp-hero__panel-copy">
              <div className="t-caption" style={{ color: 'rgba(254,234,0,0.74)' }}>Proyecto destacado</div>
              <div className="t-h2" style={{ color: '#fff', marginTop: 8 }}>Matrix Events</div>
              <p className="t-body-sm" style={{ color: 'rgba(255,255,255,0.74)', marginTop: 10 }}>
                Una identidad de alto contraste que deja claro cómo Retórica convierte una marca en presencia inmediata.
              </p>
            </div>
          </div>
          <div className="hp-hero__float hp-hero__float--a">
            <img src={RETORICA_IMAGES.cultural} alt="Cultural Bytes" />
            <div>
              <strong>Proyectos reales</strong>
              <span>Casos, marcas y trabajos visibles</span>
            </div>
          </div>
          <div className="hp-hero__float hp-hero__float--b">
            <img src={RETORICA_IMAGES.disruptivos} alt="Disruptivos" />
            <div>
              <strong>Servicios conectados</strong>
              <span>Branding, digital, contenido y audiovisual</span>
            </div>
          </div>
        </div>
      </div>

      <div className="hp-hero__cards" data-reveal>
        {serviceCards.map((card) => (
          <a key={card.title} href="/servicios/" className="hp-service-card">
            <div className="hp-service-card__media" style={bgImage(card.image)} />
            <div className="hp-service-card__body">
              <div className="hp-service-card__title">{card.title}</div>
              <p className="hp-service-card__text">{card.text}</p>
              <div className="hp-service-card__footer">
                <span className="btn btn--primary btn--lg">Ver más</span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const Logos = () => (
  <section className="hp-grid-section hp-logo-section">
    <div className="hp-grid-section__inner">
      <div className="hp-grid-section__header" data-reveal>
        <div>
          <div className="t-eyebrow" style={{ color: 'rgba(0,0,0,0.56)' }}>Portafolio activo</div>
          <h2 className="t-display-sm" style={{ marginTop: 16 }}>Algunos proyectos y clientes que aportan respaldo visual desde la primera visita.</h2>
        </div>
        <p className="t-body" style={{ color: 'var(--fg-muted)' }}>
          Marcas, campañas y proyectos que ya pasaron por Retórica y hoy sirven como prueba visible de criterio, ejecución y versatilidad.
        </p>
      </div>
      <div className="hp-logo-marquee" data-reveal>
        <div className="hp-logo-track">
          {[...clients, ...clients].map((client, index) => (
            <div className="hp-logo-item" key={`${client.name}-${index}`}>
              <img src={client.image} alt={client.name} loading="lazy" />
              <span>{client.name}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);



const useSurfacePointer = (ref) => {
  React.useEffect(() => {
    const node = ref.current;
    if (!node) return;

    const setPosition = (clientX, clientY) => {
      const rect = node.getBoundingClientRect();
      const x = clientX - rect.left;
      const y = clientY - rect.top;
      const px = rect.width ? x / rect.width : 0.5;
      const py = rect.height ? y / rect.height : 0.5;
      node.style.setProperty('--mx', `${(px * 100).toFixed(2)}%`);
      node.style.setProperty('--my', `${(py * 100).toFixed(2)}%`);
      node.style.setProperty('--rx', `${(py - 0.5) * -10}deg`);
      node.style.setProperty('--ry', `${(px - 0.5) * 12}deg`);
    };

    const reset = () => {
      node.style.setProperty('--mx', '50%');
      node.style.setProperty('--my', '50%');
      node.style.setProperty('--rx', '0deg');
      node.style.setProperty('--ry', '0deg');
    };

    reset();

    const onMove = (event) => setPosition(event.clientX, event.clientY);
    const onTouchMove = (event) => {
      const touch = event.touches && event.touches[0];
      if (touch) setPosition(touch.clientX, touch.clientY);
    };

    node.addEventListener('mousemove', onMove);
    node.addEventListener('touchmove', onTouchMove, { passive: true });
    node.addEventListener('mouseleave', reset);
    return () => {
      node.removeEventListener('mousemove', onMove);
      node.removeEventListener('touchmove', onTouchMove);
      node.removeEventListener('mouseleave', reset);
    };
  }, [ref]);
};

const ShaderWallpaperCard = ({ variant, title, text, meta, chips = [] }) => {
  const ref = React.useRef(null);
  useSurfacePointer(ref);

  return (
    <article
      ref={ref}
      className={`shader-card shader-card--${variant}`}
    >
      <div className="shader-card__surface" aria-hidden="true">
        <div className="shader-card__mesh" />
        <div className="shader-card__grain" />
        <div className="shader-card__float shader-card__float--one" />
        <div className="shader-card__float shader-card__float--two" />
      </div>
      <div className="shader-card__content">
        <div className="shader-card__meta">
          <span>{meta}</span>
          <span>Explora</span>
        </div>
        <h3 className="t-h2 shader-card__title">{title}</h3>
        <p className="t-body shader-card__text">{text}</p>
        <div className="shader-card__chips">
          {chips.map((chip) => (
            <span key={chip} className="chip chip--dark">{chip}</span>
          ))}
        </div>
      </div>
    </article>
  );
};

const InteractiveWallpapers = () => (
  <section className="section hp-shaders">
    <div className="section-shell">
      <div className="hp-shaders__shell">
        <div className="section-head" data-reveal>
          <div>
            <div className="t-eyebrow">Interacción visual</div>
            <h2 className="t-display-sm" style={{ marginTop: 16 }}>Interacción con carácter para que la marca se sienta viva, memorable y actual.</h2>
          </div>
          <p className="t-body" style={{ maxWidth: 580, color: 'var(--fg-muted)' }}>
            Cada superficie responde al movimiento para transmitir energía, dirección y una sensación premium alineada con una agencia que convierte estrategia, diseño y contenido en presencia de marca.
          </p>
        </div>

        <div className="hp-shaders__grid">
          <ShaderWallpaperCard
            variant="aurora"
            meta="Branding"
            title="Campo de marca"
            text="Aquí vive el pulso de las marcas que quieren entrar con personalidad, ordenar su discurso y quedarse en la memoria desde el primer impacto."
            chips={['Branding', 'Identidad corporativa', 'Sistema visual']}
          />
          <ShaderWallpaperCard
            variant="grid"
            meta="Digital"
            title="Señal digital"
            text="Una señal clara para empresas que necesitan una web más convincente, mejor arquitectura de contenido y una ruta directa hacia el contacto o la venta."
            chips={['Desarrollo web', 'SEO', 'Experiencia digital']}
          />
          <ShaderWallpaperCard
            variant="rings"
            meta="Contenido"
            title="Órbita de contenido"
            text="Contenido que se mueve como se mueve una buena marca: con ritmo, intención y piezas listas para sostener campañas, redes, video y presencia digital."
            chips={['Contenido', 'Audiovisual', 'Campañas']}
          />
        </div>
      </div>
    </div>
  </section>
);

const Results = () => (
  <section className="hp-grid-section hp-results">
    <div className="hp-grid-section__inner">
      <div className="hp-grid-section__header" data-reveal>
        <div>
          <div className="t-eyebrow" style={{ color: 'rgba(0,0,0,0.56)' }}>Lo que mejora el sitio</div>
          <h2 className="t-display-sm" style={{ marginTop: 16 }}>Una web más clara para vender mejor lo que hace Retórica como agencia.</h2>
        </div>
        <p className="t-body" style={{ color: 'var(--fg-muted)' }}>
          La meta no es solo verse bien. La meta es dejar claro qué resuelve la agencia, respaldarlo con proyectos y facilitar el inicio de una conversación comercial.
        </p>
      </div>
      <div className="hp-results__grid">
        {trustStats.map((item) => (
          <article key={item.label} className="hp-result-card" data-reveal>
            <div className="hp-result-card__n">
              <span data-counter={item.value}>0</span>{item.suffix}
            </div>
            <div className="t-h4">{item.label}</div>
            <p className="t-body-sm" style={{ marginTop: 10, color: 'var(--fg-muted)' }}>{item.detail}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Manifesto = () => (
  <section className="hp-highlight">
    <div className="hp-highlight__inner">
      <div className="hp-grid-section__header" style={{ gridTemplateColumns: '1fr .9fr' }} data-reveal>
        <div>
          <div className="t-eyebrow" style={{ color: 'rgba(254,234,0,0.72)' }}>Qué hace más atractiva la experiencia</div>
          <h2 className="t-display-sm" style={{ marginTop: 16, color: '#fff' }}>Movimiento sutil, mejor jerarquía y una propuesta de agencia más fácil de entender.</h2>
        </div>
        <p className="t-body" style={{ color: 'rgba(255,255,255,0.72)' }}>
          Retórica gana una presencia más contundente: se entiende rápido, se siente sólida y deja claro cómo una marca puede crecer desde el branding hasta su activación digital.
        </p>
      </div>
      <div className="hp-conversion-grid">
        {conversionBlocks.map((item) => (
          <article key={item.title} className="hp-conversion-card" data-reveal>
            <div className="hp-conversion-card__icon"><Icon name={item.icon} size={18} color="#FEEA00" /></div>
            <h3 className="t-h3" style={{ color: '#fff', marginTop: 18 }}>{item.title}</h3>
            <p className="t-body-sm" style={{ color: 'rgba(255,255,255,0.72)', marginTop: 12 }}>{item.text}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Work = () => (
  <section className="hp-work">
    <div className="hp-work__inner">
      <div className="hp-work__head" data-reveal>
        <div>
          <div className="t-eyebrow" style={{ color: 'rgba(0,0,0,0.56)' }}>Proyectos</div>
          <h2 className="t-display-sm" style={{ marginTop: 16 }}>Proyectos que muestran cómo Retórica convierte ideas en marcas con presencia, ritmo y peso comercial.</h2>
        </div>
        <a href="/portafolio/" className="btn btn--secondary btn--lg">Explorar proyectos</a>
      </div>
      <div className="hp-work__grid">
        {portfolioCards.map((card, index) => (
          <a key={index} href={`/caso/?project=${card.slug}`} className={`hp-work-card hp-work-card--${card.span}`} data-reveal>
            <div className="hp-work-card__art" style={bgImage(card.image, 'linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.82) 100%)')} />
            <div className="hp-work-card__meta">
              <div>
                <div className="t-caption" style={{ color: 'rgba(255,255,255,0.72)' }}>{card.meta}</div>
                <div className={card.span === 'large' ? 't-display-sm' : 't-h2'} style={{ marginTop: 8 }}>{card.title}</div>
                <p className="t-body-sm" style={{ marginTop: 10, color: 'rgba(255,255,255,0.78)', maxWidth: 460 }}>{card.text}</p>
              </div>
              <Icon name="arrow-up-right" size={22} color="#FEEA00" />
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const Process = () => (
  <section className="hp-grid-section hp-process">
    <div className="hp-grid-section__inner">
      <div className="hp-grid-section__header" data-reveal>
        <div>
          <div className="t-eyebrow" style={{ color: 'rgba(0,0,0,0.56)' }}>Ruta de trabajo</div>
          <h2 className="t-display-sm" style={{ marginTop: 16 }}>De la idea inicial a una marca lista para salir al mercado con forma, discurso y dirección.</h2>
        </div>
        <p className="t-body" style={{ color: 'var(--fg-muted)' }}>
          Cada etapa aterriza la propuesta con más claridad, más valor percibido y una ejecución lista para competir mejor en digital y en el mundo real.
        </p>
      </div>
      <div className="hp-process__rail">
        {processSteps.map((item) => (
          <article key={item.title} className="hp-process__item" data-reveal>
            <div className="hp-process__n">{item.n}</div>
            <div className="hp-process__content">
              <h3 className="t-h3">{item.title}</h3>
              <p className="t-body-sm" style={{ marginTop: 10, color: 'var(--fg-muted)' }}>{item.text}</p>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Spotlight = () => {
  const [active, setActive] = React.useState(0);
  const current = featuredCases[active];

  return (
    <section className="hp-grid-section hp-spotlight hp-grid-section--black">
      <div className="hp-grid-section__inner">
        <div className="hp-grid-section__header" data-reveal>
          <div>
            <div className="t-eyebrow" style={{ color: 'rgba(254,234,0,0.72)' }}>Casos destacados</div>
            <h2 className="t-display-sm" style={{ marginTop: 16 }}>Casos que convierten curiosidad en confianza y confianza en intención de compra.</h2>
          </div>
          <p className="t-body" style={{ color: 'rgba(255,255,255,0.74)' }}>
            Cada caso resume una misma promesa: cuando Retórica entra en una marca, la propuesta se vuelve más clara, más visible y más fácil de elegir.
          </p>
        </div>
        <div className="hp-spotlight__layout">
          <div className="hp-spotlight__list">
            {featuredCases.map((item, index) => (
              <button
                key={item.name}
                type="button"
                className={`hp-spotlight__trigger ${active === index ? 'is-active' : ''}`}
                onClick={() => setActive(index)}
              >
                <span className="hp-spotlight__trigger-meta">{item.category}</span>
                <span className="hp-spotlight__trigger-title">{item.name}</span>
                <span className="hp-spotlight__trigger-text">{item.headline}</span>
                <Icon name="arrow-up-right" size={18} color="#FEEA00" />
              </button>
            ))}
          </div>
          <div className="hp-spotlight__panel" data-reveal>
            <div className="hp-spotlight__media" style={bgImage(current.image, 'linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.4) 100%)')} />
            <div className="hp-spotlight__body">
              <div className="t-caption" style={{ color: 'rgba(254,234,0,0.72)' }}>{current.category}</div>
              <h3 className="t-h2" style={{ marginTop: 10, color: '#fff' }}>{current.name}</h3>
              <p className="t-body" style={{ marginTop: 12, color: 'rgba(255,255,255,0.74)' }}>{current.headline}</p>
              <ul className="hp-spotlight__bullets">
                {current.bullets.map((bullet) => (
                  <li key={bullet}><Icon name="check" size={16} color="#FEEA00" /> {bullet}</li>
                ))}
              </ul>
              <div className="hp-spotlight__actions">
                <a href={`/caso/?project=${current.slug}`} className="btn btn--primary btn--lg">Ver caso</a>
                <a href="/portafolio/" className="btn btn--ghost btn--lg">Ver portafolio completo</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const LeadMagnet = () => (
  <section className="hp-grid-section hp-brief-offer">
    <div className="hp-grid-section__inner hp-brief-offer__layout">
      <div data-reveal>
        <div className="t-eyebrow" style={{ color: 'rgba(0,0,0,0.56)' }}>Recurso útil</div>
        <h2 className="t-display-sm" style={{ marginTop: 16 }}>Descarga el brief inicial y llega a la conversación con más contexto.</h2>
        <p className="t-body" style={{ marginTop: 16, color: 'var(--fg-muted)', maxWidth: 720 }}>
          Cuando el brief llega claro, la propuesta sale más precisa, el alcance se define mejor y la conversación avanza con más velocidad.
        </p>
        <div className="hp-brief-offer__actions">
          <a href={BRIEF_LINK} className="btn btn--primary btn--xl">Abrir brief</a>
          <a href="/contacto/" className="btn btn--secondary btn--xl">Ver canales de contacto</a>
        </div>
      </div>
      <div className="hp-brief-card" data-reveal>
        <div className="hp-brief-card__tag">Brief inicial descargable</div>
        <h3 className="t-h2" style={{ marginTop: 14 }}>Útil para branding, web, campañas o contenido.</h3>
        <ul className="hp-brief-card__list">
          {briefBenefits.map((item) => (
            <li key={item}><Icon name="check" size={16} color="#050505" /> {item}</li>
          ))}
        </ul>
        <a href={BRIEF_LINK} className="btn btn--secondary btn--lg" style={{ marginTop: 18 }}>Descargar recurso</a>
      </div>
    </div>
  </section>
);

const Services = () => (
  <section className="hp-services" id="services">
    <div className="hp-services__inner">
      <div className="hp-grid-section__header" data-reveal>
        <div>
          <div className="t-eyebrow" style={{ color: 'rgba(0,0,0,0.56)' }}>Servicios</div>
          <h2 className="t-display-sm" style={{ marginTop: 16 }}>Una oferta más clara para marcas que necesitan crecer con mejor branding, mejor web y mejor comunicación.</h2>
        </div>
        <p className="t-body" style={{ color: 'var(--fg-muted)' }}>
          Retórica reúne estrategia, diseño, desarrollo y contenido en una sola conversación para que la marca no solo se vea bien: también avance con dirección.
        </p>
      </div>
      <div className="hp-services__grid">
        {serviceList.map((item) => (
          <article key={item.title} className="hp-service" data-reveal>
            <div className="hp-service__head">
              <div className="hp-service__n">{item.n}</div>
              <Icon name="arrow-up-right" size={18} color="#050505" />
            </div>
            <h3 className="t-h2" style={{ marginTop: 18 }}>{item.title}</h3>
            <p className="t-body" style={{ marginTop: 12, color: 'var(--fg-muted)' }}>{item.desc}</p>
            <ul className="hp-service__items">
              {item.items.map((sub) => (
                <li key={sub}><Icon name="check" size={16} color="#050505" /> {sub}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Testimonials = () => {
  const [open, setOpen] = React.useState(0);

  return (
    <section className="hp-grid-section hp-grid-section--black hp-faq">
      <div className="hp-grid-section__inner">
        <div className="hp-grid-section__header" data-reveal>
          <div>
            <div className="t-eyebrow" style={{ color: 'rgba(254,234,0,0.72)' }}>Preguntas frecuentes</div>
            <h2 className="t-display-sm" style={{ marginTop: 16 }}>Preguntas frecuentes para que la decisión se sienta más simple y el siguiente paso esté más cerca.</h2>
          </div>
          <p className="t-body" style={{ color: 'rgba(255,255,255,0.74)' }}>
            Resolvemos lo esencial de forma directa para que la conversación pase rápido del interés a la acción.
          </p>
        </div>
        <div className="hp-faq__layout">
          <div className="hp-faq__list">
            {faqItems.map((item, index) => {
              const isOpen = open === index;
              return (
                <article key={item.q} className={`hp-faq__item ${isOpen ? 'is-open' : ''}`} data-reveal>
                  <button className="hp-faq__button" onClick={() => setOpen(isOpen ? -1 : index)}>
                    <span>{item.q}</span>
                    <Icon name={isOpen ? 'minus' : 'plus'} size={18} color="#FEEA00" />
                  </button>
                  <div className="hp-faq__answer" hidden={!isOpen}>
                    <p className="t-body-sm" style={{ color: 'rgba(255,255,255,0.72)' }}>{item.a}</p>
                  </div>
                </article>
              );
            })}
          </div>
          <div className="hp-faq__aside" data-reveal>
            <div className="t-eyebrow" style={{ color: 'rgba(254,234,0,0.72)' }}>Siguiente paso</div>
            <h3 className="t-h2" style={{ color: '#fff', marginTop: 16 }}>Portafolio, brief y contacto directo dentro de una misma experiencia.</h3>
            <p className="t-body-sm" style={{ color: 'rgba(255,255,255,0.72)', marginTop: 14 }}>
              Todo el recorrido está pensado para que una marca descubra el valor de Retórica, vea resultados reales y llegue al contacto con ganas de avanzar.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 22 }}>
              <a href="#contact" className="btn btn--primary btn--lg">Hablemos</a>
              <a href={BRIEF_LINK} className="btn btn--ghost btn--lg">Descargar brief</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Contact = () => {
  const [sent, setSent] = React.useState(false);
  const [waUrl, setWaUrl] = React.useState('');
  const [form, setForm] = React.useState({
    name: '',
    email: '',
    service: 'Identidad corporativa',
    message: '',
  });

  const handleChange = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));

  const handleSubmit = (e) => {
    e.preventDefault();
    const url = buildWhatsappUrl(form);
    setWaUrl(url);
    setSent(true);
    window.open(url, '_blank', 'noopener');
  };

  return (
    <section className="hp-contact" id="contact">
      <div className="hp-contact__inner">
        <div className="hp-contact__panel" data-reveal>
          <div className="t-eyebrow" style={{ color: 'rgba(254,234,0,0.72)' }}>Contacto</div>
          <h2 className="t-display-sm" style={{ marginTop: 16, color: '#fff' }}>Hablemos del siguiente paso para tu marca.</h2>
          <p className="t-body" style={{ marginTop: 16, color: 'rgba(255,255,255,0.74)' }}>
            Completa el formulario y se abrirá WhatsApp con un mensaje estructurado para iniciar la conversación con Retórica con más contexto y mejor enfoque.
          </p>
          <div className="hp-contact__quick">
            <a href="mailto:direccion@estudioretorica.com" className="hp-contact__quick-item">
              <Icon name="mail" size={18} color="#FEEA00" />
              <div>
                <div className="t-caption" style={{ color: 'rgba(255,255,255,0.56)' }}>Correo</div>
                <div className="t-h4" style={{ color: '#fff', marginTop: 2 }}>direccion@estudioretorica.com</div>
              </div>
            </a>
            <a href={`https://api.whatsapp.com/send/?app_absent=0&phone=${WHATSAPP_NUMBER}&text=&type=phone_number`} className="hp-contact__quick-item">
              <Icon name="phone" size={18} color="#FEEA00" />
              <div>
                <div className="t-caption" style={{ color: 'rgba(255,255,255,0.56)' }}>WhatsApp</div>
                <div className="t-h4" style={{ color: '#fff', marginTop: 2 }}>+34 617492461</div>
              </div>
            </a>
            <a href={BRIEF_LINK} className="hp-contact__quick-item">
              <Icon name="download" size={18} color="#FEEA00" />
              <div>
                <div className="t-caption" style={{ color: 'rgba(255,255,255,0.56)' }}>Recurso</div>
                <div className="t-h4" style={{ color: '#fff', marginTop: 2 }}>Brief inicial</div>
              </div>
            </a>
          </div>
        </div>

        <form className="hp-contact__form" data-reveal onSubmit={handleSubmit}>
          {!sent ? (
            <>
              <div className="field">
                <label className="field__label">Nombre</label>
                <input className="input" placeholder="Tu nombre" value={form.name} onChange={(e) => handleChange('name', e.target.value)} required />
              </div>
              <div className="field">
                <label className="field__label">Email</label>
                <input className="input" type="email" placeholder="tu@empresa.com" value={form.email} onChange={(e) => handleChange('email', e.target.value)} required />
              </div>
              <div className="field" style={{ gridColumn: '1 / -1' }}>
                <label className="field__label">Servicio</label>
                <div className="hp-contact__budget">
                  {['Identidad corporativa', 'Diseño web', 'Redes sociales', 'Audiovisual / podcast', 'SEO / marketing'].map((b) => (
                    <label key={b} className="hp-contact__budget-item">
                      <input type="radio" name="service" checked={form.service === b} onChange={() => handleChange('service', b)} />
                      {b}
                    </label>
                  ))}
                </div>
              </div>
              <div className="field" style={{ gridColumn: '1 / -1' }}>
                <label className="field__label">Mensaje</label>
                <textarea className="input" rows="6" placeholder="Cuéntanos qué necesitas" style={{ minHeight: 160, resize: 'vertical' }} value={form.message} onChange={(e) => handleChange('message', e.target.value)} required />
              </div>
              <div style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                <span className="t-caption" style={{ color: 'rgba(255,255,255,0.56)' }}>Al enviar, se abrirá WhatsApp con tu mensaje listo para continuar la conversación.</span>
                <button className="btn btn--primary btn--lg" type="submit">Enviar por WhatsApp</button>
              </div>
            </>
          ) : (
            <div className="hp-contact__sent">
              <div className="t-h2" style={{ color: '#fff' }}>Mensaje preparado.</div>
              <p className="t-body" style={{ marginTop: 12, color: 'rgba(255,255,255,0.78)' }}>
                Si no se abrió automáticamente, usa el botón de abajo para continuar la conversación en WhatsApp con la información ya cargada.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 18 }}>
                <a href={waUrl} className="btn btn--primary btn--lg" target="_blank" rel="noreferrer">Abrir WhatsApp</a>
                <button type="button" className="btn btn--ghost btn--lg" onClick={() => setSent(false)}>Editar datos</button>
              </div>
            </div>
          )}
        </form>
      </div>
    </section>
  );
};
