/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container */

const NH = {
  teal:   '#389199',
  tealDk: '#1C484C',
  tealDeep: '#142F32',
  cyan:   '#00DAE3',
  yellow: '#F8B62D',
};

const NH_EASE = 'cubic-bezier(0.16,1,0.3,1)';

const nhPrefersReducedMotion =
  typeof window !== 'undefined' &&
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Fires once when the element enters the viewport (mirrors the pattern used in home-v2.jsx)
function useNhInView(threshold = 0.12) {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(nhPrefersReducedMotion);
  React.useEffect(() => {
    if (nhPrefersReducedMotion) return;
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setInView(true); obs.disconnect(); } },
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

// Wraps any element with a scroll-triggered fade + slide entrance.
// 'slide' controls whether the entrance also translates on Y. Set it to false
// for elements that already carry their own permanent CSS transform (e.g. the
// offset middle card in NhLinks) so the two don't fight over the property.
function NhReveal({ children, delay = 0, y = 22, slide = true, style, className, as: Tag = 'div', ...rest }) {
  const [ref, inView] = useNhInView();
  const transitionProps = slide ? 'opacity, transform' : 'opacity';
  return (
    <Tag ref={ref} className={className} style={{
      opacity: inView ? 1 : 0,
      ...(slide ? { transform: inView ? 'none' : `translateY(${y}px)` } : null),
      transition: `${transitionProps} 620ms ${NH_EASE} ${delay}ms`,
      ...style,
    }} {...rest}>
      {children}
    </Tag>
  );
}

// ============================================================
// CURRENT LINE — signature visual, "La Corriente Constante"
// A flowing path from 2014 to 2026 marking the constants that
// stayed the same against the one thing that changed (AI speed).
// ============================================================
function CurrentLine() {
  const stops = [
    { y: 18,  year: '2014', label: 'Empieza FRSKO en México', tone: 'dim' },
    { y: 46,  year: '2018', label: 'Neuromarketing entra al método', tone: 'dim' },
    { y: 74,  year: '2022', label: 'Operación en cinco mercados', tone: 'dim' },
    { y: 100, year: '2026', label: 'La IA multiplica al equipo humano', tone: 'live' },
  ];

  return (
    <div style={{
      position: 'relative', background: '#fff', border: '1px solid var(--border)',
      borderRadius: 28, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
      padding: '28px 28px 24px',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 22,
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em',
          color: 'var(--fg3)', textTransform: 'uppercase',
        }}>Una corriente, no una ola</div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
          color: NH.tealDk, padding: '4px 10px', borderRadius: 999, background: 'var(--teal-50)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: NH.teal, animation: 'nhPulse 2.4s ease-in-out infinite' }} />
          En marcha desde 2014
        </div>
      </div>

      <div style={{ display: 'flex', gap: 18 }}>
        {/* SVG current path */}
        <svg width="34" height="208" viewBox="0 0 34 120" fill="none" style={{ flexShrink: 0 }}>
          <path d="M17 4 C 30 22, 4 38, 17 56 S 30 90, 17 116"
            stroke="var(--teal-100)" strokeWidth="3" fill="none" strokeLinecap="round" />
          <path d="M17 4 C 30 22, 4 38, 17 56 S 30 90, 17 116"
            stroke={NH.teal} strokeWidth="3" fill="none" strokeLinecap="round"
            strokeDasharray="180" strokeDashoffset="180"
            style={{ animation: 'nhDraw 2.4s var(--ease-out) 0.2s forwards' }} />
          {stops.map((s, i) => (
            <circle key={i} cx="17" cy={4 + s.y * 0.96}
              r={s.tone === 'live' ? 6 : 4.5}
              fill={s.tone === 'live' ? NH.yellow : '#fff'}
              stroke={s.tone === 'live' ? NH.tealDk : NH.teal}
              strokeWidth="2.5" />
          ))}
        </svg>

        {/* Labels */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          {stops.map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18,
                letterSpacing: '-0.02em', color: s.tone === 'live' ? NH.tealDk : 'var(--fg3)',
                width: 52, flexShrink: 0,
              }}>{s.year}</span>
              <span style={{
                fontSize: 13, lineHeight: 1.4,
                color: s.tone === 'live' ? 'var(--fg1)' : 'var(--fg3)',
                fontWeight: s.tone === 'live' ? 600 : 400,
              }}>{s.label}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--border)',
        fontSize: 12.5, color: 'var(--fg3)', lineHeight: 1.55,
      }}>
        Doce años yendo en la misma dirección. Lo que cambió fue la velocidad, gracias a la IA. El rumbo lo seguimos poniendo nosotros.
      </div>
    </div>
  );
}

