/* contact-founder.jsx — Contact (working form) + Founder profile */

// Web3Forms — paste the access key you get from https://web3forms.com (free, ties to your inbox).
// Submissions are emailed to whatever address you used to generate this key.
const WEB3FORMS_ACCESS_KEY = "dca8dbb3-c945-4e69-b7a8-99b178954280";

const CHANNELS = [
  { k: "Email", v: "info@auren.studio" },
  { k: "Phone", v: "+49 1575 4405511" },
  { k: "Studio", v: "Bocholt · North Rhine-Westphalia" },
];

function ContactForm() {
  const empty = { first: "", last: "", email: "", phone: "", company: "", website: "", message: "", hp: "", consent: false };
  const [f, setF] = useState(empty);
  const [errs, setErrs] = useState({});
  const [state, setState] = useState("idle"); // idle | sending | done
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value }));

  const validate = () => {
    const er = {};
    if (!f.first.trim()) er.first = "Required";
    if (!f.last.trim()) er.last = "Required";
    if (!f.email.trim()) er.email = "Required";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) er.email = "Enter a valid email";
    if (!f.phone.trim()) er.phone = "Required";
    if (!f.consent) er.consent = "Please consent to continue";
    return er;
  };

  const submit = async (e) => {
    e.preventDefault();
    if (f.hp) return; // honeypot — silently drop bots
    const er = validate();
    setErrs(er);
    if (Object.keys(er).length) {
      const first = document.querySelector(".field.err input");
      if (first) first.focus();
      return;
    }
    setState("sending");
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: WEB3FORMS_ACCESS_KEY,
          subject: `New project briefing — ${f.first} ${f.last}`,
          from_name: "Auren website",
          replyto: f.email, // hitting "reply" goes straight to the client
          "First name": f.first,
          "Last name": f.last,
          Email: f.email,
          Phone: f.phone,
          Company: f.company || "—",
          "Current website": f.website || "—",
          Message: f.message || "—",
        }),
      });
      const data = await res.json();
      if (data.success) {
        setState("done");
      } else {
        setState("idle");
        setErrs({ form: data.message || "Something went wrong. Please try again." });
      }
    } catch (err) {
      setState("idle");
      setErrs({ form: "Network error — please try again, or email us directly at info@auren.studio." });
    }
  };

  if (state === "done") {
    return (
      <div className="form-card">
        <div className="form-success">
          <div className="ok"><Check /></div>
          <h3 style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 10 }}>Briefing received.</h3>
          <p style={{ color: "var(--ink-soft)", maxWidth: "44ch", margin: "0 auto" }}>
            Thanks, {f.first}. Edward will reply within 24 hours with concrete next steps — straight to {f.email}.
          </p>
          <button className="btn btn-ghost btn-sm" style={{ marginTop: 26 }} onClick={() => { setF(empty); setState("idle"); }}>
            Send another <Arrow size={14} />
          </button>
        </div>
      </div>
    );
  }

  const Field = ({ name, label, type = "text", opt, full, ph }) => (
    <div className={"field" + (full ? " full" : "") + (errs[name] ? " err" : "")}>
      <label>{label} {opt && <span className="opt">optional</span>}</label>
      {type === "textarea"
        ? <textarea value={f[name]} onChange={set(name)} placeholder={ph} />
        : <input type={type} value={f[name]} onChange={set(name)} placeholder={ph} />}
      {errs[name] && <span className="msg">{errs[name]}</span>}
    </div>
  );

  return (
    <form className="form-card" onSubmit={submit} noValidate>
      <div className="form-head">
        <div className="ft">Send us a <em>short briefing.</em></div>
        <span className="pill"><span className="gd"></span>Reply in 24h</span>
      </div>
      <div className="form-grid">
        {Field({ name: "first", label: "First name" })}
        {Field({ name: "last", label: "Last name" })}
        {Field({ name: "email", label: "Email", type: "email", ph: "you@company.com" })}
        {Field({ name: "phone", label: "Phone", type: "tel", ph: "+49 …" })}
        {Field({ name: "company", label: "Company", opt: true })}
        {Field({ name: "website", label: "Current website", opt: true, ph: "https://" })}
        {Field({ name: "message", label: "Message", opt: true, full: true, type: "textarea", ph: "Tell us about your project…" })}
      </div>

      <input className="hp" tabIndex={-1} autoComplete="off" value={f.hp} onChange={set("hp")} placeholder="Company website" aria-hidden="true" />

      <div className={"consent" + (errs.consent ? " err" : "")}>
        <input id="consent" type="checkbox" checked={f.consent} onChange={set("consent")} />
        <label htmlFor="consent">
          I consent to the processing of my data according to the <a href="#">privacy policy</a>.
          {errs.consent && <span style={{ color: "#d4615a", display: "block", marginTop: 4, fontFamily: "var(--mono)", fontSize: 12 }}>{errs.consent}</span>}
        </label>
      </div>

      {errs.form && (
        <div role="alert" style={{ marginTop: 16, padding: "12px 14px", border: "1px solid rgba(212,97,90,.4)", background: "rgba(212,97,90,.08)", borderRadius: 10, color: "#d4615a", fontFamily: "var(--mono)", fontSize: 13 }}>
          {errs.form}
        </div>
      )}

      <div className="form-submit">
        <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-mute)" }}>Q3 / Q4 available</span>
        <button className="btn btn-primary" type="submit" disabled={state === "sending"}>
          {state === "sending" ? "Sending…" : <React.Fragment>Send request <ArrowUR cls="ar" /></React.Fragment>}
        </button>
      </div>
    </form>
  );
}

