'use client';
import { motion } from 'framer-motion';
import type { ThemeProps } from '../types';
import { anatomyLayers as layers } from '../data/anatomyData';

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

  return (
    <section
      id="anatomy"
      aria-labelledby="anatomy-heading"
      style={{ background: bg, color: text, borderBottom: `1px solid ${border}` }}
      className="px-8 py-28 md:px-14 transition-colors duration-500"
    >
      <motion.div
        className="mx-auto max-w-7xl"
        initial={{ opacity: 0, y: 28 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: false, amount: 0.1 }}
        transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
      >
        {/* Header */}
        <div className="mb-16">
          <h2
            id="anatomy-heading"
            className="text-headline"
            style={{ maxWidth: '24ch' }}
          >
            Todo sistema tiene<br /> las mismas capas.
          </h2>
        </div>

        {/* Layers — always visible */}
        <div style={{ border: `1px solid ${border}`, borderRadius: 4, overflow: 'hidden' }}>
          {layers.map((layer, i) => (
            <motion.div
              key={layer.id}
              initial={{ opacity: 0, y: 14 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: i * 0.07 }}
              style={{
                borderBottom: i < layers.length - 1 ? `1px solid ${border}` : 'none',
                display: 'grid',
                gridTemplateColumns: '120px 1fr',
                gap: '0 32px',
                alignItems: 'start',
                padding: '32px 32px',
              }}
            >
              {/* Number */}
              <span
                className="font-display font-black"
                style={{ fontSize: 64, lineHeight: 1, color: '#3b82f6', letterSpacing: '-0.04em' }}
              >
                {layer.num}
              </span>

              {/* Title + description + tech */}
              <div style={{ paddingTop: 8 }}>
                <p
                  className="font-display font-black mb-1"
                  style={{ fontSize: 13, letterSpacing: '0.04em', color: text }}
                >
                  {layer.title}
                </p>
                <p className="text-xs mb-3" style={{ color: sub }}>
                  {layer.subtitle}
                </p>
                <p className="text-sm leading-relaxed mb-4" style={{ color: sub, maxWidth: '60ch' }}>
                  {layer.description}
                </p>
                <div className="flex flex-wrap gap-2">
                  {layer.tech.map(t => (
                    <span key={t} style={{
                      fontSize: 11,
                      fontWeight: 600,
                      padding: '3px 10px',
                      borderRadius: 99,
                      border: `1px solid ${border}`,
                      color: isNavyBg ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.5)',
                      background: isNavyBg ? 'rgba(255,255,255,0.04)' : 'rgba(59,130,246,0.05)',
                      letterSpacing: '0.01em',
                    }}>
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </section>
  );
};