// Services.jsx — Landing-Servicios
// icon = real brand SVG (filled Lato letterform inside the dotted Contenedor Circular).
// Titles + copy confirmed against the client's "carrusel redes" service cards.
const SERVICES = [
  { icon: 'icon_b',  title: 'Branding',                 body: 'Creamos identidades visuales con método y estrategia, abriendo sistemas flexibles que transmiten valor, coherencia y estilo en cada aplicación, desde lo esencial hasta lo expansivo.' },
  { icon: 'icon_cp', title: 'Campaña Publicitaria',     body: 'Desarrollamos campañas multicanal con una visión creativa y estructurada, con piezas coherentes que comunican, dirección estratégica y foco en conectar con públicos reales.' },
  { icon: 'icon_em', title: 'Estrategia de Marketing',  body: 'Pensamos cada marca como un sistema vivo. Definimos acciones con propósitos, canales adecuados y contenidos alineados a tus objetivos para crecer con coherencia y dirección.' },
  { icon: 'icon_e',  title: 'Editoriales',              body: 'Diseñamos piezas con narrativa visual cuidada, jerarquías definidas y lecturas dinámicas, priorizando la experiencia del lector sin perder estética ni funcionalidad.' },
  { icon: 'icon_is', title: 'Iconografía Señalética',   body: 'Creamos sistemas funcionales que organizan, orientan y refuerzan la identidad. Cada símbolo o señal nace desde el diseño de información y una mirada metodológica.' },
  { icon: 'icon_u',  title: 'UI / UX',                  body: 'Diseñamos experiencias digitales intuitivas, jerarquizadas y visualmente consistentes. Cada interfaz se construye con método, empatía y enfoque en la funcionalidad real del usuario.' },
  { icon: 'icon_ws', title: 'Web Site',                 body: 'Desarrollamos sitios web visualmente atractivos, funcionales y escalables. Pensamos diseño, navegación y contenido como una experiencia de marca coherente, clara y efectiva.' },
  { icon: 'icon_m',  title: 'Merchandising',            body: 'Transformamos tu identidad en objetos significativos, útiles y visualmente atractivos. Diseños que acompañan la experiencia de marca y refuerzan su presencia en lo cotidiano.' },
  { icon: 'icon_pg', title: 'Producción Gráfica',       body: 'Asesoramos y gestionamos la materialización de diseños: elección de materiales, acabados y proveedores, garantizando calidad y coherencia de marca en cada pieza.' },
  { icon: 'icon_pk', title: 'Packaging',                body: 'Diseñamos envases que protegen y transmiten identidad de marca. Elegimos materiales, formas y acabados para destacar en góndola y generar conexión con los consumidores.' },
];

function ServiceCard({ icon, title, body }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: 'relative', paddingTop: 24, paddingLeft: 22, height: '100%', boxSizing: 'border-box' }}>
      <div className="sq-card" style={{
        position: 'relative', height: '100%', boxShadow: 'var(--shadow-card)', '--sq-color': '#4D1E70',
        padding: '54px 38px 32px 72px', boxSizing: 'border-box',
        transform: hover ? 'translateY(-4px)' : 'none',
        transition: 'transform .18s ease, box-shadow .18s ease',
      }}>
        <h3 className="t-card-title" style={{ margin: '0 0 12px' }}>{title}</h3>
        <p className="t-body-sm" style={{ margin: 0, color: 'var(--ink)' }}>{body}</p>
      </div>
      <img src={`assets/icons/${icon}.png`} alt="" style={{
        position: 'absolute', top: 0, left: 0, width: 92, height: 92, zIndex: 2,
      }} />
    </div>
  );
}

// Alineación de los bloques: 'center' (todo al medio), 'justify', 'left'
const FEATURE_ALIGN = 'center';

function FeatureBlock({ title, lead, body, cta, icon, href, accent = 'var(--teal)' }) {
  const centered = FEATURE_ALIGN === 'center';
  return (
    <div style={{ textAlign: centered ? 'center' : 'left' }}>
      <h2 className="t-section" style={{ margin: '0 0 26px' }}>{title}</h2>
      <h3 className="t-card-title" style={{ fontSize: 30, lineHeight: 1.15, margin: '0 0 20px', color: accent }}>{lead}</h3>
      <p className="t-body-sm" style={{
        margin: centered ? '0 auto 32px' : '0 0 32px', color: 'var(--ink)', maxWidth: 620,
        textAlign: FEATURE_ALIGN,
      }}>{body}</p>
      <div style={{ display: 'flex', justifyContent: centered ? 'center' : 'flex-start' }}>
        <BrandCTA icon={icon} href={href}>{cta}</BrandCTA>
      </div>
    </div>
  );
}

const WA_PHONE = '5491124072455';
const waLink = (msg) => `https://api.whatsapp.com/send?phone=${WA_PHONE}&text=${encodeURIComponent(msg)}`;

