// pages.jsx — Home, About, Contact, Legal

const Landscape = () => (
  <div className="pw-landscape" aria-hidden="true">
    <div className="pw-landscape-rule-top" />
    <div className="pw-fog pw-fog--upper" />
    <div className="pw-mountain pw-mountain--far" />
    <div className="pw-mountain pw-mountain--mid" />
    <div className="pw-fog" />
    <div className="pw-mountain pw-mountain--near" />
  </div>
);

const Home = ({ lang, onNav }) => {
  const t = window.PW_CONTENT[lang].home;
  const [email, setEmail] = React.useState("");
  const [subscribed, setSubscribed] = React.useState(false);
  const isJa = lang === "ja";

  return (
    <div className="pw-page-anim" data-screen-label={`Home (${lang})`}>
      <section className="pw-hero">
        <div className="pw-hero-mark">
          <img src="assets/logo-pigeon-green.png" alt="" />
          <span className="pw-hero-mark-label">{t.heroLabel}</span>
        </div>
        <div className="pw-hero-grid">
          <div>
            <h1 className={isJa ? "pw-hero-tagline-jp" : "pw-hero-tagline-en"}>
              {t.taglineLine1}<br />{t.taglineLine2}
            </h1>
            <p className={`pw-hero-pitch${isJa ? "" : " pw-hero-pitch--en"}`}>{t.pitch}</p>
          </div>
          <aside className="pw-hero-aside">
            {t.asideLines.map((l, i) => <span key={i} className="pw-hero-aside-line">{l}</span>)}
            <hr />
            <span className="pw-hero-aside-line">{t.asideMeta}</span>
          </aside>
        </div>
      </section>

      <Landscape />

      <section className="pw-section">
        <div className="pw-section-head">
          <div>
            <div className="pw-eyebrow">{isJa ? "刊行物" : "Catalogue"}</div>
            <h2 className="pw-section-title">{t.seriesTitle}</h2>
          </div>
          <p className="pw-section-aside">{t.seriesAside}</p>
        </div>
        <div className="pw-series-grid">
          {t.seriesItems.map((s) => (
            <article className="pw-series-card" key={s.num}>
              <div className="pw-series-card-num">— {s.num}</div>
              <div className="pw-series-card-kind">{s.kind}</div>
              <h3 className="pw-series-card-title-jp">{s.titleJp}</h3>
              <div className="pw-series-card-title-en">{s.titleEn}</div>
              <p className={`pw-series-card-lede${isJa ? "" : " pw-series-card-lede--en"}`}>{s.lede}</p>
              <div className="pw-series-card-foot">
                <span>{s.meta}</span>
                <span className="pw-series-card-cta">{isJa ? "—— 刊行を待つ" : "— forthcoming →"}</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="pw-letter" id="letter">
        <div className="pw-letter-inner">
          <div className="pw-letter-eyebrow">{t.letterEyebrow}</div>
          <h2 className={isJa ? "pw-letter-title-jp" : "pw-letter-title-en"}>
            {t.letterTitle}
          </h2>
          <p className={`pw-letter-lede${isJa ? " pw-letter-lede-jp" : ""}`}>{t.letterLede}</p>
          {subscribed ? (
            <div className="pw-letter-thanks">{t.letterThanks}</div>
          ) : (
            <form
              className="pw-letter-form"
              onSubmit={(e) => { e.preventDefault(); if (email.includes("@")) setSubscribed(true); }}
            >
              <input
                type="email"
                required
                placeholder={t.letterPlaceholder}
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
              <button type="submit" className="pw-btn pw-btn--primary">{t.letterButton}</button>
            </form>
          )}
          <div className="pw-letter-foot">
            <span>{t.letterFootLeft}</span>
            <span>{t.letterFootRight}</span>
          </div>
          <div className="pw-letter-buttondown">
            <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
              <rect x="0.5" y="0.5" width="11" height="11" rx="1.5" stroke="currentColor"/>
              <path d="M3 4l3 2.5L9 4" stroke="currentColor" strokeLinecap="round"/>
            </svg>
            <span>delivered by Buttondown</span>
          </div>
        </div>
      </section>
    </div>
  );
};

const About = ({ lang, onNav }) => {
  const t = window.PW_CONTENT[lang].about;
  const isJa = lang === "ja";
  const sig = window.PW_CONTENT[lang].signature;
  return (
    <div className="pw-page-anim" data-screen-label={`About (${lang})`}>
      <div className="pw-interior-head">
        <div>
          <div className="pw-interior-eyebrow">{t.eyebrow}</div>
          <p className={`pw-interior-lede${isJa ? " pw-interior-lede-jp" : ""}`}>{t.lede}</p>
        </div>
        <h1 className={isJa ? "pw-interior-title-jp" : "pw-interior-title-en"}>
          {t.titleLine1}<br />{t.titleLine2}<br />{t.titleLine3}
        </h1>
      </div>
      <div className="pw-interior-rule" />

      <div className="pw-band" aria-hidden="true">
        <div className="pw-band-sun" />
        <div className="pw-mountain pw-mountain--far" style={{ opacity: 0.55 }} />
        <div className="pw-mountain pw-mountain--mid" style={{ opacity: 0.85 }} />
        <div className="pw-fog" />
        <div className="pw-band-terrace" />
      </div>

      <section className="pw-attrs">
        {t.attrs.map((a, i) => (
          <div className="pw-attr" key={i}>
            <div className="pw-attr-num">— 0{i + 1}</div>
            <div className="pw-attr-label">{a.label}</div>
            <p className="pw-attr-value-jp">{a.valueJp}</p>
            <p className="pw-attr-value">{a.valueEn}</p>
          </div>
        ))}
      </section>

      <article className={`pw-prose${isJa ? " pw-prose--jp" : ""}`}>
        <h2>{t.proseTitle}</h2>
        {t.paras.map((p, i) => (
          <p key={i} className={i === 0 ? "pw-dropcap" : ""}>{p}</p>
        ))}
        <blockquote>
          {t.creed}
          <div style={{ fontStyle: "italic", fontFamily: "var(--pw-font-display)", fontSize: 15, color: "var(--pw-fg-muted)", marginTop: 8, fontWeight: 400 }}>
            — {t.creedEn}
          </div>
        </blockquote>
        {t.paras2.map((p, i) => <p key={"b" + i}>{p}</p>)}
        <hr className="pw-prose-hr" />
        <div style={{ marginTop: 32 }}>
          <span className="pw-essay-signature">
            <span className="pw-signature-name">{sig.name}</span>
            {sig.nameEn && <span className="pw-signature-name-en">{sig.nameEn}</span>}
            <span className="pw-signature-seal">{sig.sealChar}</span>
          </span>
        </div>
      </article>

      <section className="pw-tensions">
        <div className="pw-section-head">
          <div>
            <div className="pw-eyebrow">{isJa ? "緊張のあいだに" : "Between"}</div>
            <h2 className="pw-section-title">{t.tensionsTitle}</h2>
          </div>
        </div>
        {t.tensions.map((row, i) => (
          <div className="pw-tension-row" key={i}>
            <div className="pw-tension-side">
              {row.left}
              <span className="pw-tension-side-en">{row.leftEn}</span>
            </div>
            <div className="pw-tension-bridge">— と —</div>
            <div className="pw-tension-side pw-tension-side--right">
              {row.right}
              <span className="pw-tension-side-en">{row.rightEn}</span>
            </div>
          </div>
        ))}
        <p className={`pw-tensions-foot${isJa ? "" : " pw-tensions-foot--en"}`}>{t.tensionsFoot}</p>
      </section>
    </div>
  );
};

const Contact = ({ lang, onNav }) => {
  const t = window.PW_CONTENT[lang].contact;
  const isJa = lang === "ja";
  return (
    <div className="pw-page-anim" data-screen-label={`Contact (${lang})`}>
      <div className="pw-interior-head">
        <div>
          <div className="pw-interior-eyebrow">{t.eyebrow}</div>
          <p className={`pw-interior-lede${isJa ? " pw-interior-lede-jp" : ""}`}>{t.lede}</p>
        </div>
        <h1 className={isJa ? "pw-interior-title-jp" : "pw-interior-title-en"}>
          {t.title}
        </h1>
      </div>
      <div className="pw-interior-rule" />

      <section className="pw-contact">
        {t.blocks.map((b, i) => (
          <div className="pw-contact-block" key={i}>
            <div className="pw-contact-label">— {b.label}</div>
            <div>
              <p className="pw-contact-value">
                {b.link ? (
                  <a href={b.link} target={b.link.startsWith("http") ? "_blank" : undefined} rel="noreferrer">{b.value}</a>
                ) : b.value}
              </p>
              {b.note && <p className="pw-contact-note">{b.note}</p>}
            </div>
          </div>
        ))}
      </section>
    </div>
  );
};

const LegalShell = ({ lang, page, onNav, children }) => {
  const t = window.PW_CONTENT[lang].legal;
  const pageContent = window.PW_CONTENT[lang][page];
  const isJa = lang === "ja";
  return (
    <div className="pw-page-anim" data-screen-label={`${page} (${lang})`}>
      <div className="pw-interior-head">
        <div>
          <div className="pw-interior-eyebrow">{pageContent.eyebrow}</div>
          <p className={`pw-interior-lede${isJa ? " pw-interior-lede-jp" : ""}`}>{pageContent.lede}</p>
        </div>
        <h1 className={isJa ? "pw-interior-title-jp" : "pw-interior-title-en"} style={{ fontSize: 44 }}>
          {pageContent.title}
        </h1>
      </div>
      <div className="pw-interior-rule" />
      <nav className="pw-legal-toc">
        <span className="pw-legal-toc-label">{t.tocLabel}</span>
        {Object.entries(t.pages).map(([k, v]) => (
          <button
            key={k}
            className={page === k ? "is-active" : ""}
            onClick={() => onNav(k)}
          >{v}</button>
        ))}
      </nav>
      {children}
    </div>
  );
};

const Privacy = ({ lang, onNav }) => {
  const t = window.PW_CONTENT[lang].privacy;
  const isJa = lang === "ja";
  return (
    <LegalShell lang={lang} page="privacy" onNav={onNav}>
      <article className={`pw-prose${isJa ? " pw-prose--jp" : ""}`}>
        {t.paras.map(([h, p], i) => (
          <React.Fragment key={i}>
            <h2>{h}</h2>
            <p>{p}</p>
          </React.Fragment>
        ))}
      </article>
    </LegalShell>
  );
};

const Terms = ({ lang, onNav }) => {
  const t = window.PW_CONTENT[lang].terms;
  const isJa = lang === "ja";
  return (
    <LegalShell lang={lang} page="terms" onNav={onNav}>
      <article className={`pw-prose${isJa ? " pw-prose--jp" : ""}`}>
        {t.paras.map(([h, p], i) => (
          <React.Fragment key={i}>
            <h2>{h}</h2>
            <p>{p}</p>
          </React.Fragment>
        ))}
      </article>
    </LegalShell>
  );
};

const Tokushoho = ({ lang, onNav }) => {
  const t = window.PW_CONTENT[lang].tokushoho;
  const isJa = lang === "ja";
  return (
    <LegalShell lang={lang} page="tokushoho" onNav={onNav}>
      <article className={`pw-prose${isJa ? " pw-prose--jp" : ""}`}>
        <table className="pw-legal-table">
          <tbody>
            {t.rows.map(([k, v], i) => (
              <tr key={i}>
                <th>{k}</th>
                <td>{v}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </article>
    </LegalShell>
  );
};

window.Home = Home;
window.About = About;
window.Contact = Contact;
window.Privacy = Privacy;
window.Terms = Terms;
window.Tokushoho = Tokushoho;