// About view — content from freksen.com/about, styled to match case-page vocabulary

function AboutView({ navigate }) {
  return (
    <main className="about-view">

      {/* ── Intro: portrait + lede ── */}
      <section className="about-intro">
        <div className="about-portrait">
          <window.MediaPlaceholder
            kind="image"
            tone={0}
            src="uploads/markus_portrait.png"
          />
        </div>

        <div className="about-lede">
          <h1 className="about-name">markus freksen</h1>
          <p className="about-text">
            Copenhagen-born and raised graphic designer and art director with a deep discomfort when it comes to self-promotional writing.
          </p>
          <p className="about-text">Anyway…</p>
          <p className="about-text">
            I work from the belief that the idea is king — preferably rooted in human insight. That I'm able to execute once the idea is in place is best considered a bonus.
          </p>
          <p className="about-text">
            I can work alone, but my own company can be painfully boring, so I prefer bouncing ideas around with other talented people.
          </p>
          <p className="about-text">
            I'm calm by nature, positive by default, and a world champion in bad ideas. Luckily, a few of them turn out pretty good.
          </p>
        </div>
      </section>

      <AboutSection
        label="awards & recognitions"
        items={[
          { title: "Gold, Danish Digital Award — Best Website", year: "2026", href: "https://danishdigitalaward.dk/project/veo-every-website-visit-game-on/" },
          { title: "Silver, Danish Digital Award — Best in Digital Design (UX/UI)", year: "2026", href: "https://danishdigitalaward.dk/project/veo-turning-every-visit-into-game-on-1/" },
          { title: "Shortlist, YCCA Digital", year: "2026", href: "https://creativecircle.dk/yccaarbejder/currensee/" },
          { title: "Shortlist, Our Sustainable Future", year: "2026", href: "https://creativecircle.dk/yccaarbejder/r-i-p/" },
          { title: "Yellow Pencil, D&AD New Blood Awards", year: "2025", href: "https://www.dandad.org/work/new-blood-archive/boundary-bracelets" },
          { title: "Shortlist, Our Sustainable Future",     year: "2025", href: "https://creativecircle.dk/yccaarbejder/do-it-in-the-shower-3/" },
          { title: "2× Shortlist, Creative Conscience",     year: "2025", href: "https://www.creative-conscience.org.uk/shortlisted/?page=1&author=freksen" },
        ]}
      />

      <AboutSection
        label="press"
        items={[
          { title: "Her er de første shortlister fra Creative Circle Awards 2026", year: "Dansk Markedsføring", href: "https://markedsforing.dk/artikler/nyheder/her-er-de-foerste-shortlister-fra-creative-circle-awards-2026/" },
          { title: "Her er de shortlistede i bæredygtig kreativ ungdomskonkurrence", year: "Dansk Markedsføring", href: "https://markedsforing.dk/artikler/nyheder/her-er-de-shortlistede-i-baeredygtig-kreativ-ungdomskonkurrence/" },
          { title: "17 cases shortlistet i bæredygtig ungdomskonkurrence", year: "Dansk Markedsføring", href: "https://markedsforing.dk/artikler/nyheder/17-cases-shortlistet-i-baeredygtig-ungdomskonkurrence/" },
          { title: "Magtdemonstration fra unge danske kreative ved New Blood 2025", year: "Dansk Markedsføring", href: "https://markedsforing.dk/artikler/nyheder/magtdemonstration-fra-unge-danske-kreative-ved-new-blood-2025/" },
          { title: "Sjælden pris til kreativt team fra Den Danske Reklameskole", year: "Dansk Markedsføring", href: "https://markedsforing.dk/artikler/nyheder/sjaelden-pris-til-kreativt-team-fra-den-danske-reklameskole/" },
        ]}
      />

      <AboutSection
        label="experience"
        items={[
          { title: "Veo Technologies, Graphic Designer",   year: "2022 — Today" },
          { title: "Blockbuster, Graphic Designer",        year: "2018 — 2022" },
          { title: "Blockbuster, Graphic Designer Intern", year: "2016 — 2017" },
          { title: "Kontrapunkt, Erhvervspraktikant",      year: "2012" },
        ]}
      />

      <AboutSection
        label="education"
        items={[
          { title: "Idé & Koncept, Den Danske Reklameskole", year: "2025 — 2026" },
          { title: "ADlinjen, Den Danske Reklameskole",      year: "2025" },
          { title: "Mediegrafiker, NEXT København",          year: "2014 — 2018" },
        ]}
      />

    </main>
  );
}

function AboutSection({ label, items }) {
  return (
    <section className="about-section">
      <h2 className="about-section-label">{label}</h2>
      <ul className="about-section-list">
        {items.map((it, i) => {
          const inner = (
            <>
              <span className="about-row-title">{it.title}{it.href && <span className="about-row-arrow"> ↗</span>}</span>
              <span className="about-row-year">{it.year}</span>
            </>
          );
          return (
            <li key={i} className="about-row">
              {it.href ? (
                <a href={it.href} target="_blank" rel="noopener noreferrer" className="about-row-link">{inner}</a>
              ) : inner}
            </li>
          );
        })}
      </ul>
    </section>
  );
}

window.AboutView = AboutView;