function Services() {
  const scrollRef = React.useRef(null);
  const [atEnd, setAtEnd] = React.useState(false);
  const onScroll = React.useCallback(() => {
    const el = scrollRef.current; if (!el) return;
    setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 2);
  }, []);
  React.useEffect(() => {
    onScroll();
    window.addEventListener('resize', onScroll);
    return () => window.removeEventListener('resize', onScroll);
  }, [onScroll]);
  // Only the right edge feathers — it dissolves the 3rd (last visible) column to
  // hint at more, and clears once you reach the end so the final column reads
  // crisp. The left edge stays solid so the first cards' icons never smudge.
  const mask = atEnd
    ? 'linear-gradient(to right, #000 0, #000 100%)'
    : 'linear-gradient(to right, #000 0, #000 64%, transparent 98%)';
  return (
    <section data-screen-label="Servicios" style={{ padding: '140px 0', position: 'relative', isolation: 'isolate', overflow: 'visible' }}>
      {/* Full-bleed white surface + Cadena de Crecimiento anchored to the TRUE left edge */}
      <BleedLayer bg="var(--white)">
        <div style={{
          position: 'absolute', left: -190, top: 90, width: 680, height: 680,
          backgroundImage: 'url(assets/brand/cadena-crecimiento.png)',
          backgroundSize: 'contain', backgroundRepeat: 'no-repeat',
          opacity: 0.15,
        }} />
      </BleedLayer>
      <div style={{ position: 'relative', display: 'flex', gap: 56, padding: '0 0 0 160px', alignItems: 'flex-start' }}>
        <div style={{ flex: '0 0 400px', position: 'sticky', top: 60 }}>
          <h2 className="t-section" style={{ margin: '0 0 28px' }}>Proyectos con AlfaBeth</h2>
          <p className="t-body" style={{ margin: '0 0 36px', color: 'var(--gray-700)', width: 400, maxWidth: '100%' }}>
            En AlfaBeth combinamos técnica, creatividad y estrategia para ofrecer una gama
            completa de servicios de diseño. Desde identidades visuales hasta contenidos
            digitales, cada proyecto es una oportunidad para transformar ideas en impacto visual.
          </p>
          <TextCTA color="var(--purple)">{'Solicitar\nPresupuesto'}</TextCTA>
          <p className="t-body-sm" style={{ margin: '40px 0 0', color: 'var(--gray-500)', display: 'flex', alignItems: 'center', gap: 10 }}>
            Deslizá para ver los 10 servicios <span style={{ fontSize: 24, lineHeight: 1 }}>→</span>
          </p>
        </div>
        <div className="svc-scroll" ref={scrollRef} onScroll={onScroll} style={{
          flex: 1,
          display: 'grid',
          gridAutoFlow: 'column',
          gridTemplateRows: 'repeat(2, 350px)',
          gridAutoColumns: '400px',
          gap: '30px 24px',
          alignItems: 'stretch',
          overflowX: 'auto',
          scrollSnapType: 'x proximity',
          WebkitOverflowScrolling: 'touch',
          touchAction: 'pan-x',
          padding: '4px 24px 26px 4px',
          // Right-only feather: the 3rd column dissolves toward the edge (the
          // "difuminado" scroll); no left fade so the leading icons stay crisp.
          maskImage: mask,
          WebkitMaskImage: mask,
        }}>
          {SERVICES.map(s => (
            <div key={s.icon} style={{ scrollSnapAlign: 'start' }}>
              <ServiceCard {...s} />
            </div>
          ))}
        </div>
      </div>

      <div style={{ height: 150 }} />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 100, padding: '0 160px', alignItems: 'start' }}>
        <FeatureBlock
          title="Construcción de Marcas"
          lead="Diseñamos marcas que existen más allá del logo."
          cta="Construir"
          icon="grid"
          href={waLink('Quiero un presupuesto de construcción de marcas... ')}
          body="La construcción de marca es un proceso que articula identidad, estrategia y experiencias visuales coherentes. En Alfabeth diseñamos sistemas integrales que permiten proyectar marcas sólidas, reconocibles y funcionales en cada punto de contacto. Pensamos cada decisión como parte de un todo: desde los fundamentos hasta las expresiones visuales que te representan en el día a día." />
        <FeatureBlock
          title="Creación de Contenido"
          lead="Diseñamos lo que tu marca necesita decir."
          cta="Crear"
          icon="connect"
          href={waLink('Quiero un presupuesto de creación de contenido... ')}
          body="Crear contenido no es solo diseñar piezas: es construir una narrativa visual que represente a la marca con claridad, intención y personalidad. En Alfabeth desarrollamos discursos gráficos coherentes con la identidad y pensados para cada canal. Entendemos al contenido como una extensión activa de tu marca: comunica, emociona, posiciona y conecta." />
      </div>
    </section>
  );
}
window.Services = Services;