/* L'autore — extended bio + career arc */
/* global React */

const TIMELINE = [
  ['1993–1997', 'Co-fondatore · ViVi Software', 'Genova', 'Tool per database a oggetti. Acquisita da Object Design nel 1997.'],
  ['1997–2001', 'Object Design', 'Genova / Burlington, MA', 'Dopo l’acquisizione, prima esperienza americana. Il crash del Nasdaq, marzo 2000.'],
  ['2001–2005', 'Vice President · BEA Systems', 'Seattle / San Jose', 'J2EE, infrastruttura web applicativa. Team di Adam Bosworth.'],
  ['2005–2008', 'Vice President · Oracle Fusion Middleware', 'Redwood Shores', 'Java platform, middleware enterprise.'],
  ['2008–2009', 'Vice President · KEAS', 'San Francisco', 'Startup healthcare con Adam Bosworth. Incontro con Chris York.'],
  ['2009–2012', 'Vice President · VMware', 'Palo Alto', 'Virtualizzazione e transizione al cloud.'],
  ['2012–2017', 'Chief Marketing Officer · MobileIron', 'Mountain View', 'Mobile enterprise. IPO nel 2014.'],
  ['2017–2018', 'Chief Marketing Officer · Skyhigh Networks', 'Campbell', 'Cloud security. Acquisita da McAfee.'],
  ['2018–2020', 'Interim Chief Marketing Officer · McAfee', 'Santa Clara', 'Cloud security division sotto Chris Young.'],
  ['2020–2024', 'Vice President · VMware Cross-Cloud Services', 'Palo Alto', 'Ritorno in VMware con Raghu Raghuram.'],
  ['2024', 'Padrone del suo tempo', '', 'Musica, sport, viaggi in camper. Scrive.'],
];

function AutoreHero() {
  return (
    <section className="autore-hero-section">
      <div className="autore-hero-grid">
        <picture>
          <source type="image/webp" srcSet="/assets/author-photo-v2-220.webp 220w, /assets/author-photo-v2-380.webp 380w, /assets/author-photo-v2-440.webp 440w, /assets/author-photo-v2-560.webp 560w" sizes="(max-width:768px) 280px, 380px" />
          <img src="/assets/author-photo-v2.jpg" alt="Vittorio Viarengo" loading="eager" fetchPriority="high" decoding="async" width="380" height="475" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', objectPosition: 'center 25%', borderRadius: 2 }} />
        </picture>
        <div>
          <div className="eyebrow accent eyebrow-dot">L'autore</div>
          <h1 className="h1" style={{ marginTop: 22, fontWeight: 600, fontSize: 'clamp(40px, 5.4vw, 76px)' }}>Vittorio<br/>Viarengo.</h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: 560 }}>
            Cresciuto nel forno dei genitori a Genova. Imprenditore ed executive nella Silicon Valley, tra ViVi Software, Oracle, VMware e altre. Oggi vive in California con la moglie Paola.
          </p>
        </div>
      </div>
    </section>
  );
}

function Bio() {
  return (
    <section className="bio-section">
      <div className="container-read">
        <div className="eyebrow">Biografia</div>
        <div className="body-serif" style={{ marginTop: 32, fontSize: 'clamp(19px, 1.6vw, 22px)', lineHeight: 1.6, fontVariationSettings: '"opsz" 14' }}>
          <p style={{ margin: '0 0 24px' }}>
            Vittorio Viarengo è nato a Genova nel 1965. È cresciuto nel forno dei genitori, nei vicoli di Genova, dove si cominciava a lavorare quando gli altri dormivano. Ha studiato al Conservatorio Niccolò Paganini (clarinetto) e al liceo scientifico. Non ha finito il conservatorio e ha lasciato l’università (Ingegneria) — al terzo anno il professor Giorgio Olimpo lo coinvolse in un progetto di ricerca all’Istituto per le Tecnologie Didattiche del CNR.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Nel 1993 ha co-fondato ViVi Software con Carlo Innocenti, detto Minollo, in un seminterrato di Corso Dogali a Genova, senza riscaldamento né bagno. Sviluppavano tool per database a oggetti. Nel 1997 l’azienda è stata acquisita da Object Design (Burlington, Massachusetts). Tra il 2000 e il 2001 si è trasferito in Silicon Valley, dove vive tuttora.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Negli anni successivi ha ricoperto ruoli senior in R&D e Marketing in alcune delle aziende che hanno definito il software moderno: BEA Systems, Oracle, VMware (due volte), KEAS, MobileIron, Skyhigh Networks, McAfee.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Ha lavorato accanto ad Adam Bosworth, Tod Nielsen, Paul Maritz, Raghu Raghuram, Larry Ellison, Chris Young. Ha visto quattro acquisizioni e alcune IPO dall’interno.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Oggi si divide tra musica, sport e viaggi in camper. Insegna a fare pane e focaccia su <a className="link-underline" href="https://vivalafocaccia.com" target="_blank" rel="noopener">VivaLaFocaccia.com</a>. Vive in California con la moglie Paola.
          </p>
          <p style={{ margin: 0, fontStyle: 'italic' }}>
            <em>Dalla Focaccia alla Silicon Valley</em> è il suo primo libro.
          </p>
        </div>
      </div>
    </section>
  );
}

