// Internal pages
function WorkPage({ copy }) {
  const c = copy.work;

  const goPrintCv = (e) => {
    e.preventDefault();
    window.location.hash = "#/cv";
    window.scrollTo({ top: 0, behavior: "instant" });
    // give the route a tick to mount, then trigger print
    setTimeout(() => window.print(), 250);
  };

  return (
    <div className="cv-page">
      {/* ──────────────── HERO ──────────────── */}
      <section className="hero cv-hero">
        <div className="page">
          <div className="cv-hero__crumb">
            <Eyebrow>{c.eyebrow}</Eyebrow>
            <a className="btn btn--ghost cv-hero__download" href="/cv" onClick={goPrintCv}>
              {c.cv_cta} <span className="btn__arrow">↓</span>
            </a>
          </div>

          <div className="cv-hero__grid">
            <div className="cv-hero__copy">
              <div className="cv-hero__name">{c.name}</div>
              <h1 className="cv-hero__title">{c.title}</h1>
              <p className="cv-hero__lead">{c.lead}</p>

              <dl className="cv-hero__contact">
                {c.contact.map((row, i) => (
                  <div key={i} className="cv-hero__contact-row">
                    <dt>{row.label}</dt>
                    <dd>
                      {row.href ? (
                        <a href={row.href} target="_blank" rel="noopener">{row.value}</a>
                      ) : (
                        row.value
                      )}
                    </dd>
                  </div>
                ))}
              </dl>
            </div>

            <figure className="cv-hero__portrait">
              <img src="assets/vlad-portrait.webp" alt="Vlad-Ștefan Tudor" />
              <figcaption>{c.bio_caption}</figcaption>
            </figure>
          </div>
        </div>
      </section>

      {/* ──────────────── BIO ──────────────── */}
      <section className="section cv-bio">
        <div className="page">
          <div className="cv-bio__grid">
            <div className="cv-bio__label">
              <div className="cv-mono-label">{c.bio_eyebrow}</div>
            </div>
            <p className="cv-bio__body">
              <span className="cv-bio__dropcap">{c.bio.charAt(0)}</span>
              {c.bio.slice(1)}
            </p>
          </div>
        </div>
      </section>

      {/* ──────────────── TRAJECTORY ──────────────── */}
      <section className="section cv-trajectory">
        <div className="page">
          <SectionHead label={c.trajectory_label} title={c.trajectory_title} />
          <p className="cv-section__sub">{c.trajectory_sub}</p>

          <ol className="cv-traj">
            {c.trajectory.map((t, i) => (
              <li key={i} className="cv-traj__row">
                <div className="cv-traj__year">{t.year}</div>
                <div className="cv-traj__main">
                  <div className="cv-traj__role">{t.role}</div>
                  <div className="cv-traj__org">{t.org}</div>
                </div>
                {t.note ? <div className="cv-traj__note">{t.note}</div> : <div aria-hidden="true"></div>}
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* ──────────────── JOURNEY · 5 TURNING POINTS ──────────────── */}
      <section className="section cv-journey">
        <div className="page">
          <SectionHead label={c.journey_label} title={c.journey_title} />
          <p className="cv-section__sub">{c.journey_sub}</p>

          <ol className="cv-moments">
            {c.journey.map((m, i) => (
              <li key={i} className={"cv-moment" + (!m.img ? " cv-moment--centered" : "")}>
                <aside className="cv-moment__mark">
                  <div className="cv-moment__num">{String(i + 1).padStart(2, "0")}</div>
                  <div className="cv-moment__when">
                    <div className="cv-moment__when-1">{m.mark}</div>
                    <div className="cv-moment__when-2">{m.year}</div>
                  </div>
                </aside>
                <div className="cv-moment__body">
                  <h3 className="cv-moment__title">{m.title}</h3>
                  <p className="cv-moment__text">{m.body}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* ──────────────── EDUCATION ──────────────── */}
      <section className="section cv-education">
        <div className="page">
          <SectionHead label={c.edu_label} title={c.edu_title} />
          <ol className="cv-traj cv-traj--edu">
            {c.edu.map((t, i) => (
              <li key={i} className="cv-traj__row">
                <div className="cv-traj__year">{t.year}</div>
                <div className="cv-traj__main">
                  <div className="cv-traj__role">{t.role}</div>
                  <div className="cv-traj__org">{t.org}</div>
                </div>
                <div className="cv-traj__note">{t.desc}</div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* ──────────────── NOW ──────────────── */}
      <section className="section cv-now">
        <div className="page">
          <div className="cv-now__head">
            <SectionHead label={c.now_label} title={c.now_title} />
            <span className="cv-now__updated">{c.now_updated}</span>
          </div>
          <p className="cv-section__sub">{c.now_sub}</p>

          <div className="cv-now__grid">
            {c.now_items.map((n, i) => (
              <article key={i} className="cv-now__cell">
                <div className="cv-mono-label cv-now__kind">{n.kind}</div>
                <p>{n.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ──────────────── THE BOOK ──────────────── */}
      <section className="section cv-book">
        <div className="page">
          <div className="cv-book__card">
            <div className="cv-book__left">
              <div className="cv-mono-label" style={{ color: "var(--warm)" }}>{c.book_label}</div>
              <div className="cv-book__kicker">{c.book_kicker}</div>
              <h3 className="cv-book__title">{c.book_title}</h3>
              <p className="cv-book__body">{c.book_body}</p>
              <p className="cv-book__closing">{c.book_closing}</p>
            </div>
            <div className="cv-book__right">
              <div className="cv-mono-label">{c.book_questions_label}</div>
              <ol className="cv-book__questions">
                {c.book_questions.map((q, i) => (
                  <li key={i}>
                    <span className="cv-book__qnum">{String(i + 1).padStart(2, "0")}</span>
                    <span>{q}</span>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function SapioPage({ copy }) {
  const c = copy.sapio;
  return (
    <div>
      <section className="hero">
        <div className="page">
          <Eyebrow>{c.eyebrow}</Eyebrow>
          <h1 className="h-display" style={{ fontSize: "clamp(40px, 6vw, 80px)", margin: "16px 0 32px", maxWidth: 1000 }}>
            {c.title}
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--text-dim)", maxWidth: 760 }}>{c.lead}</p>
          <div className="cta-row" style={{ marginTop: 32 }}>
            <Btn kind="primary" href="https://www.linkedin.com/in/vlad-tudor-18090a1a2">{c.cta}</Btn>
            <Btn kind="ghost" href="https://sapio.ro">{c.cta_alt}</Btn>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <SectionHead label={c.practice_label} title={copy.lang === "ro" ? "Construim pe patru direcții." : "Four areas of practice."} />
          <div className="practice">
            {c.practice.map((p, i) => (
              <div key={i} className="practice__cell">
                <div className="practice__num">0{i + 1}</div>
                <h3 className="practice__title">{p.h}</h3>
                <p className="practice__body">{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <SectionHead label={c.cases_label} title={copy.lang === "ro" ? "Trei livrări care vorbesc." : "Three deliveries worth showing."} />
          <div className="case-grid">
            {c.cases.map((cs, i) => (
              <article key={i} className="case">
                <div className="case__meta">{cs.meta}</div>
                <div className="case__num">{cs.num}</div>
                <h3 className="case__title">{cs.title}</h3>
                <p className="case__body">{cs.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <SectionHead label={c.team_label} title={c.team_body} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
            {[0,1,2,3].map(i => (
              <Placeholder key={i} label={"team · 0" + (i+1)} style={{ aspectRatio: "1/1" }} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function AaflatPage({ copy }) {
  const c = copy.aaflat;
  return (
    <div>
      <section className="hero">
        <div className="page">
          <Eyebrow>{c.eyebrow}</Eyebrow>
          <h1 className="h-display" style={{ fontSize: "clamp(40px, 6vw, 80px)", margin: "16px 0 32px", maxWidth: 1000 }}>
            {c.title}
          </h1>
          <p style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.45, color: "var(--text-dim)", maxWidth: 800 }}>
            {c.lead}
          </p>
          <div className="cta-row" style={{ marginTop: 32 }}>
            <Btn kind="primary" href="https://ai-aflat.ro">{c.cta}</Btn>
            <Btn kind="ghost" href="https://www.linkedin.com/in/vlad-tudor-18090a1a2">{c.cta_alt}</Btn>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <div className="numbers">
            {c.stats.map((s, i) => (
              <div key={i} className="num" style={{ background: i === 0 || i === 2 ? "var(--bg)" : "var(--bg-soft)" }}>
                <div className="num__value" style={{ color: i === 3 ? "var(--warm)" : "var(--text)" }}>{s.value}</div>
                <div className="num__label">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <SectionHead label={c.origin_label} title={copy.lang === "ro" ? "Cum a apărut." : "How it started."} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--text-dim)", margin: 0 }}>{c.origin}</p>
            <Placeholder label="ai-aflat.ro · screen" style={{ aspectRatio: "4/3" }} />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <SectionHead label={c.partners_label} title={copy.lang === "ro" ? "Cine ne-a sprijinit, cui îi servim." : "Who's backed it, who it serves."} />
          <div className="practice">
            {c.partners.map((p, i) => (
              <div key={i} className="practice__cell">
                <div className="practice__num">{String(i + 1).padStart(2, "0")}</div>
                <h3 className="practice__title">
                  {p.href ? <a href={p.href} target="_blank" rel="noopener noreferrer">{p.h}</a> : p.h}
                </h3>
                <p className="practice__body">{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function WritingPage({ copy }) {
  const c = copy.writing;
  return (
    <div>
      <section className="hero">
        <div className="page">
          <Eyebrow>{c.eyebrow}</Eyebrow>
          <h1 className="h-display" style={{ fontSize: "clamp(40px, 6vw, 80px)", margin: "16px 0 32px", maxWidth: 900 }}>
            {c.title}
          </h1>
          <p style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.45, color: "var(--text-dim)", maxWidth: 760 }}>
            {c.lead}
          </p>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <SectionHead label={c.posts_label} title={copy.lang === "ro" ? "Note recente." : "Recent notes."} />
          <div className="post-list">
            {c.posts.map((p, i) => (
              <a key={i} href="#" className="post" onClick={(e) => e.preventDefault()}>
                <div className="post__date">{p.date}</div>
                <div>
                  <h3 className="post__title">{p.title}</h3>
                  <p className="post__excerpt">{p.excerpt}</p>
                </div>
                <div className="post__cat">{p.cat}</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <div className="book">
            <Placeholder label="book cover · 3:4" className="book__cover" />
            <div>
              <span className="eyebrow" style={{ marginBottom: 16, display: "inline-flex" }}>{c.book_label}</span>
              <h3 className="book__title">{c.book_title}</h3>
              <p className="book__body">{c.book_body}</p>
              <form className="notify-form" onSubmit={(e) => e.preventDefault()}>
                <input type="email" placeholder={c.book_email_placeholder} />
                <Btn kind="primary" onClick={(e) => e.preventDefault()}>{c.book_cta}</Btn>
              </form>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function MediaRow({ m, index }) {
  const [active, setActive] = React.useState(false);
  const alt = index % 2 === 1;
  const thumb = m.youtubeId ? `https://i.ytimg.com/vi/${m.youtubeId}/hqdefault.jpg` : null;

  return (
    <article className={"media-row" + (alt ? " media-row--alt" : "")}>
      <div className="media-row__thumb">
        {m.youtubeId && active ? (
          <iframe
            className="yt-iframe"
            src={`https://www.youtube-nocookie.com/embed/${m.youtubeId}?autoplay=1&rel=0`}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            loading="lazy"
          />
        ) : (
          <button
            className={"yt-placeholder" + (m.youtubeId ? " yt-placeholder--ready" : "")}
            onClick={() => m.youtubeId && setActive(true)}
            aria-label={m.youtubeId ? "Play — " + m.title : m.title}
            style={{ cursor: m.youtubeId ? "pointer" : "default" }}
          >
            {thumb && <img src={thumb} alt="" className="yt-placeholder__thumb" />}
            <div className="yt-placeholder__overlay">
              <div className="yt-play">
                <svg viewBox="0 0 24 24" fill="currentColor" width="32" height="32">
                  <path d="M8 5v14l11-7z"/>
                </svg>
              </div>
            </div>
          </button>
        )}
      </div>
      <div className="media-row__info">
        <div className="media-card__kind">{m.kind}</div>
        <h3 className="media-row__title">{m.title}</h3>
        <p className="media-row__desc">{m.desc}</p>
        {m.href && (
          <a href={m.href} target="_blank" rel="noopener noreferrer" className="media-row__article-link">
            Read article ↗
          </a>
        )}
      </div>
    </article>
  );
}

function MediaPage({ copy }) {
  const c = copy.media;
  return (
    <div>
      <section className="hero" style={{ paddingBottom: 64 }}>
        <div className="page">
          <h1 className="h-display" style={{ fontSize: "clamp(40px, 6vw, 80px)", margin: 0, maxWidth: 900 }}>
            {c.title}
          </h1>
        </div>
      </section>

      <div className="page">
        <div className="media-stack">
          {c.videos.map((m, i) => <MediaRow key={i} m={m} index={i} />)}
        </div>
      </div>
      <div style={{ height: 96 }} />
    </div>
  );
}

function CvPage({ copy }) {
  const c = copy.cv;
  const w = copy.work;
  return (
    <div>
      <section className="hero">
        <div className="page page--narrow">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
            <Eyebrow>{c.eyebrow}</Eyebrow>
            <button className="btn btn--ghost" onClick={() => window.print()}>
              {c.cta} <span className="btn__arrow">↓</span>
            </button>
          </div>
          <div className="cv-doc">
            <div className="cv-head">
              <div>
                <h1>{c.title}</h1>
                <p style={{ margin: 0, color: "var(--text-dim)", fontSize: 16 }}>{c.role}</p>
              </div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)", textAlign: "right" }}>
                {c.contact_lines.map((l, i) => <div key={i}>{l}</div>)}
              </div>
            </div>

            <div className="cv-section">
              <h3>{w.timeline_label}</h3>
              {w.timeline.map((t, i) => (
                <div key={i} className="cv-row">
                  <time>{t.year}</time>
                  <div>
                    <div className="cv-role">{t.role}</div>
                    <div className="cv-org">{t.org}</div>
                    <div className="cv-desc">{t.desc}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="cv-section">
              <h3>{w.edu_label}</h3>
              {w.edu.map((t, i) => (
                <div key={i} className="cv-row">
                  <time>{t.year}</time>
                  <div>
                    <div className="cv-role">{t.role}</div>
                    <div className="cv-org">{t.org}</div>
                    <div className="cv-desc">{t.desc}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="cv-section">
              <h3>{w.skills_label}</h3>
              {w.skills.map((s, i) => (
                <div key={i} className="cv-row">
                  <time>{s.h}</time>
                  <div className="cv-desc" style={{ color: "var(--text)" }}>{s.body}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { WorkPage, SapioPage, AaflatPage, WritingPage, MediaPage, CvPage });