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

const TIMELINE = [
  ['1993–1997', 'Co-fondatore · ViVi Software', 'Genova', 'Sviluppo di tool per database a oggetti. Acquisita da Object Design.'],
  ['1997–2001', 'Vice President Product Management · Object Design', 'Burlington, MA', "Prima esperienza americana. Partecipazione all'IPO e al crash del Nasdaq."],
  ['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', 'Ritiro a vita privata', '', 'Mentoring, scrittura, viaggi, musica.'],
];

function AutoreHero() {
  return (
    <section className="autore-hero-section">
      <div className="autore-hero-grid">
        <picture>
          <source type="image/webp" srcSet="/assets/author-photo-duotone-220.webp 220w, /assets/author-photo-duotone-380.webp 380w, /assets/author-photo-duotone-440.webp 440w, /assets/author-photo-duotone-560.webp 560w" sizes="(max-width:768px) 280px, 380px" />
          <img src="/assets/author-photo-duotone.jpg" className="img-duotone" 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 }}>
            Genovese, negli USA dal 1998 e in Silicon Valley dal 2001. Ha ricoperto cariche al più alto livello tra R&D e Marketing in BEA Systems, Oracle, VMware, MobileIron, Skyhigh, McAfee.
          </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. Figlio di un panettiere e di una contadina, ha lavorato nel panificio di famiglia dagli undici anni in su. Ha studiato informatica all'Università di Genova e ha iniziato a lavorare al CNR, nell'Istituto per le Tecnologie Didattiche del professor Giorgio Olimpo.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Nel 1993 ha co-fondato ViVi Software con Carlo Innocenti, in uno scantinato di Corso Dogali a Genova. Nel 1997 l'azienda è stata acquisita da Object Design di Boston, dove Vittorio si è trasferito come Vice President Product Management. Nel 2001 si trasferisce in Silicon Valley.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Nei venticinque 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), MobileIron, Skyhigh Networks, McAfee.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Ha lavorato con mentori come Adam Bosworth, Tod Nielsen, Paul Maritz e Raghu Raghuram. Ha fatto parte di team che hanno creato prodotti che sono cresciuti da poche decine di migliaia di dollari fino a centinaia di milioni.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Oggi si è ritirato dalla vita lavorativa attiva. Segue e consiglia giovani imprenditori tramite Genoa ES Business School e il Silicon Valley Study Tour. Vive a San Jose, in California, con la moglie Paola.
          </p>
          <p style={{ margin: 0, fontStyle: 'italic' }}>
            <em>Largo ai Giovani</em> è il suo primo libro.
          </p>
        </div>
      </div>
    </section>
  );
}

function CareerArc() {
  return (
    <section className="career-section">
      <div className="container-narrow">
        <div className="eyebrow">Carriera</div>
        <h2 className="h2" style={{ marginTop: 14 }}>Trent'anni in undici tappe<span className="accent-dot">.</span></h2>

        <div style={{ marginTop: 64, 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>
      </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 speaking, interviste, mentorship o semplicemente per dire la tua.</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 />);