// ============================================================
// HERO
// ============================================================
function NhHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: 'radial-gradient(80% 60% at 50% 0%, var(--teal-50) 0%, var(--ink-0) 70%)',
    }}>
      <style>{`
        @keyframes nhPulse  { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
        @keyframes nhDraw   { to { stroke-dashoffset: 0 } }
        @keyframes nhRiseIn { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
        .nh-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
        .nh-rise { opacity: 0; animation: nhRiseIn 760ms ${NH_EASE} both; }
        @media (max-width: 900px) {
          .nh-hero-grid { grid-template-columns: 1fr; }
          .nh-hero-vis  { display: none; }
        }
        @media (prefers-reduced-motion: reduce) {
          .nh-hero-grid *, .nh-rise { animation: none !important; opacity: 1 !important; transform: none !important; }
        }
      `}</style>

      <Droplets style={{ right: -70, top: 40 }}   color="var(--teal-100)" opacity={0.45} size={260} />
      <Droplets style={{ left: -90, bottom: -60 }} color="var(--cyan-100)" opacity={0.3}  size={240} />

      <Container style={{ padding: '72px 32px 96px', position: 'relative' }}>
        <div className="nh-rise" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', letterSpacing: '0.02em', marginBottom: 26,
          animationDelay: '0ms',
        }}>
          <a href="/" style={{ color: 'var(--fg3)' }}>frsko.com</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: NH.teal, fontWeight: 600 }}>nosotros</span>
        </div>

        <div className="nh-hero-grid">
          <div>
            <div className="nh-rise" style={{ marginBottom: 22, animationDelay: '90ms', display: 'inline-block' }}>
              <Eyebrow>Quiénes somos</Eyebrow>
            </div>

            <h1 className="nh-rise" style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4.6vw, 54px)',
              fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.08,
              margin: '0 0 22px', color: 'var(--fg1)', maxWidth: 620,
              animationDelay: '170ms',
            }}>
              Somos la agencia que decidió que el marketing tenía que cambiar{' '}
              <em style={{ fontStyle: 'italic', color: NH.teal }}>
                y que la IA era la herramienta para lograrlo.
              </em>
            </h1>

            <p className="nh-rise" style={{
              fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)',
              margin: '0 0 32px', maxWidth: 540,
              animationDelay: '270ms',
            }}>
              FRSKO Marketing lleva más de una década trabajando con empresas en México y LATAM.
              Lo que cambió en 2026 no es quiénes somos. Cambió la velocidad a la que podemos
              operar y la escala a la que podemos entregar.
            </p>

            <div className="nh-rise" style={{ display: 'flex', flexWrap: 'wrap', gap: 12, animationDelay: '360ms' }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Habla con nosotros
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-right"
                onClick={() => document.getElementById('esencia')?.scrollIntoView({ behavior: 'smooth' })}>
                Conocer nuestra esencia
              </Button>
            </div>
          </div>

          <div className="nh-hero-vis nh-rise" style={{ animationDelay: '260ms' }}>
            <CurrentLine />
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// NUESTRA ESENCIA
// ============================================================
function NhEssence() {
  return (
    <section id="esencia" style={{ background: 'var(--ink-0)', borderTop: '1px solid var(--border)' }}>
      <style>{`
        .nh-essence-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: start; }
        @media (max-width: 900px) { .nh-essence-grid { grid-template-columns: 1fr; gap: 36px; } }
      `}</style>
      <Container style={{ padding: '88px 32px' }}>
        <div className="nh-essence-grid">
          <NhReveal>
            <Eyebrow style={{ marginBottom: 18 }}>Nuestra esencia</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3vw, 38px)',
              fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.15,
              margin: 0, color: 'var(--fg1)', maxWidth: 480,
            }}>
              Inyectar vitalidad y frescura a las empresas. Revolucionar la forma de hacer marketing.
            </h2>
          </NhReveal>

          <NhReveal delay={120}>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg2)', margin: '0 0 18px' }}>
              Eso no cambió. Lo que sí cambió es que hoy tenemos las herramientas para hacerlo
              a una escala que antes era imposible para una agencia de nuestro tamaño.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg2)', margin: '0 0 18px' }}>
              La inteligencia artificial no llegó a reemplazar al equipo de FRSKO. Llegó a
              multiplicar lo que ese equipo ya sabía hacer.{' '}
              <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>
                El criterio estratégico, el conocimiento del consumidor mexicano, la metodología
                de neuromarketing y la experiencia en decenas de industrias siguen siendo humanos.
              </strong>{' '}
              La velocidad de producción, el análisis de datos y la personalización a escala son de la IA.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg2)', margin: 0 }}>
              Esa combinación es lo que ninguna agencia grande ni plataforma de autoservicio
              puede replicar hoy.
            </p>

            <div style={{
              marginTop: 28, display: 'inline-flex', alignItems: 'center', gap: 14,
              padding: '14px 20px', borderRadius: 16, background: 'var(--teal-50)',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22,
                letterSpacing: '-0.02em', color: NH.tealDk, whiteSpace: 'nowrap',
              }}>Humano + IA</div>
              <div style={{ width: 1, height: 28, background: 'var(--teal-200)' }} />
              <div style={{ fontSize: 13, lineHeight: 1.4, color: NH.tealDk, maxWidth: 280 }}>
                Criterio y trayectoria humanos. Velocidad y escala de la inteligencia artificial. Nunca uno sin el otro.
              </div>
            </div>
          </NhReveal>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// TRES COSAS QUE NOS DEFINEN
