// ============================================================
// PRODOTTO — Lumiere
// Consulenza strategica + Frontend enterprise (React Module Federation)
// Accent: brandGold (#FFD700)
// ============================================================
const { useState: useStateLM, useEffect: useEffectLM, useRef: useRefLM } = React;
const motionLM = new Proxy({}, { get: (_, p) => window.FramerMotion.motion[p] });
const useInViewLM = (...a) => window.FramerMotion.useInView(...a);

function LumiereLiveStage() {
  // Hero background — stile "Maison Lumière": cartoline MUI (Card / Chip /
  // Stepper / List) in equilibrio asimmetrico (ma giapponese), pattern asanoha,
  // filigrana art-nouveau, pennellata sumi-e, hanko 光. Niente aurora rumorosa.
  return (
    <div className="ls-bg" aria-hidden="true">
      {/* warm wash + soft champagne pools */}
      <div className="lm-wash" />
      <div className="lm-pool lm-pool-1" />
      <div className="lm-pool lm-pool-2" />

      {/* Asanoha (hemp-leaf) pattern band — top right, faint gold */}
      <svg className="lm-asanoha" viewBox="0 0 200 200" preserveAspectRatio="none">
        <defs>
          <pattern id="lm-asa" x="0" y="0" width="40" height="46" patternUnits="userSpaceOnUse">
            <g fill="none" stroke="rgba(201,168,76,0.55)" strokeWidth="0.6">
              <polygon points="20,2 38,12 38,34 20,44 2,34 2,12" />
              <line x1="20" y1="2"  x2="20" y2="44" />
              <line x1="2"  y1="12" x2="38" y2="34" />
              <line x1="38" y1="12" x2="2"  y2="34" />
            </g>
          </pattern>
        </defs>
        <rect width="200" height="200" fill="url(#lm-asa)" />
      </svg>

      {/* Art-Nouveau filigree corner — bottom left */}
      <svg className="lm-filigree" viewBox="0 0 220 220">
        <g fill="none" stroke="rgba(255,215,0,0.45)" strokeWidth="1" strokeLinecap="round">
          <path d="M 10 210 Q 10 130, 90 110 Q 150 95, 150 40" />
          <path d="M 10 210 Q 60 200, 80 160 Q 95 130, 140 130 Q 175 130, 175 90" />
          <path d="M 10 210 Q 30 170, 70 175 Q 100 178, 110 200" />
          <circle cx="150" cy="40"  r="4" fill="rgba(255,215,0,0.6)" />
          <circle cx="175" cy="90"  r="3" fill="rgba(255,215,0,0.55)" />
          <circle cx="110" cy="200" r="3" fill="rgba(255,215,0,0.5)" />
          <path d="M 145 35 Q 158 28, 165 38 Q 158 48, 145 35 Z" fill="rgba(255,215,0,0.18)" />
        </g>
      </svg>

      {/* Single sumi-e ink stroke across mid-plane */}
      <svg className="lm-sumi" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice">
        <path d="M 60 320 C 280 280, 540 360, 760 300 S 1080 250, 1180 290"
          fill="none" stroke="rgba(20,18,12,0.55)" strokeWidth="14" strokeLinecap="round"
          strokeOpacity="0.55" />
        <path d="M 60 320 C 280 280, 540 360, 760 300 S 1080 250, 1180 290"
          fill="none" stroke="rgba(0,0,0,0.35)" strokeWidth="3" strokeLinecap="round"
          strokeDasharray="2 14" />
      </svg>

      {/* CARTE 1 — MUI List "Composants · 部品" (top-left) */}
      <div className="mui-card mui-list">
        <div className="mui-cardhead">
          <span className="mui-title">Components</span>
          <span className="mui-kanji">部品</span>
        </div>
        <ul>
          <li><i className="dot dot-g" /><span className="bar w70" /><em>v2.4</em></li>
          <li><i className="dot dot-i" /><span className="bar w55" /><em>v1.8</em></li>
          <li><i className="dot dot-g" /><span className="bar w80" /><em>v3.1</em></li>
          <li><i className="dot dot-r" /><span className="bar w45" /><em>v0.9</em></li>
          <li><i className="dot dot-g" /><span className="bar w60" /><em>v2.0</em></li>
        </ul>
      </div>

      {/* CARTE 2 — Chips + Tabs + Switch (middle-right) */}
      <div className="mui-card mui-chips">
        <div className="mui-tabs">
          <span className="t active">Workshop</span>
          <span className="t">Palette</span>
          <span className="t">型</span>
          <div className="t-ind" />
        </div>
        <div className="chip-row">
          <span className="chip chip-fill">Material UI</span>
          <span className="chip">React</span>
          <span className="chip chip-out">SSR</span>
          <span className="chip chip-dot"><i />Active</span>
        </div>
        <div className="switch-row">
          <span className="lbl">Dark mode</span>
          <span className="sw on"><i /></span>
        </div>
      </div>

      {/* CARTE 3 — Stepper (bottom, slightly right of center) */}
      <div className="mui-card mui-stepper">
        <div className="step done"><i>1</i><span>Sketch</span></div>
        <div className="step-line done" />
        <div className="step done"><i>2</i><span>Compose</span></div>
        <div className="step-line half" />
        <div className="step active"><i>3</i><span>Polish</span></div>
      </div>

      {/* Hanko stamp — calligraphic seal, bottom-right */}
      <div className="lm-hanko"><span>光</span></div>

      {/* French signature mark — bottom hairline */}
      <div className="lm-signature">
        <span className="sline" />
        <span className="stext">Maison Lumière · MMXXVI</span>
        <span className="sline" />
      </div>
      <style>{`
        .ls-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }

        /* warm wash + champagne pools */
        .lm-wash{ position:absolute; inset:0;
          background:
            radial-gradient(ellipse 70% 50% at 18% 22%, rgba(201,168,76,0.14), transparent 65%),
            radial-gradient(ellipse 60% 50% at 82% 70%, rgba(255,215,0,0.08), transparent 70%),
            linear-gradient(180deg, rgba(15,15,35,0) 0%, rgba(10,10,20,0.4) 100%);
        }
        .lm-pool{ position:absolute; border-radius:50%; filter: blur(60px); opacity:0.6; }
        .lm-pool-1{ width:48vw; height:48vw; max-width:680px; max-height:680px;
          left:-6%; top:8%;
          background: radial-gradient(circle, rgba(255,215,0,0.18), transparent 65%);
          animation: lm-drift 24s ease-in-out infinite; }
        .lm-pool-2{ width:42vw; height:42vw; max-width:580px; max-height:580px;
          right:-4%; top:38%;
          background: radial-gradient(circle, rgba(201,168,76,0.14), transparent 65%);
          animation: lm-drift 30s ease-in-out infinite reverse; }
        @keyframes lm-drift { 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(30px,-20px); } }

        /* Asanoha pattern band — top right */
        .lm-asanoha{ position:absolute; top:-2%; right:-2%; width:46%; height:62%;
          opacity:0.30;
          mask-image: radial-gradient(ellipse 60% 60% at 80% 20%, black 30%, transparent 75%);
          -webkit-mask-image: radial-gradient(ellipse 60% 60% at 80% 20%, black 30%, transparent 75%);
        }

        /* Filigree — bottom left */
        .lm-filigree{ position:absolute; bottom:-10px; left:-10px; width:240px; height:240px; opacity:0.55; }

        /* Sumi-e brush stroke */
        .lm-sumi{ position:absolute; inset:0; width:100%; height:100%; opacity:0.18; mix-blend-mode: multiply; }

        /* MUI cards — common */
        .mui-card{ position:absolute;
          background: linear-gradient(160deg, rgba(28,24,18,0.86), rgba(20,18,14,0.78));
          border:1px solid rgba(201,168,76,0.32);
          border-radius: 6px;
          backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
          box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,215,0,0.04) inset;
          font-family: 'DM Sans', sans-serif;
          color: rgba(247,240,222,0.85);
          padding: 14px 16px;
        }

        /* CARTE 1 — list */
        .mui-list{ left: 4%; top: 14%; width: 280px; }
        .mui-cardhead{ display:flex; align-items:baseline; justify-content:space-between;
          padding-bottom: 10px; margin-bottom: 10px;
          border-bottom: 1px solid rgba(201,168,76,0.18); }
        .mui-title{ font-family:'Cinzel', serif; font-size: 0.86rem; letter-spacing: 2.5px; color: rgba(255,236,170,0.95); }
        .mui-kanji{ font-family: 'Cinzel', serif; font-size: 0.95rem; color: rgba(201,168,76,0.7); letter-spacing: 1px; }
        .mui-list ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
        .mui-list li{ display:flex; align-items:center; gap:10px; }
        .mui-list .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
        .dot-g{ background:#FFD700; box-shadow:0 0 6px rgba(255,215,0,0.6); }
        .dot-i{ background:#5b6cff; box-shadow:0 0 6px rgba(91,108,255,0.55); }
        .dot-r{ background:#c54b4b; box-shadow:0 0 6px rgba(197,75,75,0.5); }
        .mui-list .bar{ flex:1; height: 6px; border-radius: 3px;
          background: linear-gradient(90deg, rgba(201,168,76,0.55), rgba(201,168,76,0.18)); }
        .bar.w45{ max-width:45%; } .bar.w55{ max-width:55%; } .bar.w60{ max-width:60%; }
        .bar.w70{ max-width:70%; } .bar.w80{ max-width:80%; }
        .mui-list em{ font-style:normal; font-family:'Courier Prime', monospace;
          font-size:0.65rem; color: rgba(201,168,76,0.55); letter-spacing:1px; flex:0 0 auto; }

        /* CARTE 2 — chips */
        .mui-chips{ right: 6%; top: 22%; width: 320px; }
        .mui-tabs{ position:relative; display:flex; gap:18px;
          padding-bottom: 9px; margin-bottom: 12px;
          border-bottom: 1px solid rgba(201,168,76,0.18); }
        .mui-tabs .t{ font-size:0.74rem; letter-spacing: 2px;
          color: rgba(247,240,222,0.55); text-transform: uppercase; font-weight:500; }
        .mui-tabs .t.active{ color: rgba(255,236,170,0.95); }
        .t-ind{ position:absolute; bottom:-1px; left:0; height:2px; width:54px;
          background: linear-gradient(90deg, #FFD700, rgba(255,215,0,0.2));
          box-shadow: 0 0 8px rgba(255,215,0,0.5);
          animation: lm-tab 9s ease-in-out infinite; }
        @keyframes lm-tab {
          0%,100%{ transform:translateX(0); width:54px; }
          33%{ transform:translateX(72px); width:62px; }
          66%{ transform:translateX(150px); width:30px; }
        }
        .chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom: 12px; }
        .chip{ display:inline-flex; align-items:center; gap:6px;
          padding: 4px 10px; border-radius: 12px;
          font-size: 0.7rem; letter-spacing: 0.4px;
          border: 1px solid rgba(201,168,76,0.4);
          background: rgba(201,168,76,0.06);
          color: rgba(247,240,222,0.85);
        }
        .chip.chip-fill{ background: linear-gradient(135deg, #FFD700, #C9A84C);
          color: #1a1408; border-color: transparent; font-weight:600; }
        .chip.chip-out{ background: transparent; }
        .chip.chip-dot i{ width:6px; height:6px; border-radius:50%;
          background:#6dffb0; box-shadow:0 0 6px rgba(109,255,176,0.6); }
        .switch-row{ display:flex; align-items:center; justify-content:space-between;
          padding-top:6px; border-top:1px dashed rgba(201,168,76,0.18); }
        .switch-row .lbl{ font-size:0.78rem; color: rgba(247,240,222,0.7);
          font-style: italic; font-family:'Cinzel', serif; letter-spacing:1px; }
        .sw{ width: 34px; height: 18px; border-radius:10px;
          background: rgba(201,168,76,0.2);
          position:relative; transition: background .3s; }
        .sw i{ position:absolute; top:2px; left:2px; width:14px; height:14px;
          border-radius:50%; background:#f7f0de; transition: left .3s; }
        .sw.on{ background: linear-gradient(135deg, #FFD700, #C9A84C); }
        .sw.on i{ left: 18px; }

        /* CARTE 3 — stepper */
        .mui-stepper{ right: 3%; bottom: 6%; width: 360px;
          padding: 12px 20px;
          display:flex; align-items:center; gap: 6px;
          opacity: 0.88;
        }
        .step{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
        .step i{ width:26px; height:26px; border-radius:50%;
          display:flex; align-items:center; justify-content:center;
          font-style:normal; font-size:0.78rem; font-weight:600;
          background: rgba(201,168,76,0.1);
          border: 1px solid rgba(201,168,76,0.35);
          color: rgba(247,240,222,0.7);
          font-family:'Courier Prime', monospace;
        }
        .step.done i{ background: linear-gradient(135deg, #FFD700, #C9A84C);
          border-color: transparent; color:#1a1408; }
        .step.active i{ border-color: #FFD700; color: #FFD700;
          box-shadow: 0 0 0 4px rgba(255,215,0,0.12), 0 0 12px rgba(255,215,0,0.4); }
        .step span{ font-size:0.68rem; letter-spacing:1px;
          font-family:'Cinzel', serif; font-style:italic;
          color: rgba(247,240,222,0.55); }
        .step.done span, .step.active span{ color: rgba(255,236,170,0.9); }
        .step-line{ flex:1; height:1px; background: rgba(201,168,76,0.2);
          margin-top: -16px; min-width: 18px; }
        .step-line.done{ background: linear-gradient(90deg, #C9A84C, #FFD700); height:1.5px; }
        .step-line.half{ background: linear-gradient(90deg, #FFD700 50%, rgba(201,168,76,0.2) 50%); height:1.5px; }

        /* Hanko — calligraphic seal */
        .lm-hanko{ position:absolute; right: 5%; bottom: 30%;
          width: 56px; height: 56px;
          background: linear-gradient(135deg, #b73238, #8a1f25);
          border-radius: 4px;
          display:flex; align-items:center; justify-content:center;
          transform: rotate(-6deg);
          box-shadow:
            inset 0 0 0 2px rgba(247,240,222,0.85),
            inset 0 0 0 4px #b73238,
            0 4px 14px rgba(0,0,0,0.4);
          opacity: 0.92;
        }
        .lm-hanko span{ font-family:'Cinzel', serif; font-size: 1.9rem;
          color: rgba(247,240,222,0.95); font-weight:700; line-height:1; }

        /* French hairline signature */
        .lm-signature{ position:absolute; left: 50%; bottom: 24px;
          transform: translateX(-50%);
          display:flex; align-items:center; gap: 14px;
          opacity:0.55;
        }
        .sline{ width:60px; height:1px; background: rgba(201,168,76,0.55); }
        .stext{ font-family:'Cinzel', serif; font-style: italic;
          font-size:0.72rem; letter-spacing: 3px;
          color: rgba(255,236,170,0.85); white-space: nowrap; }

        @media (max-width: 1280px){
          .mui-list{ width: 240px; }
          .mui-chips{ width: 270px; }
          .mui-stepper{ width: 280px; }
        }
        @media (max-width: 1024px){
          .mui-stepper{ display:none; }
        }
        @media (max-width: 880px){
          .ls-bg{ opacity: 0.4; }
          .mui-list, .mui-chips, .lm-signature, .lm-hanko{ display:none; }
        }
      `}</style>
    </div>
  );
}

