'use client';
import { motion } from 'framer-motion';
import type { ThemeProps } from '../types';

export const Problem = ({ isNavyBg }: ThemeProps) => {
  const bg     = isNavyBg ? '#0d1117' : '#f5f5f3';
  const text   = isNavyBg ? '#eef0f4' : '#0a0a0a';
  const sub    = isNavyBg ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.4)';
  const border = isNavyBg ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';

  return (
    <section
      aria-labelledby="problem-heading"
      className="px-8 py-24 md:px-14 transition-colors duration-500"
      style={{ background: bg, borderBottom: `1px solid ${border}` }}
    >
      <motion.div
        className="mx-auto max-w-7xl"
        initial={{ opacity: 0, y: 28 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: false, amount: 0.15 }}
        transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
      >
        <div>
          <h2
            id="problem-heading"
            className="text-display"
            style={{ lineHeight: 1.0, letterSpacing: '-0.02em', color: text }}
          >
            {['La mayoría', 'de los problemas', 'operativos son'].map((line, i) => (
              <motion.span
                key={line}
                className="block"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: i * 0.07, ease: [0.22, 1, 0.36, 1] }}
              >
                {line}
              </motion.span>
            ))}
            <motion.span
              className="block text-brand-red"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.24, ease: [0.22, 1, 0.36, 1] }}
            >
              problemas de sistema.
            </motion.span>
          </h2>

          <motion.div
            initial={{ opacity: 0, y: 12 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.45 }}
            className="mt-12 flex gap-4"
            style={{ maxWidth: '56ch' }}
          >
            <span
              className="mt-1 shrink-0 block"
              style={{ background: '#3b82f6', minHeight: '100%', width: 2, borderRadius: 2, alignSelf: 'stretch', opacity: 0.7 }}
            />
            <p className="text-base leading-relaxed" style={{ color: sub }}>
              Software que impone sus propias reglas en lugar de adaptarse
              a la operación. Procesos que permanecen manuales porque nadie
              los diseñó para escalar. Ambos tienen la misma raíz: ausencia
              de arquitectura.
            </p>
          </motion.div>
        </div>
      </motion.div>
    </section>
  );
};