// OdasFlowDiagram — editorial reinterpretation of the ChatGPT flow chart
// Inputs (top) → ODAS (center) → Outcomes (bottom)
// Stays in the cream/black/serif palette of the site.

function FlowNode({ label, sub, tone = 'neutral', emphasis = false, large = false }) {
  const palettes = {
    neutral: { bg: 'rgba(10,10,10,0.04)', border: 'rgba(10,10,10,0.18)', label: '#0a0a0a', sub: 'rgba(10,10,10,0.6)' },
    legal:   { bg: 'rgba(60, 90, 160, 0.07)', border: 'rgba(60, 90, 160, 0.32)', label: '#2e4a8a', sub: 'rgba(46, 74, 138, 0.75)' },
    saving:  { bg: 'rgba(70, 130, 100, 0.07)', border: 'rgba(70, 130, 100, 0.32)', label: '#2f6a4d', sub: 'rgba(47, 106, 77, 0.75)' },
    impact:  { bg: 'rgba(140, 150, 70, 0.08)', border: 'rgba(140, 150, 70, 0.36)', label: '#5e6a2a', sub: 'rgba(94, 106, 42, 0.75)' },
    core:    { bg: '#0a0a0a', border: '#0a0a0a', label: '#faf8f3', sub: 'rgba(250,248,243,0.7)' },
  };
  const p = palettes[tone] || palettes.neutral;

  return (
    <div style={{
      background: p.bg,
      border: `1px solid ${p.border}`,
      borderRadius: 14,
      padding: large ? '28px 32px' : '18px 22px',
      textAlign: 'center',
      minWidth: large ? 360 : 200,
      maxWidth: large ? 560 : 260,
      boxShadow: emphasis ? '0 12px 30px rgba(10,10,10,0.08)' : 'none',
      transition: 'transform 0.3s ease, box-shadow 0.3s ease',
    }}>
      <div style={{
        fontFamily: 'Instrument Serif, serif',
        fontSize: large ? 30 : 18,
        fontWeight: 400,
        letterSpacing: large ? '-0.02em' : '-0.01em',
        lineHeight: 1.05,
        color: p.label,
        marginBottom: large ? 10 : 6,
      }}>
        {label}
      </div>
      <div style={{
        fontFamily: 'Instrument Sans, sans-serif',
        fontSize: large ? 14 : 12,
        lineHeight: 1.35,
        color: p.sub,
        textWrap: 'pretty',
      }}>
        {sub}
      </div>
      {tone === 'core' && (
        <div style={{
          marginTop: 12,
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10,
          letterSpacing: 2,
          textTransform: 'uppercase',
          color: 'rgba(250,248,243,0.55)',
        }}>
          ◇ Tecnología propietaria · Negentropy Labs
        </div>
      )}
    </div>
  );
}

function FlowDiagram() {
  return (
    <div style={{
      width: '100%',
      maxWidth: 1100,
      margin: '0 auto',
      padding: '20px 24px 0',
      fontFamily: 'Instrument Sans, sans-serif',
      color: '#0a0a0a',
      position: 'relative',
    }}>
      {/* Top eyebrow */}
      <div style={{
        textAlign: 'center',
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 11,
        letterSpacing: 2,
        textTransform: 'uppercase',
        color: 'rgba(10,10,10,0.55)',
        marginBottom: 18,
      }}>
        ◇ Lo que ya tienes en tu negocio
      </div>

      {/* Inputs row */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 24,
        alignItems: 'stretch',
      }}>
        <FlowNode tone="neutral" label="Ventas diarias" sub="TPV, caja, ERP" />
        <FlowNode tone="neutral" label="Inventario y mermas" sub="Stock y caducidades" />
        <FlowNode tone="neutral" label="Operativa diaria" sub="Personal, turnos, eventos" />
      </div>

      {/* Connectors top */}
      <div style={{ position: 'relative', height: 80, margin: '4px 0' }}>
        <svg viewBox="0 0 1000 80" preserveAspectRatio="none" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          color: 'rgba(10,10,10,0.45)',
        }}>
          <defs>
            <marker id="arrowDown" viewBox="0 0 10 10" refX="5" refY="9" markerWidth="6" markerHeight="6" orient="auto">
              <path d="M0,0 L10,0 L5,10 z" fill="currentColor" />
            </marker>
          </defs>
          <path d="M 167 0 L 167 30 Q 167 45 250 55 L 470 70" fill="none" stroke="currentColor" strokeWidth="1.2" markerEnd="url(#arrowDown)" />
          <path d="M 500 0 L 500 70" fill="none" stroke="currentColor" strokeWidth="1.2" markerEnd="url(#arrowDown)" />
          <path d="M 833 0 L 833 30 Q 833 45 750 55 L 530 70" fill="none" stroke="currentColor" strokeWidth="1.2" markerEnd="url(#arrowDown)" />
        </svg>
      </div>

      {/* Core node */}
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <FlowNode
          tone="core"
          large
          emphasis
          label={<>ODAS <span style={{ fontStyle: 'italic', opacity: 0.55, fontSize: '0.6em' }}>*</span></>}
          sub="Plataforma inteligente de prevención del desperdicio alimentario"
        />
      </div>

      {/* Mid label */}
      <div style={{
        textAlign: 'center',
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 11,
        letterSpacing: 2,
        textTransform: 'uppercase',
        color: 'rgba(10,10,10,0.55)',
        marginTop: 22,
        marginBottom: 6,
      }}>
        ◇ Lo que tu negocio obtiene
      </div>

      {/* Connectors bottom */}
      <div style={{ position: 'relative', height: 60, margin: '0' }}>
        <svg viewBox="0 0 1000 60" preserveAspectRatio="none" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          color: 'rgba(10,10,10,0.45)',
        }}>
          <defs>
            <marker id="arrowDown2" viewBox="0 0 10 10" refX="5" refY="9" markerWidth="6" markerHeight="6" orient="auto">
              <path d="M0,0 L10,0 L5,10 z" fill="currentColor" />
            </marker>
          </defs>
          <path d="M 470 0 L 250 50" fill="none" stroke="currentColor" strokeWidth="1.2" markerEnd="url(#arrowDown2)" />
          <path d="M 500 0 L 500 50" fill="none" stroke="currentColor" strokeWidth="1.2" markerEnd="url(#arrowDown2)" />
          <path d="M 530 0 L 750 50" fill="none" stroke="currentColor" strokeWidth="1.2" markerEnd="url(#arrowDown2)" />
        </svg>
      </div>

      {/* Outcomes row */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 24,
        alignItems: 'stretch',
        marginBottom: 8,
      }}>
        <FlowNode tone="legal"  label="Cumplimiento legal"  sub="Ley 1/2025 al día, sin sanciones" />
        <FlowNode tone="saving" label="Ahorro económico"     sub="Menos pérdidas, más margen" />
        <FlowNode tone="impact" label="Impacto sostenible"   sub="Menos desperdicio, marca responsable" />
      </div>
    </div>
  );
}

Object.assign(window, { FlowDiagram, FlowNode });