/* global React, Reveal, Arrow, Eyebrow, Button */
const { useEffect, useRef, useState } = React;

// ============================================================
// HERO
// ============================================================
function Hero() {
  return (
    <section id="top" className="hero section-dark" data-mood="dark">
      <div className="container hero-meta">
        <span>Davide Spaggiari — 8-9-2000</span>
        <span>Vignola · Emilia Romagna · IT</span>
      </div>

      <div className="container hero-main">
        <div>
          <Eyebrow>Founder · Imprenditore tech · Progettista</Eyebrow>
          <h1 className="hero-title" style={{ marginTop: 28 }}>
            <span className="line"><span className="word" style={{ fontFamily: '"Instrument Serif"' }}>L'unico modo</span></span>
            <span className="line"><span className="word delay-1">per fare un ottimo lavoro</span></span>
            <span className="line"><span className="word delay-2"><em>è amare ciò che fai.</em></span></span>
          </h1>
          <p className="hero-tagline">
            Founder & CEO di <strong>Lyteboard</strong>. Imprenditore tech, progettista meccanico, sviluppatore.
            Trasformo idee in business concreti, con attenzione ai dettagli e un focus costante su semplicità ed efficacia dell'esperienza utente.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 34 }}>
            <Button href="#contact" variant="primary">Contattami <Arrow /></Button>
            <Button href="Davide_Spaggiari_CV.pdf" variant="ghost" download="Davide_Spaggiari_CV.pdf" onClick={(e) => downloadCV(e, 'hero')}>
              Scarica CV <span style={{ opacity: 0.6 }}>·</span> PDF
            </Button>
          </div>
        </div>

        <div className="hero-photo" data-parallax>
          <img src="assets/davide.png" alt="Davide Spaggiari" />
        </div>
      </div>

      <div className="container hero-footer">
        <div className="hero-footer-item">
          <span>Attualmente</span>
          <strong>Founder Lyteboard Technologies · Sales Engineering Pragma</strong>
        </div>
        <div className="hero-footer-item">
          <span>Membership</span>
          <strong>Confindustria Emilia — Gruppo Giovani</strong>
        </div>
        <div className="scroll-indicator">
          <span>Scroll</span>
          <span className="line"></span>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// LYTEBOARD
// ============================================================
function Lyteboard() {
  return (
    <section id="lyteboard" className="section-dark" data-mood="dark">
      <div className="container lyteboard-wrap">
        <Reveal className="lyteboard-content">
          <Eyebrow><span className="lyteboard-dot"></span>Attualmente · La mia startup</Eyebrow>
          <h2>Lyteboard.<br/><em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>Semplice.</em></h2>
          <p className="subhead">
            Uno spazio di lavoro <strong style={{ color: 'var(--fg-light)', fontWeight: 500 }}>semplice e intuitivo</strong> dove chiunque possa pianificare, approvare e analizzare i contenuti social senza complicazioni.
            Pensato per piccole imprese, freelance e creator che gli strumenti professionali li trovano troppo complessi e costosi.
          </p>
          <p className="subhead" style={{ marginBottom: 36 }}>
            Ho iniziato da zero: studio dello sviluppo software, scelta degli strumenti, costruzione del prodotto sera dopo sera. Oggi continuo a svilupparlo con un obiettivo — renderlo lo strumento più accessibile sul mercato.
          </p>
          <div className="lyteboard-cta">
            <Button href="https://lyteboard.com" target="_blank" variant="primary" onClick={() => window.gtag && window.gtag('event', 'outbound_click', { destination: 'lyteboard.com' })}>
              Visita Lyteboard <Arrow />
            </Button>
            <Button href="#contact" variant="ghost">Parliamone</Button>
          </div>
        </Reveal>

        <Reveal delay={180}>
          <div className="lyteboard-mockup lyteboard-mockup-photo">
            <img src="assets/lyteboard-mockup.jpg" alt="Lyteboard dashboard su MacBook" />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// EXPERIENCE
// ============================================================
const EXPERIENCES = [
  { date: '2026 — oggi', role: 'Founder & CEO', company: 'Lyteboard™', current: true,
    desc: 'Lyteboard nasce da un\'esigenza concreta: semplificare la gestione dei contenuti social.\nHo sviluppato la piattaforma da zero per offrire uno strumento intuitivo e accessibile, pensato per piccole imprese, freelance e creator.\n\nA differenza dei software tradizionali, spesso complessi e pensati per grandi team, Lyteboard permette di pianificare, approvare e analizzare i contenuti in modo semplice ed efficace, tutto in un unico spazio di lavoro.\n\nIl progetto è in continua evoluzione: lo sviluppo prosegue ogni giorno con l\'obiettivo di rendere il social media management sempre più immediato e alla portata di tutti.',
    descMobile: 'Piattaforma sviluppata da zero per semplificare la gestione dei contenuti social: pianificazione, approvazione e analisi in un unico spazio, pensato per piccole imprese, freelance e creator.' },
  { date: '2025 — oggi', role: 'Sales Engineering', company: 'Pragma S.r.l.', current: true,
    desc: 'Dopo l\'acquisizione e il rebranding di Metalmeccanica Spaggiari in Pragma, ricopro un ruolo trasversale che unisce marketing, backoffice commerciale e costificazione tecnica. Redigo offerte, calcolo costi e tempi ciclo dei macchinari, e gestisco il rapporto tra la parte tecnica e quella commerciale.',
    descMobile: 'Ruolo trasversale tra marketing, backoffice commerciale e costificazione tecnica: offerte, costi e tempi ciclo, ponte tra parte tecnica e commerciale.' },
  { date: '2024 — oggi', role: 'Founder', company: 'INCANTO di Davide Spaggiari', current: true,
    desc: 'Mi occupo di individuare prodotti con potenziale nei mercati internazionali e lanciarli in nuovi Paesi, sviluppando brand e strategie di vendita mirate. Seguo l\'intero processo, dalla ricerca al marketing fino alla gestione operativa, con un approccio orientato alla scalabilità.\n\nL\'obiettivo è trasformare opportunità emergenti in business concreti e sostenibili nel tempo, creando progetti digitali solidi e riconoscibili.',
    descMobile: 'Individuo prodotti con potenziale nei mercati internazionali e li lancio in nuovi Paesi, seguendo l\'intero processo dalla ricerca al marketing fino alla gestione operativa.' },
  { date: '2022 — 2025', role: 'Progettista Meccanico', company: 'Spaggiari Automazione',
    desc: 'Sono entrato in azienda come progettista meccanico, occupandomi della progettazione, del dimensionamento e dei calcoli strutturali di impianti e componenti per sistemi di movimentazione e magazzini automatici.\n\nHo lavorato allo sviluppo di soluzioni su misura per clienti industriali, seguendo i progetti dal concept alla messa in servizio, e apportando migliorie alle macchine per eliminare lavorazioni non necessarie e ottimizzare i tempi di produzione.\n\nDurante questo periodo l\'azienda, fondata nel 1976, è stata acquisita, avviando un processo di riorganizzazione e rebranding sotto il nome Pragma Srl.',
    descMobile: 'Progettazione, dimensionamento e calcoli strutturali di impianti per movimentazione e magazzini automatici. Soluzioni su misura dal concept alla messa in servizio.' },
  { date: '2021', role: 'Venditore', company: 'Ferramenta Emiliana S.r.l.s.',
    desc: 'Vendita al banco con consulenza tecnica sui prodotti e gestione del rapporto diretto con clienti privati e professionali. Ho sviluppato capacità di ascolto e comprensione delle esigenze, traducendo le caratteristiche tecniche in valore concreto per il cliente.\n\nL\'esperienza mi ha permesso di migliorare le competenze comunicative e commerciali, gestendo trattative, richieste specifiche e situazioni operative in tempo reale, in un contesto dinamico e orientato al risultato.',
    descMobile: 'Vendita al banco con consulenza tecnica e gestione del rapporto diretto con clienti privati e professionali. Ascolto, trattativa, traduzione tra tecnica e valore.' },
  { date: '2020', role: 'Back Office', company: 'Generali Italia S.p.A. — Sede di Vignola',
    desc: 'Supporto amministrativo e gestione delle pratiche clienti in un contesto strutturato, con attenzione all\'organizzazione dei dati e al rispetto delle procedure interne.\n\nHo maturato precisione operativa e capacità di lavorare in ambienti regolati, comprendendo l\'importanza del controllo sui processi, della correttezza delle informazioni e del coordinamento tra diverse funzioni aziendali.\n\nL\'esperienza mi ha permesso di capire da vicino le dinamiche di una realtà corporate italiana, sviluppando un approccio metodico e orientato all\'affidabilità.',
    descMobile: 'Supporto amministrativo e gestione pratiche clienti in contesto corporate strutturato. Precisione operativa, controllo dei processi e coordinamento tra funzioni.' },
];

function Experience() {
  const [active, setActive] = useState(0);
  const sectionRef = useRef(null);
  const total = EXPERIENCES.length;

  useEffect(() => {
    function onScroll() {
      const el = sectionRef.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // Scroll progression inside the pinned section (0 → 1)
      // Section height = (total + 1) * 100vh so each experience gets one screen
      const total_scroll = el.offsetHeight - vh;
      const progress = Math.max(0, Math.min(1, -r.top / total_scroll));
      const idx = Math.min(total - 1, Math.floor(progress * total));
      setActive(idx);
      // Expose helix rotation via CSS var
      el.style.setProperty('--helix-progress', progress);
    }
    onScroll();
    document.addEventListener('scroll', onScroll, { passive: true });
    return () => document.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="experience" ref={sectionRef} className="section-light exp-scrolly" data-mood="light" style={{ height: `${(total + 1) * 100}vh`, padding: 0 }}>
      <div className="exp-sticky">
        <div className="container exp-header" data-reveal>
          <div>
            <Eyebrow>Percorso — 2020 / 2026</Eyebrow>
            <h2 style={{ marginTop: 20 }}>Le mie esperienze<br/><em>lavorative</em>.</h2>
          </div>
          <p className="subhead" style={{ maxWidth: 380 }}>
            Dalla progettazione meccanica all'imprenditoria tech. Ogni passaggio ha aggiunto un livello di comprensione del prodotto, del cliente e del mercato.
          </p>
        </div>

        <div className="exp-stage">
          <div className="exp-helix" aria-hidden="true">
            <Helix />
          </div>
          <div className="exp-cards">
            {EXPERIENCES.map((e, i) => {
              const offset = i - active;
              let cls = 'exp-card';
              if (offset === 0) cls += ' active';
              else if (offset === -1) cls += ' prev';
              else if (offset === 1) cls += ' next';
              else if (offset < 0) cls += ' far-prev';
              else cls += ' far-next';
              return (
                <div key={i} className={cls}>
                  <div className="exp-card-date">{e.date}{e.current && <span className="exp-card-dot">●</span>}</div>
                  <div className="exp-card-role">{e.role}</div>
                  <div className="exp-card-company">{e.company}</div>
                  <div className="exp-card-desc exp-card-desc-full">{e.desc}</div>
                  <div className="exp-card-desc exp-card-desc-mobile">{e.descMobile || e.desc}</div>
                </div>
              );
            })}
          </div>
          <div className="exp-progress">
            {EXPERIENCES.map((e, i) => (
              <div key={i} className={`exp-tick${i === active ? ' active' : ''}${i < active ? ' past' : ''}`}>
                <span className="exp-tick-num">{String(i+1).padStart(2, '0')}</span>
                <span className="exp-tick-line"></span>
              </div>
            ))}
          </div>
        </div>

        <div className="container exp-footer">
          <div>Formazione</div>
          <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
            <div>Diploma in Meccatronica — ITIS "Primo Levi", Vignola (MO)</div>
            <div>Ingegneria Gestionale — UniMoRe · biennio formativo</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// DNA-like double helix that rotates with scroll
function Helix() {
  const N = 32;
  const nodes = Array.from({ length: N }, (_, i) => i);
  return (
    <div className="helix">
      {nodes.map(i => (
        <div key={i} className="helix-rung" style={{ '--i': i, '--n': N }}>
          <span className="helix-node a"></span>
          <span className="helix-bar"></span>
          <span className="helix-node b"></span>
        </div>
      ))}
    </div>
  );
}

// ============================================================
// SKILLS
// ============================================================
const SKILL_GROUPS = [
  {
    icon: '</>',
    title: 'Sviluppo software',
    desc: 'Dalla logica al prodotto finito. Costruisco Lyteboard da zero, imparando quello che serve, quando serve — inclusa l\'integrazione del codice con le API dei social media.',
    items: ['JavaScript', 'Java', 'SQL', 'SQL Server', 'SaaS', 'API social', 'Sviluppo prodotto']
  },
  {
    icon: '⌘',
    title: 'Imprenditoria tech',
    desc: 'Dalla ricerca di mercato al lancio. Brand scalabili, gestione delle risorse e del budget, ottimizzazione dei costi, e rapporti solidi con collaboratori e fornitori.',
    items: ['Founder mindset', 'Product strategy', 'Budget & costi', 'Team management', 'Shopify', 'Marketing digitale', 'Creazione contenuti']
  },
  {
    icon: '$',
    title: 'Sales Engineering',
    desc: 'Trasformare una specifica tecnica in un\'offerta commerciale chiara. Costificazione di macchinari, conteggio cicli, preventivazione e redazione di offerte tecniche.',
    items: ['Costificazione macchinari', 'Preventivi progetti', 'Conteggio cicli', 'Offerte tecniche', 'Rapporto tecnico-commerciale']
  },
  {
    icon: '◆',
    title: 'Progettazione tecnica',
    desc: 'CAD, dimensionamento di impianti e calcolo strutturale ad elementi finiti (FEM). Rigore, precisione e cultura del dettaglio misurato.',
    items: ['AutoCAD', 'Autodesk Inventor', 'CAD', 'FEM — elementi finiti', 'Dimensionamento impianti', 'Design meccanico']
  },
  {
    icon: '∿',
    title: 'AI & workflow',
    desc: 'Uso l\'IA da quando è uscita sul mercato. Delego tutto ciò che è ripetitivo per dedicare tempo a ciò che crea valore reale.',
    items: ['Utilizzo IA', 'Automazione', 'Prompt engineering', 'Produttività', 'Web Design']
  },
];

function Skills() {
  return (
    <section id="skills" className="section-dark" data-mood="dark">
      <div className="container">
        <Reveal className="skills-header">
          <Eyebrow>Competenze</Eyebrow>
          <h2 style={{ marginTop: 20 }}>Cinque <em>mondi</em>,<br/>una logica comune.</h2>
          <p className="subhead" style={{ marginTop: 24 }}>
            Non credo nella specializzazione estrema. Il valore nasce dall'incrocio tra discipline diverse — capire la meccanica aiuta a progettare software; costruire software aiuta a vendere meglio.
          </p>
        </Reveal>

        <div className="skills-grid">
          {SKILL_GROUPS.map((g, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="skill-card" data-tilt>
                <div className="skill-card-icon">{g.icon}</div>
                <h3>{g.title}</h3>
                <p>{g.desc}</p>
                <ul className="skill-list">
                  {g.items.map(it => <li key={it}>{it}</li>)}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// VALUES
// ============================================================
const VALUES = [
  { n: '01', title: 'Parto senza aspettare di essere pronto.', body: 'L\'appetito vien mangiando. Comincio con un\'idea, poi apprendo ogni abilità che il progetto richiede durante il lavoro stesso.' },
  { n: '02', title: 'Ossessionato dalla perfezione, non dal mio ego.', body: 'Il mio focus non è fare il lavoro, ma far sì che l\'utilizzatore finale sia pienamente soddisfatto. Non mi accontento mai del "va bene così".' },
  { n: '03', title: 'Le sfide grandi sono quelle che mi attivano.', body: 'Adoro mettermi in gioco. Le cose apparentemente impossibili sono spesso solo la porta d\'ingresso a qualcosa che prima non esisteva.' },
  { n: '04', title: 'Cerco critiche, non applausi.', body: 'Sono sempre pronto a mettermi in discussione. Una critica costruttiva vale più di dieci complimenti — è materiale grezzo per migliorare.' },
  { n: '05', title: 'Occhio ai costi, sempre.', body: 'Essendo imprenditore cerco di ottenere il massimo con il budget disponibile. La lean è una forma di rispetto, non una limitazione.' },
  { n: '06', title: 'Valore prima, ricchezza dopo.', body: 'La ricchezza è una conseguenza. Il mio focus è dare valore ai clienti e costruire un ambiente sano per i collaboratori. Il resto arriva.' },
];

function Values() {
  return (
    <section id="values" className="section-light" data-mood="light">
      <div className="container">
        <Reveal className="values-intro">
          <Eyebrow>Chi sono</Eyebrow>
          <h2 style={{ marginTop: 20 }}>Come <em>lavoro</em>, come<br/>prendo decisioni.</h2>
        </Reveal>

        <div className="values-list">
          {VALUES.map((v, i) => (
            <Reveal key={v.n} delay={i * 60} className="value">
              <div className="value-num">{v.n}</div>
              <h3>{v.title}</h3>
              <p>{v.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CONFINDUSTRIA
// ============================================================
function Confindustria() {
  return (
    <section className="section-dark confindustria" data-mood="dark">
      <Reveal className="confindustria-inner">
        <div className="confindustria-logo">
          <img src="assets/confindustria.jpeg" alt="Confindustria Emilia Area Centro" />
        </div>
        <Eyebrow>Membership</Eyebrow>
        <h2 style={{ marginTop: 10 }}>Membro attivo del<br/><em>Gruppo Giovani Imprenditori</em></h2>
        <p style={{ marginTop: 18 }}>
          Confindustria Emilia Area Centro. Una comunità di giovani imprenditori del territorio con cui confrontarsi, crescere e portare avanti il tessuto industriale della regione.
        </p>
      </Reveal>
    </section>
  );
}

// ============================================================
// CONTACT
// ============================================================
function Contact() {
  const [status, setStatus] = useState('idle'); // idle | sending | sent | error
  const [form, setForm] = useState({ name: '', email: '', company: '', topic: 'Collaborazione', message: '' });

  function update(k, v) { setForm(f => ({ ...f, [k]: v })); }

  async function submit(e) {
    e.preventDefault();
    setStatus('sending');
    window.gtag && window.gtag('event', 'contact_submit', { topic: form.topic });

    // Web3Forms — invia direttamente a mail@davide.spaggiari.com
    const WEB3FORMS_KEY = '06869b71-12b3-40fa-8db6-f243937496a6';

    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          access_key: WEB3FORMS_KEY,
          subject: `[Sito] ${form.topic} — ${form.name}`,
          from_name: form.name,
          replyto: form.email,
          name: form.name,
          email: form.email,
          azienda: form.company || '—',
          interesse: form.topic,
          messaggio: form.message,
        }),
      });
      const data = await res.json();
      if (data.success) {
        setStatus('sent');
      } else {
        fallbackMailto();
      }
    } catch (err) {
      fallbackMailto();
    }
  }

  function fallbackMailto() {
    const subject = encodeURIComponent(`[Sito] ${form.topic} — ${form.name}`);
    const body = encodeURIComponent(
      `Nome: ${form.name}\nEmail: ${form.email}\nAzienda: ${form.company || '—'}\nInteresse: ${form.topic}\n\n${form.message}`
    );
    window.location.href = `mailto:mail@davide.spaggiari.com?subject=${subject}&body=${body}`;
    setStatus('sent');
  }

  return (
    <section id="contact" className="section-dark contact" data-mood="dark">
      <div className="container contact-grid">
        <Reveal className="contact-intro">
          <Eyebrow>Contatti</Eyebrow>
          <h2 style={{ marginTop: 20 }}>Parliamo di<br/>cosa c'è<br/><em>da fare</em>.</h2>
          <p>
            Che tu sia un'azienda che cerca un profilo, un cliente con un'esigenza da risolvere, o un altro imprenditore con cui scambiare due idee — compila il form, rispondo personalmente entro 24 ore.
          </p>
          <div className="contact-direct">
            <a href="Davide_Spaggiari_CV.pdf" download="Davide_Spaggiari_CV.pdf" onClick={(e) => downloadCV(e, 'contact')}>
              <span style={{ color: 'var(--accent)' }}>↓</span> Scarica CV (PDF)
            </a>
            <a href="https://lyteboard.com" target="_blank" rel="noopener noreferrer">
              <span style={{ color: 'var(--accent)' }}>↗</span> Visita lyteboard.com
            </a>
          </div>
        </Reveal>

        <Reveal delay={200}>
          {status === 'sent' ? (
            <div className="contact-form">
              <div className="form-success">
                <span style={{ fontSize: 18 }}>✓</span>
                <div>
                  <strong style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>Messaggio inviato</strong>
                  <span style={{ fontSize: 12, opacity: 0.8 }}>Ti risponderò personalmente entro 24 ore.</span>
                </div>
              </div>
              <button className="form-submit" onClick={() => { setStatus('idle'); setForm({ name: '', email: '', company: '', topic: 'Collaborazione', message: '' }); }}>
                Invia un altro messaggio
              </button>
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit}>
              <div className="form-row">
                <div className="form-field">
                  <label>Nome</label>
                  <input required value={form.name} onChange={e => update('name', e.target.value)} placeholder="Mario Rossi" />
                </div>
                <div className="form-field">
                  <label>Email</label>
                  <input required type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="mario@azienda.it" />
                </div>
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Azienda (opzionale)</label>
                  <input value={form.company} onChange={e => update('company', e.target.value)} placeholder="Azienda S.r.l." />
                </div>
                <div className="form-field">
                  <label>Interesse</label>
                  <select value={form.topic} onChange={e => update('topic', e.target.value)}>
                    <option>Collaborazione</option>
                    <option>Proposta di lavoro</option>
                    <option>Progetto / Cliente</option>
                    <option>Lyteboard</option>
                    <option>Altro</option>
                  </select>
                </div>
              </div>
              <div className="form-field">
                <label>Messaggio</label>
                <textarea required value={form.message} onChange={e => update('message', e.target.value)} placeholder="Raccontami brevemente di cosa si tratta — obiettivi, tempi, budget se ce l'hai." />
              </div>
              <button type="submit" className="form-submit" disabled={status === 'sending'}>
                {status === 'sending' ? 'Invio…' : <>Invia messaggio <Arrow /></>}
              </button>
            </form>
          )}
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer>
      <span>© 2026 Davide Spaggiari · Vignola (MO)</span>
      <span>Sito costruito in autonomia, sera dopo sera.</span>
    </footer>
  );
}

Object.assign(window, { Hero, Lyteboard, Experience, Skills, Values, Confindustria, Contact, Footer });

// Force a real download even if the preview host serves the file with a wrong
// content-type (in production any hosting serves PDFs correctly).
async function downloadCV(e, source) {
  if (e && e.preventDefault) e.preventDefault();
  window.gtag && window.gtag('event', 'cv_download', { source: source || 'unknown' });
  try {
    const res = await fetch('Davide_Spaggiari_CV.pdf');
    const buf = await res.arrayBuffer();
    const blob = new Blob([buf], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'Davide_Spaggiari_CV.pdf';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(url), 2000);
  } catch (err) {
    // Fallback: open the file in a new tab
    window.open('Davide_Spaggiari_CV.pdf', '_blank');
  }
}
window.downloadCV = downloadCV;