// ============================================================
// ESTUDIO RETÓRICA · Páginas internas
// ============================================================

const RETORICA_IMAGES = {
  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 imageStyle = (url, overlay = 'linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.18) 100%)') => ({
  backgroundImage: `${overlay}, url(${url})`,
});

const WHATSAPP_NUMBER = '34617492461';
const CONTACT_SERVICES = ['Identidad corporativa', 'Diseño web', 'Marketing digital', 'Contenido y audiovisual', 'Proyecto integral'];

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 portfolioProjects = [
  {
    slug: 'matrix-events',
    name: 'Matrix Events',
    category: 'Eventos',
    summary: 'Identidad con fuerza visual para marcas y activaciones que necesitan presencia inmediata.',
    image: RETORICA_IMAGES.matrix,
    featured: true,
    span: 'page-card--span-6',
    services: ['Branding', 'Piezas de comunicación', 'Sistema de marca'],
    impact: 'Refuerza presencia, lectura y recordación en escenarios, piezas y formatos promocionales.',
    challenge: 'Necesidad de una identidad con lectura instantánea y suficiente presencia para convivir con entornos de alta energía visual.',
    approach: 'Se construyó un lenguaje de marca de contraste alto y aplicaciones directas para piezas, escenarios y activos promocionales.',
    deliverables: ['Identidad visual', 'Sistema cromático', 'Piezas de comunicación', 'Material promocional'],
    result: 'Un caso que transmite seguridad, impacto y una sensación de marca lista para operar en contextos presenciales.',
    related: ['disruptivos', 'diada-tec', 'eco3planet'],
  },
  {
    slug: 'disruptivos',
    name: 'Disruptivos',
    category: 'Contenido',
    summary: 'Un universo gráfico más expresivo para video, podcast y comunicación digital.',
    image: RETORICA_IMAGES.disruptivos,
    featured: true,
    span: 'page-card--span-6',
    services: ['Branding', 'Contenido', 'Audiovisual'],
    impact: 'Permite adaptar la marca a covers, redes, reels y piezas editoriales con coherencia.',
    challenge: 'La marca debía sostenerse en múltiples formatos digitales y conservar personalidad sin perder claridad.',
    approach: 'Se enfatizó flexibilidad visual para portadas, activos sociales, piezas audiovisuales y contenidos editoriales.',
    deliverables: ['Sistema de marca', 'Assets para contenido', 'Aplicaciones para digital', 'Base visual para audiovisual'],
    result: 'Una identidad lista para moverse con facilidad entre contenido, social media y formatos audiovisuales.',
    related: ['cultural-bytes', 'matrix-events', 'proyecto-firma'],
  },
  {
    slug: 'diada-tec',
    name: 'Diada Tec',
    category: 'Branding',
    summary: 'Lenguaje visual limpio y corporativo para una marca con lectura clara y actual.',
    image: RETORICA_IMAGES.diada,
    span: 'page-card--span-4',
    services: ['Logo', 'Aplicaciones', 'Sistema visual'],
    impact: 'Aporta solidez comercial y una presencia que se siente profesional desde el primer vistazo.',
    challenge: 'Conseguir una presentación más técnica y confiable sin recargar la comunicación.',
    approach: 'Se trabajó una estética limpia y ordenada, útil para lectura rápida y percepción corporativa.',
    deliverables: ['Logo', 'Sistema visual', 'Aplicaciones base'],
    result: 'Una marca con mejor balance entre claridad, profesionalismo y adaptabilidad.',
    related: ['matrix-events', 'eco3planet', 'redbuzz'],
  },
  {
    slug: 'redbuzz',
    name: 'Redbuzz',
    category: 'Branding',
    summary: 'Marca de alto contraste con personalidad y aplicaciones versátiles.',
    image: RETORICA_IMAGES.redbuzz,
    span: 'page-card--span-4',
    services: ['Dirección visual', 'Branding', 'Piezas de marca'],
    impact: 'Eleva recordación y ayuda a diferenciar la marca con una estética de más carácter.',
    challenge: 'Crear una presencia fuerte y reconocible sin sacrificar versatilidad en piezas futuras.',
    approach: 'Se consolidó una línea de marca expresiva para sostener campañas, piezas y presencia digital.',
    deliverables: ['Branding', 'Piezas de marca', 'Dirección visual'],
    result: 'Una identidad de mayor impacto visual y mejor recordación.',
    related: ['proyecto-firma', 'los-tucanes', 'matrix-events'],
  },
  {
    slug: 'proyecto-firma',
    name: 'Proyecto firma',
    category: 'Branding',
    summary: 'Dirección visual elegante para piezas personales o marcas con tono más editorial.',
    image: RETORICA_IMAGES.signature,
    span: 'page-card--span-4',
    services: ['Identidad', 'Editorial', 'Presentación'],
    impact: 'Aporta un tono más refinado, útil para propuestas de valor premium o consultivas.',
    challenge: 'Transmitir cuidado y un tono más editorial sin perder funcionalidad.',
    approach: 'Se trabajó una estética sobria y cuidada para reforzar percepción premium.',
    deliverables: ['Dirección visual', 'Piezas editoriales', 'Aplicaciones de presentación'],
    result: 'Un caso que eleva percepción de valor con un lenguaje más refinado.',
    related: ['redbuzz', 'disruptivos', 'proyecto-editorial'],
  },
  {
    slug: 'los-tucanes',
    name: 'Los Tucanes',
    category: 'Branding',
    summary: 'Propuesta gráfica directa y llamativa para públicos de consumo masivo.',
    image: RETORICA_IMAGES.tucanes,
    span: 'page-card--span-4',
    services: ['Marca', 'Piezas promocionales', 'Aplicación visual'],
    impact: 'Favorece una comunicación popular, rápida y con alta visibilidad.',
    challenge: 'Lograr una comunicación popular y visible que sostuviera recordación.',
    approach: 'Se impulsó una línea gráfica frontal y reconocible, pensada para captar rápido.',
    deliverables: ['Marca', 'Piezas promocionales', 'Aplicaciones visuales'],
    result: 'Una propuesta más visible para públicos amplios y contextos de alta exposición.',
    related: ['redbuzz', 'matrix-events', 'cultural-bytes'],
  },
  {
    slug: 'cultural-bytes',
    name: 'Cultural Bytes',
    category: 'Digital',
    summary: 'Activos pensados para entornos educativos, comunicación digital y recordación de marca.',
    image: RETORICA_IMAGES.cultural,
    span: 'page-card--span-4',
    services: ['Digital', 'Contenido', 'Branding'],
    impact: 'Hace más clara la conexión entre identidad, comunidad y piezas digitales.',
    challenge: 'Unir comunidad, educación y marca dentro de una presencia visual clara.',
    approach: 'Se desarrolló una base gráfica flexible para piezas digitales y comunicación recurrente.',
    deliverables: ['Assets digitales', 'Sistema visual', 'Piezas de comunicación'],
    result: 'Una identidad más lista para habitar entornos digitales y contenidos continuos.',
    related: ['disruptivos', 'eco3planet', 'los-tucanes'],
  },
  {
    slug: 'eco3planet',
    name: 'Eco3Planet',
    category: 'Digital',
    summary: 'Presentación visual con look tecnológico y sensación de producto bien construido.',
    image: RETORICA_IMAGES.eco,
    span: 'page-card--span-4',
    services: ['Web', 'Presentación', 'Visual product'],
    impact: 'Refuerza percepción de innovación y ayuda a que la propuesta se sienta más sólida.',
    challenge: 'Comunicar innovación y solidez sin perder claridad en la propuesta.',
    approach: 'Se trabajó una presentación visual de tono tecnológico con una estructura más ordenada.',
    deliverables: ['Presentación visual', 'Web support', 'Activos de producto'],
    result: 'Un caso que eleva percepción de innovación y seriedad comercial.',
    related: ['diada-tec', 'cultural-bytes', 'matrix-events'],
  },
  {
    slug: 'proyecto-editorial',
    name: 'Proyecto editorial',
    category: 'Branding',
    summary: 'Piezas editoriales y de marca para elevar la percepción premium.',
    image: RETORICA_IMAGES.editorial,
    span: 'page-card--span-4',
    services: ['Editorial', 'Branding', 'Comunicación'],
    impact: 'Aporta narrativa visual y una sensación de cuidado superior.',
    challenge: 'Construir piezas que comunicaran mayor cuidado y refinamiento.',
    approach: 'Se priorizó una dirección visual sobria y editorial para reforzar valor percibido.',
    deliverables: ['Piezas editoriales', 'Branding support', 'Comunicación'],
    result: 'Una propuesta más premium y con mejor lectura visual.',
    related: ['proyecto-firma', 'redbuzz', 'eco3planet'],
  },
  {
    slug: 'radical-trainer',
    name: 'Radical Trainer',
    category: 'Branding',
    summary: 'Marca con presencia contundente y look deportivo/comercial.',
    image: RETORICA_IMAGES.radical,
    span: 'page-card--span-4',
    services: ['Logo', 'Aplicaciones', 'Branding'],
    impact: 'Construye una presencia fuerte que se reconoce rápido incluso en formatos grandes.',
    challenge: 'Generar una identidad potente y legible para una marca con energía alta.',
    approach: 'Se definió un sistema fuerte de contraste y lectura rápida para piezas físicas y digitales.',
    deliverables: ['Logo', 'Aplicaciones', 'Branding'],
    result: 'Una presencia contundente que comunica energía y recordación.',
    related: ['matrix-events', 'redbuzz', 'diada-tec'],
  },
];

const portfolioFilters = ['Todos', 'Branding', 'Digital', 'Contenido', 'Eventos'];

const getProjectBySlug = (slug) => portfolioProjects.find((item) => item.slug === slug) || portfolioProjects[0];



const usePortfolioPointer = (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) * -9}deg`);
      node.style.setProperty('--ry', `${(px - 0.5) * 10}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 PortfolioMotionStage = () => {
  const stageProjects = [getProjectBySlug('matrix-events'), getProjectBySlug('radical-trainer'), getProjectBySlug('disruptivos'), getProjectBySlug('cultural-bytes'), getProjectBySlug('eco3planet')];
  const [active, setActive] = React.useState(stageProjects[0]);
  const [pulses, setPulses] = React.useState([]);
  const ref = React.useRef(null);
  usePortfolioPointer(ref);

  const launchPulse = (event) => {
    const rect = ref.current.getBoundingClientRect();
    const pulse = {
      id: `${Date.now()}-${Math.random()}`,
      x: event.clientX - rect.left,
      y: event.clientY - rect.top,
    };
    setPulses((current) => [...current, pulse]);
    window.setTimeout(() => setPulses((current) => current.filter((item) => item.id !== pulse.id)), 700);
  };

  return (
    <section className="page-shell page-shell--tight">
      <div ref={ref} className="portfolio-motion" data-reveal onClick={launchPulse}>
        <div className="portfolio-motion__backdrop" aria-hidden="true">
          <div className="portfolio-motion__grid" />
          {pulses.map((pulse) => (
            <span key={pulse.id} className="portfolio-motion__pulse" style={{ left: pulse.x, top: pulse.y }} />
          ))}
        </div>

        <div className="portfolio-motion__copy">
          <div className="page-card__meta" style={{ color: 'rgba(254,234,0,0.76)' }}>Laboratorio de proyectos</div>
          <h2 className="t-display-sm" style={{ marginTop: 14, color: '#fff' }}>Una entrada interactiva para que el portafolio proyecte mejor el alcance creativo y estratégico de Retórica.</h2>
          <p className="t-body" style={{ marginTop: 16, color: 'rgba(255,255,255,0.76)' }}>
            Cada proyecto activa una lectura distinta del portafolio para mostrar cómo Retórica resuelve branding, diseño web, contenido y comunicación con un criterio visual consistente.
          </p>
          <div className="portfolio-motion__chips">
            {active.services.map((service) => <span key={service} className="chip chip--dark">{service}</span>)}
          </div>
          <div className="portfolio-motion__actions">
            <a href={`/caso/?project=${active.slug}`} className="btn btn--primary btn--lg">Ver caso</a>
            <a href="/contacto/#contact" className="btn btn--ghost btn--lg">Quiero algo así</a>
          </div>
        </div>

        <div className="portfolio-motion__visual">
          <div className="portfolio-motion__main" style={imageStyle(active.image, 'linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.36) 100%)')}>
            <div className="portfolio-motion__label">{active.name}</div>
            <div className="portfolio-motion__summary">{active.summary}</div>
          </div>
          <div className="portfolio-motion__switches">
            {stageProjects.map((item) => (
              <button
                key={item.slug}
                type="button"
                className={`portfolio-motion__switch ${active.slug === item.slug ? 'is-active' : ''}`}
                onClick={(event) => {
                  event.stopPropagation();
                  setActive(item);
                }}
              >
                <span>{item.name}</span>
                <small>{item.category}</small>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const PortfolioPage = () => {
  const [filter, setFilter] = React.useState('Todos');
  const [activeProject, setActiveProject] = React.useState(portfolioProjects[0]);

  const visibleProjects = filter === 'Todos'
    ? portfolioProjects
    : portfolioProjects.filter((item) => item.category === filter);

  React.useEffect(() => {
    if (!visibleProjects.find((item) => item.name === activeProject.name)) {
      setActiveProject(visibleProjects[0] || portfolioProjects[0]);
    }
  }, [filter]);

  return (
    <>
      <PageHeader
        eyebrow="Portafolio"
        title={<>Casos y clientes que convierten el trabajo en prueba social visible.</>}
        subtitle="Una selección de marcas y proyectos donde Retórica convirtió estrategia, diseño y contenido en una presencia más fuerte y vendible."
        ctaLabel="Ir a contacto"
      />

      <section className="page-shell page-shell--tight">
        <div className="page-showcase page-showcase--dark" data-reveal>
          <div className="page-showcase__content">
            <div className="page-card__meta" style={{ color: 'rgba(254,234,0,0.72)' }}>Selección destacada</div>
            <h2 className="t-display-sm" style={{ marginTop: 12, color: '#fff' }}>Una vitrina de marcas que ya pasaron del concepto a una presencia con carácter.</h2>
            <p className="t-body" style={{ marginTop: 14, color: 'rgba(255,255,255,0.72)' }}>
              Cada proyecto revela una parte del criterio de Retórica: marcas que se ven mejor, comunican mejor y llegan con más fuerza a su audiencia.
            </p>
            <div className="page-showcase__chips">
              {['Branding', 'Digital', 'Contenido', 'Eventos', 'Identidad visual'].map((item) => (
                <span key={item} className="chip chip--dark">{item}</span>
              ))}
            </div>
          </div>
          <div className="page-showcase__visual" style={imageStyle(RETORICA_IMAGES.matrix, 'linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.42) 100%)')} />
        </div>
      </section>

      <PortfolioMotionStage />

      <section className="page-shell page-shell--tight">
        <div className="page-filterbar" data-reveal>
          {portfolioFilters.map((item) => (
            <button
              key={item}
              type="button"
              className={`page-filterbar__button ${filter === item ? 'is-active' : ''}`}
              onClick={() => setFilter(item)}
            >
              {item}
            </button>
          ))}
        </div>

        <div className="page-grid page-grid--portfolio page-grid--cards-v5">
          {visibleProjects.map((item) => (
            <article
              key={item.name}
              className={`page-card page-card--portfolio page-card--interactive ${activeProject.name === item.name ? 'is-active' : ''}`}
>
              <div className="page-card__media" style={imageStyle(item.image)} />
              <div className="page-card__body">
                <div className="page-card__meta">{item.category}</div>
                <div className="page-card__title">{item.name}</div>
                <div className="page-card__text">{item.summary}</div>
                <div className="page-card__chips">
                  {item.services.slice(0, 3).map((service) => <span key={service} className="chip">{service}</span>)}
                </div>
                <div className="page-card__actions">
                  <button type="button" className="btn btn--secondary btn--sm" onClick={() => setActiveProject(item)}>Ver en foco</button>
                  <a href={`/caso/?project=${item.slug}`} className="btn btn--primary btn--sm">Ver caso</a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="page-shell page-shell--tight">
        <div className="portfolio-focus" data-reveal>
          <div className="portfolio-focus__media" style={imageStyle(activeProject.image, 'linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.3) 100%)')} />
          <div className="portfolio-focus__body">
            <div className="page-card__meta">Proyecto en foco</div>
            <h2 className="t-display-sm" style={{ marginTop: 12 }}>{activeProject.name}</h2>
            <p className="t-body" style={{ marginTop: 14, color: 'var(--fg-muted)' }}>{activeProject.impact}</p>
            <div className="portfolio-focus__tags">
              {activeProject.services.map((item) => (
                <span key={item} className="chip">{item}</span>
              ))}
            </div>
            <div className="portfolio-focus__cta">
              <a href={`/caso/?project=${activeProject.slug}`} className="btn btn--primary btn--lg">Ver caso completo</a>
              <a href="/contacto/#contact" className="btn btn--secondary btn--lg">Quiero un proyecto así</a>
            </div>
          </div>
        </div>
      </section>

      <section className="page-shell">
        <div className="portfolio-logo-strip">
          {portfolioProjects.map((item, index) => (
            <div key={`${item.name}-${index}`} className="portfolio-logo-strip__item" data-reveal>
              <img src={item.image} alt={item.name} loading="lazy" />
              <span>{item.name}</span>
            </div>
          ))}
        </div>
      </section>
    </>
  );
};

const CasePage = () => {
  const search = new URLSearchParams(window.location.search);
  const project = getProjectBySlug(search.get('project'));
  const relatedProjects = project.related.map((slug) => getProjectBySlug(slug)).filter(Boolean);

  return (
    <>
      <PageHeader
        eyebrow={project.category}
        title={<>{project.name}</>}
        subtitle={project.summary}
        bg="black"
        ctaLabel="Solicitar propuesta"
        ctaHref="/contacto/#contact"
      />

      <section className="page-shell page-shell--tight">
        <div className="case-hero" data-reveal>
          <div className="case-hero__media" style={imageStyle(project.image, 'linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.24) 100%)')} />
          <div className="case-hero__body">
            <div className="page-card__meta">Resumen del caso</div>
            <h2 className="t-display-sm" style={{ marginTop: 12 }}>Un caso para ver cómo Retórica convierte intención en presencia de marca.</h2>
            <p className="t-body" style={{ marginTop: 16, color: 'var(--fg-muted)' }}>{project.impact}</p>
            <div className="case-hero__chips">
              {project.services.map((item) => <span key={item} className="chip">{item}</span>)}
            </div>
            <div className="case-hero__actions">
              <a href="/portafolio/" className="btn btn--secondary btn--lg">Volver al portafolio</a>
              <a href="/contacto/#contact" className="btn btn--primary btn--lg">Quiero una propuesta</a>
            </div>
          </div>
        </div>
      </section>

      <section className="page-shell page-shell--tight">
        <div className="case-facts">
          {[
            ['Reto', project.challenge],
            ['Enfoque', project.approach],
            ['Entregables', project.deliverables.join(' · ')],
            ['Resultado', project.result],
          ].map(([title, text]) => (
            <article key={title} className="case-facts__item" data-reveal>
              <div className="page-card__meta">{title}</div>
              <p className="t-body" style={{ marginTop: 12, color: 'var(--fg-muted)' }}>{text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="page-shell page-shell--tight">
        <div className="case-related-head" data-reveal>
          <div>
            <div className="t-eyebrow" style={{ color: 'rgba(0,0,0,0.56)' }}>Más trabajo</div>
            <h2 className="t-display-sm" style={{ marginTop: 16 }}>Otros casos para seguir recorriendo el trabajo del estudio.</h2>
          </div>
          <a href="/portafolio/" className="btn btn--secondary btn--lg">Ver todos</a>
        </div>
        <div className="page-grid page-grid--portfolio page-grid--cards-v5">
          {relatedProjects.map((item) => (
            <article key={item.slug} className="page-card page-card--span-4" data-reveal>
              <div className="page-card__media" style={imageStyle(item.image)} />
              <div className="page-card__body">
                <div className="page-card__meta">{item.category}</div>
                <div className="page-card__title">{item.name}</div>
                <div className="page-card__text">{item.summary}</div>
                <div className="page-card__actions">
                  <a href={`/caso/?project=${item.slug}`} className="btn btn--primary btn--sm">Abrir caso</a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="page-shell page-shell--tight">
        <div className="case-cta" data-reveal>
          <div>
            <div className="t-eyebrow" style={{ color: 'rgba(254,234,0,0.72)' }}>Siguiente paso</div>
            <h2 className="t-display-sm" style={{ marginTop: 12, color: '#fff' }}>¿Quieres una página, identidad o campaña con este nivel de presencia?</h2>
            <p className="t-body" style={{ marginTop: 16, color: 'rgba(255,255,255,0.72)', maxWidth: 760 }}>
              El sitio ya incluye brief inicial y contacto por WhatsApp para empezar una propuesta con mejor contexto desde el primer mensaje.
            </p>
          </div>
          <div className="case-cta__actions">
            <a href="/contacto/#contact" className="btn btn--primary btn--lg">Solicitar propuesta</a>
            <a href="/brief/" className="btn btn--ghost btn--lg">Descargar brief</a>
          </div>
        </div>
      </section>
    </>
  );
};

const ServicesPage = () => (
  <>
    <PageHeader
      eyebrow="Servicios"
      title={<>Retórica articula branding, desarrollo web, marketing y contenido dentro de una sola propuesta de agencia.</>}
      subtitle="Branding, desarrollo web, marketing digital y contenido articulados para que una marca gane presencia, orden y capacidad comercial."
      bg="black"
      ctaLabel="Ver portafolio"
      ctaHref="/portafolio/"
    />
    <section className="page-shell">
      <div className="info-split">
        <div className="info-panel info-panel--black" data-reveal>
          <div className="t-eyebrow" style={{ color: 'var(--brand-yellow)' }}>Capacidades</div>
          <h2 className="t-display-sm" style={{ marginTop: 14 }}>Una oferta más clara, estratégica y orientada a conversión.</h2>
          <ul className="info-list" style={{ color: 'rgba(255,255,255,0.78)' }}>
            {['Identidad corporativa', 'Diseño web', 'Gestión de redes sociales', 'Buzoneo y street marketing', 'Posicionamiento web y marketing', 'Audiovisual y podcast'].map((item) => (
              <li key={item}><Icon name="check" size={16} color="#FEEA00" /> {item}</li>
            ))}
          </ul>
        </div>
        <div className="info-panel" data-reveal>
          <div className="page-card__meta">Qué comunica esta página</div>
          <h3 className="t-h2" style={{ marginTop: 10 }}>Todo lo que una marca necesita para verse mejor y vender con más fuerza.</h3>
          <p className="t-body" style={{ marginTop: 16, color: 'var(--fg-muted)' }}>
            Retórica conecta identidad, web, marketing y contenido para que la marca tenga una base coherente, atractiva y lista para salir a buscar resultados.
          </p>
        </div>
      </div>

      <div className="hp-services__grid" style={{ marginTop: 28 }}>
        {[
          {
            n: '01', title: 'Identidad corporativa',
            desc: 'Sistema visual, presentaciones, aplicaciones y tono verbal para construir reconocimiento.',
            items: ['Logo y versiones', 'Paleta y tipografía', 'Aplicaciones de marca', 'Piezas de presentación'],
          },
          {
            n: '02', title: 'Diseño web',
            desc: 'Sitios a medida que presentan mejor el valor de la marca y funcionan como escaparate para clientes y oportunidades.',
            items: ['Home comercial', 'Páginas de servicio', 'Portafolio visual', 'Formularios y CTA'],
          },
          {
            n: '03', title: 'Redes, SEO y marketing',
            desc: 'Una misma base para social media, posicionamiento web, contenido y campañas online.',
            items: ['Gestión de redes', 'Contenido editorial', 'SEO y captación', 'Landing de campaña'],
          },
          {
            n: '04', title: 'Audiovisual y activaciones',
            desc: 'La propuesta también cubre reels, podcast, piezas visuales, fotografía, video y marketing directo.',
            items: ['Video y podcast', 'Fotografía', 'Street marketing', 'Buzoneo'],
          },
        ].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: 16 }}>{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>
    </section>
  </>
);

const StudioPage = () => (
  <>
    <PageHeader
      eyebrow="Estudio"
      title={<>Retórica pone el discurso en el centro para convertir marcas en presencia, presencia en confianza y confianza en negocio.</>}
      subtitle="Una agencia donde la estrategia verbal, la identidad visual y la ejecución digital trabajan juntas para mover una marca con más claridad y más intención."
      ctaLabel="Ver servicios"
      ctaHref="/servicios/"
    />
    <section className="page-shell">
      <div className="info-split">
        <div className="info-panel" data-reveal>
          <div className="page-card__meta">Qué define esta propuesta</div>
          <h2 className="t-display-sm" style={{ marginTop: 12 }}>Una agencia que piensa, diseña y activa marcas con una lógica clara de crecimiento.</h2>
          <p className="t-body" style={{ marginTop: 16, color: 'var(--fg-muted)' }}>
            Retórica trabaja desde una idea simple y poderosa: cuando el mensaje está bien construido, la marca se siente más sólida, el sitio convence más y el marketing encuentra mejor dirección.
          </p>
        </div>
        <div className="info-panel info-panel--black" data-reveal>
          <div className="page-card__meta" style={{ color: 'rgba(254,234,0,0.72)' }}>Principios</div>
          <ul className="info-list" style={{ color: 'rgba(255,255,255,0.78)', marginTop: 18 }}>
            {['Propuesta de valor entendible desde la home', 'Más dinamismo sin sacrificar claridad', 'Portafolio organizado para explicar mejor el trabajo', 'Canales de contacto listos para convertir'].map((item) => (
              <li key={item}><Icon name="check" size={16} color="#FEEA00" /> {item}</li>
            ))}
          </ul>
        </div>
      </div>

      <div className="timeline">
        {[
          ['01', 'Atracción', 'La primera pantalla comunica mejor el perfil de agencia, su tono y la amplitud de servicios que puede articular.'],
          ['02', 'Confianza', 'Los proyectos, clientes y casos funcionan como prueba visible del criterio y la capacidad de ejecución de Retórica.'],
          ['03', 'Conversión', 'Brief, correo y WhatsApp facilitan el inicio de la conversación, la solicitud de propuesta y la maduración del lead.'],
        ].map(([year, title, text]) => (
          <div key={title} className="timeline__item" data-reveal>
            <div className="timeline__year">{year}</div>
            <div>
              <div className="t-h4">{title}</div>
              <p className="t-body" style={{ marginTop: 8, color: 'var(--fg-muted)' }}>{text}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  </>
);


const JournalContactSection = () => {
  const [sent, setSent] = React.useState(false);
  const [waUrl, setWaUrl] = React.useState('');
  const [form, setForm] = React.useState({
    name: '',
    email: '',
    service: CONTACT_SERVICES[0],
    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)' }}>Formulario de contacto</div>
          <h2 className="t-display-sm" style={{ marginTop: 16, color: '#fff' }}>Cuéntanos qué necesita tu marca y llevemos la conversación a una propuesta clara.</h2>
          <p className="t-body" style={{ marginTop: 16, color: 'rgba(255,255,255,0.74)' }}>
            Si ya tienes una idea, un sitio por mejorar, una campaña por lanzar o una marca por ordenar, este formulario ayuda a que Retórica reciba el contexto correcto desde el primer mensaje.
          </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/" 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)' }}>Brief inicial</div>
                <div className="t-h4" style={{ color: '#fff', marginTop: 2 }}>Descargar recurso</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">
                  {CONTACT_SERVICES.map((service) => (
                    <label key={service} className="hp-contact__budget-item">
                      <input type="radio" name="service" checked={form.service === service} onChange={() => handleChange('service', service)} />
                      {service}
                    </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é objetivo tienes, qué necesitas resolver y en qué plazo quieres avanzar." 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 un mensaje estructurado para continuar la conversación con Retórica.</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 WhatsApp no se abrió automáticamente, usa el botón de abajo para continuar 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>
  );
};

const JournalPage = () => (
  <>
    <PageHeader
      eyebrow="Contacto y briefing"
      title={<>Canales y recursos para iniciar una conversación clara con Retórica y activar un proyecto de marca, web o marketing.</>}
      subtitle="Todo lo necesario para iniciar una conversación con criterio: brief, portafolio, casos y contacto directo con la agencia."
      bg="black"
      ctaLabel="Ir al formulario"
      ctaHref="#contact"
    />
    <section className="page-shell">
      <div className="resource-list">
        {[
          ['Brief', 'Brief inicial descargable', 'Recurso para ordenar objetivos, alcance, entregables y tiempos antes de cotizar.', '/brief/'],
          ['Canal directo', 'direccion@estudioretorica.com', 'Correo principal del estudio.', 'mailto:direccion@estudioretorica.com'],
          ['WhatsApp', '+34 617492461', 'Canal directo publicado en el sitio oficial.', 'https://api.whatsapp.com/send/?app_absent=0&phone=34617492461&text=&type=phone_number'],
          ['Portafolio', 'Portafolio de proyectos', 'Selección visible de clientes y casos del estudio.', '/portafolio/'],
          ['Caso destacado', 'Matrix Events', 'Ejemplo de página de caso dentro de esta versión del sitio.', '/caso/?project=matrix-events'],
        ].map(([tag, title, desc, href]) => (
          <a key={title} href={href} className="resource-item" data-reveal>
            <span className="resource-item__tag">{tag}</span>
            <div>
              <div className="t-h4">{title}</div>
              <div className="t-body-sm" style={{ color: 'var(--fg-muted)', marginTop: 6 }}>{desc}</div>
            </div>
            <Icon name="arrow-up-right" size={18} color="#050505" />
          </a>
        ))}
      </div>

      <div className="info-split" style={{ marginTop: 28 }}>
        <div className="info-panel" data-reveal>
          <div className="page-card__meta">Qué enviar para cotizar más rápido</div>
          <ul className="info-list">
            {['Objetivo del proyecto', 'Tipo de servicio requerido', 'Fechas o urgencia', 'Referencias visuales', 'Canal de contacto preferido'].map((item) => (
              <li key={item}><Icon name="check" size={16} color="#050505" /> {item}</li>
            ))}
          </ul>
        </div>
        <div className="info-panel info-panel--black" data-reveal>
          <div className="page-card__meta" style={{ color: 'rgba(254,234,0,0.72)' }}>Atajo comercial</div>
          <h3 className="t-h2" style={{ marginTop: 10 }}>La ruta más simple para iniciar es brief + WhatsApp + contexto claro.</h3>
          <p className="t-body" style={{ marginTop: 16, color: 'rgba(255,255,255,0.74)' }}>
            Primero puedes completar el brief y luego abrir WhatsApp o escribir por correo con un contexto mejor planteado. Esa secuencia reduce fricción y hace más útil la conversación inicial con la agencia.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 22 }}>
            <a href="/brief/" className="btn btn--primary btn--lg">Abrir brief</a>
            <a href="#contact" className="btn btn--ghost btn--lg">Ir al formulario</a>
          </div>
        </div>
      </div>
    </section>
    <JournalContactSection />
  </>
);