/* ============================================================
   ABOUT
   ============================================================ */
function About({ go, openContact }) {
  const { DISCIPLINES, CLIENTS, PARTNERS, ABOUT_STORY, Plate, Reveal, SplitWords, ArrowLink } = window;
  const [active, setActive] = useState(0);
  const storyParas = ABOUT_STORY.split("\n\n");

  return (
    <div className="about">
      {/* ---- split hero ---- */}
      <header className="about-hero page">
        <Reveal as="div" className="ab-hero-type" threshold={0.01}>
          <h1 className="display ab-head">
            <span className="reveal-mask"><span className="reveal-word">Security</span></span>{" "}
            <span className="reveal-mask"><span className="reveal-word">engineer</span></span>{" "}
            <span className="em">obsessed</span>
            <span className="ab-inline-media">
              <Plate tint={window.TINTS.ink} label="BIRKERØD / DENMARK" className="ab-inline-plate" />
            </span>
            with how things <span className="em">break.</span>
          </h1>
        </Reveal>
        <Reveal className="ab-intro body-lg fade-up">
          <p>Dylan Jeppesen is a cybersecurity professional based in Birkerød, Denmark. He has a background in IT management, holds CCNP Security, CCNA and CDPF, and has advisory experience from Cisco Denmark.</p>
        </Reveal>
      </header>

      {/* ---- full-bleed image ---- */}
      <Reveal className="ab-full">
        <Plate tint={window.TINTS.stone} label="PORTRAIT / WORKSPACE — DROP IMAGE" corner="(Dylan — Birkerød)" className="ab-full-plate clip-reveal" />
      </Reveal>

      {/* ---- personal story 01 ---- */}
      <section className="ab-story page">
        <div className="ab-num"><Reveal as="span" className="num serif">01.</Reveal></div>
        <div className="ab-story-head">
          <Reveal as="h2" className="h-lg" threshold={0.05}>
            <SplitWords text="From keeping systems stable to understanding exactly how they fail" />
          </Reveal>
        </div>
        <div className="ab-story-body">
          <Reveal className="tag" style={{ display: "block", marginBottom: "1.4rem" }}>[ Personal story ]</Reveal>
          <Reveal className="body-lg fade-up">
            <p style={{ marginBottom: "1.4rem" }}><b>Most of what I know comes from working the practical side of security.</b></p>
            {storyParas.map((t, i) => <p key={i} style={{ marginBottom: "1.4rem" }}>{t}</p>)}
          </Reveal>
        </div>
      </section>

      {/* ---- disciplines / services switcher 02 ---- */}
      <section className="ab-services page">
        <div className="ab-num"><Reveal as="span" className="num serif">02.</Reveal></div>
        <div className="ab-svc-grid">
          <div className="ab-svc-list">
            <Reveal className="tag" style={{ display: "block", marginBottom: "2rem" }}>[ What I focus on ]</Reveal>
            {DISCIPLINES.map((d, i) => (
              <button
                key={d.n}
                className={"ab-svc-item" + (i === active ? " on" : "")}
                onMouseEnter={() => setActive(i)}
                onClick={() => setActive(i)}
              >
                <span className="ab-svc-name h-lg">{d.title}</span>
                <span className="ab-svc-n serif">{d.n}.</span>
              </button>
            ))}
            <div className="ab-svc-desc body-lg">
              <p key={active} className="fade-swap">{DISCIPLINES[active].body}</p>
            </div>
          </div>
          <div className="ab-svc-media">
            {DISCIPLINES.map((d, i) => (
              <Plate
                key={d.n}
                tint={d.tint}
                label={d.label}
                corner={d.n + " / 03"}
                className={"ab-svc-plate" + (i === active ? " on" : "")}
              />
            ))}
          </div>
        </div>
      </section>

      {/* ---- certifications + communities 03 ---- */}
      <section className="ab-clients page">
        <div className="ab-num"><Reveal as="span" className="num serif">03.</Reveal></div>
        <Reveal as="h2" className="h-lg ab-cl-head" threshold={0.05}>
          Certifications <span className="em">and communities</span>
        </Reveal>
        <div className="ab-cl-grid">
          <div className="ab-cl-col">
            <span className="tag">[ Certifications ]</span>
            <ul>{CLIENTS.map((c) => <li key={c}><ArrowLink>{c}</ArrowLink></li>)}</ul>
          </div>
          <div className="ab-cl-col">
            <span className="tag">[ Communities ]</span>
            <ul>{PARTNERS.map((c) => <li key={c}><ArrowLink>{c}</ArrowLink></li>)}</ul>
          </div>
        </div>
      </section>

      {/* ---- CTA ---- */}
      <section className="ab-cta page">
        <Reveal className="ab-cta-media">
          <Plate tint={window.TINTS.clay} label="LET'S TALK" className="ab-cta-plate clip-reveal" />
        </Reveal>
        <div className="ab-cta-text">
          <Reveal as="h2" className="h-lg" threshold={0.05}>
            <SplitWords text="Want to know how your defenses hold up in the real world?" />
          </Reveal>
          <Reveal className="fade-up" style={{ marginTop: "2.2rem" }}>
            <button className="btn" onClick={openContact}>
              Let's work together <window.ArrowRight s={20} />
            </button>
          </Reveal>
        </div>
      </section>

      <Footer go={go} />
    </div>
  );
}

/* ---------- footer ---------- */
function Footer({ go }) {
  return (
    <footer className="footer page">
      <button className="ul-in" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>Back to top ↑</button>
      <div className="footer-mid">
        <span className="label">Birkerød, Denmark</span>
        <span className="label">Europe/Copenhagen</span>
      </div>
      <span className="label">© 2026 Dylan Jeppesen</span>
    </footer>
  );
}

Object.assign(window, { About, Footer });