/* About-me modal: full-screen reader opened by clicking the author polaroid.
   Reuses the case-study modal shell (.cs-overlay / .cs-scroll / .cs-close) and
   presentational pieces (Polaroid, SectionDivider, renderRich). Content = window.ABOUT[lang]. */

const { useRef: useRefAbout, useEffect: useEffectAbout } = React;

/* "My desk" tile styling keyed by tool name (names are identical across pl/en).
   logo = official brand SVG in assets/logos/<logo>.svg; bg = tile background. */
const DESK_STYLE = {
  "Figma": { logo: "figma", bg: "#1e1e1e" },
  "Claude Code": { logo: "claude", bg: "#5a3fc0" },
  "Adobe Creative Suite": { logo: "adobe", bg: "#e1251b" },
  "Canva": { logo: "canva", bg: "#00c4cc" },
  "WordPress": { logo: "wordpress", bg: "#21759b" },
  "Elementor & Divi": { logo: "elementor", bg: "#b7295a" },
  "Vercel": { logo: "vercel", bg: "#0b0b0b" },
  "ChatGPT": { logo: "chatgpt", bg: "#10a37f" },
};

function AboutModal({ about, closeLabel, onClose }) {
  const scrollRef = useRefAbout(null);

  // ESC to close + body scroll lock + reset scroll to top on open (mirrors CaseStudyModal)
  useEffectAbout(() => {
    if (!about) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    requestAnimationFrame(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; });
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [about, onClose]);

  if (!about) return null;

  const bc = about.bookCall;
  const bookHref =
    `mailto:${bc.email}?subject=${encodeURIComponent(bc.subject)}&body=${encodeURIComponent(bc.body)}`;

  return (
    <div className="cs-overlay about-overlay" role="dialog" aria-modal="true" aria-label={about.name}>
      <div className="cs-scroll" ref={scrollRef}>
        <div className="cs-close-dock">
          <button type="button" className="cs-close" aria-label={closeLabel} onClick={onClose}>
            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
              <path d="M6 6 L 18 18 M 18 6 L 6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
            </svg>
          </button>
        </div>

        <article className="cs-article about">
          {/* HERO */}
          <section className="about-hero">
            <div className="about-hero__photo">
              <Polaroid photo={ABOUT_IMG.hero} caption={about.heroCaption} sub="" width="100%" />
            </div>
            <div className="about-hero__text">
              <span className="about-eyebrow">{about.eyebrow}</span>
              <h1 className="about-name">{about.name}</h1>
              <p className="about-subtitle">{about.subtitle}</p>
              <p className="about-tagline">{about.tagline}</p>
              {about.bio.map((p, i) => (
                <p key={i} className="about-bio">{renderRich(p)}</p>
              ))}
              <p className="about-closing">{about.closing}</p>
              <div className="about-skills">
                {about.skills.map((s) => <span key={s} className="cs-tag">{s}</span>)}
              </div>
            </div>
          </section>

          {/* HOOK BOX */}
          <section className="about-hook">
            <span className="tape" style={{ top: -11, left: 34, transform: "rotate(-4deg)" }}></span>
            <span className="tape pink" style={{ top: -9, right: 40, transform: "rotate(5deg)", width: 54 }}></span>
            <h2 className="about-hook__heading">{about.hook.heading}</h2>
            {about.hook.body.map((p, i) => <p key={i}>{renderRich(p)}</p>)}
          </section>

          {/* A PEEK INTO MY WORLD */}
          <section className="about-section">
            <SectionDivider label={about.peekLabel} />
            <div className="about-peek">
              {about.peek.map((ph, i) => (
                <Polaroid key={i} photo={ph.src} caption={ph.caption} sub="" width="100%" />
              ))}
            </div>
          </section>

          {/* MY DESK */}
          <section className="about-section">
            <SectionDivider label={about.deskLabel} />
            <div className="about-desk">
              {about.desk.map((d, i) => {
                const st = DESK_STYLE[d.name] || {};
                return (
                  <div key={i} className="about-tool" style={{ background: st.bg || "#1c1c1c" }}>
                    <span className="about-tool__badge">
                      {st.logo && <img className="about-tool__logo" src={`assets/logos/${st.logo}.svg`} alt="" aria-hidden="true" />}
                    </span>
                    <span className="about-tool__name">{d.name}</span>
                    <span className="about-tool__caption">{d.caption}</span>
                  </div>
                );
              })}
            </div>
          </section>

          {/* CONTACT */}
          <section className="about-contact">
            <div className="about-card">
              <span className="about-card__label">{about.sayHello.label}</span>
              <p className="about-card__text">{about.sayHello.text}</p>
              <div className="about-card__btns">
                {about.sayHello.buttons.map((b, i) => (
                  <a
                    key={i}
                    className="about-btn"
                    href={b.href}
                    target={b.href.startsWith("http") ? "_blank" : undefined}
                    rel={b.href.startsWith("http") ? "noreferrer" : undefined}>
                    {b.label}
                  </a>
                ))}
              </div>
            </div>
            <div className="about-card about-card--accent">
              <span className="about-card__label">{bc.label}</span>
              <p className="about-card__text">{bc.text}</p>
              <div className="about-card__btns">
                <a className="about-btn about-btn--solid" href={bookHref}>{bc.button} ↗</a>
              </div>
            </div>
          </section>
        </article>
      </div>
    </div>
  );
}

Object.assign(window, { AboutModal });