// ============================================================
// PRODOTTO — Lestage
// File Flow Orchestration · gateway multi-protocollo
// Accent: brandAmber (#F4D03F)
// ============================================================
const { useState: useStateLS, useEffect: useEffectLS, useRef: useRefLS } = React;
const motionLS = new Proxy({}, { get: (_, p) => window.FramerMotion.motion[p] });
const useInViewLS = (...a) => window.FramerMotion.useInView(...a);

function LestageHero() {
  const ref = useRefLS(null);
  const isInView = useInViewLS(ref, { once: true });
  return (
    <section ref={ref} style={{
      position: 'relative', overflow: 'hidden',
      padding: '160px 5% 90px', background: colors.bgPrimary,
    }}>
      <FlowCurrent accent={colors.brandAmber} />
      <Cartouche accent={colors.brandAmber} text="LESTAGE · 流" top={130} right={36} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          radial-gradient(ellipse 60% 40% at 25% 30%, rgba(244,208,63,0.1), transparent 70%),
          radial-gradient(ellipse 40% 50% at 75% 70%, rgba(201,168,76,0.05), transparent 70%)
        `,
        pointerEvents: 'none',
      }} />

      <div style={{
        maxWidth: 1080, margin: '0 auto', position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'center',
      }} className="ls-hero-grid">
        <div>
          <motionLS.div
            initial={{ opacity: 0, y: -10 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6 }}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '6px 14px', marginBottom: 24,
              border: `1px solid rgba(244,208,63,0.3)`,
              borderRadius: 999, background: 'rgba(15,15,35,0.6)',
            }}
          >
            <Icon name="file-stack" size={12} color={colors.brandAmber} />
            <span style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: '0.7rem', color: colors.brandAmber,
              letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600,
            }}>File Flow Orchestration</span>
          </motionLS.div>

          <motionLS.h1
            initial={{ opacity: 0, y: 24 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.15 }}
            style={{
              fontFamily: "'Cinzel', serif",
              fontSize: 'clamp(2.8rem, 6vw, 5rem)',
              fontWeight: 400, letterSpacing: 4, lineHeight: 1,
              color: colors.brandAmber,
              marginBottom: 18,
              textShadow: `0 0 30px rgba(244,208,63,0.25)`,
            }}
          >Lestage</motionLS.h1>

          <motionLS.p
            initial={{ opacity: 0, y: 16 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.3 }}
            style={{
              fontFamily: "'Cinzel', serif",
              fontSize: 'clamp(1.2rem, 2vw, 1.55rem)',
              color: colors.textGold, fontStyle: 'italic',
              lineHeight: 1.4, marginBottom: 26, textWrap: 'balance',
            }}
          >Stivaggio digitale di flussi multi-protocollo.</motionLS.p>

          <motionLS.p
            initial={{ opacity: 0, y: 16 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.45 }}
            style={{
              fontSize: '1.05rem', color: '#c8c5bd',
              lineHeight: 1.75, marginBottom: 36, fontWeight: 300,
              maxWidth: 580, textWrap: 'pretty',
            }}
          >
            Gateway che riceve file via FTP/SFTP/API, li trasforma (CSV, fixed-width → JSON),
            li smista verso le destinazioni con retry, logging strutturato e gestione errori.
          </motionLS.p>

          <motionLS.div
            initial={{ opacity: 0, y: 16 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.6 }}
            style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}
          >
            <a href="../contatti.html" style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.95rem', fontWeight: 600,
              padding: '14px 28px',
              background: `linear-gradient(135deg, ${colors.brandAmber}, ${colors.brandGoldMuted})`,
              color: colors.bgPrimary, borderRadius: 6,
              textDecoration: 'none', letterSpacing: 0.5,
              boxShadow: `0 0 30px rgba(244,208,63,0.25)`,
              transition: 'all 0.3s',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 6px 40px rgba(244,208,63,0.4)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 0 30px rgba(244,208,63,0.25)'; }}
            >Discuti il tuo flusso <Icon name="arrow-right" size={16} color={colors.bgPrimary} /></a>
            <a href="#flow" style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.95rem', fontWeight: 500,
              padding: '14px 28px',
              background: 'transparent', color: colors.textPrimary,
              border: `1px solid rgba(244,208,63,0.35)`,
              borderRadius: 6, textDecoration: 'none',
              letterSpacing: 0.5, transition: 'all 0.3s',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = colors.brandAmber; e.currentTarget.style.color = colors.brandAmber; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(244,208,63,0.35)'; e.currentTarget.style.color = colors.textPrimary; }}
            >Come funziona</a>
          </motionLS.div>
        </div>

        <motionLS.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={isInView ? { opacity: 1, scale: 1 } : {}}
          transition={{ duration: 1, delay: 0.4 }}
          style={{ display: 'flex', justifyContent: 'center' }}
          className="ls-hero-logo"
        >
          <div style={{ position: 'relative' }}>
            <LestageLogo size={260} />
            <div style={{
              position: 'absolute', inset: -40,
              background: `radial-gradient(circle, rgba(244,208,63,0.12), transparent 70%)`,
              zIndex: -1, pointerEvents: 'none',
            }} />
          </div>
        </motionLS.div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .ls-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .ls-hero-logo { order: -1; }
        }
      `}</style>
    </section>
  );
}

