/* ============================================================
   NOVRIX — Services, Sectors, Cases, Contact  → window
   ============================================================ */

function Services({ t }) {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <span className="eyebrow" data-reveal>{t.services.eyebrow}</span>
        <h2 className="h-section" data-reveal style={{ maxWidth: "18ch" }}>{t.services.title}</h2>
        <div className="services__grid">
          {t.services.items.map((s, i) => {
            const Icon = SERVICE_ICONS[s.k];
            return (
              <article className="svc" key={i} data-reveal style={{ "--d": `${i * 90}ms` }}>
                <div className="svc__num">0{i + 1} / 03</div>
                <div className="svc__icon"><Icon /></div>
                <h3>{s.h}</h3>
                <p>{s.p}</p>
                <span className="svc__line" />
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Sectors({ t }) {
  return (
    <section className="section sectors" id="sectors">
      <div className="wrap">
        <div className="sectors__head">
          <div>
            <span className="eyebrow" data-reveal>{t.sectors.eyebrow}</span>
            <h2 className="h-section" data-reveal style={{ maxWidth: "20ch" }}>{t.sectors.title}</h2>
          </div>
          <p className="lede" data-reveal style={{ maxWidth: "30ch", marginBottom: "6px" }}>{t.sectors.sub}</p>
        </div>
        <div className="sectors__grid">
          {t.sectors.items.map((s, i) => (
            <article className="sector" key={i} data-reveal style={{ "--d": `${i * 80}ms` }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                <span className="sector__idx">{String(i + 1).padStart(2, "0")}</span>
                <IconArrowUR />
              </div>
              <div>
                <h3>{s.h}</h3>
                <p>{s.p}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Metric({ m, flowLabels }) {
  return (
    <div className="metric">
      <div className="metric__label">
        {m.label}
        <div className="metric__flow">
          <span>{m.flow ? m.flow[0] : flowLabels.from}</span>
          <span className="to">→</span>
          <span className="to">{m.flow ? m.flow[1] : flowLabels.to}</span>
        </div>
      </div>
      <div className={"metric__val" + (m.accent ? " accent" : "")}>
        {m.display ? (
          <span>{m.display}</span>
        ) : (
          <>
            <CountUp value={m.value} />
            {m.unit && <span className="unit">{m.unit}</span>}
          </>
        )}
      </div>
    </div>
  );
}

function Cases({ t }) {
  const [active, setActive] = useState(0);
  const sectors = t.cases.sectors;
  const c = sectors[active];
  return (
    <section className="section cases" id="cases">
      <div className="wrap">
        <div className="cases__head">
          <span className="eyebrow" data-reveal>{t.cases.eyebrow}</span>
          <h2 className="h-section" data-reveal>{t.cases.title}</h2>
          <p className="lede" data-reveal>{t.cases.sub}</p>
        </div>

        <div data-reveal>
          <div className="cases__tabs">
            {sectors.map((s, i) => (
              <button key={i} className={"tab" + (i === active ? " active" : "")} onClick={() => setActive(i)}>
                {s.badge}
              </button>
            ))}
          </div>

          <div className="case" key={active}>
            <div className="case__lead">
              <span className="badge">{c.badge}</span>
              <p className="big">
                {c.lead.map((part, i) => (i % 2 === 1 ? <em key={i}>{part}</em> : <span key={i}>{part}</span>))}
              </p>
            </div>
            <div className="case__metrics">
              {c.metrics.map((m, i) => <Metric key={active + "-" + i} m={m} flowLabels={t.cases.flow} />)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Contact ---------------- */
function Contact({ t }) {
  const f = t.contact.form;
  const [vals, setVals] = useState({ name: "", company: "", email: "", message: "" });
  const [errs, setErrs] = useState({});
  const [sent, setSent] = useState(false);

  const set = (k) => (e) => { setVals((v) => ({ ...v, [k]: e.target.value })); setErrs((er) => ({ ...er, [k]: null })); };

  const validate = () => {
    const e = {};
    if (!vals.name.trim()) e.name = f.errRequired;
    if (!vals.email.trim()) e.email = f.errRequired;
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(vals.email)) e.email = f.errEmail;
    if (!vals.message.trim()) e.message = f.errRequired;
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    try {
      await fetch("https://immo-generator.vercel.app/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: vals.name, company: vals.company, email: vals.email, message: vals.message }),
      });
    } catch (_) {}
    setSent(true);
  };

  return (
    <section className="section contact" id="contact">
      <div className="wrap">
        <div className="contact__grid">
          <aside className="contact__aside">
            <span className="eyebrow" data-reveal>{t.contact.eyebrow}</span>
            <h2 className="h-section" data-reveal style={{ maxWidth: "16ch" }}>{t.contact.title}</h2>
            <p className="lede" data-reveal>{t.contact.sub}</p>
            <div className="contact__direct" data-reveal>
              <a href="mailto:contact@novrix.be">
                <span className="ic"><IconMail /></span>
                <span className="k">{t.contact.directEmailK}</span>
                <span className="v">contact@novrix.be</span>
              </a>
              <a href="tel:+32473289767">
                <span className="ic"><IconPhone /></span>
                <span className="k">{t.contact.directTelK}</span>
                <span className="v">0473 28 97 67</span>
              </a>
            </div>
          </aside>

          <div data-reveal style={{ "--d": "120ms" }}>
            {sent ? (
              <div className="form__success">
                <span className="chk"><IconCheck /></span>
                <h3>{f.successH}</h3>
                <p>{f.successP}</p>
              </div>
            ) : (
              <form className="form" onSubmit={submit} noValidate>
                <div className="field--row" style={{ display: "grid" }}>
                  <div className={"field" + (errs.name ? " invalid" : "")}>
                    <label>{f.name}</label>
                    <input value={vals.name} onChange={set("name")} placeholder={f.namePh} />
                    <span className="field__err">{errs.name}</span>
                  </div>
                  <div className="field">
                    <label>{f.company}</label>
                    <input value={vals.company} onChange={set("company")} placeholder={f.companyPh} />
                    <span className="field__err"> </span>
                  </div>
                </div>
                <div className={"field" + (errs.email ? " invalid" : "")}>
                  <label>{f.email}</label>
                  <input type="email" value={vals.email} onChange={set("email")} placeholder={f.emailPh} />
                  <span className="field__err">{errs.email}</span>
                </div>
                <div className={"field" + (errs.message ? " invalid" : "")}>
                  <label>{f.message}</label>
                  <textarea value={vals.message} onChange={set("message")} placeholder={f.messagePh} />
                  <span className="field__err">{errs.message}</span>
                </div>
                <div className="form__submit">
                  <button type="submit" className="btn btn-primary">{f.submit} <IconArrow /></button>
                  <span className="form__note">{f.note}</span>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, Sectors, Cases, Contact });