function _UnusedAtelier_dropped() {
  return (
    <div className="atelier-bg" aria-hidden="true">
      <div className="at-aurora at-aurora-1" />
      <div className="at-aurora at-aurora-2" />
      <div className="at-aurora at-aurora-3" />

      <div className="at-rays">
        <div className="at-ray r1" />
        <div className="at-ray r2" />
        <div className="at-ray r3" />
      </div>

      <svg className="at-dots" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice">
        {dots}
      </svg>

      <svg className="at-bezier" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="atGold" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#FFD700" />
            <stop offset="100%" stopColor="#c89a1a" />
          </linearGradient>
        </defs>
        <path d="M 80 380 C 250 180, 480 520, 640 300 S 940 100, 1140 360"
          stroke="url(#atGold)" strokeWidth="1.6" fill="none"
          className="at-path at-path-1" />
        <path d="M 40 180 Q 320 40, 620 200 T 1160 240"
          stroke="url(#atGold)" strokeWidth="1.1" fill="none" opacity="0.55"
          className="at-path at-path-2" />
        <path d="M 180 540 Q 500 360, 820 500 T 1120 520"
          stroke="url(#atGold)" strokeWidth="1.1" fill="none" opacity="0.45"
          className="at-path at-path-3" />

        <g className="at-anchors">
          <circle cx="80" cy="380" r="4.5" fill="#FFD700" />
          <circle cx="640" cy="300" r="4.5" fill="#FFD700" />
          <circle cx="1140" cy="360" r="4.5" fill="#FFD700" />
          <line x1="640" y1="300" x2="520" y2="460" stroke="#FFD700" strokeWidth="0.6" opacity="0.6" />
          <line x1="640" y1="300" x2="760" y2="140" stroke="#FFD700" strokeWidth="0.6" opacity="0.6" />
          <circle cx="520" cy="460" r="3" fill="none" stroke="#FFD700" strokeWidth="1.1" />
          <circle cx="760" cy="140" r="3" fill="none" stroke="#FFD700" strokeWidth="1.1" />
        </g>
      </svg>

      <div className="at-geo at-geo-1" />
      <div className="at-geo at-geo-2" />
      <div className="at-geo at-geo-3" />

      <div className="at-swatches">
        <span style={{ background: '#FFD700' }} />
        <span style={{ background: '#c89a1a' }} />
        <span style={{ background: '#f4d03f' }} />
        <span style={{ background: '#1a1a2e', border: '1px solid rgba(255,215,0,0.3)' }} />
        <span style={{ background: '#fff8e1' }} />
      </div>

      <style>{`
        .atelier-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }

        /* Aurora — large soft golden glows drifting */
        .at-aurora{ position:absolute; border-radius:50%; filter: blur(70px); mix-blend-mode: screen; }
        .at-aurora-1{
          width: 55vw; height: 55vw; max-width: 760px; max-height: 760px;
          left: -8%; top: 8%;
          background: radial-gradient(circle, rgba(255,215,0,0.32), transparent 62%);
          animation: at-aur-1 18s ease-in-out infinite;
        }
        .at-aurora-2{
          width: 42vw; height: 42vw; max-width: 620px; max-height: 620px;
          right: 6%; top: 28%;
          background: radial-gradient(circle, rgba(244,208,63,0.22), transparent 62%);
          animation: at-aur-2 22s ease-in-out infinite;
        }
        .at-aurora-3{
          width: 36vw; height: 36vw; max-width: 520px; max-height: 520px;
          left: 38%; top: -8%;
          background: radial-gradient(circle, rgba(255,165,0,0.16), transparent 62%);
          animation: at-aur-3 26s ease-in-out infinite;
        }
        @keyframes at-aur-1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(14%,7%) scale(1.18);} }
        @keyframes at-aur-2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-12%,9%) scale(1.12);} }
        @keyframes at-aur-3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(7%,18%) scale(1.22);} }

        /* Sweeping rays */
        .at-rays{ position:absolute; inset:0; overflow:hidden; }
        .at-ray{
          position:absolute; top:-20%; bottom:-20%; width: 220px;
          background: linear-gradient(90deg, transparent, rgba(255,215,0,0.1), transparent);
          transform: skewX(-15deg);
          animation: at-ray-sweep 14s linear infinite;
          mix-blend-mode: screen;
        }
        .at-ray.r1{ left:-30%; animation-delay: 0s; }
        .at-ray.r2{ left:-30%; animation-delay: -5s; width: 140px; opacity: 0.7; }
        .at-ray.r3{ left:-30%; animation-delay: -9s; width: 300px; opacity: 0.5; }
        @keyframes at-ray-sweep { 0%{transform: translateX(0) skewX(-15deg);} 100%{transform: translateX(180vw) skewX(-15deg);} }

        /* Dot grid (LED stage feel) */
        .at-dots{ position:absolute; inset:0; width:100%; height:100%; opacity: 0.85; }
        @keyframes at-dot-pulse {
          0%,100%{ opacity: 0.15; transform: scale(1); }
          50%{ opacity: 0.95; transform: scale(2.2); filter: drop-shadow(0 0 5px #FFD700); }
        }
        .at-dots circle { transform-origin: center; transform-box: fill-box; }

        /* Bezier paths (Adobe pen tool vibe) */
        .at-bezier{ position:absolute; inset:0; width:100%; height:100%; }
        .at-path{
          stroke-dasharray: 2400;
          stroke-dashoffset: 2400;
          animation: at-path-draw 9s ease-in-out infinite;
          filter: drop-shadow(0 0 7px rgba(255,215,0,0.55));
        }
        .at-path-2{ animation-duration: 12s; animation-delay: -3s; }
        .at-path-3{ animation-duration: 14s; animation-delay: -7s; }
        @keyframes at-path-draw {
          0%{ stroke-dashoffset: 2400; }
          50%{ stroke-dashoffset: 0; }
          100%{ stroke-dashoffset: -2400; }
        }
        .at-anchors{ animation: at-anchor-pulse 3.2s ease-in-out infinite; }
        @keyframes at-anchor-pulse {
          0%,100%{ opacity: 0.45; }
          50%{ opacity: 1; filter: drop-shadow(0 0 6px #FFD700); }
        }

        /* Floating geometric shapes */
        .at-geo{ position:absolute; }
        .at-geo-1{
          width: 90px; height: 90px; left: 14%; top: 22%;
          border: 1.5px solid rgba(255,215,0,0.45);
          border-radius: 50%;
          background: radial-gradient(circle at 30% 30%, rgba(255,215,0,0.22), transparent 70%);
          backdrop-filter: blur(2px);
          animation: at-geo-1 14s ease-in-out infinite;
          box-shadow: 0 0 20px rgba(255,215,0,0.15);
        }
        .at-geo-2{
          width: 70px; height: 70px; right: 18%; top: 58%;
          border: 1.5px solid rgba(255,215,0,0.4);
          background: linear-gradient(135deg, rgba(255,215,0,0.2), transparent);
          backdrop-filter: blur(2px);
          animation: at-geo-2 18s ease-in-out infinite;
        }
        .at-geo-3{
          left: 48%; top: 72%;
          width: 0; height: 0;
          border-left: 36px solid transparent;
          border-right: 36px solid transparent;
          border-bottom: 62px solid rgba(255,215,0,0.18);
          filter: drop-shadow(0 0 10px rgba(255,215,0,0.35));
          animation: at-geo-3 16s ease-in-out infinite;
        }
        @keyframes at-geo-1 { 0%,100%{transform:translate(0,0) rotate(0);} 50%{transform:translate(22px,-26px) rotate(180deg);} }
        @keyframes at-geo-2 { 0%,100%{transform:translate(0,0) rotate(45deg);} 50%{transform:translate(-30px,-18px) rotate(225deg);} }
        @keyframes at-geo-3 { 0%,100%{transform:translate(0,0) rotate(0);} 50%{transform:translate(16px,22px) rotate(120deg);} }

        /* Swatches row (designer vocab) */
        .at-swatches{
          position: absolute; bottom: 32px; left: 50%;
          transform: translateX(-50%);
          display: flex; gap: 8px;
          padding: 8px 14px;
          background: rgba(15,15,35,0.55);
          border: 1px solid rgba(255,215,0,0.25);
          border-radius: 999px;
          backdrop-filter: blur(6px);
          animation: at-swatch-bob 6s ease-in-out infinite;
        }
        .at-swatches span{
          display:block; width: 16px; height: 16px; border-radius: 50%;
          box-shadow: 0 0 8px rgba(255,215,0,0.25);
        }
        @keyframes at-swatch-bob { 0%,100%{transform: translateX(-50%) translateY(0);} 50%{transform: translateX(-50%) translateY(-4px);} }

        @media (max-width: 880px){
          .atelier-bg{ opacity: 0.55; }
          .at-swatches{ display: none; }
        }
      `}</style>
    </div>
  );
}

function _UnusedIsoArtboardStack_dropped() {
  return (
    <div className="iso-stack-wrap" aria-hidden="true">
      <div className="iso-light" />
      <div className="iso-stage">
        {/* deepest: pure wireframe */}
        <div className="iso-ab iso-ab-1">
          <div className="iso-head"><i/><i/><i/></div>
          <div className="iso-body">
            <div className="wf-line w70"/><div className="wf-line w40"/>
            <div className="wf-grid"><div/><div/><div/></div>
            <div className="wf-line w55"/><div className="wf-line w30"/>
          </div>
        </div>
        {/* low-fi */}
        <div className="iso-ab iso-ab-2">
          <div className="iso-head"><i/><i/><i/><span>sketch.fig</span></div>
          <div className="iso-body">
            <div className="lf-bar w80"/>
            <div className="lf-row"><div className="lf-bar w35"/><div className="lf-bar w25"/></div>
            <div className="lf-block"/>
            <div className="lf-row"><div className="lf-pill"/><div className="lf-pill"/></div>
          </div>
        </div>
        {/* mid-fi */}
        <div className="iso-ab iso-ab-3">
          <div className="iso-head"><i/><i/><i/><span>shell.tsx</span></div>
          <div className="iso-body">
            <div className="mf-nav"><div/><div/><div/><div/></div>
            <div className="mf-grid"><div/><div/><div/><div/><div/><div/></div>
            <div className="mf-foot"/>
          </div>
        </div>
        {/* hi-fi */}
        <div className="iso-ab iso-ab-4">
          <div className="iso-head"><i/><i/><i/><span>datagrid</span></div>
          <div className="iso-body hf">
            <div className="hf-toolbar"><div className="hf-chip"/><div className="hf-chip alt"/><div className="hf-chip"/></div>
            <div className="hf-table">
              {[0,1,2,3,4,5].map(i=><div key={i} className="hf-row"><span/><span/><span/><span/></div>)}
            </div>
          </div>
        </div>
        {/* polished, frontmost */}
        <div className="iso-ab iso-ab-5">
          <div className="iso-head"><i/><i/><i/><span>production</span></div>
          <div className="iso-body fin">
            <div className="fin-hero">
              <div className="fin-h1"/>
              <div className="fin-h2"/>
              <div className="fin-cta"/>
            </div>
            <div className="fin-cards">
              <div/><div/><div/>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .iso-stack-wrap{
          position:absolute; inset:0; overflow:hidden; pointer-events:none;
          background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255,215,0,0.06), transparent 70%);
        }
        .iso-light{
          position:absolute; left:50%; top:50%;
          width:60vw; height:60vw; max-width:900px; max-height:900px;
          transform: translate(-50%, -50%);
          background: radial-gradient(circle, rgba(255,215,0,0.18) 0%, rgba(255,215,0,0.06) 30%, transparent 60%);
          filter: blur(20px);
          animation: iso-pulse 8s ease-in-out infinite;
        }
        @keyframes iso-pulse {
          0%,100%{ opacity:.9; transform:translate(-50%,-50%) scale(1); }
          50%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); }
        }
        .iso-stage{
          position:absolute; inset:0;
          perspective: 2400px;
          perspective-origin: 60% 50%;
          animation: iso-drift 14s ease-in-out infinite;
        }
        @keyframes iso-drift {
          0%,100%{ transform: rotate(0deg); }
          50%{ transform: rotate(0.6deg); }
        }
        .iso-ab{
          position:absolute;
          width: 360px; height: 220px;
          border-radius: 8px;
          background: linear-gradient(160deg, rgba(20,18,12,0.55), rgba(40,32,12,0.35));
          border: 1px solid rgba(255,215,0,0.22);
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          box-shadow:
            0 0 0 1px rgba(255,215,0,0.04) inset,
            0 30px 60px -20px rgba(0,0,0,0.6),
            0 0 40px rgba(255,215,0,0.08);
          transform-style: preserve-3d;
          overflow: hidden;
        }
        .iso-ab::after{
          content:''; position:absolute; inset:0;
          background: linear-gradient(160deg, rgba(255,215,0,0.08), transparent 50%);
          pointer-events:none;
        }
        .iso-head{
          height: 22px; display:flex; align-items:center; gap:5px;
          padding: 0 10px;
          border-bottom: 1px solid rgba(255,215,0,0.15);
          background: rgba(255,215,0,0.04);
        }
        .iso-head i{ width:6px; height:6px; border-radius:50%; background: rgba(255,215,0,0.35); display:block; }
        .iso-head span{
          margin-left: 8px;
          font-family: 'Courier Prime', monospace;
          font-size: 9px; color: rgba(255,215,0,0.55);
          letter-spacing: 1px;
        }
        .iso-body{ padding: 14px 16px; display:flex; flex-direction:column; gap:10px; height: calc(100% - 22px); box-sizing:border-box; }

        /* Layer 1 — wireframe */
        .iso-ab-1{
          left: 8%; top: 18%;
          transform: rotateY(-28deg) rotateX(10deg) translateZ(-180px);
          opacity: 0.55;
        }
        .wf-line{ height: 2px; background: rgba(255,215,0,0.45); border-radius: 2px; }
        .wf-line.w70{ width:70%; } .wf-line.w55{ width:55%; } .wf-line.w40{ width:40%; } .wf-line.w30{ width:30%; }
        .wf-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; height: 60px; margin: 4px 0; }
        .wf-grid > div{ border: 1.5px dashed rgba(255,215,0,0.4); border-radius: 3px; }

        /* Layer 2 — low-fi */
        .iso-ab-2{
          left: 22%; top: 28%;
          transform: rotateY(-28deg) rotateX(10deg) translateZ(-90px);
          opacity: 0.7;
        }
        .lf-bar{ height: 10px; background: rgba(160,150,130,0.35); border-radius: 3px; }
        .lf-bar.w80{ width:80%; } .lf-bar.w35{ width:35%; } .lf-bar.w25{ width:25%; }
        .lf-row{ display:flex; gap:8px; }
        .lf-block{ flex:1; background: rgba(160,150,130,0.2); border-radius: 4px; min-height: 40px; }
        .lf-pill{ width: 60px; height: 18px; background: rgba(160,150,130,0.4); border-radius: 9px; }

        /* Layer 3 — mid-fi (shell + microfrontend grid) */
        .iso-ab-3{
          left: 38%; top: 22%;
          transform: rotateY(-28deg) rotateX(10deg) translateZ(0px);
          opacity: 0.85;
        }
        .mf-nav{ display:flex; gap:8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,215,0,0.15); }
        .mf-nav > div{ height: 6px; flex:1; background: rgba(255,215,0,0.2); border-radius: 2px; }
        .mf-nav > div:first-child{ background: rgba(255,215,0,0.55); flex: 0 0 30px; }
        .mf-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:6px; flex:1; }
        .mf-grid > div{ background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.2); border-radius: 3px; }
        .mf-grid > div:nth-child(2){ background: rgba(255,215,0,0.18); }
        .mf-grid > div:nth-child(5){ background: rgba(255,215,0,0.14); }
        .mf-foot{ height: 4px; background: rgba(255,215,0,0.15); border-radius: 2px; }

        /* Layer 4 — hi-fi datagrid */
        .iso-ab-4{
          left: 48%; top: 38%;
          transform: rotateY(-28deg) rotateX(10deg) translateZ(80px);
          opacity: 0.95;
        }
        .hf-toolbar{ display:flex; gap:6px; padding-bottom:8px; border-bottom: 1px solid rgba(255,215,0,0.2); }
        .hf-chip{ width: 50px; height: 14px; background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.3); border-radius: 7px; }
        .hf-chip.alt{ background: rgba(255,215,0,0.45); border-color: rgba(255,215,0,0.6); }
        .hf-table{ display:flex; flex-direction:column; gap:3px; flex:1; }
        .hf-row{ display:flex; gap:6px; padding: 4px 0; border-bottom: 1px solid rgba(255,215,0,0.08); }
        .hf-row span{ flex:1; height: 5px; background: rgba(255,215,0,0.25); border-radius: 2px; }
        .hf-row span:first-child{ flex: 0 0 24px; background: rgba(255,215,0,0.45); }
        .hf-row span:nth-child(3){ background: rgba(255,215,0,0.18); }

        /* Layer 5 — polished, frontmost */
        .iso-ab-5{
          left: 58%; top: 14%;
          transform: rotateY(-28deg) rotateX(10deg) translateZ(180px);
          opacity: 1;
          background: linear-gradient(160deg, rgba(30,26,16,0.82), rgba(45,38,18,0.72));
          border-color: rgba(255,215,0,0.42);
          box-shadow:
            0 0 0 1px rgba(255,215,0,0.08) inset,
            0 40px 80px -20px rgba(0,0,0,0.7),
            0 0 60px rgba(255,215,0,0.18);
        }
        .fin-hero{ display:flex; flex-direction:column; gap:6px; padding: 4px 0 10px; border-bottom: 1px solid rgba(255,215,0,0.18); }
        .fin-h1{ width: 70%; height: 12px; background: linear-gradient(90deg, #FFD700, rgba(255,215,0,0.6)); border-radius: 2px; }
        .fin-h2{ width: 55%; height: 6px; background: rgba(255,215,0,0.4); border-radius: 2px; }
        .fin-cta{ width: 80px; height: 18px; background: linear-gradient(135deg, #FFD700, #c89a1a); border-radius: 4px; margin-top: 4px; box-shadow: 0 0 12px rgba(255,215,0,0.4); }
        .fin-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; flex:1; padding-top: 8px; }
        .fin-cards > div{
          background: linear-gradient(160deg, rgba(255,215,0,0.18), rgba(255,215,0,0.04));
          border: 1px solid rgba(255,215,0,0.3);
          border-radius: 5px;
        }
        .fin-cards > div:nth-child(2){
          background: linear-gradient(160deg, rgba(255,215,0,0.32), rgba(255,215,0,0.08));
          border-color: rgba(255,215,0,0.5);
        }

        @media (max-width: 880px){
          .iso-stack-wrap{ opacity: 0.4; }
          .iso-ab{ transform: scale(0.6); }
        }
      `}</style>
    </div>
  );
}

function LumiereHero() {
  const ref = useRefLM(null);
  const isInView = useInViewLM(ref, { once: true });
  return (
    <section ref={ref} style={{
      position: 'relative', overflow: 'hidden',
      padding: '160px 5% 90px', background: colors.bgPrimary,
    }}>
      <LumiereLiveStage />
      <Cartouche accent={colors.brandGold} text="LUMIERE · 光" top={130} right={36} />

      <div style={{
        maxWidth: 1080, margin: '0 auto', position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'center',
      }} className="lm-hero-grid">
        <div>
          <motionLM.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(255,215,0,0.3)`,
              borderRadius: 999, background: 'rgba(15,15,35,0.6)',
            }}
          >
            <Icon name="layout-dashboard" size={12} color={colors.brandGold} />
            <span style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: '0.7rem', color: colors.brandGold,
              letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600,
            }}>Frontend Enterprise</span>
          </motionLM.div>

          <motionLM.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: 500, letterSpacing: 4, lineHeight: 1,
              background: `linear-gradient(135deg, ${colors.brandGold}, ${colors.brandAmber}, ${colors.brandGoldMuted})`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              marginBottom: 18,
            }}
          >Lumiere</motionLM.h1>

          <motionLM.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',
            }}
          >Il volto moderno dei vostri sistemi.</motionLM.p>

          <motionLM.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',
            }}
          >
            Frontend React enterprise per ecosistemi IBM i. Webpack Module Federation,
            SDK proprietario, design system condiviso, microfrontend dinamici e deployabili in modo indipendente.
          </motionLM.p>

          <motionLM.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.brandGold}, ${colors.brandGoldMuted})`,
              color: colors.bgPrimary, borderRadius: 6,
              textDecoration: 'none', letterSpacing: 0.5,
              boxShadow: `0 0 30px rgba(255,215,0,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(255,215,0,0.4)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 0 30px rgba(255,215,0,0.25)'; }}
            >Parla con un frontend lead <Icon name="arrow-right" size={16} color={colors.bgPrimary} /></a>
            <a href="#offer" style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.95rem', fontWeight: 500,
              padding: '14px 28px',
              background: 'transparent', color: colors.textPrimary,
              border: `1px solid rgba(255,215,0,0.35)`,
              borderRadius: 6, textDecoration: 'none',
              letterSpacing: 0.5, transition: 'all 0.3s',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = colors.brandGold; e.currentTarget.style.color = colors.brandGold; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,215,0,0.35)'; e.currentTarget.style.color = colors.textPrimary; }}
            >Cosa offriamo</a>
          </motionLM.div>
        </div>

        <motionLM.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={isInView ? { opacity: 1, scale: 1 } : {}}
          transition={{ duration: 1, delay: 0.4 }}
          style={{ display: 'flex', justifyContent: 'flex-start', transform: 'translateX(-40px)' }}
          className="lm-hero-logo"
        >
          <div style={{ position: 'relative' }}>
            <LumiereLogo size={260} />
            <div style={{
              position: 'absolute', inset: -40,
              background: `radial-gradient(circle, rgba(255,215,0,0.12), transparent 70%)`,
              zIndex: -1, pointerEvents: 'none',
            }} />
          </div>
        </motionLM.div>
      </div>

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

function LumiereOffer() {
  const offer = [
    { icon: 'layout-dashboard', title: 'Microfrontend federati', desc: 'Webpack Module Federation: ogni dominio applicativo è un modulo indipendente, deployabile e versionabile separatamente.' },
    { icon: 'box', title: '@lumiere/sdk', desc: 'Runtime proprietario per caricamento dinamico, autenticazione condivisa, routing e inter-module messaging.' },
    { icon: 'table', title: '@lumiere/datagrid', desc: 'Componente tabellare ad alte prestazioni, ottimizzato sui dataset DB2/400 con paginazione server-side e virtual scroll.' },
    { icon: 'palette', title: 'Design System', desc: 'Material UI esteso con token e pattern condivisi. Coerenza visiva su tutta l\'applicazione, indipendente dai team.' },
  ];
  return (
    <AnimatedSection id="offer" style={{
      padding: '110px 5%', background: colors.bgSecondary,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionHeading
          eyebrow="// Cosa offriamo"
          title="Frontend industriale, non artigianale"
          sub="Quattro pilastri tecnici per costruire applicazioni enterprise scalabili. Stack standard, deploy indipendenti, zero accoppiamento tra team."
        />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 20, marginTop: 56,
        }} className="lm-offer-grid">
          {offer.map((o, i) => (
            <motionLM.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(255,215,0,0.18)`,
                borderRadius: 12, position: 'relative', overflow: 'hidden',
              }}
            >
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                background: `linear-gradient(90deg, transparent, ${colors.brandGold}, transparent)`,
                opacity: 0.5,
              }} />
              <Icon name={o.icon} size={28} color={colors.brandGold} style={{ marginBottom: 14 }} />
              <h3 style={{
                fontFamily: "'Cinzel', serif",
                fontSize: '1.15rem', color: colors.textPrimary,
                fontWeight: 500, marginBottom: 10,
              }}>{o.title}</h3>
              <p style={{
                fontSize: '0.9rem', color: colors.textMuted,
                lineHeight: 1.7, fontWeight: 300,
              }}>{o.desc}</p>
            </motionLM.div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .lm-offer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .lm-offer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </AnimatedSection>
  );
}

function LumiereSdk() {
  return (
    <AnimatedSection style={{
      padding: '110px 5%', background: colors.bgPrimary, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 40, alignItems: 'center',
        }} className="lm-2col">
          <div>
            <div style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: '0.7rem', color: colors.brandGold,
              letterSpacing: 2, textTransform: 'uppercase',
              marginBottom: 14, fontWeight: 600,
            }}>// Stack frontend</div>
            <h2 style={{
              fontFamily: "'Cinzel', serif",
              fontSize: 'clamp(1.8rem, 3.2vw, 2.5rem)',
              color: colors.textPrimary, fontWeight: 500,
              lineHeight: 1.3, marginBottom: 20, textWrap: 'balance',
            }}>
              Microfrontend dinamici,<br />
              <span style={{ color: colors.brandGold, fontStyle: 'italic' }}>SDK proprietario</span>
            </h2>
            <p style={{
              fontSize: '0.95rem', color: colors.textMuted,
              lineHeight: 1.75, fontWeight: 300, marginBottom: 24,
            }}>
              Costruiamo applicazioni enterprise con Webpack Module Federation: ogni team gestisce
              il proprio dominio in modo indipendente, l'SDK Lumiere li orchestra a runtime.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { tag: '@lumiere/sdk', desc: 'Runtime per il caricamento dinamico dei microfrontend, gestione auth e routing condiviso.' },
                { tag: '@lumiere/datagrid', desc: 'Componente tabellare ad alte prestazioni, ottimizzato su dataset DB2/400.' },
                { tag: 'Module Federation', desc: 'Distribuzione indipendente dei singoli moduli, deploy senza coordinare release globali.' },
              ].map((it, i) => (
                <div key={i} style={{
                  padding: '12px 16px',
                  background: 'rgba(255,215,0,0.03)',
                  border: `1px solid rgba(255,215,0,0.15)`,
                  borderRadius: 8,
                }}>
                  <div style={{
                    fontFamily: "'Courier Prime', monospace",
                    fontSize: '0.8rem', color: colors.brandGold,
                    fontWeight: 700, marginBottom: 4,
                  }}>{it.tag}</div>
                  <p style={{
                    fontSize: '0.82rem', color: colors.textMuted,
                    lineHeight: 1.6, fontWeight: 300,
                  }}>{it.desc}</p>
                </div>
              ))}
            </div>
          </div>

          <div style={{
            padding: 22, background: 'rgba(15,15,35,0.7)',
            border: `1px solid rgba(255,215,0,0.2)`,
            borderRadius: 12,
            fontFamily: "'Courier Prime', monospace",
            fontSize: '0.78rem', lineHeight: 1.85,
            color: colors.textMuted, position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{
              display: 'flex', gap: 6, marginBottom: 14,
              paddingBottom: 12, borderBottom: `1px solid rgba(255,255,255,0.08)`,
            }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f56' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ffbd2e' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#27c93f' }} />
              <span style={{ marginLeft: 'auto', fontSize: '0.7rem', color: colors.textDim }}>microfrontend.config.js</span>
            </div>
            <div style={{ color: colors.textDim }}>// Module Federation</div>
            <div><span style={{ color: colors.brandGreen }}>import</span> {'{'} ModuleFederationPlugin {'}'} = require(...);</div>
            <div style={{ marginTop: 8 }}><span style={{ color: colors.brandGreen }}>new</span> ModuleFederationPlugin({'{'}</div>
            <div style={{ paddingLeft: 16 }}>name: <span style={{ color: colors.brandGold }}>'shell'</span>,</div>
            <div style={{ paddingLeft: 16 }}>remotes: {'{'}</div>
            <div style={{ paddingLeft: 32 }}>orders: <span style={{ color: colors.brandGold }}>'orders@/orders'</span>,</div>
            <div style={{ paddingLeft: 32 }}>billing: <span style={{ color: colors.brandGold }}>'billing@/billing'</span>,</div>
            <div style={{ paddingLeft: 32 }}>catalog: <span style={{ color: colors.brandGold }}>'catalog@/catalog'</span>,</div>
            <div style={{ paddingLeft: 16 }}>{'}'},</div>
            <div style={{ paddingLeft: 16 }}>shared: [<span style={{ color: colors.brandGold }}>'react'</span>, <span style={{ color: colors.brandGold }}>'@lumiere/sdk'</span>],</div>
            <div>{'}'})</div>
            <div style={{ marginTop: 12, color: colors.brandGold }}>✓ shell + 3 remotes federated</div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .lm-2col { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </AnimatedSection>
  );
}

function LumiereProcess() {
  const steps = [
    { id: 1, title: 'Architettura frontend', desc: 'Disegno della shell, definizione dei boundary fra microfrontend, contratti tra moduli e shared dependencies.' },
    { id: 2, title: 'Design system & SDK', desc: 'Setup del design system, integrazione di @lumiere/sdk e @lumiere/datagrid, coerenza visiva e tecnica su tutta l\'app.' },
    { id: 3, title: 'Sviluppo dei moduli', desc: 'Costruzione iterativa dei microfrontend: ogni dominio applicativo viene rilasciato in modo indipendente.' },
    { id: 4, title: 'Delivery in produzione', desc: 'Pipeline CI/CD per deploy indipendenti, monitoring runtime, knowledge transfer al team interno.' },
  ];
  return (
    <AnimatedSection style={{ padding: '110px 5%', background: colors.bgSecondary }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionHeading
          eyebrow="// Metodo"
          title="Quattro fasi di delivery"
          sub="Dall'architettura al deploy, un percorso lineare per portare in produzione un frontend federato."
        />
        <div style={{ marginTop: 56, display: 'flex', flexDirection: 'column', gap: 16 }}>
          {steps.map((s, i) => (
            <motionLM.div key={s.id}
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1, duration: 0.5 }}
              style={{
                padding: '24px 28px',
                background: 'rgba(255,255,255,0.02)',
                border: `1px solid rgba(255,215,0,0.18)`,
                borderLeft: `3px solid ${colors.brandGold}`,
                borderRadius: 8,
                display: 'flex', alignItems: 'flex-start', gap: 22,
              }}
            >
              <div style={{
                width: 50, height: 50, flexShrink: 0,
                borderRadius: '50%',
                background: `radial-gradient(circle, ${colors.brandGold}30, transparent 70%)`,
                border: `1px solid ${colors.brandGold}50`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: "'Cinzel', serif",
                fontSize: '1.2rem', color: colors.brandGold, fontWeight: 600,
              }}>{s.id}</div>
              <div style={{ flex: 1 }}>
                <h3 style={{
                  fontFamily: "'Cinzel', serif",
                  fontSize: '1.15rem', color: colors.textPrimary,
                  fontWeight: 500, marginBottom: 8,
                }}>{s.title}</h3>
                <p style={{
                  fontSize: '0.92rem', color: colors.textMuted,
                  lineHeight: 1.7, fontWeight: 300,
                }}>{s.desc}</p>
              </div>
            </motionLM.div>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

function LumiereCrossLinks() {
  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: 'Lestage', role: 'File Flow Orchestration', href: 'lestage.html', Logo: LestageLogo, color: colors.brandAmber },
  ];
  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.brandGold,
            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,
          }}>Lumiere è il volto del prodotto</h2>
          <p style={{ color: colors.textMuted, lineHeight: 1.7, fontWeight: 300, maxWidth: 640, margin: '0 auto' }}>
            Lumiere è il layer di esposizione. Sotto, AiKo genera il codice, Kodari lo serve via API, Lestage muove i flussi.
          </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 LumiereCta() {
  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(255,215,0,0.06), transparent 70%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <LumiereLogo 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',
        }}>
          Costruiamo<br />
          <span style={{ color: colors.brandGold, fontStyle: 'italic' }}>il vostro frontend</span>
        </h2>
        <p style={{
          fontSize: '1rem', color: colors.textMuted,
          lineHeight: 1.7, fontWeight: 300, marginBottom: 32,
          maxWidth: 560, margin: '0 auto 32px',
        }}>
          Una call tecnica con un frontend lead per analizzare i vostri requisiti e disegnare la shell + il primo microfrontend.
        </p>
        <a href="../contatti.html" style={{
          fontFamily: "'DM Sans', sans-serif",
          fontSize: '0.95rem', fontWeight: 600,
          padding: '15px 32px',
          background: `linear-gradient(135deg, ${colors.brandGold}, ${colors.brandGoldMuted})`,
          color: colors.bgPrimary, borderRadius: 6, textDecoration: 'none',
          letterSpacing: 0.5,
          boxShadow: `0 0 30px rgba(255,215,0,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(255,215,0,0.4)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 0 30px rgba(255,215,0,0.25)'; }}
        >Prenota una call tecnica <Icon name="arrow-right" size={16} color={colors.bgPrimary} /></a>
      </div>
    </AnimatedSection>
  );
}

function LumiereApp() {
  return (
    <React.Fragment>
      <SiteNav depth={1} current="prodotti" />
      <main>
        <LumiereHero />
        <LumiereOffer />
        <LumiereSdk />
        <LumiereProcess />
        <LumiereCrossLinks />
        <LumiereCta />
      </main>
      <SiteFooter depth={1} />
    </React.Fragment>
  );
}

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