/* global React */
const eduStyles = {
  section: { background: 'var(--bg-1)' },
  grid: {
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--s-7)',
    paddingTop: 'var(--s-5)',
  },
  col: { display: 'flex', flexDirection: 'column', gap: 'var(--s-3)' },
  colLabel: { fontSize: 11, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)', paddingBottom: 'var(--s-3)', borderBottom: 'var(--border-hair)' },
  item: { display: 'flex', flexDirection: 'column', gap: 2, paddingTop: 'var(--s-3)' },
  itemTitle: { fontSize: 15, fontWeight: 500, color: 'var(--fg-1)' },
  itemMeta: { fontSize: 13, color: 'var(--fg-2)' },
  itemSub: { fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.45 },
};

function Education() {
  return (
    <section id="background" className="section-pad" style={eduStyles.section}>
      <div className="container">
        <SectionHead index="05 / Background" title="Background."/>
        <div style={eduStyles.grid} className="edu-grid reveal-group">
          <div style={eduStyles.col} className="reveal">
            <span style={eduStyles.colLabel}>Education</span>
            <div style={eduStyles.item}>
              <span style={eduStyles.itemTitle}>BSc Computer Science</span>
              <span style={eduStyles.itemMeta}>Vrije Universiteit Amsterdam · 2017 – 2020 · 8.1 GPA</span>
              <span style={eduStyles.itemSub}>Thesis: <em>Analysing the Kafka Producer and Benchmarking its Performance</em> (9/10). Minor: Data Science.</span>
            </div>
            <div style={eduStyles.item}>
              <span style={eduStyles.itemTitle}>BBA</span>
              <span style={eduStyles.itemMeta}>IMM Graduate School of Marketing · Cape Town · 2012 – 2015</span>
            </div>
          </div>
          <div style={eduStyles.col} className="reveal">
            <span style={eduStyles.colLabel}>Certifications</span>
            <div style={eduStyles.item}>
              <span style={eduStyles.itemTitle}>Generative AI with LLMs</span>
              <span style={eduStyles.itemMeta}>DeepLearning.AI & AWS · 2024</span>
            </div>
            <div style={eduStyles.item}>
              <span style={eduStyles.itemTitle}>Databricks Certified Data Engineer Professional</span>
              <span style={eduStyles.itemMeta}>Databricks · 2023</span>
            </div>
          </div>
          <div style={eduStyles.col} className="reveal">
            <span style={eduStyles.colLabel}>Languages</span>
            <div style={eduStyles.item}>
              <span style={eduStyles.itemTitle}>English</span>
              <span style={eduStyles.itemMeta}>Native</span>
            </div>
            <div style={eduStyles.item}>
              <span style={eduStyles.itemTitle}>Dutch</span>
              <span style={eduStyles.itemMeta}>Professional working</span>
            </div>
            <div style={eduStyles.item}>
              <span style={eduStyles.itemTitle}>Afrikaans</span>
              <span style={eduStyles.itemMeta}>Native</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .edu-grid { grid-template-columns: 1fr !important; gap: var(--s-6) !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Contact ---------------------------------------------------- */
const contactStyles = {
  section: {
    background: 'var(--latus-dark-blue)',
    color: 'var(--latus-off-white)',
    position: 'relative',
    overflow: 'hidden',
  },
  inner: { position: 'relative', zIndex: 1 },
  index: { fontSize: 12, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(250,250,250,0.5)' },
  title: {
    fontSize: 'clamp(40px, 6vw, 96px)',
    fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 0.98,
    margin: 'var(--s-4) 0 0 0',
    color: 'var(--latus-off-white)',
    maxWidth: 1100,
  },
  lines: {
    display: 'flex', alignItems: 'center', flexWrap: 'wrap',
    margin: 'var(--s-5) 0 0 0',
    fontSize: 15, color: 'rgba(250,250,250,0.75)', fontWeight: 300, letterSpacing: 0,
  },
  link: {
    color: 'var(--latus-off-white)', textDecoration: 'none', fontWeight: 400,
    borderBottom: '1px solid rgba(250,250,250,0.3)', paddingBottom: 1,
  },
  ctaRow: { display: 'flex', gap: 'var(--s-3)', flexWrap: 'wrap', alignItems: 'center', margin: 'var(--s-6) 0 0 0' },
  footer: {
    marginTop: 'var(--s-10)', paddingTop: 'var(--s-5)',
    borderTop: '1px solid rgba(250,250,250,0.12)',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontSize: 12, color: 'rgba(250,250,250,0.45)',
    flexWrap: 'wrap', gap: 'var(--s-3)',
  },
  bgMark: {
    position: 'absolute', right: -120, bottom: -160, width: 540, height: 540,
    opacity: 0.06, pointerEvents: 'none',
  },
};

function Contact() {
  const now = new Date();
  const monthYear = now.toLocaleString('en-US', { month: 'long', year: 'numeric' });
  return (
    <section id="contact" className="section-pad" style={contactStyles.section}>
      <svg style={contactStyles.bgMark} viewBox="0 0 200 200" aria-hidden="true">
        <g fill="none" stroke="var(--latus-off-white)" strokeWidth="1.25">
          <rect x="10" y="10" width="180" height="180"/>
          <rect x="10" y="10" width="180" height="120"/>
          <rect x="10" y="10" width="180" height="60"/>
          <path d="M10 70 Q 100 70 190 130" strokeWidth="1.5"/>
        </g>
      </svg>
      <div className="container" style={contactStyles.inner}>
        <div className="reveal">
          <span style={contactStyles.index}>06 / Contact</span>
        </div>

        <h2 style={contactStyles.title} className="reveal">
          Get in touch.
        </h2>

        <p style={{ margin: 'var(--s-4) 0 0 0', fontSize: 15, color: 'rgba(250,250,250,0.6)', fontWeight: 300, letterSpacing: 0 }} className="reveal">
          Remote from Portugal · Monthly onsite in Amsterdam
        </p>

        <div style={contactStyles.ctaRow} className="reveal">
          <Button variant="inverse" href="#" icon={<ArrowRight/>}>Book a 30-min intro call</Button>
        </div>

        <div style={contactStyles.lines} className="reveal">
          <a href="mailto:devos@latus.ai" style={contactStyles.link}>devos@latus.ai</a>
          <span style={{ color: 'rgba(250,250,250,0.4)', padding: '0 12px' }}>·</span>
          <a href="https://linkedin.com/in/de-vos-meaker" target="_blank" rel="noreferrer" style={contactStyles.link}>linkedin.com/in/de-vos-meaker</a>
        </div>

        <div style={contactStyles.footer}>
          <span>© De Vos Meaker · Built with Latus · Updated {monthYear}</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Education, Contact });