function Contact() {
  return (
    <section className="section" id="contact" data-screen-label="Contact">
      <div className="wrap">
        <div className="contact-grid">
          <div className="contact-info reveal">
            <Eyebrow n="04">Contact</Eyebrow>
            <h2 className="headline" style={{ marginTop: 18 }}>Let's <em>talk.</em></h2>
            <p className="lede" style={{ marginTop: 22 }}>
              Direct line to Edward — no account manager, no briefing phone-tag between departments. Tell us about your next project and we'll reply within 24 hours with concrete next steps.
            </p>
            <div className="contact-badges">
              <span className="pill"><span className="gd"></span>Reply within 24h</span>
              <span className="pill">Q3 / Q4 available</span>
            </div>
          </div>
          <div className="reveal d2">
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- founder ---- */
const FOUNDER_STATS = [
  { v: "20", l: "Age" },
  { v: "11+", l: "Years coding" },
  { v: "2015", l: "First project" },
  { v: "NRW", l: "Location" },
];

function Founder() {
  return (
    <section className="section" id="founder" data-screen-label="Founder">
      <div className="wrap">
        <div className="sec-head reveal" style={{ marginBottom: 40 }}>
          <Eyebrow n="07">Profile · Mind behind</Eyebrow>
        </div>
        <div className="founder-grid">
          <div className="founder-photo reveal">
            <image-slot id="auren-founder" shape="rect" fit="cover" placeholder="Founder portrait"></image-slot>
            <div className="founder-cap">Founder · Bocholt · 2026</div>
          </div>
          <div className="reveal d2">
            <h2 className="headline">Kerim <em>Bilin.</em></h2>
            <div className="founder-roles">
              <span>Founder</span><span>Developer</span><span>Designer</span>
            </div>
            <p className="lede">
              First HTML project at the age of ten. Today Auren is a studio with over eleven years of experience — developer, designer and management in one person. Every project is delivered directly by the founder, never handed off to juniors.
            </p>
            <div className="minigrid">
              {FOUNDER_STATS.map((s) => (
                <div className="mc" key={s.l}>
                  <div className="mv">{s.v}</div>
                  <div className="ml">{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact, Founder, ContactForm, CHANNELS, FOUNDER_STATS });