// pages-studio.jsx — Studio (About) + Services + Contact
const { useState: useStateS } = React;

function Studio({ navigate }) {
  return (
    <main data-screen-label="05 Studio">
      {/* hero text */}
      <section className="section tight" style={{ paddingBottom: 24 }}>
        <div className="wrap">
          <div className="eyebrow">— Studio · est. MMVII · Dubai Design District</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 120px)", margin: "20px 0 32px", fontWeight: 300, maxWidth: "12ch" }}>
            A small studio, <em style={{ color: "var(--brass)", fontStyle: "italic" }}>since 2007.</em>
          </h1>
          <div className="col-2" style={{ alignItems: "start" }}>
            <p className="lede" style={{ maxWidth: "36ch" }}>
              Husband-and-wife, Michael and Stanislava — and a team of twenty in d3.
              The studio designs, draws, builds and dresses the room. We do not sub-contract the part that matters.
            </p>
            <div className="body" style={{ maxWidth: "52ch" }}>
              <p style={{ marginTop: 0 }}>
                Muse was founded in 2007 from a single drawing table in
                what is now Dubai Design District. Twenty-odd years later
                the practice has narrowed, not widened: residential luxury and
                a selective body of commercial work — restaurants, salons, offices —
                where the craft of fit-out can stay in plain sight.
              </p>
              <p>
                We are a UAE-licensed contractor; we are also the people who pick the
                grout colour. The two sides are not separate departments.
                It is the same team, in the same studio, all the way through to the
                day the lights come on.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* stats */}
      <section className="section tight">
        <div className="wrap">
          <div className="stats-row" data-comment-anchor="studio-stats">
            <div className="stat">
              <div className="n"><em>17</em>+</div>
              <div className="lab">Years in practice</div>
              <div className="note">Founded 2007 · d3</div>
            </div>
            <div className="stat">
              <div className="n">20+</div>
              <div className="lab">In-studio team</div>
              <div className="note">Designers · PMs · trades</div>
            </div>
            <div className="stat">
              <div className="n"><em>13</em><sup style={{ fontSize: "0.45em" }}>th</sup></div>
              <div className="lab">Fit-Out Powerlist 2024</div>
              <div className="note">Design Middle East</div>
            </div>
            <div className="stat">
              <div className="n">∞</div>
              <div className="lab">Coffee at the office</div>
              <div className="note">Bldg 1B · Office 601</div>
            </div>
          </div>
        </div>
      </section>

      {/* Founders */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            roman="I."
            title="The principals."
            aside="The two people who run the studio. Photographs to be supplied — placeholders below."
          />
          <div className="founders">
            <div className="founder" data-comment-anchor="founder-michael">
              <div className="portrait" />
              <h4>Michael Dudnyk</h4>
              <div className="role">Managing Partner</div>
              <p className="bio">
                Michael runs the build side of the practice and most of the client conversations.
                He has fifteen-plus years on Dubai sites and, by his own admission, an opinion on
                every contractor in town. He called a Jaddaf barbershop "one of my favourite
                projects" in <em>Commercial Interior Design</em>.
              </p>
            </div>
            <div className="founder" data-comment-anchor="founder-stanislava">
              <div className="portrait" />
              <h4>Stanislava Rudas-Dudnyk</h4>
              <div className="role">Partner · Lead Designer</div>
              <p className="bio">
                Stanislava leads the design studio. She picks the materials, draws
                the joinery, and signs off every set of renders before it goes
                to client. The "eye for detail" line on the old site was hers,
                and at least the second half of it is true.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* studio space + image */}
      <section className="section sand">
        <div className="wrap">
          <div className="col-2" style={{ alignItems: "stretch" }}>
            <div style={{ aspectRatio: "4/3", backgroundImage: "url(media/home-office-interior-dubai.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
            <div style={{ padding: "0 0 0 8px" }}>
              <div className="eyebrow">◇ — The studio space</div>
              <h3 className="display" style={{ fontSize: "clamp(28px, 3.4vw, 52px)", margin: "20px 0", fontWeight: 400 }}>
                Dubai Design District, Bldg 1B · Office 601.
              </h3>
              <p className="body" style={{ marginTop: 0 }}>
                We share the floor with the trades who deliver every project —
                joinery sample wall, marble samples, fabric library and an espresso machine.
                Walk-ins by appointment; we never run a project the client hasn't seen us in
                the room for.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
                <button className="btn btn-arrow" onClick={() => navigate({ name: "contact" })}>Book a studio visit</button>
                <button className="btn btn-ghost btn-arrow" onClick={() => navigate({ name: "projects" })}>See projects</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* recognition */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            roman="II."
            title="Recognition — attributed."
            aside="We carry only the recognition we can attribute and link."
          />
          <RecognitionStrip />
        </div>
      </section>
    </main>
  );
}

