// SolutionSection — "Nuestra Solución"
// Rebuilt to match the editorial system used by ProblemSection and the rest of V1:
//   • continuous cream background, hairline top border
//   • eyebrow in JetBrains Mono, big display headline with Instrument Serif italic accent
//   • 4 cards in the same soft-halo frame language (subtle multi-color border gradient,
//     white inner card, tiny caption, scroll-revealed stagger)
//   • single muted accent color per card — no saturated violet/amber blocks

const { useReveal: _sUseReveal, Tilt: _sTilt } = window;

function SolutionSection({ root }) {
  const isMobile = window.useIsMobile();
  const cards = [
  {
    n: '01',
    eyebrow: 'Predicción',
    title: 'Predicción IA',
    body: 'Prevé los excedentes antes de que se conviertan en residuos con modelos de series temporales.',
    pill: 'Tiempo real',
    visual: <SolIconTrend />
  },
  {
    n: '02',
    eyebrow: 'Inventario',
    title: 'Pedidos óptimos',
    body: 'Cantidades recomendadas en todo momento, basadas en datos reales de demanda.',
    pill: 'Automático',
    visual: <SolIconHouse />
  },
  {
    n: '03',
    eyebrow: 'Urgencia',
    title: 'Alertas de caducidad',
    body: 'Identifica productos propensos a expirar con antelación y activa el protocolo correcto.',
    pill: 'Crítico',
    visual: <SolIconClock />
  },
  {
    n: '04',
    eyebrow: 'Red',
    title: 'Redistribuye y registra',
    body: 'Conexión automatizada con bancos de alimentos y ONGs, con registro legal incluido.',
    pill: 'Canal integrado',
    visual: <SolIconNetwork />
  }];


  return (
    <section id="solucion" style={{
      position: 'relative',
      padding: isMobile ? '36px 20px 36px' : '48px 32px 48px',
      borderTop: '1px solid rgba(10,10,10,0.08)',
      background: '#faf8f3',
      scrollMarginTop: 80
    }}>
      {/* Intro — same structure as ProblemSection */}
      <SolutionIntro root={root} isMobile={isMobile} />

      {/* Grid of framed cards */}
      <div style={{
        maxWidth: 1120, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
        gap: isMobile ? 14 : 16
      }}>
        {cards.map((c, i) =>
        <SolutionCard key={i} root={root} card={c} index={i} />
        )}
      </div>
    </section>);

}

function SolutionIntro({ root, isMobile }) {
  const [ref, shown] = _sUseReveal(root, { threshold: 0.2 });
  return (
    <div ref={ref} style={{ maxWidth: 1080, margin: isMobile ? '0 auto 24px' : '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)'
      }}>◇ Nuestra Solución</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"
      }}>
        ODAS <em style={{ fontFamily: 'Instrument Serif, serif' }}>equilibra</em> la oferta y la demanda, transformando la gestión del excedente.
      </h2>
    </div>);

}

function SolutionCard({ root, card, index }) {
  const [ref, shown] = _sUseReveal(root, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
  const delay = 0.08 + index * 0.09;

  return (
    <div ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'translate3d(0,0,0)' : 'translate3d(0, 30px, 0)',
      transition: `opacity 1s cubic-bezier(.2,.7,.1,1) ${delay}s, transform 1.1s cubic-bezier(.2,.7,.1,1) ${delay}s`
    }}>
      <_sTilt max={3} style={{ width: '100%' }}>
        {/* Halo frame — same language as ProblemSection VisualCol */}
        <div style={{
          position: 'relative', padding: 3, borderRadius: 24,
          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 80px -40px rgba(10,10,10,0.15)' :
          '0 20px 50px -30px rgba(10,10,10,0.08)',
          transition: `background-position 1.8s cubic-bezier(.2,.7,.1,1) ${delay + 0.1}s, box-shadow 1.2s ease ${delay + 0.1}s`
        }}>
          <div style={{
            position: 'relative', borderRadius: 22, background: '#fffdf8',
            overflow: 'hidden',
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,1)',
            padding: '30px 26px 26px',
            minHeight: 340,
            display: 'flex', flexDirection: 'column'
          }}>
            {/* Header row: number + tag */}
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              letterSpacing: 1.5, opacity: 0.4, marginBottom: 22,
              display: 'flex', justifyContent: 'space-between'
            }}>
              <span>{card.n}</span>
              <span>◇ {card.eyebrow}</span>
            </div>

            {/* Monochrome line icon */}
            <div style={{ marginBottom: 24, color: '#0a0a0a' }}>
              {card.visual}
            </div>

            <h3 style={{
              fontSize: 22, fontWeight: 400, letterSpacing: '-0.02em',
              margin: '0 0 12px', lineHeight: 1.15
            }}>{card.title}</h3>

            <p style={{
              fontSize: 14, lineHeight: 1.55, color: '#555',
              margin: '0 0 22px', textWrap: 'pretty', flex: 1
            }}>{card.body}</p>

            {/* Pill — editorial style, muted */}
            <div style={{
              display: 'inline-flex', alignSelf: 'flex-start',
              alignItems: 'center', gap: 7,
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 10, letterSpacing: 1.5,
              textTransform: 'uppercase',
              border: '1px solid rgba(10,10,10,0.18)',
              borderRadius: 999, padding: '5px 10px 5px 9px',
              color: '#0a0a0a'
            }}>
              <span style={{
                width: 5, height: 5, borderRadius: '50%', background: '#e8a07b'
              }} />
              {card.pill}
            </div>
          </div>
        </div>
      </_sTilt>
    </div>);

}

// ── Simple line icons (black, thin) ───────────────────────────
function SolIconTrend() {
  return (
    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="3 16 9 10 13 14 21 6" />
      <polyline points="15 6 21 6 21 12" />
    </svg>);

}
function SolIconHouse() {
  return (
    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 11 L12 4 L20 11 V20 H4 Z" />
      <path d="M10 20 V14 H14 V20" />
    </svg>);

}
function SolIconClock() {
  return (
    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <polyline points="12 7 12 12 15.5 14" />
    </svg>);

}
function SolIconNetwork() {
  return (
    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="5" r="2.2" />
      <circle cx="5" cy="18" r="2.2" />
      <circle cx="19" cy="18" r="2.2" />
      <line x1="12" y1="7.2" x2="5.8" y2="16.2" />
      <line x1="12" y1="7.2" x2="18.2" y2="16.2" />
      <line x1="7.2" y1="18" x2="16.8" y2="18" />
    </svg>);

}

Object.assign(window, { SolutionSection });