/* The Author EN */
/* global React */

const TIMELINE_EN = [
  ['1993–1997', 'Co-founder · ViVi Software', 'Genova', 'Object database tooling. Acquired by Object Design.'],
  ['1997–2001', 'Vice President Product Management · Object Design', 'Burlington, MA', 'First US experience. Part of the IPO and the Nasdaq crash.'],
  ['2001–2005', 'Vice President · BEA Systems', 'Seattle / San Jose', 'J2EE, web application infrastructure. Adam Bosworth\'s team.'],
  ['2005–2008', 'Vice President · Oracle Fusion Middleware', 'Redwood Shores', 'Java platform, enterprise middleware.'],
  ['2008–2009', 'Vice President · KEAS', 'San Francisco', 'Health startup with Adam Bosworth. First meeting with Chris York.'],
  ['2009–2012', 'Vice President · VMware', 'Palo Alto', 'Virtualization and cloud transition.'],
  ['2012–2017', 'Chief Marketing Officer · MobileIron', 'Mountain View', 'Mobile enterprise. IPO in 2014.'],
  ['2017–2018', 'Chief Marketing Officer · Skyhigh Networks', 'Campbell', 'Cloud security. Acquired by McAfee.'],
  ['2018–2020', 'Interim Chief Marketing Officer · McAfee', 'Santa Clara', 'Cloud security division under Chris Young.'],
  ['2020–2024', 'Vice President · VMware Cross-Cloud Services', 'Palo Alto', 'Return to VMware with Raghu Raghuram.'],
  ['2024', 'Retirement from corporate life', '', 'Mentoring, writing, travel, music.'],
];

function AutoreHero() {
  return (
    <section className="autore-hero-section">
      <div className="autore-hero-grid">
        <img src="../assets/author-photo-duotone.jpg" className="img-duotone" alt="Vittorio Viarengo" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', objectPosition: 'center 25%', borderRadius: 2 }} />
        <div>
          <div className="eyebrow accent eyebrow-dot">The Author</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 }}>
            From Genova, in the US since 1998 and in Silicon Valley since 2002. Held senior R&D and Marketing roles at 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">Biography</div>
        <div className="body-serif" style={{ marginTop: 32, fontSize: 20, lineHeight: 1.65, fontVariationSettings: '"opsz" 14' }}>
          <p style={{ margin: '0 0 24px' }}>
            Vittorio Viarengo was born in Genova in 1965. The son of a baker and a farmer, he worked in the family bakery from the age of eleven. He studied computer science at the University of Genova and began his career at the CNR, in the Institute for Educational Technology under Professor Giorgio Olimpo.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            In 1993 he co-founded ViVi Software with Carlo Innocenti, in a basement on Corso Dogali in Genova. In 1997 the company was acquired by Object Design of Boston. In 2002 he moved to Silicon Valley.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Over the following twenty-five years he held senior R&D and Marketing roles at some of the companies that defined modern software: BEA Systems, Oracle, VMware (twice), MobileIron, Skyhigh Networks, McAfee.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            He worked alongside mentors such as Adam Bosworth, Tod Nielsen, Paul Maritz and Raghu Raghuram. He was part of teams that built products that grew from a few tens of thousands of dollars to hundreds of millions.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Today he has stepped back from corporate life. He mentors young entrepreneurs through Genoa ES Business School and the Silicon Valley Study Tour. He lives in San Jose, California with his wife Paola.
          </p>
          <p style={{ margin: 0, fontStyle: 'italic' }}>
            <em>Largo ai Giovani</em> is his first book.
          </p>
        </div>
      </div>
    </section>
  );
}

function CareerArc() {
  return (
    <section className="career-section">
      <div className="container-narrow">
        <div className="eyebrow">Career</div>
        <h2 className="h2" style={{ marginTop: 14 }}>Thirty years in eleven chapters<span className="accent-dot">.</span></h2>
        <div style={{ marginTop: 64, borderLeft: '1px solid var(--rule)', paddingLeft: 32 }}>
          {TIMELINE_EN.map((t, i) => {
            const isLast = i === TIMELINE_EN.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">
        <div className="eyebrow">Contact</div>
        <h3 className="h3" style={{ marginTop: 12 }}>Get in touch.</h3>
        <p className="body-sans" style={{ marginTop: 14, maxWidth: 360 }}>For speaking, interviews, mentorship, or just to say hello.</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>
    </section>
  );
}

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