/* global React, ReactDOM, PageShell, PageHero, Crown, Icon, useT, useLang, TurnstileWidget */
const { useState } = React;

const partnerIcons = ["pen", "house", "truck", "package", "tag", "shield"];

const B2BForm = ({ fields, lang = "EN" }) => {
  const f = fields || {};
  const tc = ((window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {}).common || {};
  const subjectOpts = tc.subjectOptions || ["General Inquiry", "Quote Request", "B2B Partnership", "Other"];
  const sourceOpts  = tc.sourceOptions  || ["Google Search", "Referral", "Social Media", "Other"];
  const [form, setForm] = useState({ name: "", email: "", phone: "", country: "", subject: subjectOpts[0], message: "", source: "" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState("");
  const [turnstileToken, setTurnstileToken] = useState("");
  const update = (k, v) => setForm(p => ({ ...p, [k]: v }));
  const submit = async e => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = tc.errName || "Please enter your name.";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = tc.errEmailShort || "Enter a valid email.";
    if (!form.message.trim() || form.message.length < 10) errs.message = tc.errMessageShort || "Add a message (10+ chars).";
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;
    if (!turnstileToken) {
      setSendError(tc.errCaptcha || "Please complete the verification below.");
      return;
    }
    setSending(true); setSendError("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, formType: "b2b", lang, page: location.pathname, turnstileToken }),
      });
      const out = await res.json().catch(() => ({}));
      if (!res.ok || !out.ok) throw new Error(out.error || "Send failed");
      setSent(true);
    } catch (err) {
      const mail = "mailto:info@norgehouse.com?subject=" + encodeURIComponent("B2B Partnership — " + form.name) +
        "&body=" + encodeURIComponent(`Name: ${form.name}\nEmail: ${form.email}\nPhone: ${form.phone}\nCountry: ${form.country}\nSubject: ${form.subject}\nSource: ${form.source}\n\n${form.message}`);
      setSendError((tc.errSend || "Couldn't send right now.") + " ");
      window.location.href = mail;
    } finally {
      setSending(false);
    }
  };
  if (sent) return (
    <div style={{ background:"var(--bg-2)", border:"1px solid var(--hairline)", color:"var(--ink)", padding:24, borderRadius:"var(--radius)", display:"flex", gap:14 }}>
      <Icon name="check" size={20}/>
      <div><strong style={{ display:"block", marginBottom:4 }}>{tc.b2bSuccessTitle || "Thank you!"}</strong>{tc.b2bSuccessBody || "We'll be in touch within two business days."}</div>
    </div>
  );
  return (
    <div className="cta-form-light">
      <form className="cta__form" onSubmit={submit} noValidate>
        <div className="cta__row">
          <div><label>{f.name || "Full Name *"}</label><input type="text" value={form.name} onChange={e => update("name", e.target.value)} placeholder="Anna Lindgren"/>{errors.name && <div className="field-error">{errors.name}</div>}</div>
          <div><label>{f.email || "Email *"}</label><input type="email" value={form.email} onChange={e => update("email", e.target.value)} placeholder="anna@company.com"/>{errors.email && <div className="field-error">{errors.email}</div>}</div>
        </div>
        <div className="cta__row">
          <div><label>{f.phone || "Phone"}</label><input type="tel" value={form.phone} onChange={e => update("phone", e.target.value)} placeholder="+47 ..."/></div>
          <div><label>{f.country || "Country"}</label><input type="text" value={form.country} onChange={e => update("country", e.target.value)} placeholder="Norway"/></div>
        </div>
        <div className="cta__row">
          <div><label>{f.subject || "Subject"}</label><select value={form.subject} onChange={e => update("subject", e.target.value)}>{subjectOpts.map(o => <option key={o}>{o}</option>)}</select></div>
          <div><label>{f.source || "How did you find us?"}</label><select value={form.source} onChange={e => update("source", e.target.value)}><option value="">--</option>{sourceOpts.map(o => <option key={o}>{o}</option>)}</select></div>
        </div>
        <div><label>{f.message || "Message *"}</label><textarea value={form.message} onChange={e => update("message", e.target.value)} placeholder="Tell us about your company…"/>{errors.message && <div className="field-error">{errors.message}</div>}</div>
        {sendError && <div className="field-error" style={{ marginTop: 4 }}>{sendError}<a href="mailto:info@norgehouse.com" style={{ textDecoration: "underline" }}>info@norgehouse.com</a></div>}
        <div className="cta__submit-row">
          <button className="btn btn--lg" type="submit" disabled={sending}>{sending ? (tc.sending || "Sending…") : (f.send || "Send Message")} <span className="arrow"><Icon name="arrow" size={14}/></span></button>
          <TurnstileWidget onToken={setTurnstileToken}/>
        </div>
      </form>
    </div>
  );
};

const B2BInner = () => {
  const lang = useLang();
  const t = ((window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {}).b2bPage || {};
  const tr = (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {};
  const partners = tr.b2bPartners || [];
  return (
    <>
      <PageHero eyebrow={t.eyebrow || "B2B Partnership"} title={t.h2 || "Partner with us."} lead={t.lead || ""}
        image="https://cms.wooden-houses.itlinden.lv/api/media/file/norge-house-exterior.jpg" imageAlt="Norge House exterior"/>
      <section className="section">
        <div className="container about">
          <div className="about__media"><img src="https://cms.wooden-houses.itlinden.lv/api/media/file/building-1.jpg" alt=""/></div>
          <div>
            <span className="eyebrow"><Crown/> {t.exportEyebrow || "Global Export & Partnership"}</span>
            <h2 style={{ marginTop: 16, marginBottom: 24 }}>{t.exportH2 || "Bringing Scandinavian quality to European markets."}</h2>
            <p>{t.exportP1}</p>
            <p style={{ marginTop: 16 }}>{t.exportP2}</p>
          </div>
        </div>
      </section>
      <section className="section section--alt">
        <div className="container">
          <div className="section__head">
            <div><span className="eyebrow"><Crown/> {t.lookingEyebrow || "We Are Looking For"}</span><h2 style={{ marginTop: 16 }}>{t.lookingH2 || "Who we partner with."}</h2></div>
            <p>{t.lookingLead}</p>
          </div>
          <div className="features">
            {partners.map((p, i) => (
              <article className="feature" key={i}>
                <div className="feature__head">
                  <span className="feature__icon"><Icon name={partnerIcons[i]}/></span>
                  <span className="feature__num">0{i + 1} / 06</span>
                </div>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container about">
          <div className="about__media"><img src="https://cms.wooden-houses.itlinden.lv/api/media/file/slider-21.jpg" alt=""/></div>
          <div>
            <span className="eyebrow"><Crown/> {t.formEyebrow || "Become a Partner"}</span>
            <h2 style={{ marginTop: 16, marginBottom: 28 }}>{t.formH2 || "Let's start a conversation."}</h2>
            <B2BForm fields={t.fields} lang={lang}/>
          </div>
        </div>
      </section>
    </>
  );
};

const B2B = () => (
  <PageShell current="b2b">
    <B2BInner/>
  </PageShell>
);

ReactDOM.createRoot(document.getElementById("root")).render(<B2B/>);