// Page components — Home, Essays, Essay, Projects, Now, Experience, Reading, Contact

const { useState, useEffect, useRef, useMemo } = React;

// ---------- Topbar ----------
function Topbar({ route, navigate }) {
  const items = [
  { id: "now", label: "now" },
  { id: "essays", label: "essays" },
  { id: "projects", label: "projects" },
  { id: "experience", label: "work" },
  { id: "reading", label: "reading" },
  { id: "contact", label: "contact" }];

  const isHome = route.page === "home";
  return (
    <div className="topbar">
      <div className="brand">
        <a href="#/" onClick={(e) => {e.preventDefault();navigate("home");}}>
          Oscar Marchal<span className="dot">.</span>
        </a>
      </div>
      {!isHome &&
      <nav className="nav">
          {items.map((it) =>
        <a
          key={it.id}
          href={`#/${it.id}`}
          data-active={route.page === it.id || it.id === "essays" && route.page === "essay"}
          onClick={(e) => {e.preventDefault();navigate(it.id);}}>
          {it.label}</a>
        )}
        </nav>
      }
    </div>);

}

// ---------- Hover preview ----------
function EssayLink({ essay, navigate, children }) {
  const [coords, setCoords] = useState(null);
  const ref = useRef(null);
  const timer = useRef(null);

  const onEnter = (e) => {
    clearTimeout(timer.current);
    const rect = e.currentTarget.getBoundingClientRect();
    const vw = window.innerWidth;
    const cardW = 320;
    let left = rect.right + 16;
    if (left + cardW > vw - 16) left = Math.max(16, rect.left - cardW - 16);
    let top = rect.top - 8;
    // clamp inside viewport
    if (top + 180 > window.innerHeight) top = window.innerHeight - 200;
    if (top < 16) top = 16;
    timer.current = setTimeout(() => setCoords({ left, top }), 80);
  };
  const onLeave = () => {
    clearTimeout(timer.current);
    setCoords(null);
  };

  return (
    <>
      <a
        ref={ref}
        href={`#/essay/${essay.slug}`}
        className="entry-title"
        onMouseEnter={onEnter}
        onMouseLeave={onLeave}
        onClick={(e) => {e.preventDefault();navigate("essay", { slug: essay.slug });}}>
        {children}</a>
      {coords &&
      <div className={`preview-card visible`} style={{ left: coords.left, top: coords.top }}>
          <div className="pv-title">{essay.title}</div>
          <div className="pv-meta">{essay.dateLabel} · {essay.readTime}</div>
          <div>{essay.excerpt}</div>
        </div>
      }
    </>);

}

// ---------- HOME ----------
function Home({ navigate }) {
  return (
    <div className="route">
      <div className="topbar">
        <div className="brand">
          {SITE.name}<span className="dot">.</span>
        </div>
      </div>
      <div className="home-intro">
        <p className="home-tag" style={{ fontSize: 19, fontStyle: 'normal', color: 'var(--ink)' }}>
          {SITE.tag}
        </p>
      </div>

      <dl className="home-list">
        <dt>now</dt>
        <dd><a href="#/now" onClick={(e) => {e.preventDefault();navigate("now");}}>What I'm doing now</a></dd>

        <dt>essays</dt>
        <dd>
          <a href="#/essays" onClick={(e) => {e.preventDefault();navigate("essays");}}>{ESSAYS.length} pieces</a>
          <span style={{ color: 'var(--ink-faint)', fontStyle: 'italic', marginLeft: 10 }}>
            — most recent: <a href={`#/essay/${ESSAYS[0].slug}`} onClick={(e) => {e.preventDefault();navigate("essay", { slug: ESSAYS[0].slug });}}>{ESSAYS[0].title}</a>
          </span>
        </dd>

        <dt>projects</dt>
        <dd><a href="#/projects" onClick={(e) => {e.preventDefault();navigate("projects");}}>{PROJECTS.length} things I've built</a></dd>

        <dt>work</dt>
        <dd><a href="#/experience" onClick={(e) => {e.preventDefault();navigate("experience");}}>Where I've been</a></dd>

        <dt>reading</dt>
        <dd><a href="#/reading" onClick={(e) => {e.preventDefault();navigate("reading");}}>What I'm reading</a></dd>

        <dt>contact</dt>
        <dd>
          {CONTACT.map((c, i) => <a key={i} href={c.href} target="_blank" rel="noreferrer">{c.label === "email" ? c.value : c.label}</a>)}
        </dd>
      </dl>

      <p className="home-foot">Last updated May 2026 - from Paris.

      </p>
    </div>);

}

