// =============================================================================
// Astovia · Home & About pages
// =============================================================================

function HomeMeta() {
  return (
    <div className="hero-meta">
      <div>// 00 · Practice</div>
      <div>● Astovia — strategic intelligence</div>
      <div>Munich · Zürich · Amsterdam</div>
      <div>Hewlett-Packard alumni</div>
    </div>);

}

function Hero({ go }) {
  return (
    <section className="hero" data-screen-label="Hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <h1>
              Scale faster.<br />
              Avoid the <span className="serif-em">mistakes.</span>
            </h1>
          </div>
          <div>
            <p className="hero-sub">
              <span className="b">30 years of Fortune 100 experience.</span><br />
              Flexible, without the overhead.
            </p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 28 }}>
              <a className="btn btn-primary" onClick={() => go('contact')}>Get in touch</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function ThreeModes({ go }) {
  const modes = [
  { id: 'advisory', n: '01', title: 'Startup Advisory', promise: 'Avoid the expensive lesson.', audience: 'Startups · Scale-ups',
    body: 'Benefit from lessons-learned and avoid mistakes others made. Scale faster without breaking the bank and delight your customers while doing so.' },
  { id: 'interim', n: '02', title: 'Interim Leadership', promise: 'Get a VP-level leader now.', audience: 'Any company',
    body: 'We step in for fractional or full-time roles. You keep your flexibility and get the experience and seniority of a Fortune 100 executive.' },
  { id: 'transformation', n: '03', title: 'Transformation Leadership', promise: 'Complex change, cleanly executed.', audience: '500+ employees',
    body: 'Digital and AI transformation. Platform migrations. Customer-ops overhauls. Org redesigns. We have led these at massive scale and know what works, what fails and how to keep people aligned.' }];

  return (
    <section className="section" data-screen-label="Three modes">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow"></span>
            <h2>Three ways<br /><span className="serif-em">we help you</span></h2>
          </div>
        </div>

        <div className="modes">
          {modes.map((m) =>
          <a key={m.id} className="mode" onClick={() => go(m.id)}>
              <h3>{m.title}</h3>
              <div className="promise">{m.promise}</div>
              <p className="body">{m.body}</p>
              <span className="learn">Learn more →</span>
            </a>
          )}
        </div>
      </div>
    </section>);

}

