// 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>
  );
};

// ─── Pricing ────────────────────────────────────────────────────────
const Pricing = ({ lang, navigate }) => {
  const p = E()[lang].pricing;
  return (
    <section className="dm-section dm-section-pricing" id="pricing">
      <div className="dm-container">
        <div className="dm-pricing-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>
        <div className="dm-pricing-grid">
          {p.tiers.map((t, i) => (
            <div key={i} className={"dm-tier" + (t.highlight ? " is-highlight" : "")}>
              {t.highlight && <div className="dm-tier-badge">{p.popular}</div>}
              <div className="dm-tier-tag">{t.tag}</div>
              <h3 className="dm-tier-name">{t.name}</h3>
              <div className="dm-tier-price"><strong>{t.price}</strong> <span>{t.unit}</span></div>
              <ul className="dm-tier-features">
                {t.features.map((f, j) => (
                  <li key={j}><Icon name="check" size={16}/><span>{f}</span></li>
                ))}
              </ul>
              <a href="/contact" onClick={(e)=>{e.preventDefault();navigate&&navigate("contact");}} className={"dm-btn " + (t.highlight ? "dm-btn-primary" : "dm-btn-ghost") + " dm-tier-cta"}>
                {p.ctaLabel}<Icon name="arrow" size={16}/>
              </a>
            </div>
          ))}
        </div>
        <p className="dm-pricing-note">{p.note}</p>
      </div>
    </section>
  );
};

// ─── FAQ ────────────────────────────────────────────────────────────
const Faq = ({ lang, navigate }) => {
  const p = E()[lang].faq;
  const [open, setOpen] = useStateE(0);
  return (
    <section className="dm-section dm-section-faq" id="faq">
      <div className="dm-container">
        <div className="dm-faq-grid">
          <div className="dm-faq-aside">
            <div className="dm-eyebrow"><span className="dm-eyebrow-dot"></span>{p.eyebrow}</div>
            <h2>{p.title}</h2>
            <p className="dm-lede">{p.lede}</p>
            <a href="/contact" onClick={(e)=>{e.preventDefault();navigate&&navigate("contact");}} className="dm-btn dm-btn-primary">
              {p.ctaLabel}<Icon name="arrow" size={16}/>
            </a>
          </div>
          <div className="dm-faq-list">
            {p.items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className={"dm-faq-item" + (isOpen ? " is-open" : "")}>
                  <button className="dm-faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                    <span>{it.q}</span>
                    <span className="dm-faq-toggle" aria-hidden="true">
                      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
                    </span>
                  </button>
                  <div className="dm-faq-a"><p>{it.a}</p></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};


// ─── Testimonials ────────────────────────────────────────────────────
const Testimonials = ({ lang }) => {
  const p = E()[lang].testimonials;
  return (
    <section className="dm-section dm-section-tm" id="testimonials">
      <div className="dm-container">
        <div className="dm-tm-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-tm-lede">{p.lede}</p>
        </div>
        <div className="dm-tm-grid">
          {p.items.map((it, i) => (
            <figure key={i} className="dm-tm-card">
              <svg className="dm-tm-quote" viewBox="0 0 32 32" width="28" height="28" aria-hidden="true"><path fill="currentColor" d="M10 8H4v8h4c0 3-1 5-4 6v2c5-1 8-4 8-10V8zm14 0h-6v8h4c0 3-1 5-4 6v2c5-1 8-4 8-10V8z"/></svg>
              <blockquote>{it.quote}</blockquote>
              <figcaption>
                <span className="dm-tm-author">{it.author}</span>
                <span className="dm-tm-role">{it.role}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, {
  DM_Testimonials: Testimonials,
  DM_Portfolio: Portfolio,
  DM_Process: Process,
  DM_Pricing: Pricing,
  DM_Faq: Faq,
  DM_ContactFormX: ContactFormX,
});