/* =========================================================================
   Content sections (Direction C, expanded)
   ========================================================================= */
function Arrow() {
  return (
    <svg width="11" height="11" viewBox="0 0 11 11" fill="none" aria-hidden="true">
      <path d="M2 9L9 2M9 2H3.5M9 2V7.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function SecHead({ n, title }) {
  return (
    <div className="sec-head" data-n={n}>
      <h2>{title}</h2>
    </div>);

}

function Sections({ t }) {
  return (
    <main className="reading">
      {/* 01 — Profil / Hero */}
      <section className="section" id="profil">
        <div className="eyebrow"><span className="ey-dot"></span><span className="label">{t.hero.kicker}</span></div>
        <h1 className="hero-h">
          {t.hero.heading[0]} {t.hero.heading[1]}<span className="accent">{t.hero.heading[2]}</span>{t.hero.heading[3]}
        </h1>
        <p className="hero-lede" style={{ fontWeight: "300" }}>{t.hero.lede}</p>
        <div className="prose" style={{ marginTop: 34 }}>
          {t.about.paras.map((p, i) => <p key={i}>{p}</p>)}
        </div>
      </section>

      {/* 02 — Fähigkeiten */}
      <section className="section" id="faehigkeiten">
        <SecHead n="02" title={t.faehigkeiten.title} />
        <p className="sec-intro">{t.faehigkeiten.intro}</p>
        <window.SkillPlay key={t.code} groups={t.faehigkeiten.groups} t={t} />
      </section>

      {/* 03 — Werdegang */}
      <section className="section" id="werdegang">
        <SecHead n="03" title={t.werdegang.title} />
        <div>
          {t.werdegang.jobs.map((j, i) =>
          <div className="job" key={i}>
              <div className="jy">{j.y}</div>
              <div>
                <div className="jrole">{j.role}</div>
                <div className="jorg">{j.org}</div>
                <div className="jnote">{j.note}</div>
              </div>
            </div>
          )}
        </div>
        <div className="label edu-title">{t.werdegang.eduTitle}</div>
        <div>
          {t.werdegang.edu.map((e, i) =>
          <div className="edu" key={i}>
              <div className="ey">{e.y}</div>
              <div>
                <div className="et">{e.t}</div>
                <div className="eo">{e.o}</div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* 04 — Tech-Stack */}
      <section className="section" id="stack">
        <SecHead n="04" title={t.stack.title} />
        <p className="sec-intro">{t.stack.intro}</p>
        <div className="stack-grid">
          {t.stack.groups.map((g, gi) =>
          <div className="stack-card wide" key={gi}>
              <div className="label sc-label">{g.label}</div>
              {g.items.map((it, ii) =>
            <div className="stack-row" key={ii}>
                  <span className="sr-n">{it.n}</span>
                  <span className="sr-d">{it.d}</span>
                </div>
            )}
            </div>
          )}
        </div>
      </section>

      {/* 05 — Interessen */}
      <section className="section" id="interessen">
        <SecHead n="05" title={t.interessen.title} />
        <p className="sec-intro">{t.interessen.intro}</p>
        <div className="int-grid">
          {t.interessen.items.map((it, i) =>
          it.href ? (
            <a className="int-card int-link" key={i} href={it.href} target="_blank" rel="noopener noreferrer">
              <div className="ic-mk"></div>
              <div className="ic-t">{it.t} <Arrow /></div>
              <div className="ic-d">{it.d}</div>
            </a>
          ) : (
            <div className="int-card" key={i}>
              <div className="ic-mk"></div>
              <div className="ic-t">{it.t}</div>
              <div className="ic-d">{it.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 06 — Empfehlungen */}
      <section className="section" id="empfehlungen">
        <SecHead n="06" title={t.empfehlungen.title} />
        <p className="sec-intro">{t.empfehlungen.intro}</p>
        <div>
          {t.empfehlungen.items.map((r, i) =>
          r.href ? (
            <a className="rec" href={r.href} key={i} target="_blank" rel="noopener noreferrer">
              <div className="rec-top">
                <span className="rec-name">{r.name}</span>
                <span className="rec-meta">{r.meta}</span>
              </div>
              <div className="rec-quote">{r.quote}</div>
              <span className="rec-link">{r.link} <Arrow /></span>
            </a>
          ) : (
            <a className="rec" href="#" key={i} onClick={(e) => e.preventDefault()}>
              <div className="rec-top">
                <span className="rec-name">{r.name}</span>
                <span className="rec-meta">{r.meta}</span>
              </div>
              <div className="rec-quote">{r.quote}</div>
              <span className="rec-link">{r.link} <Arrow /></span>
            </a>
          ))}
        </div>
      </section>

      {/* 07 — Kontakt */}
      <section className="section" id="kontakt">
        <SecHead n="07" title={t.kontakt.title} />
        {t.kontakt.intro ? <p className="sec-intro">{t.kontakt.intro}</p> : null}
        <div className="contact-links">
          {t.kontakt.links.map((l, i) =>
          l.url && l.url !== '#' ? (
            <a className="clink" href={l.url} key={i}
               target={l.url.startsWith('mailto:') ? undefined : '_blank'}
               rel={l.url.startsWith('mailto:') ? undefined : 'noopener noreferrer'}>
              <span className="cl-t">{l.t}</span>
              <span className="cl-h">{l.h} <Arrow /></span>
            </a>
          ) : (
            <a className="clink" href="#" key={i} onClick={(e) => e.preventDefault()}>
              <span className="cl-t">{l.t}</span>
              <span className="cl-h">{l.h} <Arrow /></span>
            </a>
          ))}
        </div>
      </section>

      <footer className="colophon">
        <a className="co-logo" href="#profil" aria-label="Andrej Oliver Olsen" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <img className="co-logo-light" src="assets/logo-horiz.svg" alt="Andrej Oliver Olsen" />
          <img className="co-logo-dark" src="assets/logo-horiz-dark.svg" alt="Andrej Oliver Olsen" />
        </a>
        <div className="co-row">
          <span>{t.footer.copy}</span>
          <nav className="co-legal">
            <a href="Impressum.html">{t.footer.impressum}</a>
            <a href="Datenschutz.html">{t.footer.datenschutz}</a>
            <a href="#profil" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>{t.footer.top} ↑</a>
          </nav>
        </div>
      </footer>
    </main>);

}

window.Sections = Sections;