// ---------- Services ----------
function Services({ navigate }) {
  const groups = [
    {
      group: "Design", roman: "I.",
      items: [
        { name: "Interior architecture",    note: "Plans, joinery, lighting, M&E coordination." },
        { name: "Interior design",          note: "Concept, palette, materials, furniture." },
        { name: "3D visualisation",         note: "Photoreal renders before commitment." },
        { name: "Curtains & soft furnishings", note: "Drapery, upholstery, dressing." },
      ],
    },
    {
      group: "Build", roman: "II.",
      items: [
        { name: "Full turnkey fit-out",   note: "Single point of accountability, dedicated PM." },
        { name: "Villa contracting",       note: "UAE-licensed; villa-grade build oversight." },
        { name: "Renovation",              note: "Villas, apartments, offices." },
        { name: "Landscape design",        note: "Soft planting, pergolas, terraces." },
      ],
    },
    {
      group: "Manage", roman: "III.",
      items: [
        { name: "DEWA approvals",   note: "Power & water-authority sign-off." },
        { name: "DDA & community",  note: "Design district + community NOC handling." },
        { name: "Emaar / Nakheel",  note: "Master-developer approvals." },
        { name: "Concordia",        note: "Master-community engineering reviews." },
      ],
    },
  ];

  return (
    <main data-screen-label="06 Services">
      <section className="section tight" style={{ paddingBottom: 24 }}>
        <div className="wrap">
          <div className="eyebrow">— Scope of service · design · build · manage</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 120px)", margin: "20px 0", fontWeight: 300 }}>
            We design <em style={{ color: "var(--brass)", fontStyle: "italic" }}>and</em> we build.
          </h1>
          <p className="lede" style={{ maxWidth: "44ch" }}>
            The studio operates across three lanes — design, build, manage — under one roof.
            Engage us for one, or for all three.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 80 }}>
          {groups.map(g => (
            <div key={g.group} data-comment-anchor={`svc-${g.group}`}>
              <SectionHead roman={g.roman} title={g.group} />
              <div className="col-4" style={{ borderTop: "1px solid var(--line)" }}>
                {g.items.map((it, i) => (
                  <div key={i} style={{ padding: "28px 24px", borderRight: i === g.items.length - 1 ? 0 : "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
                    <div className="eyebrow">— {String(i + 1).padStart(2, "0")}</div>
                    <h4 style={{ fontFamily: "var(--serif)", fontWeight: 400, fontSize: 22, margin: "14px 0 8px" }}>{it.name}</h4>
                    <p className="body" style={{ fontSize: 13.5, margin: 0, color: "var(--muted)" }}>{it.note}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section sand">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="eyebrow">◆ — On pricing</div>
            <h3 className="display" style={{ fontSize: "clamp(28px, 3.6vw, 52px)", margin: "16px 0", fontWeight: 400 }}>
              We quote per project, never per square metre.
            </h3>
            <p className="body" style={{ margin: 0 }}>
              We deliver an itemised tailored quote after a site walk
              and a one-hour brief — usually within seven working days.
              Budget is shared then, not before.
            </p>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <button className="btn btn-arrow" onClick={() => navigate({ name: "contact" })}>Request a tailored quote</button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- Contact ----------
function Contact({ navigate, subject }) {
  const [form, setForm] = useStateS({
    name: "", email: "", phone: "",
    sector: "Villa", projectType: "New build · turnkey",
    message: subject ? `Hello — I'd like to discuss a project similar to "${subject}".` : "",
  });
  const [sent, setSent] = useStateS(false);
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <main data-screen-label="07 Contact">
      <section className="section tight" style={{ paddingBottom: 24 }}>
        <div className="wrap">
          <div className="eyebrow">— Begin an enquiry</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 120px)", margin: "20px 0", fontWeight: 300 }}>
            Start a <em style={{ color: "var(--brass)", fontStyle: "italic" }}>project.</em>
          </h1>
          <p className="lede" style={{ maxWidth: "44ch" }}>
            Send us the brief, the floorplan, or just a note.
            Replies in one working day. We never publish your enquiry, your photographs, or your address.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="enquiry-block">
            {/* contact list */}
            <div className="contact-list" data-comment-anchor="contact-list">
              <div className="contact-item">
                <span className="label">Phone & WhatsApp</span>
                <a className="val" href="tel:+971553573290">+971 55 357 3290</a>
                <div className="sub">Mon–Sat 09:00–18:00 GST</div>
              </div>
              <div className="contact-item">
                <span className="label">Email</span>
                <a className="val" href="mailto:info@musedesign.ae">info@musedesign.ae</a>
                <div className="sub">Replies in one working day</div>
              </div>
              <div className="contact-item">
                <span className="label">Studio</span>
                <div className="val">Dubai Design District<br/>Building 1B · Office 601<br/>Dubai · United Arab Emirates</div>
                <div className="sub">Visits by appointment</div>
              </div>
              <div className="contact-item">
                <span className="label">Hours</span>
                <div className="val">Mon — Sat · 09:00 — 18:00<br/>Sun · Closed</div>
                <div className="sub">UAE public holidays observed</div>
              </div>

              <a
                href="https://api.whatsapp.com/send?phone=971553573290&text=Hi%20Muse"
                target="_blank"
                rel="noopener"
                className="btn btn-arrow"
                style={{ background: "var(--whatsapp)", borderColor: "var(--whatsapp)", color: "white", alignSelf: "flex-start", marginTop: 8 }}
              >
                Message on WhatsApp
              </a>
            </div>

            {/* form */}
            <div data-comment-anchor="contact-form">
              {!sent ? (
                <form className="form" onSubmit={submit}>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>◇ — Project enquiry</div>
                  <div className="form-row">
                    <div className="field">
                      <label>Full name</label>
                      <input value={form.name} required onChange={e => update("name", e.target.value)} placeholder="Your name" />
                    </div>
                    <div className="field">
                      <label>Email</label>
                      <input type="email" value={form.email} required onChange={e => update("email", e.target.value)} placeholder="you@email.com" />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="field">
                      <label>Phone / WhatsApp</label>
                      <input value={form.phone} onChange={e => update("phone", e.target.value)} placeholder="+971 ..." />
                    </div>
                    <div className="field">
                      <label>Sector</label>
                      <select value={form.sector} onChange={e => update("sector", e.target.value)}>
                        {["Villa","Apartment","Penthouse","Office","Restaurant","Hotel","Salon / Barber","Landscape","Other"].map(s => (
                          <option key={s}>{s}</option>
                        ))}
                      </select>
                    </div>
                  </div>
                  <div className="field">
                    <label>Project type</label>
                    <select value={form.projectType} onChange={e => update("projectType", e.target.value)}>
                      {["New build · turnkey","Renovation","Design only","3D visualisation","Soft furnishings","Other"].map(s => (
                        <option key={s}>{s}</option>
                      ))}
                    </select>
                  </div>
                  <div className="field">
                    <label>Message / brief</label>
                    <textarea value={form.message} onChange={e => update("message", e.target.value)} placeholder="What are we looking at — site, scope, timeframe? Attachments after first reply." />
                  </div>
                  <button type="submit" className="btn btn-arrow submit">Send enquiry</button>
                  <div className="label" style={{ marginTop: 8 }}>
                    Your enquiry is routed to the practice inbox and the studio CRM.
                  </div>
                </form>
              ) : (
                <div className="form-success">
                  Thank you, {form.name || "—"}. Your enquiry is with the studio. <br/>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--muted)", textTransform: "uppercase" }}>
                    A reply is on its way — typically within one working day.
                  </span>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* map + studio */}
      <section className="section sand">
        <div className="wrap">
          <SectionHead
            roman="II."
            title="Find the studio."
            aside="d3, the city's design district. Bldg 1B, Office 601 — coordinates confirmed before publishing the live map."
          />
          <div className="map-block" data-comment-anchor="map-block">
            <div className="map-pin" />
            <div className="map-caption">d3 · Bldg 1B · Office 601</div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Studio = Studio;
window.Services = Services;
window.Contact = Contact;