// ============================================================
const DEFINERS = [
  {
    n: '01',
    title: 'Una década en el mercado mexicano',
    body: 'No somos una startup de marketing. Llevamos años trabajando con clientes reales, en industrias reales y con presupuestos reales. Ese historial es la base de todo lo que construimos hoy.',
    icon: 'briefcase',
  },
  {
    n: '02',
    title: 'El único equipo en LATAM que une neuromarketing con IA',
    body: 'El neuromarketing es parte del ADN de FRSKO desde hace más de diez años. La IA se sumó a esa base, no la reemplazó. Esa combinación es algo que hoy nadie más ofrece en el mercado hispanohablante.',
    icon: 'brain',
  },
  {
    n: '03',
    title: 'Presencia activa en cinco mercados',
    body: 'México, LATAM, España, Estados Unidos y Canadá. Hablamos de clientes con los que trabajamos hoy, casos documentados y conocimiento real de cada región, no de oficinas de cartón.',
    icon: 'globe',
  },
];

function NhDefiners() {
  return (
    <section style={{ background: 'var(--ink-50)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <style>{`
        .nh-def-spine {
          position: absolute; left: 25px; top: 30px; bottom: 30px; width: 2px;
          background: linear-gradient(180deg, var(--teal-300) 0%, var(--teal-100) 100%);
        }
        .nh-def-item { display: flex; gap: 22px; align-items: flex-start; position: relative; }
        .nh-def-item:not(:last-child) { margin-bottom: 30px; }
        .nh-def-node {
          width: 52px; height: 52px; border-radius: 16px; background: #fff;
          border: 1px solid var(--border); display: grid; place-items: center;
          color: var(--brand); flex-shrink: 0; position: relative; z-index: 1;
          box-shadow: var(--shadow-sm);
        }
        .nh-def-num {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
          color: var(--fg3); margin-bottom: 6px;
        }
        @media (max-width: 640px) {
          .nh-def-spine { left: 21px; }
          .nh-def-node { width: 44px; height: 44px; border-radius: 13px; }
        }
      `}</style>
      <Container style={{ padding: '76px 32px' }}>
        <NhReveal>
          <Eyebrow style={{ marginBottom: 16 }}>Tres cosas que nos definen</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2.8vw, 32px)',
            fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.2,
            margin: '0 0 40px', color: 'var(--fg1)', maxWidth: 600,
          }}>
            Lo que nos hace distintos no se improvisa. Se construyó durante años.
          </h2>
        </NhReveal>

        <div style={{ position: 'relative', maxWidth: 760 }}>
          <div className="nh-def-spine" />
          {DEFINERS.map((d, i) => (
            <NhReveal key={d.n} as="div" delay={i * 110} y={16} className="nh-def-item">
              <div className="nh-def-node">
                <Icon name={d.icon} size={20} />
              </div>
              <div>
                <div className="nh-def-num">{d.n}</div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(17px, 1.9vw, 21px)',
                  letterSpacing: '-0.02em', lineHeight: 1.3, margin: '0 0 8px', color: 'var(--fg1)',
                }}>{d.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
                  {d.body}
                </p>
              </div>
            </NhReveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// LINKS INTERNOS — el hub como puente
// ============================================================
const HUB_LINKS = [
  {
    eyebrow: 'La gente detrás del trabajo',
    title: 'Conoce al equipo',
    body: 'Estrategas, creativos, especialistas en neuromarketing y operadores de IA. La gente que toma las decisiones detrás de cada proyecto.',
    href: '/nosotros/equipo',
    icon: 'users',
  },
  {
    eyebrow: 'La prueba de que funciona',
    title: 'Ver clientes y casos de éxito',
    body: 'Marcas reales, en cinco mercados, con resultados que documentamos. Aquí es donde puedes revisar si lo que decimos se sostiene.',
    href: '/nosotros/clientes',
    icon: 'briefcase',
  },
  {
    eyebrow: 'Cómo lo hacemos',
    title: 'Nuestra metodología',
    body: 'Neuromarketing, criterio estratégico y velocidad de IA armados en un proceso que podemos repetir, no solo prometer.',
    href: '/nosotros/metodologia',
    icon: 'compass',
  },
];

function NhLinks() {
  return (
    <section style={{ background: 'var(--ink-0)' }}>
      <style>{`
        .nh-link-card {
          display: flex; flex-direction: column;
          padding: 32px; border-radius: 24px; background: #fff;
          border: 1px solid var(--border); text-decoration: none;
          transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
        }
        .nh-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-200); }
        .nh-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 22px; padding-bottom: 28px; }
        .nh-link-grid > a:nth-child(2) { transform: translateY(28px); }
        @media (max-width: 900px) {
          .nh-link-grid { grid-template-columns: 1fr; padding-bottom: 0; }
          .nh-link-grid > a:nth-child(2) { transform: none; }
        }
      `}</style>
      <Container style={{ padding: '92px 32px 96px' }}>
        <NhReveal style={{ maxWidth: 620, marginBottom: 48 }}>
          <Eyebrow style={{ marginBottom: 16 }}>Sigue explorando</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3vw, 36px)',
            fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.15,
            margin: 0, color: 'var(--fg1)',
          }}>
            Esto es el panorama. La evidencia está un clic más allá.
          </h2>
        </NhReveal>

        <div className="nh-link-grid">
          {HUB_LINKS.map((l, i) => (
            <NhReveal key={l.href} as="a" href={l.href} className="nh-link-card"
              delay={i * 100} y={18} slide={i !== 1}>
              <div style={{
                width: 46, height: 46, borderRadius: 14, background: 'var(--teal-50)',
                display: 'grid', placeItems: 'center', color: NH.teal, marginBottom: 22,
              }}>
                <Icon name={l.icon} size={21} />
              </div>
              <div style={{
                fontSize: 11.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
                color: 'var(--fg3)', marginBottom: 10,
              }}>{l.eyebrow}</div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 21,
                letterSpacing: '-0.02em', lineHeight: 1.25, margin: '0 0 12px', color: 'var(--fg1)',
              }}>{l.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 22px', flex: 1 }}>
                {l.body}
              </p>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontSize: 14, fontWeight: 600, color: NH.teal,
              }}>
                Ver más <Icon name="arrow-right" size={15} />
              </div>
            </NhReveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// CTA FINAL
// ============================================================
function NhCta({ onCta }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(160deg, var(--teal-900) 0%, #0d2427 100%)' }}>
      <Droplets style={{ right: -60, top: -40 }} color={NH.cyan} opacity={0.12} size={260} />
      <Droplets style={{ left: -80, bottom: -70 }} color="#fff" opacity={0.06} size={240} />
      <Container style={{ padding: '88px 32px', position: 'relative', textAlign: 'center' }}>
        <NhReveal>
          <Eyebrow color="var(--cyan-300)" style={{ marginBottom: 18 }}>Hablemos</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(28px, 4.4vw, 48px)',
            letterSpacing: '-0.035em', lineHeight: 1.1, margin: '0 auto 18px',
            color: '#fff', maxWidth: 680,
          }}>
            Si esto te suena a la agencia que estás buscando, hablemos.
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.68)', margin: '0 auto 36px', maxWidth: 520 }}>
            Cuéntanos qué tienes en puerta (una campaña, un lanzamiento, un cambio de rumbo)
            y te decimos con honestidad si encajamos.
          </p>
        </NhReveal>
        <NhReveal delay={140}>
          <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
            Habla con nosotros
          </Button>
        </NhReveal>
      </Container>
    </section>
  );
}