// ---------- ESSAYS INDEX ----------
function Essays({ navigate }) {
  // group by year
  const byYear = useMemo(() => {
    const groups = {};
    ESSAYS.forEach((e) => {
      const y = e.date.slice(0, 4);
      (groups[y] = groups[y] || []).push(e);
    });
    return Object.entries(groups).sort((a, b) => b[0].localeCompare(a[0]));
  }, []);

  return (
    <div className="route">
      <h1 className="section-title">Essays</h1>
      <p className="section-sub">Things I have thought about long enough to write down.</p>

      {byYear.map(([year, list]) =>
      <div key={year} style={{ marginBottom: 28 }}>
          <h3 style={{ fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-faint)', fontWeight: 400, margin: '0 0 8px' }}>{year}</h3>
          <ul className="entry-list">
            {list.map((e) =>
          <li className="entry" key={e.slug}>
                <span className="entry-date">{e.dateLabel}</span>
                <span>
                  <EssayLink essay={e} navigate={navigate}>{e.title}</EssayLink>
                  <span className="entry-meta">· {e.readTime}</span>
                </span>
              </li>
          )}
          </ul>
        </div>
      )}
    </div>);

}

// ---------- ESSAY READER ----------
function Essay({ slug, navigate }) {
  const essay = ESSAYS.find((e) => e.slug === slug);
  if (!essay) return <div className="route"><p>Not found. <a href="#/essays" onClick={(e) => {e.preventDefault();navigate("essays");}}>Back to essays.</a></p></div>;
  return (
    <div className="route">
      <div className="essay-head">
        <h1 className="essay-title">{essay.title}</h1>
        <div className="essay-meta">{essay.dateLabel} · {essay.readTime}</div>
      </div>
      <div className="essay-body">
        {essay.body.map((p, i) => <p key={i}>{p}</p>)}
      </div>
      <a href="#/essays" className="essay-back" onClick={(e) => {e.preventDefault();navigate("essays");}}>← back to essays</a>
    </div>);

}

// ---------- PROJECTS ----------
function Projects() {
  return (
    <div className="route">
      <h1 className="section-title">Projects</h1>
      <p className="section-sub">Things I've made. Some still alive, some pleasantly dead.</p>
      <ul className="projects-list">
        {PROJECTS.map((p) =>
        <li className="project" key={p.name}>
            <div className="project-head">
              <h3 className="project-title"><a href={p.href} onClick={(e) => e.preventDefault()}>{p.name}</a></h3>
              <span className="project-year">{p.year}</span>
            </div>
            <p className="project-desc">{p.desc}</p>
            <div className="project-tags">{p.tags}</div>
          </li>
        )}
      </ul>
    </div>);

}

// ---------- NOW ----------
function Now() {
  return (
    <div className="route">
      <h1 className="section-title">Now</h1>
      <p className="section-sub">A page about what I'm doing now. Updated {NOW.updated}.</p>
      {NOW.blocks.map((b, i) =>
      <div className="now-section" key={i}>
          <h3>{b.heading}</h3>
          <ul>
            {b.items.map((it, j) => <li key={j}>{it}</li>)}
          </ul>
        </div>
      )}
      <p style={{ marginTop: 36, color: 'var(--ink-faint)', fontStyle: 'italic', fontSize: 14 }}>
        Inspired by <a href="https://nownownow.com" target="_blank" rel="noreferrer">/now</a>.
      </p>
    </div>);

}

// ---------- EXPERIENCE ----------
function Experience() {
  return (
    <div className="route">
      <h1 className="section-title">Where I've been</h1>
      <p className="section-sub">In reverse chronological order. The gaps are where the real learning happened.</p>

      <h2 className="xp-section-label">Work</h2>
      <ul className="entry-list">
        {EXPERIENCE.work.map((x, i) =>
        <li className="xp-item" key={i}>
            <div className="xp-head">
              <h3 className="xp-role">{x.role}, <span className="xp-where">{x.where}</span></h3>
              <span className="xp-when">{x.when}</span>
            </div>
            <p className="xp-desc">{x.desc}</p>
          </li>
        )}
      </ul>

      <h2 className="xp-section-label">School</h2>
      <ul className="entry-list">
        {EXPERIENCE.school.map((x, i) =>
        <li className="xp-item" key={i}>
            <div className="xp-head">
              <h3 className="xp-role">{x.name}</h3>
              <span className="xp-when">{x.when}</span>
            </div>
            <p className="xp-desc">{x.desc}</p>
          </li>
        )}
      </ul>
    </div>);

}

// ---------- READING ----------
function Reading() {
  return (
    <div className="route">
      <h1 className="section-title">Reading</h1>
      <p className="section-sub">Books, mostly. The list lags behind reality by a few weeks.</p>
      {READING.map((g, i) =>
      <div className="reading-group" key={i}>
          <h3>{g.group}</h3>
          {g.books.map((b, j) =>
        <div className="book" key={j}>
              <span><span className="book-title">{b.title}</span><span className="book-author"> — {b.author}</span></span>
              <span className="book-status">{b.note}</span>
            </div>
        )}
        </div>
      )}
    </div>);

}

// ---------- CONTACT ----------
function Contact() {
  return (
    <div className="route">
      <h1 className="section-title">Contact</h1>
      <p className="section-sub">The fastest way to reach me is email. I read everything; I reply to most.</p>
      <ul className="contact-list">
        {CONTACT.map((c, i) =>
        <li key={i}>
            <span className="label">{c.label}</span>
            <a href={c.href} target="_blank" rel="noreferrer">{c.value}</a>
          </li>
        )}
      </ul>
      <p style={{ marginTop: 48, color: 'var(--ink-soft)', fontStyle: 'italic', fontSize: 16, lineHeight: 1.6 }}>
        If you are working on something interesting in tools for builders, developer products, or anything adjacent — say hi. I love a good cold email. I write them too.
      </p>
    </div>);

}

Object.assign(window, { Topbar, Home, Essays, Essay, Projects, Now, Experience, Reading, Contact });