/* Inspiration, About, Contact, Privacy */

const SPACE_PRODUCTS = {
  bath: ["selimiye-calacatta", "tunca-perla", "sis-acik-gri", "zumrut-sirli"],
  kitchen: ["nane-sirli", "balkan-ceviz", "kale-antrasit", "urban-gri"],
  living: ["saraclar-bej", "kavak-mese", "kavak-baliksirti", "selimiye-calacatta"],
  outdoor: ["kapikule-tas", "tundzha-duman", "teras-ahsap", "urban-gri"]
};

function InspirationPage() {
  const { t, route } = useApp();
  useEffect(() => {
    if (route.q.space) {
      const el = document.getElementById("space-" + route.q.space);
      if (el) setTimeout(() => window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }), 60);
    }
  }, [route.q.space]);
  return (
    <>
      <PageHead title={t("ip.title")} lead={t("ip.intro")}>
        <nav className="btn-row" style={{ marginTop: 24 }} aria-label={t("ip.title")}>
          {window.SPACES.map(s => (
            <a key={s.id} className="btn btn-line btn-sm" href={hrefFor(route.lang, "inspiration", null, "space=" + s.id)}>{t("space." + s.id)}</a>
          ))}
        </nav>
      </PageHead>
      {window.SPACES.map((s, i) => {
        const rel = SPACE_PRODUCTS[s.id].map(id => window.PRODUCTS.find(p => p.id === id)).filter(Boolean);
        return (
          <section key={s.id} id={"space-" + s.id} className="ip-sec" aria-labelledby={"sh-" + s.id} style={i % 2 ? { background: "var(--stone)" } : null}>
            <div className="wrap">
              <div className="ip-head">
                <div>
                  <p className="num">0{i + 1}</p>
                  <h2 id={"sh-" + s.id} className="h-1" style={{ marginTop: 8 }}>{t("space." + s.id)}</h2>
                </div>
                <p className="lead">{t("space." + s.id + ".d")}</p>
              </div>
              <div className="ip-grid" style={i % 2 ? { gridTemplateColumns: "1fr 1.5fr" } : null}>
                <figure className="ip-fig" style={{ aspectRatio: "4/3", order: i % 2 ? 2 : 0 }}><img src={s.img} alt={t("space." + s.id)} loading="lazy" /></figure>
                <figure className="ip-fig" style={{ aspectRatio: i % 2 ? "4/4.5" : "4/4.5" }}><img src={s.img2} alt="" loading="lazy" /></figure>
              </div>
              <p className="ref-note">{t("ip.ref")}</p>
              <div className="ip-rel">
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
                  <h3 className="h-3">{t("ip.related")}</h3>
                  <div className="btn-row">
                    <a className="btn btn-line btn-sm" href={hrefFor(route.lang, "products", null, "usage=" + s.id)}>{t("ip.products")}</a>
                    <a className="btn btn-primary btn-sm" href={hrefFor(route.lang, "quote")}>{t("ip.cta")}</a>
                  </div>
                </div>
                <div className="ip-rel-row">
                  {rel.map(p => (
                    <a key={p.id} className="mini" href={hrefFor(route.lang, "product", p.id)}>
                      <img src={p.img[0]} alt="" loading="lazy" />
                      <span><b>{p.name}</b><span>{p.size} cm · {t("v." + p.look)}</span></span>
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </section>
        );
      })}
    </>
  );
}

function AboutPage() {
  const { t, route } = useApp();
  return (
    <>
      <PageHead title={t("ab.title")} />
      <div className="wrap about">
        <div className="body">
          <p className="h-2" style={{ marginBottom: 28 }}>{t("ab.lead")}</p>
          <p className="lead">{t("ab.p1")}</p>
          <p className="lead">{t("ab.p2")}</p>
          <div className="vals">
            {[1, 2, 3].map(n => <div key={n}><h3>{t(`ab.v${n}.t`)}</h3><p>{t(`ab.v${n}.d`)}</p></div>)}
          </div>
          <p style={{ marginTop: 36 }} className="muted">{t("ab.ig")} <a href={window.SITE.instagram} target="_blank" rel="noopener">{window.SITE.instagramHandle}</a></p>
          <div className="btn-row" style={{ marginTop: 24 }}>
            <a className="btn btn-primary" href={hrefFor(route.lang, "contact")}>{t("visit.title")}</a>
            <a className="btn btn-line" href={hrefFor(route.lang, "products")}>{t("hero.cta1")}</a>
          </div>
        </div>
        <div className="about-photos">
          <image-slot id="about-store-1" class="big" shape="rect" placeholder={t("pending.photo") + " — 1"}></image-slot>
          <image-slot id="about-store-2" shape="rect" placeholder={t("pending.photo") + " — 2"}></image-slot>
          <image-slot id="about-store-3" shape="rect" placeholder={t("pending.photo") + " — 3"}></image-slot>
        </div>
      </div>
    </>
  );
}

function ContactPage() {
  const { t, route } = useApp();
  return (
    <>
      <PageHead title={t("ct.title")} lead={t("ct.intro")} />
      <section className="sec-tight"><div className="wrap"><VisitBlock compact /></div></section>
      <section className="sec-tight sec-stone">
        <div className="wrap contact" style={{ paddingTop: 0, paddingBottom: 0 }}>
          <div>
            <p className="eyebrow">{t("intl2.eyebrow")}</p>
            <h2 className="h-2" style={{ margin: "14px 0 16px" }}>{t("intl2.title")}</h2>
            <p className="muted" style={{ marginBottom: 24 }}>{t("intl2.text")}</p>
            <ol className="intl-points intl-points-1">
              {[1, 2, 3, 4].map(n => (
                <li key={n}><span className="step-n">0{n}</span><div><h3>{t(`intl2.p${n}.t`)}</h3><p>{t(`intl2.p${n}.d`)}</p></div></li>
              ))}
            </ol>
          </div>
          <ContactForm />
        </div>
      </section>
    </>
  );
}

function PrivacyPage() {
  const { t } = useApp();
  return (
    <>
      <PageHead title={t("pv.title")} />
      <div className="wrap" style={{ padding: "48px var(--gut) 96px", maxWidth: 860, marginLeft: "auto", marginRight: "auto" }}>
        <p className="lead">{t("pv.text")}</p>
        <div className="placeholder" style={{ minHeight: 320, marginTop: 32 }}><span>{t("pv.ph")}</span></div>
      </div>
    </>
  );
}

Object.assign(window, { InspirationPage, AboutPage, ContactPage, PrivacyPage });