import React from 'react'

import {
  CERTIFICATIONS,
  EDUCATION,
  IDENTITY,
  LANGUAGES,
  ROLES,
  ROUTE,
  SKILLS,
  SUMMARY,
  TIERS,
} from '../data/profile.mjs'

const Groups = ({ groups }) => (
  <div className="stack">
    {groups.map((group) => (
      <div className="group" key={group.label}>
        <p className="group__label">{group.label}</p>
        <p className="group__tags">
          {group.items.map((item, i) => (
            <React.Fragment key={item}>
              {i > 0 && '  ·  '}
              <span className="t">{item}</span>
            </React.Fragment>
          ))}
        </p>
      </div>
    ))}
  </div>
)

const SKILL_GROUPS = TIERS.map((tier) => ({
  label: tier.label,
  items: SKILLS.filter((s) => s.tier === tier.id && s.listed !== false).map(
    (s) => s.name
  ),
})).filter((g) => g.items.length)

const CREDENTIAL_GROUPS = [
  { label: 'Education', items: EDUCATION.map((e) => e.title) },
  {
    label: 'Certifications',
    items: CERTIFICATIONS.map((c) => `${c.name} (${c.year})`),
  },
  {
    label: 'Languages',
    items: LANGUAGES.map(([name, level]) => `${name}, ${level}`),
  },
]

// The same facts as the terminal, laid out as a page. It is also what search engines and
// visitors without JavaScript get.
const Classic = () => (
  <div className="wrap">
    <section className="hero">
      <div className="hero__text">
        <h1 className="hero__name">{IDENTITY.name}</h1>
        <p className="hero__lead">
          Data pipelines, data products and the automation that keeps them
          running.
        </p>
        <p className="hero__meta">
          <strong>
            {IDENTITY.title} at {IDENTITY.employer}
          </strong>
          , based in {IDENTITY.location}, with {IDENTITY.experience} across data
          engineering, ML infrastructure and DevOps.
        </p>
        <nav className="actions">
          <a href={`mailto:${IDENTITY.email}`}>{IDENTITY.email}</a>
          <a
            href={IDENTITY.linkedinUrl}
            target="_blank"
            rel="noopener noreferrer"
          >
            LinkedIn
          </a>
        </nav>
      </div>
    </section>

    <section className="section">
      <h2 className="section__label">Profile</h2>
      <div className="prose">
        {SUMMARY.map((text) => (
          <p key={text}>{text}</p>
        ))}
      </div>
    </section>

    <section className="section">
      <h2 className="section__label">Experience</h2>
      <div className="experience">
        <p className="experience__route">
          {ROUTE.map((stop) => stop.place).join(' → ')}
        </p>
        <ol className="roles">
          {ROLES.map((role) => (
            <li
              className={`role${role.live ? ' role--live' : ''}`}
              key={role.id}
            >
              <div className="role__rail" aria-hidden="true">
                <span className="role__node" />
              </div>
              <div className="role__body">
                <p className="role__year">{role.period}</p>
                <div className="role__head">
                  <h3 className="role__co">{role.company}</h3>
                  <span className="role__loc">{role.place}</span>
                </div>
                <p className="role__title">{role.title}</p>
                <p className="role__desc">{role.summary}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>

    <section className="section">
      <h2 className="section__label">Stack</h2>
      <Groups groups={SKILL_GROUPS} />
    </section>

    <section className="section">
      <h2 className="section__label">Credentials</h2>
      <Groups groups={CREDENTIAL_GROUPS} />
    </section>

    <section className="section">
      <h2 className="section__label">Contact</h2>
      <div>
        <p className="contact__intro">
          Always happy to talk about data, ML and platform engineering. Email is
          the fastest way to reach me.
        </p>
        <a className="contact__email" href={`mailto:${IDENTITY.email}`}>
          {IDENTITY.email}
        </a>
        <div className="contact__links">
          <a
            href={IDENTITY.linkedinUrl}
            target="_blank"
            rel="noopener noreferrer"
          >
            LinkedIn
          </a>
        </div>
      </div>
    </section>

    <footer className="colophon">
      <span>
        © {new Date().getFullYear()} {IDENTITY.name}
      </span>
      <span>{IDENTITY.location}</span>
    </footer>
  </div>
)

export default Classic