// MEGALIS — Projects grid: all 6 projects in columns — image, title under, short blurb

const projectsStyles = `
  .projects-section {
    border-bottom: 1px solid var(--line);
    background: #E8E4DA;
    --bg:    #E8E4DA;
    --bg-2:  rgba(0, 0, 0, 0.05);
    --bg-3:  rgba(0, 0, 0, 0.10);
    --fg:    #16161c;
    --fg-2:  rgba(22, 22, 28, 0.66);
    --fg-3:  rgba(22, 22, 28, 0.46);
    --line:  rgba(22, 22, 28, 0.18);
    --line-2: rgba(22, 22, 28, 0.10);
  }
  .projects-section .sec-head { border-bottom: 0; }
  .projects-section .sec-title { color: #000000; }

  /* Day mode → black section */
  body[data-theme="light"] .projects-section {
    background: #000000;
    --bg:    #000000;
    --bg-2:  rgba(255, 255, 255, 0.06);
    --bg-3:  rgba(255, 255, 255, 0.12);
    --fg:    #ffffff;
    --fg-2:  rgba(255, 255, 255, 0.66);
    --fg-3:  rgba(255, 255, 255, 0.46);
    --line:  rgba(255, 255, 255, 0.20);
    --line-2: rgba(255, 255, 255, 0.12);
  }
  body[data-theme="light"] .projects-section .sec-title { color: #ffffff; }

  .projects-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    padding: clamp(28px, 3vw, 48px) var(--pad) clamp(12px, 2vw, 24px);
  }

  .project-card {
    display: flex;
    flex-direction: column;
  }
  .project-frame {
    position: relative;
    aspect-ratio: 1 / 2;
    border: 1px solid var(--line);
    background: var(--bg-2);
    overflow: hidden;
  }
  .project-frame image-slot {
    width: 100%;
    height: 100%;
    display: block;
  }
  .project-frame .project-num {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg);
    background: color-mix(in oklab, var(--bg) 62%, transparent);
    backdrop-filter: blur(6px);
    padding: 4px 7px;
    border: 1px solid var(--line);
  }

  .project-cat {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 14px;
  }
  .project-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(15px, 1.05vw, 19px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--fg);
    margin: 6px 0 0;
    text-wrap: balance;
  }
  .project-blurb {
    font-family: var(--font-display);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fg-2);
    margin: 9px 0 0;
    text-wrap: pretty;
  }
  body[data-lang="ja"] .project-cat { text-transform: none; letter-spacing: 0.08em; }
  body[data-lang="ja"] .project-blurb {
    font-family: var(--font-jp);
    line-height: 1.7;
    font-size: 13px;
  }

  .projects-foot {
    padding: 24px var(--pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .projects-foot a.foot-link {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg);
    border-bottom: 1px solid var(--fg-3);
    padding-bottom: 2px;
  }
  body[data-lang="ja"] .projects-foot a.foot-link { text-transform: none; letter-spacing: 0.08em; }

  @media (max-width: 760px) {
    .projects-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 460px) {
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
  }
`;

const PROJECTS = [
  { id: 'oni',      title: 'Oni — Devil on the Doorstep', client: 'Netflix',  cat: 'Animation' },
  { id: 'kakigori', title: 'Kakigōri',                    client: 'Shiseido', cat: 'Commercial' },
  { id: 'provence', title: 'Provence — Wind & Light',     client: 'Canal+',   cat: 'VFX Supervision' },
  { id: 'yokai',    title: 'Yōkai Bridge',                client: 'NHK',      cat: 'CG Environments' },
  { id: 'dragon',   title: 'Dragon Ride',                 client: 'Warner',   cat: 'VFX Supervision' },
  { id: 'tokyo',    title: 'Tokyo at Dawn',               client: 'TBS',      cat: 'Film & TV' },
];

function Projects() {
  const t = window.useI18n('projects');
  const pad2 = (x) => x.toString().padStart(2, '0');

  return (
    <>
      <style>{projectsStyles}</style>
      <section className="projects-section" id="projects" data-screen-label="Projects">
        <header className="sec-head">
          <div>
            <div className="sec-num">{t.num}</div>
            <h2 className="sec-title">{t.title[0]}<br/>{t.title[1]}</h2>
          </div>
          <div className="sec-kana">{t.kana}</div>
        </header>

        <div className="projects-grid">
          {PROJECTS.map((p, i) => (
            <article className="project-card" key={p.id}>
              <div className="project-frame">
                <span className="project-num">№ {pad2(i + 1)} · {p.client}</span>
                <image-slot
                  id={`project-${p.id}`}
                  shape="rect"
                  placeholder={`Drop a still — ${p.title}`}>
                </image-slot>
              </div>
              <div className="project-cat">{p.cat}</div>
              <h3 className="project-title">{p.title}</h3>
              <p className="project-blurb">{t.blurbs[i]}</p>
            </article>
          ))}
        </div>

        <div className="projects-foot">
          <span className="micro">{t.footL}</span>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { Projects });