function LestageFlow() {
  const stages = [
    { id: 'IN', label: 'Ingestion', sub: 'FTP · SFTP · HTTP API · folder watcher', icon: 'inbox' },
    { id: 'TF', label: 'Transformation', sub: 'CSV · fixed-width · XML → JSON', icon: 'shuffle' },
    { id: 'RT', label: 'Routing', sub: 'rule-based: destinazione, priorità, retry', icon: 'split' },
    { id: 'OUT', label: 'Delivery', sub: 'API · DB · sftp · audit log', icon: 'send' },
  ];
  return (
    <AnimatedSection id="flow" style={{
      padding: '110px 5%', background: colors.bgSecondary, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative' }}>
        <SectionHeading
          eyebrow="// Il flusso"
          title="Quattro stadi, mille protocolli"
          sub="Lestage normalizza l'eterogeneità dei flussi enterprise: ogni file entra, viene trasformato, smistato e consegnato — con tracciatura completa."
        />

        <div style={{
          marginTop: 60,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16, position: 'relative',
        }} className="ls-flow-grid">
          {stages.map((s, i) => (
            <React.Fragment key={s.id}>
              <motionLS.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.12, duration: 0.5 }}
                style={{
                  padding: 22, textAlign: 'center',
                  background: 'rgba(255,255,255,0.02)',
                  border: `1px solid rgba(244,208,63,0.25)`,
                  borderRadius: 10, position: 'relative',
                }}
              >
                <div style={{
                  width: 50, height: 50, margin: '0 auto 12px',
                  borderRadius: '50%',
                  background: `radial-gradient(circle, ${colors.brandAmber}30, transparent 70%)`,
                  border: `1px solid ${colors.brandAmber}50`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={s.icon} size={22} color={colors.brandAmber} />
                </div>
                <div style={{
                  fontFamily: "'Courier Prime', monospace",
                  fontSize: '0.6rem', color: colors.textDim,
                  letterSpacing: 2, marginBottom: 4,
                }}>STAGE {s.id}</div>
                <h4 style={{
                  fontFamily: "'Cinzel', serif",
                  fontSize: '1rem', fontWeight: 500,
                  color: colors.textPrimary, marginBottom: 8,
                }}>{s.label}</h4>
                <p style={{
                  fontSize: '0.75rem', color: colors.textMuted,
                  lineHeight: 1.55, fontWeight: 300,
                  fontFamily: "'Courier Prime', monospace",
                }}>{s.sub}</p>
              </motionLS.div>
            </React.Fragment>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .ls-flow-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 480px) {
          .ls-flow-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </AnimatedSection>
  );
}

function LestageFeatures() {
  const features = [
    { icon: 'repeat', title: 'Retry & resilience', desc: 'Backoff esponenziale, dead-letter queue, replay manuale.' },
    { icon: 'eye', title: 'Logging strutturato', desc: 'Ogni file tracciato dalla ricezione alla consegna. Auditabile.' },
    { icon: 'siren', title: 'Alerting', desc: 'Notifiche su errori bloccanti, file in ritardo, destinazioni offline.' },
    { icon: 'sliders', title: 'Rule-based routing', desc: 'Routing dichiarativo per tipo, contenuto, priorità, partner.' },
    { icon: 'lock', title: 'Sicurezza', desc: 'Encryption at rest, transport TLS, credenziali in vault.' },
    { icon: 'chart-line', title: 'Metriche', desc: 'Throughput, latenza per partner, tasso di errore, SLA.' },
  ];
  return (
    <AnimatedSection style={{ padding: '110px 5%', background: colors.bgPrimary }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionHeading eyebrow="// Caratteristiche" title="Operations-grade dal giorno zero" />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 16, marginTop: 56,
        }}>
          {features.map((f, i) => (
            <motionLS.div key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.08, duration: 0.45 }}
              style={{
                padding: 22,
                background: 'rgba(255,255,255,0.02)',
                border: `1px solid rgba(244,208,63,0.18)`,
                borderRadius: 10,
                display: 'flex', alignItems: 'flex-start', gap: 14,
              }}
            >
              <div style={{
                width: 38, height: 38, flexShrink: 0,
                borderRadius: 6,
                background: `rgba(244,208,63,0.08)`,
                border: `1px solid rgba(244,208,63,0.25)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={f.icon} size={18} color={colors.brandAmber} />
              </div>
              <div>
                <h4 style={{
                  fontSize: '0.95rem', color: colors.textPrimary,
                  fontWeight: 600, marginBottom: 4,
                  fontFamily: "'DM Sans', sans-serif",
                }}>{f.title}</h4>
                <p style={{
                  fontSize: '0.82rem', color: colors.textMuted,
                  lineHeight: 1.6, fontWeight: 300,
                }}>{f.desc}</p>
              </div>
            </motionLS.div>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

function LestageUseCases() {
  const cases = [
    {
      title: 'EDI / B2B con partner eterogenei',
      problem: 'Ogni partner manda i propri file in formato e protocollo diverso. Mantenere script ad-hoc è ingestibile.',
      solution: 'Lestage normalizza tutto in JSON via regole dichiarative. Aggiungere un partner = configurare, non scrivere codice.',
      kpi: 'Onboarding nuovo partner in giorni, non settimane',
    },
    {
      title: 'Bridge tra IBM i e cloud / API moderne',
      problem: 'L\'IBM i continua a esportare dump fixed-width che il cloud non capisce.',
      solution: 'Lestage intercetta i file, li converte in JSON e li push verso le API REST cloud, con retry e audit.',
      kpi: 'Zero modifiche al lato IBM i',
    },
    {
      title: 'Consolidamento di pipeline batch sparse',
      problem: 'Decine di cron, script bash, FTP server. Quando qualcosa si rompe, nessuno sa dove guardare.',
      solution: 'Un unico orchestratore con visibilità centralizzata su tutti i flussi e sui loro stati.',
      kpi: 'Single pane of glass per i flussi dati',
    },
  ];
  return (
    <AnimatedSection style={{ padding: '110px 5%', background: colors.bgSecondary }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionHeading eyebrow="// Casi d'uso" title="Quando Lestage fa la differenza" />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 20, marginTop: 56,
        }}>
          {cases.map((c, i) => (
            <motionLS.div key={i}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1, duration: 0.5 }}
              style={{
                padding: 28,
                background: 'rgba(255,255,255,0.02)',
                border: `1px solid rgba(244,208,63,0.18)`,
                borderRadius: 12, display: 'flex', flexDirection: 'column',
              }}
            >
              <div style={{
                fontFamily: "'Courier Prime', monospace",
                fontSize: '0.65rem', color: colors.brandAmber,
                letterSpacing: 2, marginBottom: 12, fontWeight: 600,
              }}>CASO {String(i + 1).padStart(2, '0')}</div>
              <h3 style={{
                fontFamily: "'Cinzel', serif",
                fontSize: '1.1rem', color: colors.textPrimary,
                fontWeight: 500, marginBottom: 18, lineHeight: 1.35,
              }}>{c.title}</h3>
              <div style={{ fontSize: '0.7rem', color: colors.textDim, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 6, fontWeight: 600 }}>Problema</div>
              <p style={{ fontSize: '0.85rem', color: colors.textMuted, lineHeight: 1.65, fontWeight: 300, marginBottom: 14 }}>{c.problem}</p>
              <div style={{ fontSize: '0.7rem', color: colors.brandAmber, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 6, fontWeight: 600 }}>Soluzione</div>
              <p style={{ fontSize: '0.85rem', color: colors.textMuted, lineHeight: 1.65, fontWeight: 300, marginBottom: 18, flex: 1 }}>{c.solution}</p>
              <div style={{
                padding: '10px 14px',
                background: 'rgba(244,208,63,0.06)',
                border: `1px solid rgba(244,208,63,0.25)`,
                borderRadius: 6, fontSize: '0.78rem',
                color: colors.brandAmber, fontWeight: 500,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <Icon name="check" size={14} color={colors.brandAmber} />
                {c.kpi}
              </div>
            </motionLS.div>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

function LestageCrossLinks() {
  const others = [
    { name: 'AiKo Engine', role: 'AI Orchestration', href: 'aiko.html', Logo: AiKoLogo, color: colors.brandGold },
    { name: 'Kodari', role: 'Backend / API Gateway', href: 'kodari.html', Logo: KodariLogo, color: colors.brandGreen },
    { name: 'Lumiere', role: 'Frontend Enterprise', href: 'lumiere.html', Logo: LumiereLogo, color: colors.brandGold },
  ];
  return (
    <AnimatedSection style={{ padding: '90px 5%', background: colors.bgPrimary }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{
            fontFamily: "'Courier Prime', monospace",
            fontSize: '0.72rem', color: colors.brandAmber,
            letterSpacing: 3, textTransform: 'uppercase',
            marginBottom: 16, fontWeight: 600,
          }}>// Ecosistema</div>
          <h2 style={{
            fontFamily: "'Cinzel', serif",
            fontSize: 'clamp(1.6rem, 2.6vw, 2.1rem)',
            color: colors.textPrimary, fontWeight: 500, marginBottom: 14,
          }}>Lestage muove i dati</h2>
          <p style={{ color: colors.textMuted, lineHeight: 1.7, fontWeight: 300, maxWidth: 640, margin: '0 auto' }}>
            Mentre AiKo, Kodari e Lumiere costruiscono e gestiscono il sistema, Lestage si occupa di farlo dialogare con il mondo esterno.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
          {others.map(o => (
            <a key={o.name} href={o.href} style={{
              padding: 20,
              background: 'rgba(255,255,255,0.02)',
              border: `1px solid rgba(255,255,255,0.06)`,
              borderRadius: 10,
              display: 'flex', alignItems: 'center', gap: 16,
              textDecoration: 'none', transition: 'all 0.3s',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = o.color; e.currentTarget.style.background = `${o.color}08`; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'; e.currentTarget.style.background = 'rgba(255,255,255,0.02)'; }}
            >
              <o.Logo size={48} />
              <div style={{ flex: 1 }}>
                <div style={{ color: o.color, fontWeight: 600, fontSize: '1rem', marginBottom: 2 }}>{o.name}</div>
                <div style={{ color: colors.textDim, fontSize: '0.78rem', fontFamily: "'Courier Prime', monospace" }}>{o.role}</div>
              </div>
              <Icon name="arrow-right" size={16} color={o.color} />
            </a>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

function LestageCta() {
  return (
    <AnimatedSection style={{
      padding: '110px 5%', background: colors.bgSecondary, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 50% 40% at 50% 50%, rgba(244,208,63,0.06), transparent 70%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <LestageLogo size={80} />
        <h2 style={{
          fontFamily: "'Cinzel', serif",
          fontSize: 'clamp(1.9rem, 3.6vw, 2.7rem)',
          color: colors.textPrimary, fontWeight: 500,
          lineHeight: 1.3, margin: '28px 0 20px', textWrap: 'balance',
        }}>
          Mostraci un flusso<br />
          <span style={{ color: colors.brandAmber, fontStyle: 'italic' }}>e ti diciamo come orchestrarlo</span>
        </h2>
        <p style={{
          fontSize: '1rem', color: colors.textMuted,
          lineHeight: 1.7, fontWeight: 300, marginBottom: 32,
          maxWidth: 560, margin: '0 auto 32px',
        }}>
          Raccontaci un caso reale: protocollo, formato, partner, volumi. Ti rispondiamo con una proposta di pipeline pronta da configurare.
        </p>
        <a href="../contatti.html" style={{
          fontFamily: "'DM Sans', sans-serif",
          fontSize: '0.95rem', fontWeight: 600,
          padding: '15px 32px',
          background: `linear-gradient(135deg, ${colors.brandAmber}, ${colors.brandGoldMuted})`,
          color: colors.bgPrimary, borderRadius: 6, textDecoration: 'none',
          letterSpacing: 0.5,
          boxShadow: `0 0 30px rgba(244,208,63,0.3)`,
          transition: 'all 0.3s',
          display: 'inline-flex', alignItems: 'center', gap: 10,
        }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 6px 40px rgba(244,208,63,0.4)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 0 30px rgba(244,208,63,0.3)'; }}
        >Discuti il tuo flusso <Icon name="arrow-right" size={16} color={colors.bgPrimary} /></a>
      </div>
    </AnimatedSection>
  );
}

function LestageApp() {
  return (
    <React.Fragment>
      <SiteNav depth={1} current="prodotti" />
      <main>
        <LestageHero />
        <LestageFlow />
        <LestageFeatures />
        <LestageUseCases />
        <LestageCrossLinks />
        <LestageCta />
      </main>
      <SiteFooter depth={1} />
    </React.Fragment>
  );
}

function mountLestage() {
  const ready =
    typeof colors !== 'undefined' &&
    typeof CompassLogo !== 'undefined' &&
    typeof SiteNav !== 'undefined' &&
    typeof SiteFooter !== 'undefined' &&
    window.FramerMotion && window.lucide;
  if (!ready) return setTimeout(mountLestage, 50);
  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(<LestageApp />);
  if (window.lucide) {
    const observer = new MutationObserver(() => window.lucide.createIcons());
    observer.observe(document.body, { childList: true, subtree: true });
    window.lucide.createIcons();
  }
}
mountLestage();