function AboutBlock({ withHeader = true }) {
  return (
    <section className="section" id="about" data-screen-label="About">
      <div className="container">
        {withHeader &&
        <div className="section-head">
            <div>
              <span className="eyebrow"></span>
              <h2>about us<span className="serif-em"></span></h2>
            </div>
            <p>
              ASTOVIA was created to share the learnings from decades of executive leadership.
              One operator, calibrated to your situation — without the overhead of a firm.
            </p>
          </div>
        }

        <div className="two-col reverse" style={{ marginBottom: 64 }}>
          <div>
            <div className="mono" style={{ marginBottom: 18 }}></div>
            <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(28px, 3.6vw, 44px)', letterSpacing: '-0.03em', margin: '0 0 22px', color: 'var(--paper)' }}>

            </h3>
          </div>
          <ul className="bullets">
            <li><span className="k">01</span><span>Pre- and Post-Sales Operations</span></li>
            <li><span className="k">02</span><span>GTM-, Sales-, and Channel-Enablement and Transformation</span></li>
            <li><span className="k">03</span><span>Digital Engagement and Retention of millions of Subscribers</span></li>
          </ul>
        </div>

        <div className="about-grid">
          <div>
            <div className="about-portrait">
              <span className="tag">Founding Partner</span>
              <img src="assets/alex-stoll.jpg" alt="Alex Stoll" />
            </div>
            <div className="about-name">
              <div className="n">Alex Stoll</div>
              <div className="r">FOUNDING PARTNER</div>
              <div className="links">
                <a aria-label="LinkedIn" title="LinkedIn">
                  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zM9 9.5h3.8v1.55h.05a4.16 4.16 0 0 1 3.74-2.05c4 0 4.74 2.63 4.74 6.05V21h-4v-4.95c0-1.18-.02-2.7-1.64-2.7-1.64 0-1.89 1.28-1.89 2.61V21H9z" /></svg>
                </a>
                <a aria-label="Email" title="Email" href="mailto:alex.stoll@astovia.de">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 6h18v12H3z" /><path d="M3 6l9 7 9-7" /></svg>
                </a>
              </div>
            </div>
          </div>

          <div>
            <p className="about-quote">
               <span className="serif-em"></span> 
            
            </p>
            <p className="about-body">
              Alex Stoll is an executive leader with global experience in Sales- and Channel
              Enablement, Customer Service and Digital Customer Success Management of 13 million
              subscribers. He excels at leading diverse teams through large-scale tech, platform
              or operating model transformations.
            </p>
            <p className="about-body">
              He developed his superpowers during three decades at the iconic company
              Hewlett-Packard, and is known for maximizing teams, persistence in execution,
              and positivity in times of transformation.
            </p>
            <p className="about-body">
              In his 15 years at VP level, he has had responsibility for $1B+ budgets, managed
              up to 2 500 employees, led countless transformations, and brought to life a
              company-wide app with more than 40 million monthly users.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--rule)', marginTop: 24 }}>
              {[
              ['30y', 'IN PRACTICE'],
              ['$1B+', 'BUDGETS MANAGED'],
              ['2 500', 'EMPLOYEES LED'],
              ['13m', 'SUBSCRIBERS'],
              ['40m+', 'MONTHLY USERS']].
              map(([v, l], i) =>
              <div key={l} style={{
                padding: '22px 18px 16px',
                borderLeft: i % 3 === 0 ? 'none' : '1px solid var(--rule)',
                borderTop: i >= 3 ? '1px solid var(--rule)' : 'none'
              }}>
                  <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 30, letterSpacing: '-0.03em', color: 'var(--bronze)', lineHeight: 1 }}>{v}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--paper-50)', marginTop: 8 }}>↳ {l}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function HomeCtaStrip({ go }) {
  return (
    <section className="section section--surface section--narrow" style={{ borderBottom: 'none' }}>
      <div className="container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24, textAlign: 'center' }}>
        <div className="eyebrow"></div>
        <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(36px, 5vw, 60px)', letterSpacing: '-0.03em', margin: 0, lineHeight: 1.0, color: 'var(--paper)' }}>
          Ready to <span className="serif-em">explore?</span>
        </h2>
        <p style={{ fontSize: 16, color: 'var(--paper-70)', maxWidth: 560, margin: 0, lineHeight: 1.6 }}>


        </p>
        <a className="btn btn-primary" onClick={() => go('contact')} style={{ marginTop: 8 }}>Get in touch</a>
      </div>
    </section>);

}

function HomePage({ go }) {
  return (
    <main data-screen-label="Home">
      <Hero go={go} />
      <ThreeModes go={go} />
      <AboutBlock />
      <HomeCtaStrip go={go} />
    </main>);

}

function AboutPage({ go }) {
  return (
    <main data-screen-label="About us">
      <section className="page-header" data-screen-label="About header">
        <div className="container">
          <div className="page-header-grid">
            <div className="meta" style={{ gridColumn: 'span 3' }}>// 01 · The firm</div>
            <div className="meta" style={{ gridColumn: 'span 6' }}>● ASTOVIA — strategic intelligence for operators</div>
            <div className="meta" style={{ gridColumn: 'span 3', textAlign: 'right' }}>est. 2024 · Hewlett-Packard alumni</div>
          </div>
          <div className="two-col" style={{ alignItems: 'end' }}>
            <h1>about us<span className="serif-em">.</span></h1>
            <p className="lede">
              ASTOVIA was created to share the learnings from decades of executive leadership —
              applied to the situation in front of you, without the overhead of a firm.
            </p>
          </div>
        </div>
      </section>
      <AboutBlock withHeader={false} />
      <HomeCtaStrip go={go} />
    </main>);

}

Object.assign(window, { HomePage, AboutPage });