// ProjectionSection — "Proyección de Impacto 2026–2030"
// Adapted from a standalone dashboard mock to the editorial system: cream bg,
// hairline borders, mono labels, Instrument Serif italics, no traffic-light colors.

function ProjectionSection({ root }) {
  const data = [
  { year: 2026, trend: 55.8, odas: 55.8, gap: 0.0, adoption: '0%', reduction: 'Línea base' },
  { year: 2027, trend: 56.3, odas: 51.5, gap: -4.8, adoption: '3%', reduction: '−8,5%' },
  { year: 2028, trend: 56.7, odas: 46.8, gap: -9.9, adoption: '7%', reduction: '−17,5%' },
  { year: 2029, trend: 57.3, odas: 40.5, gap: -16.8, adoption: '11%', reduction: '−29,3%' },
  { year: 2030, trend: 57.7, odas: 34.0, gap: -23.7, adoption: '15%', reduction: '−41,1%' }];


  const [hover, setHover] = React.useState(null);
  const wrapperRef = React.useRef(null);

  // SVG geometry
  const xs = [155, 330, 505, 680, 855];
  const ys = (v) => 410 - (v - 27) / 35 * 350;
  const trendPts = data.map((d, i) => [xs[i], ys(d.trend)]);
  const odasPts = data.map((d, i) => [xs[i], ys(d.odas)]);
  const polyStr = (pts) => pts.map((p) => p.join(',')).join(' ');
  const areaPath = `M ${trendPts.map((p) => p.join(',')).join(' L ')} L ${odasPts.slice().reverse().map((p) => p.join(',')).join(' L ')} Z`;

  const isMobile = window.useIsMobile();
  return (
    <section id="proyeccion" style={{
      position: 'relative',
      padding: isMobile ? '32px 20px 36px' : '40px 32px 44px',
      borderTop: '1px solid rgba(10,10,10,0.08)',
      background: '#ffffff', scrollMarginTop: 80
    }}>
      {/* Section intro */}
      <Reveal root={root}>
        <div style={{ maxWidth: 1120, margin: '0 auto 32px' }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            letterSpacing: 1.5, textTransform: 'uppercase', opacity: 0.5, marginBottom: 12
          }}>
</div>
          <h2 style={{ letterSpacing: '-0.045em',
              lineHeight: 0.98, margin: 0, fontWeight: 400, maxWidth: 1100, fontSize: "30px"
            }}>
            El desperdicio alimentario europeo, <em style={{ fontFamily: 'Instrument Serif, serif' }}>antes y después</em> de ODAS.
          </h2>
          <p style={{
            marginTop: 14, fontSize: 13.5, lineHeight: 1.5, color: '#444',
            maxWidth: 720, textWrap: 'pretty'
          }}>
            Escenario comparativo del volumen anual de desperdicio alimentario en la UE: tendencia inercial frente a la trayectoria de adopción progresiva de ODAS hasta 2030.
          </p>
        </div>
      </Reveal>

      {/* KPIs — three columns, hairline divider style */}
      <Reveal root={root} delay={0.1}>
        <div style={{
          maxWidth: 1120, margin: '0 auto 32px',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 1, background: 'rgba(10,10,10,0.08)',
          border: '1px solid rgba(10,10,10,0.08)'
        }}>
          {[
          { label: 'Escenario inercial', value: '57M t', desc: 'Desperdicio proyectado en 2030 sin intervención de ODAS.', accent: '#0a0a0a' },
          { label: 'Escenario ODAS', value: '34M t', desc: 'Desperdicio proyectado en 2030 con adopción del 15% del mercado objetivo.', accent: '#0a0a0a' },
          { label: 'Reducción acumulada', value: '40%', desc: 'Diferencia entre ambos escenarios al cierre de 2030.', accent: '#c0532a' }].
          map((k, i) =>
          <div key={i} style={{
            background: '#faf8f3', padding: '20px 22px',
            display: 'flex', flexDirection: 'column', gap: 8
          }}>
              <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              letterSpacing: 1.5, opacity: 0.5, textTransform: 'uppercase'
            }}>{`0${i + 1} · ${k.label}`}</div>
              <div style={{
              fontSize: 'clamp(28px, 3vw, 40px)', lineHeight: 0.95,
              letterSpacing: '-0.04em', fontWeight: 400, color: k.accent
            }}>{k.value}</div>
              <div style={{ fontSize: 12, lineHeight: 1.45, color: '#555', textWrap: 'pretty' }}>
                {k.desc}
              </div>
            </div>
          )}
        </div>
      </Reveal>

      {/* Secondary metrics */}
      <Reveal root={root} delay={0.2}>
        <div style={{
          maxWidth: 1120, margin: '0 auto 40px',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 12 : 24
        }}>
          {[
          { v: '~30 mil M €', l: 'Valor económico recuperado al 2030' },
          { v: '~58 Mt CO₂e', l: 'Emisiones evitadas (acumulado 5 años)' },
          { v: '~46 mil M', l: 'Comidas equivalentes recuperadas' }].
          map((m, i) =>
          <div key={i} style={{
            padding: '14px 0', borderTop: '1px solid rgba(10,10,10,0.12)'
          }}>
              <div style={{
              fontSize: 'clamp(18px, 1.8vw, 24px)', lineHeight: 1, fontWeight: 400,
              letterSpacing: '-0.03em', marginBottom: 10
            }}>{m.v}</div>
              <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              letterSpacing: 1.2, opacity: 0.55, textTransform: 'uppercase'
            }}>{m.l}</div>
            </div>
          )}
        </div>
      </Reveal>

      {/* Chart */}
      <Reveal root={root} delay={0.25}>
        <div id="objetivo" style={{
          maxWidth: 1120, margin: '0 auto 32px',
          padding: '20px 22px',
          background: '#faf8f3',
          border: '1px solid rgba(10,10,10,0.08)',
          scrollMarginTop: 80
        }}>
          {/* Legend */}
          <div style={{
            display: 'flex', flexWrap: 'wrap', gap: 28, marginBottom: 24,
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            letterSpacing: 1.2, textTransform: 'uppercase', opacity: 0.7
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 24, height: 2, background: '#0a0a0a' }}></span>
              Tendencia sin ODAS
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 24, height: 2, background: '#c0532a', borderTop: '1px dashed #c0532a' }}></span>
              Proyección con ODAS
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 24, height: 12, background: 'rgba(192,83,42,0.15)' }}></span>
              Zona de impacto
            </div>
          </div>

          {/* SVG Chart */}
          <div ref={wrapperRef} style={{ position: 'relative', width: '100%' }}>
            <svg viewBox="0 0 900 480" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto', display: 'block' }}>
              <defs>
                <linearGradient id="impact-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="#3a7d44" stopOpacity="0.22" />
                  <stop offset="100%" stopColor="#3a7d44" stopOpacity="0.04" />
                </linearGradient>
              </defs>

              {/* Grid */}
              <g stroke="#0a0a0a" strokeOpacity="0.06" strokeWidth="1">
                {[60, 130, 200, 270, 340, 410].map((y) =>
                <line key={y} x1="80" y1={y} x2="860" y2={y} />
                )}
              </g>

              {/* Y labels */}
              <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#0a0a0a" fillOpacity="0.45">
                <text x="70" y="64" textAnchor="end">62 M</text>
                <text x="70" y="134" textAnchor="end">55 M</text>
                <text x="70" y="204" textAnchor="end">48 M</text>
                <text x="70" y="274" textAnchor="end">41 M</text>
                <text x="70" y="344" textAnchor="end">34 M</text>
                <text x="70" y="414" textAnchor="end">27 M</text>
              </g>
              <text x="22" y="240" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#0a0a0a" fillOpacity="0.5"
              transform="rotate(-90, 22, 240)" textAnchor="middle" letterSpacing="1.2">
                TONELADAS · MILLONES
              </text>

              {/* X axis */}
              <line x1="80" y1="410" x2="860" y2="410" stroke="#0a0a0a" strokeOpacity="0.2" strokeWidth="1" />

              {/* X labels */}
              <g fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#0a0a0a" fillOpacity="0.7">
                {data.map((d, i) =>
                <text key={d.year} x={xs[i]} y="440" textAnchor="middle">{d.year}</text>
                )}
              </g>

              {/* Impact area */}
              <path d={areaPath} fill="url(#impact-gradient)" />

              {/* Trend line (sin ODAS) — solid black */}
              <polyline points={polyStr(trendPts)}
              fill="none" stroke="#0a0a0a" strokeWidth="1.6"
              strokeLinecap="round" strokeLinejoin="round" />

              {/* ODAS line — dashed terracotta */}
              <polyline points={polyStr(odasPts)}
              fill="none" stroke="#c0532a" strokeWidth="1.8"
              strokeDasharray="6,5"
              strokeLinecap="round" strokeLinejoin="round" />

              {/* Trend points */}
              {data.map((d, i) =>
              <circle key={`t-${d.year}`}
              cx={trendPts[i][0]} cy={trendPts[i][1]} r="4.5"
              fill="#0a0a0a" stroke="#faf8f3" strokeWidth="2"
              style={{ cursor: 'pointer' }}
              onMouseEnter={(e) => setHover({ year: d.year, x: trendPts[i][0], y: Math.min(trendPts[i][1], odasPts[i][1]), trend: d.trend, odas: d.odas })}
              onMouseLeave={() => setHover(null)} />
              )}

              {/* ODAS points (skip 2026, same as trend) */}
              {data.map((d, i) => i === 0 ? null :
              <circle key={`o-${d.year}`}
              cx={odasPts[i][0]} cy={odasPts[i][1]} r="4.5"
              fill="#c0532a" stroke="#faf8f3" strokeWidth="2"
              style={{ cursor: 'pointer' }}
              onMouseEnter={(e) => setHover({ year: d.year, x: odasPts[i][0], y: Math.min(trendPts[i][1], odasPts[i][1]), trend: d.trend, odas: d.odas })}
              onMouseLeave={() => setHover(null)} />
              )}

              {/* Gap label 2030 */}
              <line x1="855" y1={ys(57.7)} x2="855" y2={ys(34)} stroke="#c0532a" strokeOpacity="0.4" strokeWidth="1" strokeDasharray="3,3" />
              <g>
                <rect x="765" y={(ys(57.7) + ys(34)) / 2 - 12} width="80" height="24" rx="0" fill="#0a0a0a" />
                <text x="805" y={(ys(57.7) + ys(34)) / 2 + 4} textAnchor="middle"
                fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#faf8f3" letterSpacing="1">
                  −23,7 Mt
                </text>
              </g>

              {/* End labels */}
              <text x="855" y={ys(57.7) - 12} textAnchor="end"
              fontFamily="JetBrains Mono, monospace" fontSize="11" fontWeight="500" fill="#0a0a0a">
                57,7 Mt
              </text>
              <text x="855" y={ys(34) + 18} textAnchor="end"
              fontFamily="JetBrains Mono, monospace" fontSize="11" fontWeight="500" fill="#c0532a">
                34,0 Mt
              </text>
            </svg>

            {hover &&
            <div style={{
              position: 'absolute',
              left: `calc(${hover.x / 900 * 100}% )`,
              top: `calc(${hover.y / 480 * 100}% - 12px)`,
              transform: 'translate(-50%, -100%)',
              background: '#0a0a0a', color: '#faf8f3',
              padding: '12px 14px', borderRadius: 0,
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              lineHeight: 1.5, pointerEvents: 'none',
              whiteSpace: 'nowrap', letterSpacing: 0.6
            }}>
                <div style={{ opacity: 0.55, marginBottom: 6 }}>AÑO {hover.year}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 18 }}>
                  <span style={{ opacity: 0.6 }}>Sin ODAS</span><span>{hover.trend.toFixed(1)} Mt</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 18 }}>
                  <span style={{ opacity: 0.6 }}>Con ODAS</span><span style={{ color: '#c0532a' }}>{hover.odas.toFixed(1)} Mt</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 18 }}>
                  <span style={{ opacity: 0.6 }}>Reducción</span>
                  <span>−{((hover.trend - hover.odas) / hover.trend * 100).toFixed(1)}%</span>
                </div>
              </div>
            }
          </div>
        </div>
      </Reveal>

      {/* Data table */}
      <Reveal root={root} delay={0.3}>
        <div style={{
          maxWidth: 1120, margin: '0 auto 32px',
          padding: '20px 22px',
          background: '#faf8f3',
          border: '1px solid rgba(10,10,10,0.08)'
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            letterSpacing: 1.5, opacity: 0.5, textTransform: 'uppercase',
            marginBottom: 14
          }}>◇ Detalle anual de la proyección</div>
          <div style={{ overflowX: 'auto' }}>
            <table style={{
              width: '100%', borderCollapse: 'collapse',
              fontFamily: 'JetBrains Mono, monospace', fontSize: 13
            }}>
              <thead>
                <tr style={{ borderBottom: '1px solid rgba(10,10,10,0.2)' }}>
                  {['Año', 'Sin ODAS (Mt)', 'Con ODAS (Mt)', 'Diferencia (Mt)', 'Adopción', 'Reducción'].map((h, i) =>
                  <th key={i} style={{
                    textAlign: i === 0 ? 'left' : 'right',
                    padding: '14px 14px',
                    fontSize: 10, fontWeight: 500,
                    letterSpacing: 1.5, textTransform: 'uppercase',
                    opacity: 0.55
                  }}>{h}</th>
                  )}
                </tr>
              </thead>
              <tbody>
                {data.map((d, i) =>
                <tr key={d.year} style={{ borderBottom: '1px solid rgba(10,10,10,0.08)' }}>
                    <td style={{ padding: '12px 12px', fontWeight: 500 }}>{d.year}</td>
                    <td style={{ padding: '12px 12px', textAlign: 'right' }}>{d.trend.toFixed(1).replace('.', ',')}</td>
                    <td style={{ padding: '12px 12px', textAlign: 'right' }}>{d.odas.toFixed(1).replace('.', ',')}</td>
                    <td style={{ padding: '12px 12px', textAlign: 'right', color: d.gap < 0 ? '#c0532a' : '#0a0a0a' }}>
                      {d.gap === 0 ? '0,0' : `${d.gap.toFixed(1).replace('.', ',')}`}
                    </td>
                    <td style={{ padding: '12px 12px', textAlign: 'right', opacity: 0.65 }}>{d.adoption}</td>
                    <td style={{ padding: '12px 12px', textAlign: 'right' }}>
                      <span style={{
                      display: 'inline-block', padding: '4px 10px',
                      background: i === 0 ? 'rgba(10,10,10,0.08)' : i === data.length - 1 ? '#0a0a0a' : 'rgba(192,83,42,0.12)',
                      color: i === 0 ? '#0a0a0a' : i === data.length - 1 ? '#faf8f3' : '#c0532a',
                      fontSize: 11, letterSpacing: 0.6
                    }}>{d.reduction}</span>
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </Reveal>

      {/* Methodology note */}
      <Reveal root={root} delay={0.35}>
        <div style={{
          maxWidth: 1120, margin: '0 auto',
          padding: '18px 22px',
          borderLeft: '2px solid #0a0a0a',
          background: 'transparent'
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            letterSpacing: 1.5, opacity: 0.55, textTransform: 'uppercase',
            marginBottom: 8
          }}>◇ Metodología y supuestos</div>
          <p style={{
            fontSize: 12.5, lineHeight: 1.55, color: '#444', margin: 0,
            maxWidth: 880, textWrap: 'pretty'
          }}>
            ODAS opera desde 2026. La proyección se basa en datos europeos consolidados del informe FUSIONS 2016 y los objetivos de la estrategia EU Farm to Fork 2030. El escenario inercial asume un crecimiento anual del 0,8% (continuidad de la tendencia 2012–2020). El escenario con ODAS proyecta una reducción progresiva consistente con una adopción del 15% del mercado objetivo al 2030 y un factor de eficiencia operativa del 60% sobre el desperdicio identificado.
          </p>
          <div style={{
            marginTop: 12, display: 'flex', flexWrap: 'wrap', gap: 6
          }}>
            {['FUSIONS 2016', 'EU Farm to Fork 2030', 'Eurostat 2023', 'Ley 1/2025 (España)', 'FAO Food Loss Index'].map((s, i) =>
            <span key={i} style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              letterSpacing: 1.2, padding: '4px 10px',
              border: '1px solid rgba(10,10,10,0.15)',
              color: '#0a0a0a', textTransform: 'uppercase'
            }}>{s}</span>
            )}
          </div>
        </div>
      </Reveal>
      {/* Formación CTA */}
      <Reveal root={root} delay={0.4}>
        <div id="formacion" style={{
          maxWidth: 1280, margin: '40px auto 0',
          background: '#faf8f3',
          border: '1px solid rgba(10,10,10,0.12)',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr',
          alignItems: 'stretch',
          scrollMarginTop: 80,
          overflow: 'hidden',
        }}>
          {/* Image Section — abstract philosopher illustration */}
          <div style={{
            position: 'relative',
            minHeight: isMobile ? 220 : 320,
            background: '#fafaf6', overflow: 'hidden',
            borderRight: isMobile ? 'none' : '1px solid rgba(10,10,10,0.08)',
            borderBottom: isMobile ? '1px solid rgba(10,10,10,0.08)' : 'none',
          }}>
            <svg width="100%" height="100%" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice"
              xmlns="http://www.w3.org/2000/svg" style={{ display: 'block', position: 'absolute', inset: 0 }}>
              <defs>
                <radialGradient id="phil-bg" cx="55%" cy="45%" r="65%">
                  <stop offset="0%" stopColor="#fffdf6" />
                  <stop offset="100%" stopColor="#f1efe6" />
                </radialGradient>
                <pattern id="phil-grid" width="32" height="32" patternUnits="userSpaceOnUse">
                  <path d="M 32 0 L 0 0 0 32" fill="none" stroke="rgba(10,10,10,0.05)" strokeWidth="1"/>
                </pattern>
              </defs>
              <rect width="400" height="500" fill="url(#phil-bg)" />
              <rect width="400" height="500" fill="url(#phil-grid)" />

              {/* Constellation behind — thinking field */}
              <g stroke="#0a0a0a" strokeWidth="0.6" opacity="0.32" fill="none">
                <path d="M 30 130 C 90 100, 150 110, 200 90 S 320 110, 380 80" />
                <path d="M 40 200 C 100 220, 160 200, 220 230" strokeDasharray="2 4" />
                <path d="M 60 380 C 130 360, 200 400, 280 370 S 360 400, 380 380" strokeDasharray="1 5" />
              </g>
              {[[60,90],[120,70],[180,110],[260,80],[330,100],[370,140],[40,170],[100,210],[200,230],[300,200],[80,400],[160,370],[230,410],[310,380],[370,360]].map(([x,y],i) => (
                <circle key={i} cx={x} cy={y} r={i % 4 === 0 ? 2.4 : 1.4} fill="#0a0a0a" opacity={0.45 + (i%3)*0.15} />
              ))}

              {/* Philosopher — abstract head profile, left-facing */}
              {/* Halo / ring of thought */}
              <g transform="translate(210 250)">
                <circle r="120" fill="none" stroke="#c0532a" strokeWidth="1" opacity="0.5" />
                <circle r="120" fill="none" stroke="#c0532a" strokeWidth="0.6" opacity="0.25" strokeDasharray="3 6" transform="scale(1.18)" />
                <circle r="120" fill="none" stroke="#0a0a0a" strokeWidth="0.4" opacity="0.18" strokeDasharray="1 3" transform="scale(1.42)" />
              </g>

              {/* Profile silhouette — single continuous line, abstracted */}
              <g transform="translate(210 250)">
                {/* Shoulder + neck + head profile facing left */}
                <path d="M -90 110
                         L -90 60
                         C -88 30, -70 24, -50 22
                         C -30 14, -22 -10, -16 -34
                         C -10 -58, 0 -78, 18 -86
                         C 40 -94, 56 -78, 60 -58
                         C 64 -38, 58 -22, 46 -12
                         C 38 -4, 36 6, 40 16
                         C 44 26, 36 36, 22 36
                         C 16 36, 12 40, 12 50
                         C 14 70, 0 84, -16 86
                         C -32 88, -42 100, -42 112"
                  fill="none" stroke="#0a0a0a" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />

                {/* Eye — single dot */}
                <circle cx="34" cy="-40" r="2" fill="#0a0a0a" />
                {/* Brow — short line */}
                <line x1="20" y1="-58" x2="44" y2="-54" stroke="#0a0a0a" strokeWidth="1.4" strokeLinecap="round" />

                {/* Lines streaming from head — ideas dissolving like the hero network */}
                <g stroke="#0a0a0a" fill="none" strokeLinecap="round">
                  <path d="M 60 -60 C 90 -70, 110 -55, 130 -75" strokeWidth="1" opacity="0.7" />
                  <path d="M 56 -40 C 95 -35, 120 -50, 150 -38" strokeWidth="1" opacity="0.55" strokeDasharray="2 3" />
                  <path d="M 50 -20 C 90 -15, 130 -22, 160 -10" strokeWidth="0.8" opacity="0.45" />
                  <path d="M 46 0 C 90 5, 130 -2, 165 12" strokeWidth="0.8" opacity="0.4" strokeDasharray="1 4" />
                </g>
                {/* Dots at idea ends */}
                {[[130,-75],[150,-38],[160,-10],[165,12],[112,-86],[140,-94]].map(([x,y],i) => (
                  <circle key={i} cx={x} cy={y} r={1.8} fill="#0a0a0a" opacity={0.7} />
                ))}

                {/* Small terracotta accents — moments of insight */}
                <circle cx="22" cy="-72" r="3.2" fill="#c0532a" />
                <circle cx="92" cy="-50" r="2.2" fill="#c0532a" opacity="0.7" />
              </g>

              {/* Mono labels */}
              <g fontFamily="JetBrains Mono, monospace" fontSize="8.5" fill="#0a0a0a" opacity="0.45" letterSpacing="2">
                <text x="20" y="28">◇ PENSAR · APRENDER · APLICAR</text>
                <text x="20" y="478">PROGRAMA ODAS · NIVEL I–III · 2026</text>
              </g>

              {/* Crosshair top-right */}
              <g stroke="#0a0a0a" strokeWidth="0.8" opacity="0.35">
                <line x1="370" y1="20" x2="380" y2="20" />
                <line x1="375" y1="15" x2="375" y2="25" />
              </g>
            </svg>
          </div>

          {/* Content Section */}
          <div style={{
            padding: '40px 44px',
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
          }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              letterSpacing: 1.5, textTransform: 'uppercase',
              color: '#c0532a', fontWeight: 500, marginBottom: 12,
            }}>
              ◇ Formación · Programa ODAS
            </div>
            <h2 style={{
              fontSize: 'clamp(26px, 2.6vw, 36px)', lineHeight: 1.05,
              letterSpacing: '-0.035em', fontWeight: 400, margin: 0,
              color: '#0a0a0a', textWrap: 'balance',
            }}>
              Formación especializada en <em style={{ fontFamily: 'Instrument Serif, serif' }}>desperdicio alimentario</em> y cumplimiento normativo.
            </h2>
            <p style={{
              marginTop: 18, fontSize: 14, lineHeight: 1.55,
              color: '#555', maxWidth: 560, textWrap: 'pretty',
            }}>
              Capacita a tu equipo en los estándares de la Ley 1/2025, metodologías de medición y operación práctica de la plataforma ODAS.
            </p>

            <div style={{ marginTop: 28 }}>
              <a
                href="https://formacion.odas-eu.com/"
                target="_blank" rel="noopener noreferrer"
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 12,
                  padding: '14px 22px',
                  background: '#0a0a0a', color: '#faf8f3',
                  textDecoration: 'none',
                  fontFamily: 'Instrument Sans, sans-serif',
                  fontSize: 14, letterSpacing: '-0.005em', fontWeight: 500,
                  transition: 'gap 0.3s ease, background 0.3s ease',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.gap = '18px'; e.currentTarget.style.background = '#c0532a'; }}
                onMouseLeave={(e) => { e.currentTarget.style.gap = '12px'; e.currentTarget.style.background = '#0a0a0a'; }}
              >
                Acceder a Formación
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="5" y1="12" x2="19" y2="12" />
                  <polyline points="12 5 19 12 12 19" />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </Reveal>
    </section>);

}

window.ProjectionSection = ProjectionSection;