'use client';
import { motion } from 'framer-motion';
import { Icon } from '@iconify/react';
import type { ThemeProps } from '@/app/(landing)/types/ui';
import { Button } from '@/app/(landing)/components/Button';
import { SystemMap } from './SystemMap';
import { useContact } from '@/app/(landing)/contexts/ContactContext';

const ease = [0.22, 1, 0.36, 1] as const;

function RevealLine({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
  return (
    <motion.span
      className="block"
      initial={{ opacity: 0, y: 18 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.75, delay, ease }}
    >
      {children}
    </motion.span>
  );
}

export const Hero = ({ isNavyBg }: ThemeProps) => {
  const { open: openContact } = useContact();
  const bg       = isNavyBg ? '#001f5b' : '#ffffff';
  const text     = isNavyBg ? '#ffffff' : '#0a0a0a';
  const sub      = isNavyBg ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.45)';
  const gridLine = isNavyBg ? 'rgba(255,255,255,0.025)' : 'rgba(0,0,0,0.04)';

  return (
    <section
      className="relative flex min-h-screen flex-col overflow-hidden transition-colors duration-500"
      style={{ background: bg, color: text, borderBottom: isNavyBg ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(0,0,0,0.1)' }}
      aria-label="Rynext Technologies — Hero"
    >
      <div
        className="pointer-events-none absolute inset-0 bg-grid-lines"
        style={{ color: gridLine }}
        aria-hidden="true"
      />

      <div className="relative mx-auto grid w-full max-w-7xl flex-1 items-center gap-12 px-8 pb-24 pt-36 md:px-14 lg:grid-cols-[1fr_1fr] lg:gap-20">
        <div>
          <h1 className="text-display mb-8" style={{ color: text }}>
            <RevealLine delay={0.08}>Construimos</RevealLine>
            <RevealLine delay={0.16}>el sistema</RevealLine>
            <RevealLine delay={0.24}>
              <span className="text-brand-red">detrás</span> del
            </RevealLine>
            <RevealLine delay={0.32}>negocio.</RevealLine>
          </h1>

          <motion.p
            initial={{ opacity: 0, y: 14 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.5, ease }}
            className="mb-10 max-w-sm text-base leading-relaxed"
            style={{ color: sub }}
          >
            Ingeniería de software empresarial diseñada desde la arquitectura.
            No herramientas genéricas, sistemas construidos para
            la operación real de tu negocio.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.65, ease }}
            className="flex flex-wrap items-center gap-6"
          >
            <Button className="rounded-md" variant="primary" onClick={openContact}>
              Hablemos de tu proyecto <Icon icon="ph:arrow-right" width={16} />
            </Button>
            <button
              onClick={() => document.getElementById('machinery')?.scrollIntoView({ behavior: 'smooth' })}
              className="group flex items-center gap-2 text-sm font-semibold transition"
              style={{ color: sub }}
            >
              Explorar la maquinaria
              <Icon icon="ph:arrow-right" width={14} className="transition-transform group-hover:translate-x-0.5" />
            </button>
          </motion.div>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.4, ease }}
          className="hidden lg:block"
        >
          <SystemMap isNavyBg={isNavyBg} />
        </motion.div>
      </div>
    </section>
  );
};