/* global React, ReactDOM */

function Header() {
  return (
    <header className="site-header">
      <div className="container header-inner">
        <div className="brand">
          <img className="brand-logo" src="./images/baileyai_logo_text.png" alt="Bailey AI Consulting logo" />
          <span className="brand-name">Bailey AI Consulting GmbH</span>
        </div>
        <nav className="nav">
          <a href="#services">Services</a>
          <a href="#experience">Experience</a>
          <a href="#contact">Contact</a>
          <a href="./impressum.html">Impressum</a>
        </nav>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container hero-inner">
        <h1>Build and scale with Large Language Models</h1>
        <p>
          Senior engineering leadership for LLM products and distributed systems. From
          research to production, with reliability at global scale.
        </p>
        <div className="cta-row">
          <a className="btn primary" href="#contact">Get in touch</a>
          <a className="btn" href="#experience">See experience</a>
        </div>
      </div>
    </section>
  );
}

function Services() {
  const items = [
    {
      title: 'LLM Product Strategy',
      desc:
        'Roadmapping, feasibility, and technical consultation for LLM-powered products.'
    },
    {
      title: 'Architecture & Infrastructure',
      desc:
        'Designing scalable, reliable systems for LLM products and processes.'
    },
    {
      title: 'Evaluation & Experimentation',
      desc:
        'Human-in-the-loop pipelines, A/B testing, and safety guardrails.'
    },
    {
      title: 'AI Assisted Development',
      desc:
        'Advice and guidance on using AI to assist with in-house development tasks.'
    },
  ];

  return (
    <section id="services" className="section">
      <div className="container">
        <h2>Services</h2>
        <div className="cards">
          {items.map((it) => (
            <div className="card" key={it.title}>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Experience() {
  return (
    <section id="experience" className="section alt">
      <div className="container">
        <h2>Experience</h2>
        <div className="xp">
          <div className="xp-item">
            <div className="xp-meta">Google Switzerland GmbH — Zurich</div>
            <div className="xp-role">Senior Software Engineer (2006–2025)</div>
            <ul>
              <li>
                Led core infrastructure for Bard/Gemini launches to 100M+ users; model
                release pipelines; configuration systems for Gemini model family.
              </li>
              <li>
                Architected features for Google Assistant including dialog management,
                internationalization across 20+ locales.
              </li>
              <li>
                Built internal systems for Google Search and Maps.
              </li>
            </ul>
          </div>
          <div className="xp-item">
            <div className="xp-meta">Canon Research Centre Europe — UK</div>
            <div className="xp-role">Researcher (2001–2006)</div>
            <ul>
              <li>
                R&D in document intelligence and information retrieval; statistical
                analysis and summarization.
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact" className="section">
      <div className="container">
        <h2>Contact</h2>
        <p>
          Email:{' '}
          <a href="mailto:contact@baileyaiconsulting.com">contact@baileyaiconsulting.com</a>
        </p>
        <p>
          LinkedIn:{' '}
          <a
            href="https://www.linkedin.com/in/alex-bailey-8522962/"
            target="_blank"
            rel="noreferrer noopener"
          >
            linkedin.com/in/alex-bailey-8522962
          </a>
        </p>
        <p>
          Location: Wollerau, Switzerland
        </p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container footer-inner">
        <div>
          © {new Date().getFullYear()} Bailey AI Consulting GmbH
        </div>
        <div className="footer-links">
          <a href="#services">Services</a>
          <a href="#experience">Experience</a>
          <a href="#contact">Contact</a>
          <a href="./impressum.html">Impressum</a>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Header />
      <main>
        <Hero />
        <Services />
        <Experience />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);