// components/Sections.jsx — Le sezioni della landing (bio, what i do, skills, stack, contatti)
// Stile Raw Concrete + influenze LK (numerazione, marquee, grossi titoli editoriali)

const rcT = window.rcTokens;

// ─────────────────────────────────────────────────────────────
// Marquee orizzontale (come "— My skills —" di LK)
// ─────────────────────────────────────────────────────────────
function Marquee({ text, speed = 40, accent = false, theme, darkBg = false }) {
  const isDark = theme === 'dark';
  const items = Array(10).fill(text);

  let marqueeColor = accent ? rcT.bg : (isDark ? '#000000' : rcT.ink);
  let background = accent ? rcT.ink : 'transparent';

  if (darkBg) {
    background = isDark ? '#000000' : '#ffffff';
    marqueeColor = isDark ? '#ffffff' : rcT.ink;
  }

  return (
    <div style={{
      overflow: 'hidden', whiteSpace: 'nowrap',
      borderTop: `1px solid ${rcT.line}`,
      borderBottom: `1px solid ${rcT.line}`,
      padding: 'clamp(12px, 3vw, 18px) 0', margin: '0',
      background: background,
      color: marqueeColor,
    }}>
      <div className="rc-marquee-track" style={{
        display: 'inline-block',
        animation: `rcMarquee ${speed}s linear infinite`,
        fontFamily: rcT.serif, fontSize: 'clamp(40px, 10vw, 72px)', fontStyle: 'italic',
        letterSpacing: -2, fontWeight: 500, lineHeight: 1,
      }}>
        {items.map((t, i) => (
          <span key={i} style={{ marginRight: 'clamp(30px, 6vw, 60px)' }}>
            <span style={{ color: rcT.accent, marginRight: 'clamp(30px, 6vw, 60px)' }}>—</span>
            {t}
          </span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Sezione: WHAT I DO (chi sono + manifesto)
// ─────────────────────────────────────────────────────────────
function WhatIDo({ theme }) {
  const isDark = theme === 'dark';
  const ink = isDark ? rcT.inkDark : rcT.ink;
  const dim = isDark ? rcT.inkDark : rcT.dim;
  const line = isDark ? rcT.lineDark : rcT.line;
  return (
    <>
      <Marquee text="What I do" speed={38} accent={true} theme={theme}/>
      <section id="what" data-screen-label="02 what-i-do" style={{
        padding: 'clamp(80px, 10vw, 120px) clamp(16px, 6vw, 80px) clamp(60px, 10vw, 100px)',
        borderTop: `1px solid ${line}`,
        position: 'relative',
      }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 'clamp(40px, 8vw, 60px)', alignItems: 'start' }} className="rc-whatido-grid">
        <div data-reveal>
          <div style={{ fontFamily: rcT.mono, fontSize: 'clamp(10px, 2.5vw, 12px)', letterSpacing: 2, color: dim, marginBottom: 'clamp(6px, 2vw, 8px)' }}>
            (02) — WHAT I DO
          </div>
          <div style={{ fontFamily: rcT.mono, fontSize: 'clamp(12px, 2.5vw, 13px)', color: dim, marginTop: 'clamp(24px, 4vw, 40px)', maxWidth: 220, lineHeight: 1.6 }}>
            ▸ software architect<br/>
            ▸ front-end specialist<br/>
            ▸ mobile developer<br/>
            ▸ ai-curious designer<br/>
            ▸ ~20 anni di esperienza
          </div>
        </div>
        <div>
          <h2 data-reveal style={{
            fontFamily: rcT.serif, fontSize: 'clamp(32px, 6vw, 72px)', lineHeight: 0.95,
            fontWeight: 500, letterSpacing: -3, margin: '0 0 clamp(32px, 6vw, 56px) 0',
          }}>
            Soluzioni <span style={{ fontStyle: 'italic', color: rcT.accent }}>innovative</span><br/>
            per far crescere<br/>
            i tuoi progetti<span style={{ color: rcT.accent }}>.</span>
          </h2>
          <div data-reveal style={{ '--reveal-delay': '0.3s',
            marginTop: 0, fontSize: 'clamp(14px, 3vw, 18px)', lineHeight: 1.6, maxWidth: 620, color: ink,
          }}>
            Mi chiamo <b>Federico</b> e da quasi vent'anni costruisco software. Ho iniziato con il mobile, poi sono passato al web, e oggi passo le mie giornate a progettare architetture che tengono insieme front-end, back-end e cloud.
            <br/><br/>
            Sviluppo app <b>Android e iOS con Flutter</b>, applicazioni web moderne con <b>Next.js</b>, siti <b>WordPress</b> su misura e piattaforme <b>ecommerce</b> performanti — scelgo sempre la tecnologia giusta per il tuo progetto.
            <br/><br/>
            Sono anche un <b>GIS Developer</b> — ho lavorato a lungo con MapInfo, MapBasic, GeoServer, PostGIS e librerie cartografiche come OpenLayers e Leaflet.
            <br/><br/>
            Amo la grafica, uso l'<b>AI</b> come strumento nei processi — non come scorciatoia.
          </div>
        </div>
      </div>
      </section>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// Pannello skill (ispirato ai Panel di LK — titolo, sottotitolo, descrizione, lista skill)
// ─────────────────────────────────────────────────────────────
function SkillPanel({ index, eyebrow, title, body, skills, reverse, background, theme }) {
  const isDark = theme === 'dark';
  const ink = isDark ? rcT.inkDark : rcT.ink;
  const dim = isDark ? rcT.inkDark : rcT.dim;
  const line = isDark ? rcT.lineDark : rcT.line;
  return (
    <section data-screen-label={`04-${index} ${title}`} style={{
      padding: 'clamp(60px, 10vw, 100px) clamp(16px, 6vw, 80px)',
      borderTop: `1px solid ${line}`,
      background: background || 'transparent',
      position: 'relative',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 'clamp(40px, 8vw, 60px)', alignItems: 'start',
      }}>
        {!reverse && (
          <div data-reveal>
            <div style={{
              fontFamily: rcT.mono, fontSize: 'clamp(9px, 2vw, 11px)', letterSpacing: 2, color: dim, marginBottom: 'clamp(8px, 2vw, 12px)',
            }}>
              {eyebrow}
            </div>
            <div data-parallax="0.1" style={{
              fontFamily: rcT.serif, fontSize: 'clamp(80px, 15vw, 180px)', lineHeight: 0.85, letterSpacing: -6,
              color: rcT.accent, fontWeight: 700, marginBottom: 'clamp(8px, 2vw, 12px)',
            }}>
              {String(index).padStart(2, '0')}
            </div>
          </div>
        )}
        <div style={{ order: reverse ? 1 : 0, display: 'flex', flexDirection: 'column', alignItems: reverse ? 'flex-end' : 'flex-start' }}>
          <h3 data-reveal style={{
            fontFamily: rcT.serif, fontSize: 'clamp(28px, 6vw, 76px)', lineHeight: 0.95,
            fontWeight: 500, letterSpacing: -2, margin: 0,
          }}>
            {title}<span style={{ color: rcT.accent }}>.</span>
          </h3>
          <div data-reveal style={{ '--reveal-delay': '0.2s',
            marginTop: 'clamp(16px, 4vw, 28px)', fontSize: 'clamp(14px, 3vw, 17px)', lineHeight: 1.6, maxWidth: 640, color: ink,
            marginBottom: 'clamp(24px, 4vw, 40px)',
          }}>
            {body}
          </div>
          <div style={{ display: 'flex', flexWrap: reverse ? 'wrap-reverse' : 'wrap', gap: 'clamp(8px, 2vw, 10px)', justifyContent: reverse ? 'flex-end' : 'flex-start' }}>
            {skills.map((s, i) => (
              <span key={s} data-reveal style={{ '--reveal-delay': (0.35 + i * 0.05) + 's',
                border: `1px solid ${line}`, padding: 'clamp(6px, 1.5vw, 8px) clamp(10px, 2vw, 16px)',
                fontFamily: rcT.mono, fontSize: 'clamp(10px, 2vw, 12px)', letterSpacing: 1,
                textTransform: 'uppercase',
                whiteSpace: 'nowrap',
                background: isDark ? '#beb3b3' : '#e8e3d8',
                color: isDark ? '#000000' : 'inherit',
              }}>
                {s}
              </span>
            ))}
          </div>
        </div>
        {reverse && (
          <div data-reveal style={{ textAlign: 'right' }}>
            <div style={{
              fontFamily: rcT.mono, fontSize: 'clamp(9px, 2vw, 11px)', letterSpacing: 2, color: dim, marginBottom: 'clamp(8px, 2vw, 12px)',
            }}>
              {eyebrow}
            </div>
            <div data-parallax="0.1" style={{
              fontFamily: rcT.serif, fontSize: 'clamp(80px, 15vw, 180px)', lineHeight: 0.85, letterSpacing: -6,
              color: rcT.accent, fontWeight: 700, marginBottom: 'clamp(8px, 2vw, 12px)',
            }}>
              {String(index).padStart(2, '0')}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Sezione: CONTATTI (stile LK — nome ripetuto grande + dati)
// ─────────────────────────────────────────────────────────────
function Contact({ theme }) {
  const isDark = theme === 'dark';
  const textColor = isDark ? '#e8e3d8' : rcT.bg;
  const accent = rcT.accent;
  return (
    <>
      <Marquee text="Contattami" speed={40} accent={false} theme={theme} darkBg={true}/>
      <section id="contattami" data-screen-label="06 contact" style={{
        padding: 'clamp(80px, 10vw, 120px) clamp(16px, 6vw, 80px) clamp(50px, 8vw, 80px)',
        background: isDark ? '#353333' : '#3a342e',
        color: textColor,
        borderTop: `1px solid ${accent}`,
        position: 'relative',
      }}>
      <div style={{
        fontFamily: rcT.mono, fontSize: 'clamp(9px, 2vw, 11px)', letterSpacing: 2, color: rcT.accent, marginBottom: 'clamp(12px, 3vw, 20px)',
      }}>
        (06) — GET IN TOUCH
      </div>
      <div data-reveal style={{
        fontFamily: rcT.serif, fontSize: 'clamp(32px, 8vw, 120px)',
        lineHeight: 1.1, letterSpacing: -3, fontWeight: 500,
      }}>
        Federico<br/>
        <span style={{ fontStyle: 'italic', color: rcT.accent }}>Molinaro<span style={{ color: rcT.accent }}>.</span></span>
      </div>
      <div style={{
        marginTop: 'clamp(32px, 6vw, 56px)',
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 'clamp(24px, 4vw, 40px)',
        borderTop: `1px solid ${rcT.accent}`, paddingTop: 'clamp(20px, 4vw, 32px)',
        fontFamily: rcT.mono,
      }}>
        <div>
          <div style={{ fontSize: 'clamp(8px, 2vw, 10px)', color: rcT.accent, letterSpacing: 2, marginBottom: 'clamp(6px, 2vw, 8px)' }}>01 / ROLE</div>
          <div style={{ fontSize: 'clamp(12px, 2.5vw, 14px)', lineHeight: 1.5 }}>
            Software Architect<br/>
            Front-end Developer<br/>
            Mobile Developer<br/>
            UI/UX Designer
          </div>
        </div>
        <div>
          <div style={{ fontSize: 'clamp(8px, 2vw, 10px)', color: rcT.accent, letterSpacing: 2, marginBottom: 'clamp(6px, 2vw, 8px)' }}>02 / LINK</div>
          <a href="https://www.linkedin.com/in/federicomolinaro" target="_blank" rel="noopener noreferrer" style={{
            fontFamily: rcT.serif, fontSize: 'clamp(16px, 3vw, 22px)', fontStyle: 'italic', color: textColor,
            textDecoration: 'none', borderBottom: `1px solid ${accent}`, paddingBottom: 2,
            wordBreak: 'break-word',
          }}>
            linkedin.com/in/federicomolinaro →
          </a>
        </div>
        <div>
          <div style={{ fontSize: 'clamp(8px, 2vw, 10px)', color: rcT.accent, letterSpacing: 2, marginBottom: 'clamp(6px, 2vw, 8px)' }}>03 / AVAILABILITY</div>
          <div style={{ fontSize: 'clamp(12px, 2.5vw, 14px)', lineHeight: 1.5 }}>
            <span style={{ color: rcT.accent }}>●</span> Disponibile per nuovi progetti<br/>
            Italia · Remote<br/>
            2026
          </div>
        </div>
      </div>
      </section>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────
function SiteFooter({ theme }) {
  const isDark = theme === 'dark';
  const line = isDark ? rcT.lineDark : rcT.line;
  const dim = isDark ? rcT.inkDark : rcT.dim;
  return (
    <footer style={{
      padding: 'clamp(16px, 4vw, 28px) clamp(16px, 6vw, 80px)', borderTop: `1px solid ${line}`,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 'clamp(12px, 3vw, 20px)',
      fontFamily: rcT.mono, fontSize: 'clamp(8px, 2vw, 10px)', letterSpacing: 2, color: dim,
      textTransform: 'uppercase',
    }}>
      <span style={{ whiteSpace: 'nowrap' }}>© 2026 — F. Molinaro</span>
      <span style={{ whiteSpace: 'nowrap' }}>Built by hand · Italia</span>
      <span id="rc-clock" style={{ whiteSpace: 'nowrap' }}>00:00:00</span>
    </footer>
  );
}

Object.assign(window, { Marquee, WhatIDo, SkillPanel, Contact, SiteFooter });