// LegalSection — "Marco Normativo" table, integrated with ODAS editorial system.
// Same language as ProblemSection/SolutionSection: cream bg, mono eyebrows,
// Instrument Serif italic accent, halo gradient frame around the table card,
// scroll-revealed with stagger per row.

const { useReveal: _lUseReveal } = window;

function LegalSection({ root }) {
  const isMobile = window.useIsMobile();
  const rows = [
  { cat: 'Estatal · Eje Principal', title: 'Ley 1/2025',
    body: 'Cumplimiento de la jerarquía obligatoria de prevención y registro inmutable del desperdicio alimentario.',
    badge: 'Jerarquía Residuos' },
  { cat: 'Autonómico · Cataluña', title: 'Llei 3/2020',
    body: 'Plan de prevención y reporte autonómico para operadores con sede en Cataluña.',
    badge: 'Plan CCAA' },
  { cat: 'UE · Seguridad Alimentaria', title: 'Reg. (CE) 178/2002',
    body: 'Trazabilidad one-up / one-down con log inmutable de movimientos por lote.',
    badge: 'Trazabilidad Lotes' },
  { cat: 'UE · Cuantificación', title: 'Reg. Delegado (UE) 2019/1597',
    body: 'Metodología oficial UE de medición del desperdicio por destino (prevención, donación, valorización).',
    badge: 'Cuantificación UE' },
  { cat: 'Internacional · Seguridad Alimentaria', title: 'HACCP · Codex Alimentarius',
    body: 'Checklist obligatorio de cadena de frío, integridad y etiquetado en cada operación de donación.',
    badge: 'Cadena de Frío' },
  { cat: 'Estatal · Fiscal', title: 'Ley 49/2002 + RD 1270/2003',
    body: 'Generación automática del Modelo 182 y trazabilidad fiscal de la donación de excedentes.',
    badge: 'Modelo 182' },
  { cat: 'AEAT · Facturación', title: 'RD 1007/2023 + Orden HAC/1177/2024',
    body: 'Registro de facturación Verifactu con cadena de hashes SHA-256 inmutable y respuesta AEAT.',
    badge: 'Verifactu Ready' },
  { cat: 'UE · Identidad Digital', title: 'Reglamento eIDAS (UE) 910/2014',
    body: 'Firma electrónica avanzada (FEA-P) sellada en cada PDF con hash, sello de tiempo e identidad del firmante.',
    badge: 'Firma Avanzada' },
  { cat: 'UE / España · Protección de Datos', title: 'RGPD (UE) 2016/679 + LOPDGDD 3/2018',
    body: 'Derecho de supresión (Art. 17), pseudonimización a 90 días y políticas RLS por organización.',
    badge: 'Datos Protegidos' }];


  return (
    <section id="ley" style={{
      position: 'relative',
      padding: isMobile ? '36px 20px 36px' : '48px 32px 48px',
      borderTop: '1px solid rgba(10,10,10,0.08)',
      background: '#faf8f3',
      scrollMarginTop: 80
    }}>
      <LegalIntro root={root} isMobile={isMobile} />

      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <LegalTable root={root} rows={rows} isMobile={isMobile} />
        <LegalFooter root={root} count={rows.length} />
      </div>
    </section>);

}

function LegalIntro({ root, isMobile }) {
  const [ref, shown] = _lUseReveal(root, { threshold: 0.2 });
  return (
    <div ref={ref} style={{ maxWidth: 1080, margin: isMobile ? '0 auto 20px' : '0 auto 40px' }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
        letterSpacing: 1.5, textTransform: 'uppercase',
        opacity: shown ? 0.5 : 0, marginBottom: 18,
        transition: 'opacity .8s cubic-bezier(.2,.7,.1,1)'
      }}>◇ Marco Normativo</div>
      <h2 style={{
        letterSpacing: '-0.045em',
        lineHeight: 0.98, margin: 0, fontWeight: 400, maxWidth: 1000,
        opacity: shown ? 1 : 0,
        transform: shown ? 'translate3d(0,0,0)' : 'translate3d(0, 28px, 0)',
        transition: 'opacity 1s cubic-bezier(.2,.7,.1,1) .1s, transform 1.1s cubic-bezier(.2,.7,.1,1) .1s', fontSize: "30px"
      }}>
        Nueve marcos legales, <em style={{ fontFamily: 'Instrument Serif, serif' }}>un solo sistema</em>.
      </h2>
    </div>);

}

