// FAQ, Contact, Footer
function FAQ({ t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="caps eyebrow mono" style={{ marginBottom: 20 }}>[05] — {t.faq.eyebrow}</div>
            <h2 className="display title">{t.faq.title}</h2>
          </div>
          <div />
        </div>
        <div className="faq-list">
          {t.faq.items.map((it, i) => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="q-row">
                <div className="q-num">0{i + 1}</div>
                <div className="q-text"><BrandInline>{it.q}</BrandInline></div>
                <div className="q-toggle">+</div>
              </div>
              <div className="a-text"><BrandInline>{it.a}</BrandInline></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ t }) {
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error
  const [topic, setTopic] = React.useState(0);
  const f = t.contact.form;

  const FORMSPREE_ID = "meenorjd";

  const handle = (e) => {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    const data = new FormData(e.target);
    data.set("Sujet", f.topics[topic]);
    fetch("https://formspree.io/f/" + FORMSPREE_ID, {
      method: "POST",
      body: data,
      headers: { Accept: "application/json" },
    })
      .then((res) => {
        if (res.ok) {
          setStatus("sent");
          e.target.reset();
          setTopic(0);
        } else {
          setStatus("error");
        }
      })
      .catch(() => setStatus("error"));
  };

  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="caps eyebrow mono" style={{ marginBottom: 20 }}>[06] — {t.contact.eyebrow}</div>
            <h2 className="display title">{t.contact.title}</h2>
          </div>
          <p className="sub">{t.contact.sub}</p>
        </div>

        <div className="contact-grid">
          <form className="contact-form" onSubmit={handle}>
            <input type="hidden" name="Sujet" value={f.topics[topic]} />
            <div className="field">
              <label>{f.name}</label>
              <input type="text" name="Nom" required />
            </div>
            <div className="field">
              <label>{f.org}</label>
              <input type="text" name="Structure" />
            </div>
            <div className="field">
              <label>{f.email}</label>
              <input type="email" name="Email" required />
            </div>
            <div className="field full">
              <label>{f.topic}</label>
              <div className="topic-pills">
                {f.topics.map((o, i) => (
                  <button
                    type="button"
                    key={i}
                    className={"topic-pill" + (topic === i ? " active" : "")}
                    onClick={() => setTopic(i)}
                  >
                    {o}
                  </button>
                ))}
              </div>
            </div>
            <div className="field full">
              <label>{f.msg}</label>
              <textarea name="Message" rows="5" />
            </div>
            <div className="submit-row">
              <span className="sent-msg">
                {status === "sent" && "✓ " + f.sent}
                {status === "error" && "⚠ " + f.err}
              </span>
              <button
                type="submit"
                className="btn btn-primary"
                disabled={status === "sending" || status === "sent"}
              >
                {status === "sending" ? "…" : f.send + " →"}
              </button>
            </div>
          </form>

          <div className="contact-info">
            <div className="info-row">
              <div className="k">ADDR</div>
              <div className="v">{t.contact.infos.addr}</div>
            </div>
            {/* TEL — à compléter */}
            <div className="info-row">
              <div className="k">MAIL</div>
              <div className="v mono">{t.contact.infos.mail}</div>
            </div>
            <a href={"mailto:" + t.contact.infos.mail} className="big-cta">
              <div>
                <div className="mono" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>
                  Email
                </div>
                <div className="big-num" style={{ fontSize: 22 }}>{t.contact.infos.mail}</div>
              </div>
              <div style={{ fontSize: 32 }}>→</div>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer>
      <div className="container">
        <div className="giant-wordmark">
          dev<span className="cross">×</span>net
        </div>
        <div className="footer-top">
          <div>
            <div className="footer-tag display">{t.footer.tag}</div>
            <div style={{ color: "var(--ink-dim)", fontSize: 13 }}>{t.footer.made}</div>
          </div>
          <div>
            <h6>{t.footer.colServices}</h6>
            <ul>
              {t.footer.servicesList.map((s, i) => (
                <li key={i}><a href="#services">{s}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h6>{t.footer.colStudio}</h6>
            <ul>
              <li><a href="#about">{t.nav.about}</a></li>
              <li><a href="#process">{t.nav.process}</a></li>
              <li><a href="#faq">{t.nav.faq}</a></li>
            </ul>
          </div>
          <div>
            <h6>{t.footer.colContact}</h6>
            <ul>
              <li>{t.contact.infos.addr}</li>
              {/* TEL — à compléter */}
              <li className="mono">{t.contact.infos.mail}</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>{t.footer.rights}</div>
          <div className="footer-socials">
            <a href="https://www.linkedin.com/company/devxnet/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="3"/>
                <line x1="8" y1="11" x2="8" y2="17"/>
                <line x1="8" y1="7" x2="8" y2="8"/>
                <path d="M12 17v-4a2 2 0 0 1 4 0v4"/>
                <line x1="12" y1="11" x2="12" y2="17"/>
              </svg>
            </a>
            {/* X — à compléter : <a href="https://x.com/..." target="_blank" rel="noopener noreferrer" aria-label="X">...</a> */}
          </div>
          <div className="links">
            <a href="mentions-legales.html">{t.footer.links.legal}</a>
            <a href="confidentialite.html">{t.footer.links.privacy}</a>
            <a href="cookies.html">{t.footer.links.cookies || "Cookies"}</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

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