/* ============================================================
   STREAM WITH LIEN — Contact & Webshop
   ============================================================ */

/* ---------------- CONTACT ---------------- */
function ContactPage({ d, ui, social }) {
  const ref = useReveal();
  const [form, setForm] = useState({ name: "", email: "", subject: d.subjects[0], message: "" });
  const [sent, setSent] = useState(false);
  const [err, setErr] = useState({});

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = true;
    if (!/^\S+@\S+\.\S+$/.test(form.email)) next.email = true;
    if (!form.message.trim()) next.message = true;
    setErr(next);
    if (Object.keys(next).length === 0) setSent(true);
  };

  return (
    <>
      <PageHero kicker={d.kicker} title={d.h1} lede={d.lede} />
      <section className="section contact" ref={ref} style={{ paddingTop: 0 }}>
        <div className="wrap contact__grid">
          <div className="contact__form sticker reveal">
            {sent ? (
              <div className="contact__done">
                <span className="contact__done-ic"><Icon name="check" size={34} /></span>
                <p>{d.sent}</p>
                <Btn variant="ghost" onClick={() => { setSent(false); setForm({ name: "", email: "", subject: d.subjects[0], message: "" }); }}>↺</Btn>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <h2 className="contact__h">{d.formH}</h2>
                <div className="field-row">
                  <label className={"field" + (err.name ? " field--err" : "")}>
                    <span>{d.fields.name}</span>
                    <input value={form.name} onChange={set("name")} placeholder="Lien" />
                  </label>
                  <label className={"field" + (err.email ? " field--err" : "")}>
                    <span>{d.fields.email}</span>
                    <input value={form.email} onChange={set("email")} placeholder="hoi@email.nl" inputMode="email" />
                  </label>
                </div>
                <label className="field">
                  <span>{d.fields.subject}</span>
                  <select value={form.subject} onChange={set("subject")}>
                    {d.subjects.map((s, i) => <option key={i}>{s}</option>)}
                  </select>
                </label>
                <label className={"field" + (err.message ? " field--err" : "")}>
                  <span>{d.fields.message}</span>
                  <textarea rows={5} value={form.message} onChange={set("message")} placeholder="..." />
                </label>
                <Btn variant="primary" size="lg" icon="arrow" type="submit" className="contact__send">{d.send}</Btn>
              </form>
            )}
          </div>

          <aside className="contact__side reveal">
            <div className="contact__card sticker">
              <span className="contact__card-ic"><Icon name="discord" size={26} /></span>
              <h3 className="contact__card-h">{d.sideH}</h3>
              <p className="soft">{d.sideP}</p>
              <Btn variant="ink" iconLeft="discord" href={social.discord}>{ui.joinDiscord}</Btn>
            </div>
            <div className="contact__card sticker">
              <span className="contact__card-ic"><Icon name="mail" size={26} /></span>
              <h3 className="contact__card-h">{d.businessH}</h3>
              <p className="soft">{d.businessP}</p>
              <div className="flex" style={{ gap: 12, flexWrap: "wrap", marginTop: 6 }}>
                <a className="social-btn" href={social.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon name="instagram" size={20} /></a>
                <a className="social-btn" href={social.x} target="_blank" rel="noopener noreferrer" aria-label="X"><Icon name="x" size={20} /></a>
                <a className="social-btn" href={social.youtube} target="_blank" rel="noopener noreferrer" aria-label="YouTube"><Icon name="youtube" size={20} /></a>
                <a className="social-btn" href={social.tiktok} target="_blank" rel="noopener noreferrer" aria-label="TikTok"><Icon name="tiktok" size={20} /></a>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </>
  );
}

/* ---------------- WEBSHOP ---------------- */
function WebshopPage({ d, ui, social }) {
  const ref = useReveal();
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  const notify = (e) => { e.preventDefault(); if (/^\S+@\S+\.\S+$/.test(email)) setDone(true); };
  return (
    <>
      <PageHero kicker={d.kicker} title={d.h1} lede={d.lede}>
        <div className="shop-hero-badge">{d.badge} ✦</div>
      </PageHero>
      <section className="section webshop" ref={ref} style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="shop-grid">
            {d.products.map((p, i) => (
              <article className="product sticker reveal" key={i} style={{ transitionDelay: (i % 3 * 60) + "ms" }}>
                <div className="product__media">
                  <Ph label={p.img} h={200} r={12} />
                  <span className="product__soon">{d.badge}</span>
                </div>
                <div className="product__body">
                  <div className="product__row">
                    <h3 className="product__t">{p.t}</h3>
                    <span className="product__price">{p.price}</span>
                  </div>
                  <p className="product__d soft">{p.d}</p>
                </div>
              </article>
            ))}
          </div>

          <div className="notify sticker reveal">
            <div className="notify__text">
              <span className="eyebrow">{ui.soon}</span>
              <h2 className="notify__h">{d.notifyH}</h2>
              <p className="soft" style={{ margin: 0, fontSize: 16 }}>{d.notifyP}</p>
            </div>
            {done ? (
              <div className="notify__done"><Icon name="check" size={22} />{d.notifyDone}</div>
            ) : (
              <form className="notify__form" onSubmit={notify}>
                <input value={email} onChange={e => setEmail(e.target.value)} placeholder={d.notifyPlaceholder} inputMode="email" />
                <Btn variant="primary" icon="arrow" type="submit">{d.notifyCta}</Btn>
              </form>
            )}
          </div>

          <div className="center" style={{ marginTop: 36 }}>
            <Btn variant="ghost" icon="arrowUpRight" href={social.shop}>{d.visitShop}</Btn>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ContactPage, WebshopPage });