// Broadway Interiors — pages: About, Awards, Contact

const { useState: useStateAux } = React;

// ──────────────────────────────────────────────────────────────────────
// About / Studio
// ──────────────────────────────────────────────────────────────────────
function AboutPage({ go }) {
  return (
    <div className="page about-page">
      <header className="page-head about-head">
        <div className="page-head__inner">
          <div className="eyebrow">The studio · since 1999</div>
          <h1 className="page-head__title">
            <span className="serif">A boutique design</span><br/>
            <span className="serif italic">and build consultancy.</span>
          </h1>
          <p className="page-head__lede">
            Twenty-five years of drawing rooms in Dubai — then building them, ourselves.
          </p>
        </div>
      </header>

      <section className="about-origin">
        <div className="about-origin__col about-origin__col--copy">
          <div className="cs-section__label">01 / Origin</div>
          <p className="lead serif">
            <span className="dropcap">B</span>roadway began in 1999 as a fit-out company. Chris
            Barnes — our founder — was on site before he was at the drawing board, and that order
            has shaped the studio ever since.
          </p>
          <p>
            Through the 2000s we delivered much of what became DIFC, Dubai Internet City and
            Dubai Media City — first as a contractor, then as a design-and-build practice. By
            2013, with the opening of Asia Asia on Pier 7, the F&amp;B portfolio had earned the
            same reputation as the workplaces. Today the practice spans five sectors, with a
            seventy-project archive and twenty-five attributed design awards.
          </p>
          <p>
            We have stayed deliberately small. The drawings, the procurement, the site team —
            they all sit on the same WhatsApp thread. There is no handoff, because there is
            nobody to hand off to.
          </p>
        </div>
        <div className="about-origin__col about-origin__col--media">
          <div className="about-portrait">
            <div className="about-portrait__slot">
              <div className="about-portrait__placeholder">
                <div className="about-portrait__initials serif">CB</div>
                <div className="about-portrait__note">Founder portrait — client to supply</div>
              </div>
            </div>
            <div className="about-portrait__caption">
              <div className="serif italic">Chris Barnes</div>
              <div>Owner, Founder &amp; Managing Director</div>
            </div>
          </div>
        </div>
      </section>

      <section className="about-stats">
        {[
          { n: '1999', l: 'Founded' },
          { n: '70+', l: 'Projects delivered' },
          { n: '25+', l: 'Attributed awards' },
          { n: '5', l: 'Sectors' },
        ].map(s => (
          <div key={s.l} className="about-stats__cell">
            <div className="about-stats__n serif">{s.n}</div>
            <div className="about-stats__l">{s.l}</div>
          </div>
        ))}
      </section>

      <section className="about-philosophy">
        <div className="about-philosophy__inner">
          <div className="cs-section__label">02 / Philosophy</div>
          <h2 className="serif">
            We design it to be built.<br/>
            <span className="italic">And then we build it.</span>
          </h2>
          <div className="about-philosophy__pillars">
            <div className="about-pillar">
              <div className="about-pillar__num">a.</div>
              <h3 className="serif">One studio, one site team.</h3>
              <p>The designer and the quantity surveyor sit four metres apart. Drawings get challenged before they get tendered.</p>
            </div>
            <div className="about-pillar">
              <div className="about-pillar__num">b.</div>
              <h3 className="serif">Buildable from sketch one.</h3>
              <p>Every concept is reviewed against programme, procurement lead-times, and the workshop’s capacity to actually make it.</p>
            </div>
            <div className="about-pillar">
              <div className="about-pillar__num">c.</div>
              <h3 className="serif">Boutique on purpose.</h3>
              <p>Selective on intake, deliberate on workload. Chris signs off every project before it leaves the studio.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="about-team">
        <div className="about-team__head">
          <div className="cs-section__label">03 / The team</div>
          <h2 className="serif">Ten people, twenty-five years of muscle memory.</h2>
          <p className="about-team__note">
            Full names, bios and portraits to follow on the live site.
          </p>
        </div>
        <div className="about-team__grid">
          {TEAM.map((m, i) => (
            <div key={i} className="team-card">
              <div className="team-card__portrait">
                <span className="team-card__initials serif">{m.initials}</span>
              </div>
              <div className="team-card__name">{m.name}</div>
              <div className="team-card__role">{m.role}</div>
            </div>
          ))}
        </div>
      </section>

      <CtaBand go={go} />
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Awards
// ──────────────────────────────────────────────────────────────────────
function AwardsPage({ go }) {
  const grouped = {};
  AWARDS.forEach(a => {
    if (!grouped[a.year]) grouped[a.year] = [];
    grouped[a.year].push(a);
  });
  const years = Object.keys(grouped).sort((a, b) => b - a);
  const flagship = AWARDS.filter(a => a.flagship);

  return (
    <div className="page awards-page">
      <header className="page-head">
        <div className="page-head__inner">
          <div className="eyebrow">Recognition · 2011 — 2025</div>
          <h1 className="page-head__title">
            <span className="serif">Twenty-five awards,</span><br/>
            <span className="serif italic">all attributable.</span>
          </h1>
          <p className="page-head__lede">
            Award, issuer, year, project. No self-declared stars. No directory ratings.
          </p>
        </div>
      </header>

      <section className="awards-flagship">
        {flagship.map(a => (
          <div key={a.title} className="flagship-card">
            <div className="flagship-card__year serif">{a.year}</div>
            <div className="flagship-card__title serif">{a.title}</div>
            <div className="flagship-card__issuer">{a.issuer}</div>
            {a.project && <div className="flagship-card__project">For <em>{a.project}</em></div>}
            {a.recipient && a.recipient !== 'Broadway Interiors' && (
              <div className="flagship-card__person">Awarded to {a.recipient}</div>
            )}
          </div>
        ))}
      </section>

      <section className="awards-table">
        {years.map(y => (
          <div key={y} className="awards-year">
            <div className="awards-year__num serif">{y}</div>
            <ul className="awards-year__list">
              {grouped[y].map((a, i) => (
                <li key={i} className={'awards-row ' + (a.flagship ? 'awards-row--flagship' : '')}>
                  <div className="awards-row__title">
                    {a.flagship && <span className="awards-row__star">★</span>}
                    {a.title}
                  </div>
                  <div className="awards-row__issuer">{a.issuer}</div>
                  <div className="awards-row__project">{a.project || '—'}</div>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </section>

      <CtaBand go={go} />
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Contact / Start a project
// ──────────────────────────────────────────────────────────────────────
function ContactPage({ go }) {
  const [step, setStep] = useStateAux(1);
  const [form, setForm] = useStateAux({
    name: '', company: '', email: '', phone: '',
    sector: '', projectType: '', location: '', budget: '',
    timeline: '', message: '', file: null,
  });
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const stepValid = {
    1: form.sector && form.projectType,
    2: form.name && form.email,
    3: true,
  };

  if (step === 4) {
    return (
      <div className="page contact-page contact-done">
        <div className="contact-done__inner">
          <div className="eyebrow">Enquiry received</div>
          <h1 className="serif">Thanks, {form.name.split(' ')[0] || 'there'}.</h1>
          <p>
            A short note has gone to <b>sales@broadwayinteriors.com</b>. You will hear back inside
            two working days — usually faster.
          </p>
          <div className="contact-done__details">
            <div><span>Project:</span> {form.projectType} · {form.sector}</div>
            {form.location && <div><span>Location:</span> {form.location}</div>}
            {form.timeline && <div><span>Target:</span> {form.timeline}</div>}
          </div>
          <button className="btn btn--ghost" onClick={() => { setStep(1); }}>Submit another enquiry</button>
        </div>
      </div>
    );
  }

  return (
    <div className="page contact-page">
      <div className="contact-grid">
        <div className="contact-col contact-col--copy">
          <div className="eyebrow">Start a project</div>
          <h1 className="serif">
            Brief us.<br/>
            <span className="italic">We’ll cost it &amp; sketch it.</span>
          </h1>
          <p className="contact-lede">
            Three short steps. Attach a brief, drawings or a tender pack if you have one — we
            will come back with a fee proposal and indicative programme.
          </p>

          <div className="contact-details">
            <div className="contact-details__block">
              <div className="contact-details__label">Studio</div>
              <div>Office 1512, Grosvenor Business Tower</div>
              <div>Barsha Heights (TECOM)</div>
              <div>PO Box 31644, Dubai, UAE</div>
            </div>
            <div className="contact-details__block">
              <div className="contact-details__label">Talk to us</div>
              <div><a href="tel:+97144508546">+971 4 450 8546</a></div>
              <div><a href="mailto:sales@broadwayinteriors.com">sales@broadwayinteriors.com</a></div>
              <div className="contact-details__note">Careers · jobs@broadwayinteriors.com</div>
            </div>
            <div className="contact-details__block">
              <div className="contact-details__label">Service area</div>
              <div>UAE &amp; GCC</div>
              <div className="contact-details__note">International on referral</div>
            </div>
          </div>
        </div>

        <div className="contact-col contact-col--form">
          <div className="contact-form">
            <div className="contact-form__progress">
              {[1, 2, 3].map(n => (
                <div key={n} className={'contact-form__step ' + (step >= n ? 'on' : '')}>
                  <span>{n}</span>
                </div>
              ))}
            </div>

            {step === 1 && (
              <div className="contact-step">
                <div className="contact-step__label">Step 1 of 3</div>
                <h3 className="serif">Tell us about the project.</h3>

                <label className="field">
                  <span>Sector</span>
                  <select value={form.sector} onChange={(e) => update('sector', e.target.value)}>
                    <option value="">Select sector…</option>
                    {SECTORS.map(s => <option key={s.id} value={s.label}>{s.label}</option>)}
                  </select>
                </label>

                <label className="field">
                  <span>Project type</span>
                  <div className="radio-grid">
                    {['New build / shell', 'Fit-out / refurbishment', 'Strip & refit', 'Single-floor refresh', 'Consultancy only', 'Tender response'].map(t => (
                      <button key={t} type="button"
                        className={'radio-chip ' + (form.projectType === t ? 'on' : '')}
                        onClick={() => update('projectType', t)}>{t}</button>
                    ))}
                  </div>
                </label>

                <label className="field">
                  <span>Location</span>
                  <input type="text" placeholder="Dubai, Abu Dhabi, Riyadh…" value={form.location}
                    onChange={(e) => update('location', e.target.value)} />
                </label>

                <label className="field">
                  <span>Indicative timeline</span>
                  <div className="radio-grid">
                    {['ASAP', '< 3 months', '3–6 months', '6–12 months', 'Just exploring'].map(t => (
                      <button key={t} type="button"
                        className={'radio-chip ' + (form.timeline === t ? 'on' : '')}
                        onClick={() => update('timeline', t)}>{t}</button>
                    ))}
                  </div>
                </label>

                <div className="contact-step__nav">
                  <span className="contact-step__hint">No prices on the site. We will quote against your brief.</span>
                  <button className="btn btn--solid" disabled={!stepValid[1]}
                    onClick={() => setStep(2)}>Continue →</button>
                </div>
              </div>
            )}

            {step === 2 && (
              <div className="contact-step">
                <div className="contact-step__label">Step 2 of 3</div>
                <h3 className="serif">Who shall we talk to?</h3>

                <div className="field-grid">
                  <label className="field">
                    <span>Full name</span>
                    <input type="text" value={form.name} onChange={(e) => update('name', e.target.value)} placeholder="Your name" />
                  </label>
                  <label className="field">
                    <span>Company</span>
                    <input type="text" value={form.company} onChange={(e) => update('company', e.target.value)} placeholder="Operator, employer, agency" />
                  </label>
                  <label className="field">
                    <span>Email</span>
                    <input type="email" value={form.email} onChange={(e) => update('email', e.target.value)} placeholder="you@company.com" />
                  </label>
                  <label className="field">
                    <span>Phone (optional)</span>
                    <input type="tel" value={form.phone} onChange={(e) => update('phone', e.target.value)} placeholder="+971 …" />
                  </label>
                </div>

                <div className="contact-step__nav">
                  <button className="btn btn--ghost" onClick={() => setStep(1)}>← Back</button>
                  <button className="btn btn--solid" disabled={!stepValid[2]} onClick={() => setStep(3)}>Continue →</button>
                </div>
              </div>
            )}

            {step === 3 && (
              <div className="contact-step">
                <div className="contact-step__label">Step 3 of 3</div>
                <h3 className="serif">A few lines is plenty.</h3>

                <label className="field">
                  <span>Brief</span>
                  <textarea rows={6} value={form.message} placeholder="Site, programme, references, anything we should know…"
                    onChange={(e) => update('message', e.target.value)} />
                </label>

                <label className="field field--drop">
                  <span>Attach brief / drawings / tender pack <em>(optional)</em></span>
                  <div className="drop-zone">
                    <input type="file" onChange={(e) => update('file', e.target.files[0])} />
                    <div className="drop-zone__inner">
                      {form.file
                        ? <span>📎 {form.file.name}</span>
                        : <span>Drop a file here or click to browse — PDF, DWG, ZIP up to 25MB</span>}
                    </div>
                  </div>
                </label>

                <div className="contact-step__nav">
                  <button className="btn btn--ghost" onClick={() => setStep(2)}>← Back</button>
                  <button className="btn btn--solid" onClick={() => setStep(4)}>Send enquiry →</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage, AwardsPage, ContactPage });