function CareerArc() {
  return (
    <section className="career-section">
      <div className="container-narrow">
        <details style={{ marginTop: 0 }}>
          <summary style={{
            cursor: 'pointer',
            listStyle: 'none',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 12,
            fontFamily: 'var(--font-mono)',
            fontSize: 13,
            letterSpacing: '0.14em',
            textTransform: 'uppercase',
            color: 'var(--accent)',
            fontWeight: 600,
            padding: '10px 0',
          }}>
            <span aria-hidden="true" style={{ fontSize: 14 }}>▸</span>
            Il percorso professionale
          </summary>
          <h2 className="h2" style={{ marginTop: 24 }}>Le tappe<span className="accent-dot">.</span></h2>

          <div style={{ marginTop: 48, borderLeft: '1px solid var(--rule)', paddingLeft: 32 }}>
            {TIMELINE.map((t, i) => {
              const isLast = i === TIMELINE.length - 1;
              return (
                <div key={i} style={{ padding: '28px 0', position: 'relative', borderBottom: !isLast ? '1px solid var(--rule)' : 'none' }}>
                  <div style={{ position: 'absolute', left: -36, top: 40, width: 9, height: 9, borderRadius: '50%', background: isLast ? 'var(--accent)' : 'var(--ink)' }} />
                  <div className="career-timeline-item">
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent)', fontWeight: 500, letterSpacing: '0.02em' }}>{t[0]}</div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 22, lineHeight: 1.25, letterSpacing: '-0.014em', fontVariationSettings: '"opsz" 60' }}>
                        {t[1]}
                        {t[2] && <span style={{ color: 'var(--ink-muted)', fontWeight: 400, fontStyle: 'italic' }}> — {t[2]}</span>}
                      </div>
                      <div className="body-sans" style={{ marginTop: 8, fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{t[3]}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </details>
      </div>
    </section>
  );
}

function ContactBlock() {
  return (
    <section className="contact-section">
      <div className="container-narrow contact-grid">
        <div>
          <div className="eyebrow">In inglese</div>
          <h3 className="h3" style={{ marginTop: 12 }}>Working in English?</h3>
          <p className="body-sans" style={{ marginTop: 14, maxWidth: 360 }}>An English bio for international press and podcasts.</p>
          <div style={{ marginTop: 20 }}>
            <a href="en/about.html" className="btn btn-secondary">About in English <span className="btn-arrow">→</span></a>
          </div>
        </div>
        <div>
          <div className="eyebrow">Contatti</div>
          <h3 className="h3" style={{ marginTop: 12 }}>Scrivimi.</h3>
          <p className="body-sans" style={{ marginTop: 14, maxWidth: 360 }}>Per interviste, richieste stampa, o proposte editoriali.</p>
          <div style={{ marginTop: 20, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="mailto:vittorio@gmail.com" className="btn btn-primary">vittorio@gmail.com</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function AutorePage() {
  return (
    <Site page="autore">
      <main data-screen-label="autore">
        <AutoreHero />
        <Bio />
        <CareerArc />
        <ContactBlock />
      </main>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<AutorePage />);