Creeer-Web/components/sections/Proceso.tsx

'use client';

import { motion } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { Antetitulo } from '@/components/primitives/Antetitulo';
import { FondoFoto } from '@/components/primitives/FondoFoto';
import { PatronPuntos } from '@/components/primitives/PatronPuntos';
import { SimboloMarca } from '@/components/primitives/SimboloMarca';
import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight';
import { Icono, type IconoNombre } from '@/components/primitives/Icono';
import { proceso } from '@/lib/content';
import { fadeInUp, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';

// The eight stages of the dueña's working lámina for a real client, rebuilt to
// its own anatomy: eight blocks laid flat, each with its number in a circle,
// its own icon, and a block labelled ENTREGABLES where every line carries its
// own mark. Everything identifying that client is stripped out in
// lib/content.ts.
//
// The three phases of deck slide 7 survive as a strip under the lead: the
// framework is the dueña's and worth keeping, it just does not dictate the
// layout — the lámina runs its eight blocks flat, and grouping them into three
// banded sections split one grid into three.
//
// Stage 08 sits full width at the foot, where the lámina puts One Year Plan,
// and goes navy — it is the payoff the other seven point at.

const ICONOS: Record<string, IconoNombre> = {
  '01': 'compania',      // company analysis + FODA — the company from outside
  '02': 'inmersion',     // internal analysis — dives through the layers
  '03': 'consumidor',    // Consumer Knowledge — the insight inside the person
  '04': 'estrategia',    // brand strategy — the path to the flag
  '05': 'comunicacion',  // communication and branding — the bubbles
  '06': 'ventas',        // marketing and sales — the rising bars
  '07': 'desafiar',      // commercial innovation — the cracked assumption
  '08': 'plan',          // One Year Plan — the checklist
};

// One mark per deliverable, the way the lámina gives every line its own rather
// than repeating a tick. Keyed by the copy itself, so a Proceso.test guard
// checks every deliverable in lib/content.ts has an icon here — otherwise a
// reworded line would silently render blank.
const ICONOS_ENTREGABLE: Record<string, IconoNombre> = {
  // 01 · Análisis de compañía y FODA
  'FODA': 'matriz',
  'Diagnóstico ejecutivo': 'diagnostico',
  'Prioridades': 'prioridades',
  'Quick wins': 'rayo',
  // 02 · Análisis interno
  'Mapa de capacidades': 'mapa',
  'Restricciones del negocio': 'restriccion',
  'Oportunidades de crecimiento': 'brote',
  // 03 · Consumer Knowledge
  'Segmentación': 'segmentos',
  'Buyer persona': 'ficha',
  'Customer journey': 'recorrido',
  'Necesidades no cubiertas': 'hueco',
  // 04 · Estrategia de marca
  'Posicionamiento': 'diana',
  'Arquitectura de marcas': 'arquitectura',
  'Manual estratégico': 'libro',
  // 05 · Comunicación y branding
  'Plataforma de comunicación': 'megafono',
  'Campaña anual': 'calendario',
  'Estrategia de medios': 'ondas',
  'Plan de contenido': 'documento',
  // 06 · Marketing y ventas
  'Dashboard CEO': 'medidor',
  'Dashboard comercial': 'tablero',
  'Comité de crecimiento': 'comite',
  // 07 · Innovación comercial
  'Roadmap de innovación': 'hitos',
  'Go to market': 'cohete',
  'Prioridades de innovación': 'bombilla',
  // 08 · One Year Plan
  'Roadmap a 12 meses': 'anio',
  'Iniciativas prioritarias': 'prioridades',
  'Gobernanza del crecimiento': 'escudo',
};

export function Proceso() {
  const reduced = usePrefersReducedMotion();

  return (
    <section id="proceso" className="bg-gris-claro bg-hondo-claro scroll-mt-24 relative overflow-hidden">
      <Container className="relative py-16 md:py-24">
        {/* ── Header ── */}
        <Antetitulo as={motion.p} variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}>
          {proceso.eyebrow}
        </Antetitulo>
        <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="mt-4 font-sans font-black text-seccion text-azul-profundo max-w-4xl text-balance">{proceso.title}</motion.h2>
        <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="mt-5 text-azul-profundo/70 leading-relaxed max-w-2xl">{proceso.lead}</motion.p>

        {/* ── The three approved phases, as a strip rather than as structure ── */}
        <motion.ol
          variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="mt-8 flex flex-wrap items-center gap-x-3 gap-y-2 list-none p-0"
        >
          {proceso.fases.map((fase, i) => (
            <li key={fase} className="flex items-center gap-3">
              {i > 0 && <span aria-hidden="true" className="text-dorado/60">→</span>}
              <span className="text-xs tracking-[0.18em] uppercase font-black text-azul-profundo/70">{fase}</span>
            </li>
          ))}
        </motion.ol>

        {/* ── The eight blocks, flat. An <ol>, because the sequence is the
            point: it carries the order for assistive tech, which lets the
            drawn number stay decorative. ── */}
        {/* Each card reveals on its own. The list used to be one stagger
            container with viewportOnce's amount of 0.3 — on a phone the eight
            stacked cards run ~3000px against an ~850px screen, so 30% of the
            list is never on screen at once and nothing below the header ever
            appeared. */}
        <ol className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 list-none p-0">
          {proceso.etapas.map((etapa, i) => {
            const destacada = 'destacada' in etapa && etapa.destacada;
            return (
              <motion.li
                key={etapa.n}
                variants={fadeInUp}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, amount: 0.2 }}
                // The cards in one row still arrive one after another, the way
                // the stagger did, without depending on the whole list.
                transition={{ delay: (i % 3) * 0.08 }}
                {...motionProps(reduced)}
                // No hover lift: these cards are not links, and a card that
                // rises under the pointer promises a click that goes nowhere.
                className={destacada ? 'sm:col-span-2' : ''}
              >
                <TarjetaSpotlight
                  className={`relative h-full rounded-2xl p-6 md:p-7 shadow-tarjeta ${
                    destacada ? 'bg-azul-profundo bg-hondo-navy' : 'border border-azul-profundo/[0.07] bg-white'
                  }`}
                >
                  {destacada && (
                    // In the foot of the card, which the grid's equal-height rows
                    // leave empty — decoration that fills dead space instead of
                    // crowding the deliverables.
                    <PatronPuntos rows={3} cols={8} className="absolute -left-2 bottom-5 w-1/3 text-white/[0.08]" />
                  )}

                  {/* ── Photo band, with the number and the icon riding on it.
                      The duotone is what makes eight photographs by eight
                      different people read as one set: FondoFoto throws away
                      their colour with mix-blend-luminosity and relights them
                      navy-to-gold. Every file here is CC0 and credited by path
                      in `creditosFotos`, which a test enforces. ── */}
                  <div className={`relative -mx-6 -mt-6 md:-mx-7 md:-mt-7 mb-6 overflow-hidden ${destacada ? 'h-40 md:h-52' : 'h-32'}`}>
                    <FondoFoto
                      src={`/images/proceso/${etapa.n}.jpg`}
                      className="inset-0"
                      wash={destacada ? 'bg-azul-profundo/55' : 'bg-azul-profundo/60'}
                    />
                    <div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-4 md:p-5">
                      <span
                        aria-hidden="true"
                        className="grid place-items-center w-10 h-10 rounded-full bg-dorado bg-dorado-metal font-sans font-black text-sm text-azul-profundo shadow-[0_4px_12px_-2px_rgba(10,29,61,0.5)]"
                      >
                        {etapa.n}
                      </span>
                      <div className="grid place-items-center w-11 h-11 rounded-full bg-azul-profundo/80 backdrop-blur-sm">
                        <Icono nombre={ICONOS[etapa.n]} className="w-6 h-6 text-dorado" />
                      </div>
                    </div>
                  </div>

                  <div className="relative flex items-center justify-between gap-4">
                    <h3 className={`font-sans font-black leading-snug ${
                      destacada ? 'text-2xl md:text-3xl text-white' : 'text-lg text-azul-profundo'
                    }`}>
                      {etapa.name}
                    </h3>
                    {/* Beside the title, not in the card's foot: pinned to the
                        bottom-right corner it sat on top of the third
                        deliverable once the three ran in a row. Gold needs
                        real alpha on navy — at 25% it reads as a skeleton. */}
                    {destacada && <SimboloMarca className="w-12 md:w-14 shrink-0 text-dorado/60" />}
                  </div>

                  {/* ── ENTREGABLES ── */}
                  <div className={`relative mt-5 border-t pt-4 ${destacada ? 'border-white/15' : 'border-azul-profundo/10'}`}>
                    {/* La 08 va sobre navy y conserva el dorado del manual; las
                        otras siete son tarjetas blancas y necesitan el tono
                        legible. */}
                    <p className={`text-xs tracking-[0.2em] uppercase font-black ${
                      destacada ? 'text-dorado' : 'text-dorado-texto'
                    }`}>
                      {proceso.etiquetaEntregables}
                    </p>
                    <ul className={`mt-3 grid gap-2 list-none p-0 ${destacada ? 'sm:grid-cols-3' : ''}`}>
                      {etapa.entregables.map((entregable) => (
                        <li
                          key={entregable}
                          className={`flex items-start gap-2.5 text-sm ${destacada ? 'text-white' : 'text-azul-profundo/85'}`}
                        >
                          <Icono
                            nombre={ICONOS_ENTREGABLE[entregable]}
                            className="w-[18px] h-[18px] mt-px shrink-0 text-dorado"
                          />
                          <span>{entregable}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </TarjetaSpotlight>
              </motion.li>
            );
          })}
        </ol>
      </Container>
    </section>
  );
}