/* =========================================================
   Shadowbiz — part3.jsx : Contact (validated form), Footer
   ========================================================= */

function Contact() {
  const [f, setF] = useState({ name: "", email: "", company: "", problem: "" });
  const [err, setErr] = useState({});
  const [sent, setSent] = useState(false);

  const set = (k) => (e) => {
    setF(p => ({ ...p, [k]: e.target.value }));
    if (err[k]) setErr(p => ({ ...p, [k]: null }));
  };

  const validate = () => {
    const e = {};
    if (!f.name.trim()) e.name = "Tell us who we're talking to.";
    if (!f.email.trim()) e.email = "We need a way to reply.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email.trim())) e.email = "That email doesn't look right.";
    if (!f.problem.trim()) e.problem = "Name the problem — even roughly.";
    else if (f.problem.trim().length < 12) e.problem = "A little more detail helps us help you.";
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErr(e);
    if (Object.keys(e).length === 0) setSent(true);
  };

  const channels = [
    ["mail", "Email", "care@shadowbiz.in"],
    ["phone", "Phone", "+1 555-969-3548"],
    ["globe", "Web", "shadowbiz.in"],
  ];

  return (
    <section className="section wrap" id="contact">
      <div className="contact-grid">
        <div className="contact-left">
          <div className="reveal"><span className="eyebrow"><span className="num">08</span> Start a conversation</span></div>
          <h2 className="title reveal d1">Tell us the problem.<br />We'll listen first.</h2>
          <p className="lede reveal d2">
            No pitch deck, no pre-built product. Describe what's not working and we'll come back
            with questions — usually within 24 hours.
          </p>
          <div className="contact-channels reveal d2">
            {channels.map(([ic, k, v]) => (
              <div className="channel" key={k}>
                <span className="ci"><Icon name={ic} size={20} /></span>
                <span>
                  <span className="ck">{k}</span>
                  <span className="cv" style={{ display: "block" }}>{v}</span>
                </span>
              </div>
            ))}
          </div>
        </div>

        <div className="form reveal d1">
          {sent ? (
            <div className="form-success">
              <div className="ic"><Icon name="check" size={30} stroke={2.2} /></div>
              <h3>Message received.</h3>
              <p>Thanks, {f.name.split(" ")[0] || "there"}. We read every note ourselves and reply within 24 hours.</p>
              <Btn kind="ghost" className="submit" onClick={() => { setSent(false); setF({ name: "", email: "", company: "", problem: "" }); }} type="button">Send another</Btn>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              <div className="form-row">
                <div className={"field" + (err.name ? " err" : "")}>
                  <label>Your name <span className="req">*</span></label>
                  <input value={f.name} onChange={set("name")} placeholder="Asha Menon" />
                  {err.name && <div className="emsg">{err.name}</div>}
                </div>
                <div className={"field" + (err.email ? " err" : "")}>
                  <label>Email <span className="req">*</span></label>
                  <input value={f.email} onChange={set("email")} placeholder="you@company.com" />
                  {err.email && <div className="emsg">{err.email}</div>}
                </div>
              </div>
              <div className="field">
                <label>Business / organisation</label>
                <input value={f.company} onChange={set("company")} placeholder="Where you work (optional)" />
              </div>
              <div className={"field" + (err.problem ? " err" : "")}>
                <label>What's the problem? <span className="req">*</span></label>
                <textarea rows="4" value={f.problem} onChange={set("problem")}
                  placeholder="The thing that's slow, manual, or just broken. Rough is fine." />
                {err.problem && <div className="emsg">{err.problem}</div>}
              </div>
              <Btn kind="primary" className="submit" type="submit" withArrow>Send it over</Btn>
              <div className="form-note">We reply within 24 hours · care@shadowbiz.in · Built with care in India</div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ["Studio", [["Why we exist", "#belief"], ["Method", "#method"], ["What we do", "#work"], ["Who we are", "#about"]]],
    ["Products", [["Crestly · live", "#products"], ["Stockloom · 2027", "#products"], ["The 14-schools story", "#story"], ["Talk to us", "#contact"]]],
  ];
  return (
    <footer className="footer" id="footer">
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <div className="foot-mark">
              <Mark size={40} variant="dark" idle />
              <Wordmark size={30} tone="dark" />
            </div>
            <p className="fb-d">We don't sell software. We solve real problems — alongside the business, never above it.</p>
            <div style={{ marginTop: 26 }}>
              <Btn kind="primary" href="#contact" withArrow>Start a conversation</Btn>
            </div>
          </div>
          {cols.map(([h, links]) => (
            <div className="foot-col" key={h}>
              <h4>{h}</h4>
              {links.map(([l, href]) => <a key={l} href={href}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="foot-bottom">
          <span className="fcopy">© 2026 Shadowbiz Startups Developer · care@shadowbiz.in</span>
          <span className="fmade"><span className="pip" /> Built with care in India</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });