// components/Skills.jsx — Sezione SKILLS a griglia (stile raw concrete + marquee LK)

const rcS = window.rcTokens;

// ─────────────────────────────────────────────────────────────
// Lista skill raggruppate (testi originali di Federico)
// ─────────────────────────────────────────────────────────────
const skillGroups = [
  {
    key: 'software',
    title: 'Senior Software Engineer',
    italics: 'web · mobile · desktop',
    skills: [
      { cat: 'Mobile',     items: ['Java / Android', 'Xamarin', 'Flutter'] },
      { cat: 'Web FE',     items: ['Angular', 'RxJS', 'NgRx', 'React', 'Next.js', 'TypeScript', 'CSS'] },
      { cat: 'Desktop',    items: ['C#', 'VB.NET', 'Visual Studio', 'Xamarin'] },
      { cat: 'Database',   items: ['MSSQL', 'PostgreSQL', 'MySQL'] },
    ],
  },
  {
    key: 'gis',
    title: 'Senior GIS Developer',
    italics: 'mappe, geodati, tile',
    skills: [
      { cat: 'Desktop',    items: ['MapInfo', 'MapBasic', 'MapX'] },
      { cat: 'Server',     items: ['GeoServer', 'MapServer', 'Fusion', 'Tilecache'] },
      { cat: 'Database',   items: ['PostGIS'] },
      { cat: 'Client',     items: ['OpenLayers', 'Leaflet', 'HERE Maps'] },
    ],
  },
  {
    key: 'ops',
    title: 'DevOps & Design',
    italics: 'pipeline, ui/ux, tooling',
    skills: [
      { cat: 'DevOps',     items: ['Azure DevOps', 'Git', 'GitLab', 'CI/CD', 'Docker'] },
      { cat: 'UI/UX',      items: ['Figma', 'Adobe XD', 'Photoshop', 'Illustrator'] },
    ],
  },
  {
    key: 'home',
    title: 'Domotica & Home Lab',
    italics: 'per passione',
    skills: [
      { cat: 'Hardware',   items: ['Raspberry Pi'] },
      { cat: 'Container',  items: ['Docker', 'Portainer', 'Docker Compose'] },
      { cat: 'Messaging',  items: ['Mosquitto (MQTT)', 'deCONZ (ZigBee)'] },
      { cat: 'Monitoring', items: ['InfluxDB', 'Kapacitor', 'Chronograf', 'Grafana'] },
    ],
  },
];

function SkillsGrid({ theme }) {
  const isDark = theme === 'dark';
  const dim = isDark ? rcS.inkDark : rcS.dim;
  const line = isDark ? rcS.lineDark : rcS.line;
  const darkText = isDark ? '#000000' : 'inherit';
  return (
    <section id="skills" data-screen-label="03 skills" style={{
      padding: '0', position: 'relative',
    }}>
      {/* Marquee grande */}
      <Marquee text="Skills" speed={35} theme={theme} darkBg={true}/>

      <div style={{ padding: 'clamp(60px, 10vw, 100px) clamp(16px, 6vw, 80px) clamp(50px, 8vw, 80px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 'clamp(40px, 8vw, 60px)', alignItems: 'start', marginBottom: 'clamp(50px, 10vw, 80px)' }}>
          <div data-reveal>
            <div style={{ fontFamily: rcS.mono, fontSize: 'clamp(9px, 2vw, 11px)', letterSpacing: 2, color: dim, marginBottom: 'clamp(6px, 2vw, 8px)' }}>
              (03) — MY SKILLS
            </div>
            <div style={{ fontFamily: rcS.mono, fontSize: 'clamp(12px, 2.5vw, 13px)', lineHeight: 1.6, color: dim, marginTop: 'clamp(24px, 4vw, 40px)', maxWidth: 280 }}>
              Quattro capitoli professionali. Un po' architetto, un po' smanettone, abbastanza designer per non fare brutte schermate.
            </div>
          </div>
          <div>
            <h2 data-reveal style={{
              fontFamily: rcS.serif, fontSize: 'clamp(28px, 6vw, 92px)', lineHeight: 0.95,
              fontWeight: 500, letterSpacing: -2, margin: 0,
            }}>
              Quello che so fare, <span style={{ fontStyle: 'italic', color: rcS.accent }}>davvero</span><span style={{ color: rcS.accent }}>.</span>
            </h2>
          </div>
        </div>

        {/* Groups */}
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 0, borderTop: `1px solid ${line}`, borderLeft: `1px solid ${line}` }} className="rc-skills-grid">
          {skillGroups.map((g, gi) => (
            <div key={g.key} data-reveal style={{ '--reveal-delay': (gi * 0.12) + 's',
              padding: 'clamp(20px, 4vw, 32px) clamp(16px, 3vw, 28px)',
              borderRight: `1px solid ${line}`,
              borderBottom: `1px solid ${line}`,
              background: isDark ? '#e8e3d8' : 'rgba(255, 255, 255, 0.6)',
            }}>
              <div style={{ fontFamily: rcS.mono, fontSize: 'clamp(8px, 2vw, 10px)', letterSpacing: 2, color: darkText, marginBottom: 'clamp(4px, 1vw, 6px)' }}>
                {String(gi + 1).padStart(2, '0')} · {g.italics}
              </div>
              <h3 style={{
                fontFamily: rcS.serif, fontSize: 'clamp(20px, 4vw, 32px)', lineHeight: 1.05, fontWeight: 500,
                letterSpacing: -0.8, margin: '0 0 clamp(14px, 3vw, 24px)', color: darkText,
              }}>
                {g.title}<span style={{ color: rcS.accent }}>.</span>
              </h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(10px, 2vw, 14px)' }}>
                {g.skills.map(row => (
                  <div key={row.cat} style={{ display: 'grid', gridTemplateColumns: 'minmax(80px, auto) 1fr', gap: 'clamp(8px, 2vw, 12px)', alignItems: 'baseline' }}>
                    <div style={{
                      fontFamily: rcS.mono, fontSize: 'clamp(8px, 2vw, 10px)', letterSpacing: 2, color: darkText,
                      textTransform: 'uppercase', paddingTop: 3, whiteSpace: 'nowrap',
                    }}>
                      ▸ {row.cat}
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'clamp(4px, 1vw, 6px)' }}>
                      {row.items.map(it => (
                        <span key={it} style={{
                          fontFamily: rcS.mono, fontSize: 'clamp(10px, 2vw, 12px)', padding: 'clamp(3px, 0.5vw, 4px) clamp(6px, 1.5vw, 10px)',
                          border: `1px solid ${line}`, background: isDark ? '#ffffff' : '#e8e3d8', color: darkText,
                          whiteSpace: 'nowrap',
                        }}>{it}</span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Sezione stack alternativa (pannelli grandi) — usa SkillPanel
// ─────────────────────────────────────────────────────────────
function ServicesPanels({ theme }) {
  return (
    <section id="stack" data-screen-label="04 services" style={{ padding: 0, position: 'relative' }}>
      <Marquee text="Stack" speed={38} accent={true} theme={theme}/>
      <SkillPanel
        index={1}
        eyebrow="(04.01) — WEB DEVELOPMENT"
        title="Web app & siti"
        body={<>Costruisco front-end responsive con <b>Angular</b>, <b>React</b> e <b>Next.js</b>. Applicazioni dinamiche, ottimizzate per performance e SEO. Attenzione al dettaglio e al codice pulito — quello che si vede è importante quanto quello che c'è sotto.</>}
        skills={['Angular', 'RxJS', 'NgRx', 'React', 'Next.js', 'TypeScript', 'HTML', 'CSS']}
        reverse={false}
        background={rcS.panel}
        theme={theme}
      />
      <SkillPanel
        index={2}
        eyebrow="(04.02) — MOBILE"
        title="App iOS & Android"
        body={<>Vent'anni di mobile, dal Java per Android ai framework cross-platform. Sviluppo con <b>Flutter</b>, <b>Xamarin</b> e codice nativo. App affidabili, performanti e piacevoli da usare — non un wrapper attorno a una webview.</>}
        skills={['Flutter', 'Xamarin', 'Java', 'Android', 'React Native']}
        reverse={true}
        background={rcS.panel}
        theme={theme}
      />
      <SkillPanel
        index={3}
        eyebrow="(04.03) — AI & AUTOMATION"
        title="AI nei processi"
        body={<>L'AI è uno strumento, non un altare. La uso per automatizzare task ripetitivi, accelerare sviluppo, costruire agenti utili — sempre partendo dal bisogno reale del cliente. Pochi effetti speciali, molta sostanza.</>}
        skills={['LLM Integration', 'Prompt Engineering', 'Workflow Automation', 'RAG', 'AI-assisted dev']}
        reverse={false}
        background={rcS.panel}
        theme={theme}
      />
      <SkillPanel
        index={4}
        eyebrow="(04.04) — UI / UX"
        title="Grafica & interfacce"
        body={<>Disegno interfacce usando <b>Figma</b> e <b>Adobe XD</b>, rifinisco con <b>Photoshop</b> e <b>Illustrator</b>. L'obiettivo: interfacce belle da vedere e facili da usare. Capisco il contesto del cliente prima ancora di aprire il primo frame.</>}
        skills={['Figma', 'Adobe XD', 'Photoshop', 'Illustrator', 'Design Systems']}
        reverse={true}
        background={rcS.panel}
        theme={theme}
      />
    </section>
  );
}

Object.assign(window, { SkillsGrid, ServicesPanels });