/* About + Contact (with Start-a-Project form) */

function About({ go }) {
  return (
    <div className="page" data-screen-label="06 About">
      <section className="hero">
        <div className="wrap">
          <div className="hero-meta">
            <div className="kicker">№ 06 / About</div>
            <div className="kicker">Founded 1986</div>
            <div className="kicker">Bond Holding · est. 2023</div>
          </div>
          <div className="hero-headline">
            <Eyebrow>Forty years of fit-out in Dubai</Eyebrow>
            <h1 className="display-xl" style={{marginTop:18}}>
              We started in 1986 with<br/>
              one office, one job, and<br/>
              a&nbsp;name on the awning.
            </h1>
          </div>
        </div>

        <div className="hero-image" style={{aspectRatio:"16/8"}}>
          <img src="media/about-us-banner.webp" alt="The original Bond factory and team, early 1990s" />
          <div className="credit-overlay">Archival — first Bond facility, Dubai · pre-1995</div>
        </div>
        <div className="wrap">
          <div className="hero-caption">
            <span>Archival photograph</span>
            <span>From a maintenance firm → a 550,000 sq ft factory</span>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1.6fr", gap:48, alignItems:"start"}}>
            <Eyebrow>The story, briefly</Eyebrow>
            <div className="body-lg" style={{maxWidth:"62ch"}}>
              <p style={{margin:0}}>
                Bond Interiors was launched in <strong>1986</strong> as a maintenance firm. The first significant
                fit-out was the Marie Claire office and showroom — the project that, in the founder's words,
                "decided the rest of it." Forty years on, we still deliver the same work — interior fit-out,
                joinery, manufacturing — just on a different scale.
              </p>
              <p>
                The pivot was the factory. A technical department in 2001, manufacturing machinery in 2006,
                a 550,000 sq ft facility in 2018 at Saih Shuaib 3 in Dubai Industrial City. Today nine
                in-house divisions run out of that building — joinery, metal, glass, signage, solid surface,
                upholstery, stone, MEP and civil — under the Bond Holding group structure formalised in 2023.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <SectionHead
            kicker="№ 02 — Milestone timeline"
            title="Six dates worth knowing."
          />
          <div style={{marginTop:32, borderTop:"1px solid var(--line)"}}>
            {window.TIMELINE.map((m) => (
              <div key={m.year} className="timeline">
                <div className="year">{m.year}</div>
                <div className="ev">{m.t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SectionHead
            kicker="№ 03 — Leadership"
            title="The people responsible."
          />

          <div style={{display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap:32, marginTop:32}}>
            <div>
              <div style={{aspectRatio:"4/5", background:"var(--mist)", overflow:"hidden"}}>
                <img src="media/saad-moaswes-portrait.webp" alt="Saad Moaswes, Founder & Managing Director" style={{width:"100%", height:"100%", objectFit:"cover"}} />
              </div>
              <div style={{paddingTop:18}}>
                <div className="kicker">Founder · Managing Director</div>
                <div className="display-s" style={{margin:"6px 0 0"}}>Saad Moaswes</div>
                <p style={{color:"var(--graphite)", marginTop:10, fontSize:14, lineHeight:1.6, maxWidth:"40ch"}}>
                  Founded Bond Interiors in 1986. Still runs the business. Will personally walk you through the factory if you visit.
                </p>
              </div>
            </div>
            <div>
              <div style={{aspectRatio:"4/5", background:"var(--mist)", display:"grid", placeItems:"center", border:"1px solid var(--line)"}}>
                <div style={{textAlign:"center", padding:32, color:"var(--graphite)"}}>
                  <div className="kicker">Portrait pending</div>
                  <div className="display-s" style={{margin:"10px 0 0"}}>Confirm leadership chart with client</div>
                  <p style={{fontSize:13, marginTop:14, maxWidth:"32ch", margin:"14px auto 0"}}>
                    Trade press also names a separate CEO. Don't publish until the org chart is signed off.
                  </p>
                </div>
              </div>
              <div style={{paddingTop:18}}>
                <div className="kicker">Leadership — pending confirmation</div>
                <div className="display-s" style={{margin:"6px 0 0", color:"var(--graphite)"}}>To be added</div>
                <p style={{color:"var(--graphite)", marginTop:10, fontSize:14, lineHeight:1.6, maxWidth:"40ch"}}>
                  Other senior names from data-broker sources are unverified. We publish leadership only when the company confirms it.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{background:"var(--mist)"}}>
        <div className="wrap">
          <SectionHead
            kicker="№ 04 — Bond Holding"
            title="The group structure."
          />
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:24, marginTop:32}}>
            {[
              ["Bond Interiors", "The interior fit-out, joinery and manufacturing contractor — the operating business since 1986."],
              ["Madina Glass", "The in-house glass division — fabrication and installation, branded as a standalone in its sector."],
              ["Bond Holding", "Group entity formalised in 2023. Scope to be confirmed before publication."],
            ].map(([h, p]) => (
              <div key={h} style={{padding:28, background:"var(--paper)", border:"1px solid var(--line)"}}>
                <div className="kicker">Entity</div>
                <h4 className="display-s" style={{margin:"10px 0 12px"}}>{h}</h4>
                <p style={{color:"var(--graphite)", fontSize:14, lineHeight:1.6, margin:0}}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ------------------------- CONTACT / Start a project ------------------------- */

function Contact({ go }) {
  const [form, setForm] = React.useState({
    name: "", company: "", email: "", phone: "",
    sector: "", scope: "", location: "", brief: "",
    file: null,
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [toast, setToast] = React.useState("");
  const update = (k, v) => setForm(s => ({ ...s, [k]: v }));

  const projectTypes = ["Tender", "Design & Build", "Fit-out only", "Manufacturing only", "Maintenance", "Other"];

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.brief) {
      setToast("Add your name, email and a short brief to send.");
      setTimeout(()=>setToast(""), 3000);
      return;
    }
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="page" data-screen-label="07 Contact — sent">
        <section className="section" style={{minHeight:"70vh", display:"grid", placeItems:"center"}}>
          <div style={{maxWidth:"60ch", textAlign:"center"}}>
            <Eyebrow>Enquiry received</Eyebrow>
            <h1 className="display-l" style={{marginTop:18}}>Thanks, {form.name.split(" ")[0]}.</h1>
            <p className="lede" style={{marginTop:18}}>
              We'll come back within one business day. If it's urgent, ping us on WhatsApp +971 55 600 3228 — same team, faster reply. Reference{" "}
              <span style={{fontFamily:"var(--mono)", color:"var(--bronze)"}}>BND-{Math.floor(Math.random()*9000)+1000}</span>.
            </p>
            <div style={{display:"flex", gap:14, justifyContent:"center", marginTop:32, flexWrap:"wrap"}}>
              <a className="btn" href="#/projects" onClick={(e)=>{e.preventDefault(); go("projects");}}>Browse projects <ArrowRight /></a>
              <a className="btn btn-ghost" href="#/factory" onClick={(e)=>{e.preventDefault(); go("factory");}}>Inside the factory <ArrowRight /></a>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page" data-screen-label="07 Contact">
      <section className="hero">
        <div className="wrap">
          <div className="hero-meta">
            <div className="kicker">№ 07 / Start a project</div>
            <div className="kicker">Reply within one business day</div>
            <div className="kicker">Bring drawings · BoQ · or a one-line brief</div>
          </div>
          <div className="hero-headline">
            <Eyebrow>Contact · Start a project</Eyebrow>
            <h1 className="display-l" style={{marginTop:18}}>
              Send us a brief.<br/>
              Or a BoQ. Or just<br/>
              <span style={{color:"var(--bronze)"}}>say hi.</span>
            </h1>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"1.6fr 1fr", gap:64, alignItems:"start"}}>

            {/* FORM */}
            <form onSubmit={submit} noValidate>
              <Eyebrow>Enquiry · tender · brief</Eyebrow>

              <div style={{marginTop:16, display:"grid", gridTemplateColumns:"1fr 1fr", gap:0}}>
                <div className="field" style={{paddingRight:24, borderRight:"1px solid var(--line)"}}>
                  <label>Name *</label>
                  <input value={form.name} onChange={e=>update("name", e.target.value)} placeholder="Your name" />
                </div>
                <div className="field" style={{paddingLeft:24}}>
                  <label>Company</label>
                  <input value={form.company} onChange={e=>update("company", e.target.value)} placeholder="Company or consultancy" />
                </div>
                <div className="field" style={{paddingRight:24, borderRight:"1px solid var(--line)"}}>
                  <label>Email *</label>
                  <input type="email" value={form.email} onChange={e=>update("email", e.target.value)} placeholder="you@example.com" />
                </div>
                <div className="field" style={{paddingLeft:24}}>
                  <label>Phone or WhatsApp</label>
                  <input value={form.phone} onChange={e=>update("phone", e.target.value)} placeholder="+971 …" />
                </div>
              </div>

              {/* sector chips */}
              <div className="field" style={{paddingTop:24}}>
                <label>Sector</label>
                <div className="chip-row">
                  {window.SECTORS.map(s => (
                    <button type="button" key={s.id}
                      className={`chip ${form.sector === s.id ? "on" : ""}`}
                      onClick={()=>update("sector", s.id)}>{s.label}</button>
                  ))}
                </div>
              </div>

              {/* scope chips */}
              <div className="field">
                <label>Project type</label>
                <div className="chip-row">
                  {projectTypes.map(t => (
                    <button type="button" key={t}
                      className={`chip ${form.scope === t ? "on" : ""}`}
                      onClick={()=>update("scope", t)}>{t}</button>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>Location</label>
                <input value={form.location} onChange={e=>update("location", e.target.value)} placeholder="City, country" />
              </div>

              <div className="field">
                <label>Brief *</label>
                <textarea value={form.brief} onChange={e=>update("brief", e.target.value)} placeholder="A line, a paragraph, or a full RFP — whatever you have. Programme dates if you know them." />
              </div>

              <div className="field" style={{borderBottom:0, paddingBottom:0}}>
                <label>Drawings · BoQ · brief (optional)</label>
                <label className="upload" style={{marginTop:8}}>
                  <input type="file" style={{display:"none"}} onChange={e=>update("file", e.target.files && e.target.files[0])} />
                  <span style={{fontSize:18, color:"var(--ink)"}}>↑</span>
                  <span>{form.file ? form.file.name : "Attach PDF / DWG / ZIP up to 25 MB"}</span>
                </label>
              </div>

              <div style={{marginTop:32, display:"flex", gap:14, flexWrap:"wrap", alignItems:"center"}}>
                <button type="submit" className="btn">Send enquiry <ArrowRight /></button>
                <span className="kicker">We'll reply within one business day.</span>
              </div>
            </form>

            {/* SIDE — contact details + map */}
            <aside>
              <Eyebrow>Direct channels</Eyebrow>
              <div style={{marginTop:18, borderTop:"1px solid var(--line)"}}>
                <ContactRow label="Phone"   value="+971 4 566 7720"        href="tel:+97145667720" />
                <ContactRow label="WhatsApp" value="+971 55 600 3228"        href="https://wa.me/971556003228" sub="A real working channel — fastest reply" />
                <ContactRow label="Email"   value="info@bondinteriors.com" href="mailto:info@bondinteriors.com" />
                <ContactRow label="Hours"   value="Mon – Fri · 7am – 4pm GST" sub="Confirming whether these are enquiry hours" />
              </div>

              <div style={{marginTop:32}}>
                <Eyebrow>Visit</Eyebrow>
                <div style={{marginTop:14, padding:20, border:"1px solid var(--line)", background:"var(--mist)"}}>
                  <div className="kicker">Headquarters & factory</div>
                  <div style={{fontSize:16, marginTop:8, lineHeight:1.5}}>
                    Bond Interiors LLC<br/>
                    Saih Shuaib 3<br/>
                    Dubai Industrial City<br/>
                    P.O. Box 15758 · Dubai, UAE
                  </div>
                </div>
                <div className="map" style={{marginTop:14}}>
                  <div className="map-label">Saih Shuaib 3 · Dubai Industrial City · coords TBC</div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {toast && (
        <div className="toast"><span className="dot" />{toast}</div>
      )}
    </div>
  );
}

function ContactRow({ label, value, href, sub }) {
  return (
    <a href={href} target={href && href.startsWith("http") ? "_blank" : "_self"} rel="noopener noreferrer"
       style={{display:"block", padding:"18px 0", borderBottom:"1px solid var(--line)", color:"inherit"}}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", gap:12}}>
        <div className="kicker">{label}</div>
        <div style={{fontSize:16, fontFamily:"var(--display)", fontWeight:500, letterSpacing:"-0.01em"}}>{value}</div>
      </div>
      {sub && <div style={{fontSize:12, color:"var(--graphite)", marginTop:6}}>{sub}</div>}
    </a>
  );
}

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