// Portfolio + Process + enhanced Contact form components
const { useState: useStateE } = React;
const E = () => window.DM_EXTRAS;

// ─── Portfolio ───────────────────────────────────────────────────────
const Portfolio = ({ lang }) => {
  const p = E()[lang].portfolio;
  const [active, setActive] = useStateE(0);
  const item = p.items[active];
  return (
    <section className="dm-section dm-section-portfolio" id="work">
      <div className="dm-container">
        <div className="dm-pf-head">
          <div>
            <div className="dm-eyebrow"><span className="dm-eyebrow-dot"></span>{p.eyebrow}</div>
            <h2>{p.title}</h2>
          </div>
          <p className="dm-lede dm-pf-lede">{p.lede}</p>
        </div>

        <div className="dm-pf-tabs" role="tablist">
          {p.items.map((it, i) => (
            <button
              key={i}
              className={"dm-pf-tab" + (i === active ? " is-active" : "")}
              onClick={() => setActive(i)}
              role="tab"
              aria-selected={i === active}
            >
              <span className="dm-pf-tab-tag">{it.tag}</span>
              <span className="dm-pf-tab-title">{it.title}</span>
            </button>
          ))}
        </div>

        <div className="dm-pf-stage" key={active}>
          <div className="dm-pf-mock" aria-hidden="true" style={{background:"transparent",border:"none",padding:0,overflow:"visible"}}>
            <IlluPortfolio tag={item.tag} />
          </div>

          <div className="dm-pf-meta">
            <div className="dm-pf-industry">{item.industry}</div>
            <h3 className="dm-pf-title">{item.title}</h3>
            <div className="dm-pf-result">{item.result}</div>
            <p className="dm-pf-desc">{item.desc}</p>
            <div className="dm-pf-tags">
              {item.tags.map((tg, i) => <span key={i} className="dm-pf-chip">{tg}</span>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Process ────────────────────────────────────────────────────────
const Process = ({ lang }) => {
  const p = E()[lang].process;
  return (
    <section className="dm-section dm-section-process">
      <div className="dm-container">
        <div className="dm-process-head">
          <div className="dm-eyebrow"><span className="dm-eyebrow-dot"></span>{p.eyebrow}</div>
          <h2>{p.title}</h2>
          <p className="dm-lede">{p.lede}</p>
        </div>
        <ol className="dm-process-grid">
          {p.steps.map((s, i) => (
            <li key={i} className="dm-process-step">
              <div className="dm-process-n">{s.n}</div>
              <h3 className="dm-process-title">{s.title}</h3>
              <p className="dm-process-desc">{s.desc}</p>
              {i < p.steps.length - 1 && <div className="dm-process-conn" aria-hidden="true" />}
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

// ─── Enhanced Contact Form ──────────────────────────────────────────
const ContactFormX = ({ lang, navigate }) => {
  const t = window.DM_I18N[lang];
  const ex = E()[lang].contactExtra;
  const p = t.pages.contact;
  const [values, setValues] = useStateE({ name: "", email: "", subject: "", message: "", consent: false });
  const [errors, setErrors] = useStateE({});
  const [sent, setSent] = useStateE(false);
  const [submitting, setSubmitting] = useStateE(false);

  const set = (k) => (e) => {
    const v = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setValues((s) => ({ ...s, [k]: v }));
    if (errors[k]) setErrors((s) => ({ ...s, [k]: null }));
  };

  const validate = () => {
    const e = {};
    if (!values.name.trim()) e.name = ex.errors.name;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) e.email = ex.errors.email;
    if (!values.message.trim() || values.message.trim().length < 5) e.message = ex.errors.message;
    return e;
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setSubmitting(true);
    setTimeout(() => { setSubmitting(false); setSent(true); }, 700);
  };

  if (sent) {
    return (
      <div className="dm-contact-success">
        <div className="dm-contact-success-icon"><Icon name="check" size={28} /></div>
        <h3>{ex.successTitle}</h3>
        <p>{ex.successDesc}</p>
      </div>
    );
  }

  return (
    <form className="dm-contact-form" onSubmit={submit} noValidate>
      <div className="dm-form-row">
        <label className={"dm-field" + (errors.name ? " has-error" : "")}>
          <span>{p.form.name}</span>
          <input type="text" value={values.name} onChange={set("name")} />
          {errors.name && <em className="dm-field-err">{errors.name}</em>}
        </label>
        <label className={"dm-field" + (errors.email ? " has-error" : "")}>
          <span>{p.form.email}</span>
          <input type="email" value={values.email} onChange={set("email")} />
          {errors.email && <em className="dm-field-err">{errors.email}</em>}
        </label>
      </div>
      <label className="dm-field">
        <span>{p.form.subject}</span>
        <input type="text" value={values.subject} onChange={set("subject")} />
      </label>
      <label className={"dm-field" + (errors.message ? " has-error" : "")}>
        <span>{p.form.message}</span>
        <textarea rows="6" value={values.message} onChange={set("message")}></textarea>
        {errors.message && <em className="dm-field-err">{errors.message}</em>}
      </label>
      <label className="dm-consent">
        <input type="checkbox" checked={values.consent} onChange={set("consent")} />
        <span>{ex.consent}<a href="#datenschutz" onClick={(e) => { e.preventDefault(); navigate && navigate("datenschutz"); }}>{ex.privacyLink}</a>.</span>
      </label>
      <button type="submit" className="dm-btn dm-btn-primary" disabled={submitting}>
        {submitting ? "…" : p.form.submit}<Icon name="arrow" size={16} />
      </button>
    </form>
  );
};

Object.assign(window, {
  DM_Portfolio: Portfolio,
  DM_Process: Process,
  DM_ContactFormX: ContactFormX,
});