function LegalTable({ root, rows, isMobile }) {
  const [ref, shown] = _lUseReveal(root, { threshold: 0.1 });
  return (
    <div ref={ref} style={{
      padding: 3, borderRadius: 20,
      background: 'linear-gradient(135deg, #f5e4d0 0%, #f0d8db 25%, #dfe4d8 55%, #e0d6e5 80%, #efe4cf 100%)',
      backgroundSize: shown ? '100% 100%' : '240% 240%',
      backgroundPosition: shown ? '0% 0%' : '100% 100%',
      boxShadow: shown ?
      '0 40px 90px -40px rgba(10,10,10,0.18)' :
      '0 20px 50px -30px rgba(10,10,10,0.08)',
      transition: 'background-position 1.8s cubic-bezier(.2,.7,.1,1) .2s, box-shadow 1.2s ease .2s'
    }}>
      <div style={{
        background: '#fffdf8', borderRadius: 18, overflow: 'hidden'
      }}>
        {/* Header — desktop only */}
        {!isMobile && <div style={{
          display: 'grid', gridTemplateColumns: '2fr 3fr 1fr',
          gap: 24, padding: '22px 32px',
          background: '#faf8f3',
          borderBottom: '1px solid rgba(10,10,10,0.08)',
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase',
          opacity: 0.55
        }}>
          <div>Normativa · Marco Legal</div>
          <div>Alcance / Aplicación en ODAS</div>
          <div style={{ textAlign: 'right' }}>Cumple</div>
        </div>}

        {rows.map((r, i) =>
        <LegalRow key={i} row={r} index={i} shown={shown} isMobile={isMobile} totalRows={rows.length} />
        )}
      </div>
    </div>);

}

function LegalRow({ row, index, shown, isMobile, totalRows = 9 }) {
  const delay = 0.2 + index * 0.05;
  return (
    <div style={{
      display: isMobile ? 'flex' : 'grid',
      flexDirection: isMobile ? 'column' : undefined,
      gridTemplateColumns: isMobile ? undefined : '2fr 3fr 1fr',
      gap: isMobile ? 12 : 24,
      padding: isMobile ? '20px 18px' : '26px 32px',
      borderBottom: index < (totalRows - 1) ? '1px solid rgba(10,10,10,0.06)' : 'none',
      alignItems: isMobile ? 'flex-start' : 'center',
      position: 'relative',
      opacity: shown ? 1 : 0,
      transform: shown ? 'translate3d(0,0,0)' : 'translate3d(0, 14px, 0)',
      transition: `opacity .8s cubic-bezier(.2,.7,.1,1) ${delay}s, transform .9s cubic-bezier(.2,.7,.1,1) ${delay}s`
    }}>
      <div style={{ width: '100%', paddingRight: isMobile ? 44 : 0 }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase',
          color: '#3d5a82', fontWeight: 500, marginBottom: 8
        }}>{row.cat}</div>
        <div style={{
          fontSize: isMobile ? 16 : 18, fontWeight: 500, letterSpacing: '-0.015em',
          lineHeight: 1.2, color: '#0a0a0a'
        }}>{row.title}</div>
      </div>
      <div style={{ width: '100%' }}>
        <div style={{
          fontSize: isMobile ? 14 : 15, lineHeight: 1.5, color: '#333',
          marginBottom: 12, textWrap: 'pretty'
        }}>{row.body}</div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          background: '#e3f0e8', color: '#1f6b47',
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, letterSpacing: 1.2, textTransform: 'uppercase',
          fontWeight: 600, padding: '5px 10px', borderRadius: 4
        }}>{row.badge}</span>
      </div>
      <div style={isMobile ? {
        position: 'absolute', top: 20, right: 18,
      } : { display: 'flex', justifyContent: 'flex-end' }}>
        <div style={{
          width: isMobile ? 28 : 32, height: isMobile ? 28 : 32,
          border: '1.5px solid #2a8a5a',
          borderRadius: '50%',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <svg width={isMobile ? '14' : '16'} height={isMobile ? '14' : '16'} viewBox="0 0 24 24" fill="none"
          stroke="#2a8a5a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="5 12 10 17 19 8" />
          </svg>
        </div>
      </div>
    </div>);

}

function LegalFooter({ root, count }) {
  const [ref, shown] = _lUseReveal(root, { threshold: 0.2 });
  return (
    <div ref={ref} style={{
      marginTop: 24,
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '18px 24px',
      background: '#fdf2f0',
      border: '1px solid #f0d9d4',
      borderRadius: 12,
      opacity: shown ? 1 : 0,
      transform: shown ? 'translate3d(0,0,0)' : 'translate3d(0, 12px, 0)',
      transition: 'opacity .9s cubic-bezier(.2,.7,.1,1), transform 1s cubic-bezier(.2,.7,.1,1)'
    }}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
      stroke="#c0392b" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3 L22 20 L2 20 Z" />
        <line x1="12" y1="10" x2="12" y2="14" />
        <circle cx="12" cy="17" r="0.5" fill="#c0392b" />
      </svg>
      <div style={{ fontSize: 14, color: '#5a2a20', lineHeight: 1.5 }}>
        <strong style={{ color: '#c0392b', fontWeight: 700 }}>Marco normativo integrado:</strong>{' '}
        ODAS cumple simultáneamente con <strong style={{ color: '#c0392b', fontWeight: 700 }}>{count} marcos legales</strong> españoles, europeos e internacionales desde un solo lugar.
      </div>
    </div>);

}

Object.assign(window, { LegalSection });