// Top-level pages: Projects (home), About, CV & Feedback, Contacts.

function PageProjects({ data, ui }) {
  const { person, cases, now, awards } = data;
  const featured = cases.slice(0, 6);
  return (
    <div className="page-fade">
      {/* Hero */}
      <section className="hero">
        <div>
          <div className="hero__profile reveal" style={{ "--delay": "0ms" }}>
            <img
              src={person.photo}
              alt={`${person.firstName} ${person.lastName}`}
              className="hero__photo"
            />
            <div className="hero__profile-text">
              <span className="hero__profile-name">
                {person.firstName} {person.lastName}
              </span>
              <span className="hero__profile-role">
                {person.role} · {person.city}
              </span>
            </div>
          </div>
          <p className="hero__lede reveal" style={{ "--delay": "80ms" }}>
            <b>{person.role}</b> {ui.heroLede}
          </p>
          <div className="hero__stats reveal" style={{ "--delay": "160ms" }}>
            {person.stats.map((s) => (
              <div className="stat" key={s.label}>
                <div className="stat__num">{s.num}</div>
                <div className="stat__label">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Now block */}
      <section className="now-block" aria-label="Now">
        <div className="label-with-line reveal" style={{ "--delay": "0ms" }}>
          <span className="label">
            {ui.nowLabel} <span style={{ color: "var(--ink-2)" }}>· {now.updated}</span>
          </span>
        </div>
        <div className="now-grid">
          {now.items.map((it, i) => (
            <div className="now-cell reveal" key={it.label} style={{ "--delay": `${i * 70}ms` }}>
              <span className="now-cell__label">{it.label}</span>
              <span className="now-cell__value">{it.value}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Awards strip */}
      <section className="awards-strip" aria-label="Awards">
        <div className="awards-strip__head">
          <Icon name="trophy" size={14} />
          <span className="label" style={{ marginLeft: 8 }}>
            {ui.awardsLabel}
          </span>
        </div>
        <ul className="awards-list">
          {awards.map((a, i) => (
            <li className="award reveal" key={i} style={{ "--delay": `${i * 50}ms` }}>
              <span className="award__year">{a.year}</span>
              <span className="award__name">{a.name}</span>
              <span className="award__placement">{a.placement}</span>
            </li>
          ))}
        </ul>
      </section>

      <div className="label-with-line">
        <span className="label">{ui.selectedProjects}</span>
      </div>

      {/* Works grid */}
      <section className="works">
        {featured.map((c, idx) => (
          <a
            key={c.id}
            href={`#/case/${c.id}`}
            className="work reveal"
            data-comment-anchor={`work-${c.id}`}
            style={{ "--delay": `${idx * 60}ms` }}
          >
            <div className="work__media">
              <span className="work__index">
                {String(idx + 1).padStart(2, "0")} / {String(cases.length).padStart(2, "0")}
              </span>
              <span className="work__tag">{c.tag}</span>
              <img src={c.cover} alt={c.title} className="work__img" loading="lazy" />
            </div>
            <div className="work__meta">
              <h3 className="work__title">
                {c.title}
                <Icon name="arrow-tr" size={14} />
              </h3>
              <span className="work__year">{c.year}</span>
            </div>
            <p className="work__desc">{c.tagline}</p>
          </a>
        ))}
      </section>

      <div className="works-cta">
        <a href="#/all" className="btn-ghost">
          {ui.viewAll(cases.length)}
          <Icon name="arrow-tr" size={14} />
        </a>
      </div>
    </div>
  );
}

function PageAllProjects({ data, ui }) {
  const { cases } = data;
  return (
    <div className="page-fade">
      <div className="all-header">
        <div>
          <a href="#/projects" className="case-back">
            <Icon name="arrow-l" size={14} /> {ui.backHome}
          </a>
          <h1 className="all-title">{ui.allProjects}</h1>
        </div>
        <div className="hero__meta">
          <div className="label">{ui.archive}</div>
          <div>{ui.updatedDate}</div>
        </div>
      </div>

      <section className="works">
        {cases.map((c, idx) => (
          <a key={c.id} href={`#/case/${c.id}`} className="work reveal" style={{ "--delay": `${(idx % 6) * 60}ms` }}>
            <div className="work__media">
              <span className="work__index">
                {String(idx + 1).padStart(2, "0")} /{" "}
                {String(cases.length).padStart(2, "0")}
              </span>
              <span className="work__tag">{c.tag}</span>
              <img src={c.cover} alt={c.title} className="work__img" loading="lazy" />
            </div>
            <div className="work__meta">
              <h3 className="work__title">
                {c.title}
                <Icon name="arrow-tr" size={14} />
              </h3>
              <span className="work__year">{c.year}</span>
            </div>
            <p className="work__desc">{c.tagline}</p>
          </a>
        ))}
      </section>
    </div>
  );
}

function PageAbout({ data, ui }) {
  const { about, person, stack } = data;
  return (
    <div className="page-fade">
      <div className="label-with-line">
        <span className="label">{ui.aboutLabel(person.firstName + " " + person.lastName)}</span>
      </div>

      <section className="profile-card">
        <img
          src={person.photo}
          alt={`${person.firstName} ${person.lastName}`}
          className="profile-card__photo"
        />
        <div className="profile-card__body">
          <div className="profile-card__name">
            {person.firstName} {person.lastName}
          </div>
          <div className="profile-card__role">{person.role}</div>
          <div className="profile-card__where">
            <span className="profile-card__dot"></span>
            {person.city}, {person.country} · GMT+4
          </div>
          <p className="profile-card__intro">{person.intro}</p>
        </div>
        <div className="profile-card__aside">
          {ui.cvPdfUrl ? (
            <a href={ui.cvPdfUrl} download className="btn-primary">
              <Icon name="doc" size={14} /> &nbsp;{ui.downloadPDF}
            </a>
          ) : (
            <span className="btn-primary" style={{ opacity: 0.35, cursor: "default" }}>
              <Icon name="doc" size={14} /> &nbsp;{ui.downloadPDF}
            </span>
          )}
          <span className="profile-card__updated">{ui.updatedDate}</span>
        </div>
      </section>

      <section className="stack-section" aria-label="Tech stack">
        <div className="label-with-line">
          <span className="label">{ui.toolkitLabel}</span>
        </div>
        <div className="stack-grid">
          {stack.map((g) => (
            <div className="stack-cell" key={g.group}>
              <span className="stack-cell__label">{g.group}</span>
              <div className="stack-cell__items">
                {g.items.map((t) => (
                  <span className="tool-chip" key={t}>
                    <span className="tool-chip__dot"></span>
                    {t}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <div className="section__head">
          <div className="label">{ui.generalLabel}</div>
        </div>
        <div className="section__body">
          {about.general.map((p, i) => (
            <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
          ))}
        </div>
      </section>

      <section className="section">
        <div className="section__head">
          <div className="label">{ui.experienceLabel}</div>
        </div>
        <div className="section__body">
          {about.experience.map((p, i) => (
            <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
          ))}
        </div>
      </section>

      <section className="section">
        <div className="section__head">
          <div className="label">{ui.moreLabel}</div>
        </div>
        <div className="section__body">
          {about.more.map((p, i) => (
            <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
          ))}
        </div>
      </section>
    </div>
  );
}

function PageCV({ data, ui }) {
  const { cv, feedback } = data;
  return (
    <div className="page-fade">
      <div className="label-with-line">
        <span className="label">{ui.cvFeedback}</span>
      </div>

      <section className="section">
        <div className="section__head">
          <div className="label">{ui.careerLabel}</div>
          {ui.cvPdfUrl ? (
            <a href={ui.cvPdfUrl} download className="btn-primary" style={{ marginTop: 14 }}>
              <Icon name="doc" size={14} /> &nbsp;{ui.downloadPDF}
            </a>
          ) : (
            <span className="btn-primary" style={{ marginTop: 14, opacity: 0.35, cursor: "default" }}>
              <Icon name="doc" size={14} /> &nbsp;{ui.downloadPDF}
            </span>
          )}
        </div>
        <div style={{ minWidth: 0 }}>
          {cv.map((row, i) => (
            <div className="cv-row" key={i}>
              <div className="cv-row__years">{row.years}</div>
              <div>
                <div className="cv-row__role">{row.role}</div>
                <div className="cv-row__company">{row.company}</div>
              </div>
              <div className="cv-row__where">{row.where}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <div className="section__head">
          <div className="label">{ui.feedbackLabel}</div>
          <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 10, maxWidth: 200, lineHeight: 1.55 }}>
            {ui.feedbackDesc(feedback.length)}
          </p>
        </div>
        <div style={{ minWidth: 0 }}>
          <div className="feedback-grid">
            {feedback.map((f, i) => (
              <article className="feedback-card" key={i}>
                <p className="feedback-card__quote">{f.quote}</p>
                <div className="feedback-card__author">
                  <span className="avatar">{f.avatar}</span>
                  <div>
                    <div className="feedback-card__name">{f.name}</div>
                    <div className="feedback-card__role">{f.role}</div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function PageContacts({ data, ui }) {
  const { contacts } = data;
  return (
    <div className="page-fade">
      <div className="label-with-line">
        <span className="label">{ui.contactsLabel}</span>
      </div>

      <section className="section">
        <div className="section__head">
          <div className="label">{ui.getInTouch}</div>
        </div>
        <div className="section__body">
          <p dangerouslySetInnerHTML={{ __html: ui.contactsBody1 }} />
          <p>{ui.contactsBody2}</p>

          <div className="contact-grid">
            {contacts.map((c) => (
              <a
                key={c.label}
                href={c.href}
                className="contact-btn"
                target="_blank"
                rel="noopener noreferrer"
              >
                <span className="contact-btn__icon">
                  <Icon name={c.icon} size={16} />
                </span>
                <span className="contact-btn__label">{c.label}</span>
                <span className="contact-btn__arrow">
                  <Icon name="arrow-tr" size={16} />
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="section__head">
          <div className="label">{ui.locationLabel}</div>
        </div>
        <div className="section__body">
          <p dangerouslySetInnerHTML={{ __html: ui.locationBody }} />
          <p style={{ color: "var(--muted)", fontSize: 12, marginTop: 24 }}>
            {ui.languages}
          </p>
        </div>
      </section>
    </div>
  );
}

function PageProcess({ data, ui }) {
  const { process, stack } = data;
  return (
    <div className="page-fade">
      <div className="label-with-line">
        <span className="label">{ui.processLabel}</span>
      </div>

      <section className="process-intro">
        <h1 className="process-title">
          {ui.processTitle1}
          <br />
          <span style={{ color: "var(--accent)" }}>{ui.processTitle2}</span>.
        </h1>
        <p className="process-lede">{process.intro}</p>
      </section>

      <section className="process-pillars">
        {process.pillars.map((p) => (
          <article className="pillar" key={p.num}>
            <div className="pillar__num">{p.num}</div>
            <h2 className="pillar__title">{p.title}</h2>
            <p className="pillar__body" dangerouslySetInnerHTML={{ __html: p.body }} />
          </article>
        ))}
      </section>

      <section className="section">
        <div className="section__head">
          <div className="label">{ui.principlesLabel}</div>
          <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 10, maxWidth: 220, lineHeight: 1.55 }}>
            {ui.principlesDesc}
          </p>
        </div>
        <ol className="principles">
          {process.principles.map((p, i) => (
            <li key={i}>
              <span className="principles__num">{String(i + 1).padStart(2, "0")}</span>
              <span>{p}</span>
            </li>
          ))}
        </ol>
      </section>

      <section className="section">
        <div className="section__head">
          <div className="label">{ui.dailyToolkit}</div>
          <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 10, maxWidth: 220, lineHeight: 1.55 }}>
            {ui.dailyToolkitDesc}
          </p>
        </div>
        <div style={{ minWidth: 0 }}>
          <div className="stack-grid">
            {stack.slice(0, 3).map((g) => (
              <div className="stack-cell" key={g.group}>
                <span className="stack-cell__label">{g.group}</span>
                <div className="stack-cell__items">
                  {g.items.slice(0, 4).map((t) => (
                    <span className="tool-chip" key={t}>
                      <span className="tool-chip__dot"></span>
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageProjects, PageAllProjects, PageAbout, PageCV, PageContacts, PageProcess });