/* global React, Ic, Wordmark, PlaceholderImg, useT */
const { useState } = React;

function FAQ() {
  const { t } = useT();
  const [open, setOpen] = useState(0);
  const faqs = [
    { q: t("faq.q1"), a: t("faq.a1") },
    { q: t("faq.q2"), a: t("faq.a2") },
    { q: t("faq.q3"), a: t("faq.a3") },
    { q: t("faq.q4"), a: t("faq.a4") },
    { q: t("faq.q5"), a: t("faq.a5") },
    { q: t("faq.q6"), a: t("faq.a6") },
    { q: t("faq.q7"), a: t("faq.a7") },
  ];
  return (
    <section id="faq" className="section" data-screen-label="07 FAQ">
      <div className="shell">
        <div className="faq-grid">
          <div>
            <span className="eyebrow"><span className="dot"></span>{t("faq.eyebrow")}</span>
            <h2 className="display h-title" style={{ marginTop: 18, fontSize: "clamp(36px, 5vw, 72px)" }}>
              {t("faq.title_l1")}<br/>{t("faq.title_l2")}
            </h2>
            <p style={{ color: "var(--muted)", maxWidth: "32ch", marginTop: 18 }}>{t("faq.lead")}</p>
          </div>

          <div className="faq-list">
            {faqs.map((f, i) => (
              <div key={i} className={`faq-item${open === i ? " open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-toggle"><Ic.plus /></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BigMarkSection() {
  const { t } = useT();
  return (
    <section className="section" style={{ paddingTop: 40, paddingBottom: 40 }}>
      <div className="shell">
        <div className="kicker-row">
          <span>{t("mark.kicker1")}</span>
          <span className="line"></span>
          <span>{t("mark.kicker2")}</span>
        </div>
        <div className="big-mark display narrow">
          RIGA·LOCAL·HOST
        </div>
        <div className="kicker-row">
          <span>{t("mark.kicker3")}</span>
          <span className="line"></span>
          <span>{t("mark.kicker4")}</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const { t } = useT();
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div className="footer-logo-col">
            <a href="#top" aria-label="Riga Local Host"><img src="assets/logo.png" alt="Riga Local Host" /></a>
            <p style={{ marginTop: 18, maxWidth: "36ch" }}>{t("footer.tag")}</p>
          </div>
          <div>
            <h4>{t("footer.service")}</h4>
            <ul>
              <li><a href="#services">{t("footer.l.what")}</a></li>
              <li><a href="#who">{t("footer.l.who")}</a></li>
              <li><a href="#how">{t("footer.l.how")}</a></li>
              <li><a href="#faq">{t("footer.l.faq")}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t("footer.contact")}</h4>
            <ul>
              <li><a href="#request">{t("footer.l.request")}</a></li>
              {/*<li><a href="mailto:hello@rigalocalhost.lv">hello@rigalocalhost.lv</a></li>*/}
              {/*<li><a href="#">{t("footer.l.wa")}</a></li>*/}
              {/*<li><a href="#">{t("footer.l.ig")}</a></li>*/}
            </ul>
          </div>
          <div>
            <h4>{t("footer.hours")}</h4>
            <ul>
              <li>{t("footer.h.reply")}</li>
              <li>{t("footer.h.hosting")}</li>
              <li>{t("footer.h.langs")}</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t("footer.copy")}</span>
          <span>{t("footer.loc")}</span>
          <span>{t("footer.note")}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQ, BigMarkSection, Footer });