/* global React */
const { useState: useS3, useEffect: useE3 } = React;

/* ============================================================
   Why specify Mirage (attributed global brand context)
   ============================================================ */
function WhySpecify() {
  return (
    <section className="block why" id="about">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{color: "rgba(244,242,238,0.65)"}}>
              <span className="dot"></span>Why specify Mirage
            </div>
            <h2 style={{marginTop: 20, color: "#f4f2ee"}}>
              Italian porcelain,<br /><span className="it">specified worldwide.</span>
            </h2>
          </div>
          <div className="right">
            <p>
              The numbers below describe the global Mirage Granito Ceramico brand —
              the platform from which the Dubai Project Point specifies into the GCC.
              Local conditions, technical detailing and project support are handled at d3.
            </p>
          </div>
        </div>

        <div className="why-grid">
          <div className="why-cell">
            <div className="num">50<span className="pl">+</span></div>
            <div className="lbl">Years of Italian porcelain-stoneware manufacturing under the Mirage brand.</div>
          </div>
          <div className="why-cell">
            <div className="num">160<span className="pl">+</span></div>
            <div className="lbl">Countries in which the Mirage range is currently specified.</div>
          </div>
          <div className="why-cell">
            <div className="num">200</div>
            <div className="lbl">Colours across 30 collections, 14 sizes and 14 finishes.</div>
          </div>
          <div className="why-cell">
            <div className="num">1</div>
            <div className="lbl">Dubai Project Point — the first dedicated Mirage hub outside Italy.</div>
          </div>
        </div>

        <div className="why-context">
          <div className="label">Brand context</div>
          <p>
            "Inspiring Better Living" — Mirage's positioning, made local. The Dubai Project Point
            is not a retail store; it is a permanent <em>workshop for the projects, design,
            construction and retail community</em>, designed by Pallavi Dean Interiors (Roar)
            as the brand's first dedicated hub outside Italy.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Team
   ============================================================ */
function Team() {
  return (
    <section className="block shell" id="team">
      <div className="section-head">
        <div>
          <div className="eyebrow"><span className="dot"></span>The Dubai team</div>
          <h2 style={{marginTop: 20}}>
            Two people, <span className="it">on the floor</span>.
          </h2>
        </div>
        <div className="right">
          <p>
            Specification and export — the working pair at the Mirage Project Point Dubai.
            Walk in or book an appointment; either way you'll be working directly with one
            of them on your project.
          </p>
        </div>
      </div>

      <div className="team-grid">
        <div className="team-card">
          <div className="ph"><img src="assets/team-mais.webp" alt="Mais Shair" /></div>
          <div className="info">
            <h4>Mais Shair</h4>
            <div className="role">Specification Manager</div>
            <p>
              Works directly with architects and interior designers across the GCC on
              material selection, mockups and project documentation from the d3 Project Point.
            </p>
            <div className="row">
              <a href="#book">Book a session</a>
              <a href="tel:+97145543944">Call</a>
            </div>
          </div>
        </div>
        <div className="team-card">
          <div className="ph"><img src="assets/team-valentin.webp" alt="Valentin Eymin" /></div>
          <div className="info">
            <h4>Valentin Eymin</h4>
            <div className="role">Export Manager</div>
            <p>
              Bridges the d3 Project Point with Mirage's Italian manufacturing platform —
              technical, logistical and commercial support for projects across the region.
            </p>
            <div className="row">
              <a href="#book">Book a session</a>
              <a href="tel:+97145543944">Call</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Booking section
   ============================================================ */
function Booking() {
  const [type, setType] = useS3("consult");
  const [submitted, setSubmitted] = useS3(false);
  const [form, setForm] = useS3({
    name: "", company: "", email: "", phone: "",
    role: "", project: "", message: "", privacy: false
  });

  const onChange = (k) => (e) => {
    const v = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm(f => ({ ...f, [k]: v }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.privacy) return;
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 5500);
    setForm({ name: "", company: "", email: "", phone: "", role: "", project: "", message: "", privacy: false });
  };

  return (
    <section className="block book" id="book">
      <div className="shell book-grid">
        <div>
          <div className="eyebrow"><span className="dot"></span>Contact</div>
          <h2 style={{marginTop: 20}}>
            Specify with us<br />in <span className="it">Dubai</span>.
          </h2>
          <p className="lead">
            Book a consultation, request samples and documentation, or submit a project
            enquiry. We'll respond from the d3 Project Point within one working day.
          </p>

          <div className="book-info">
            <div className="row">
              <div className="l">Visit</div>
              <div className="r">
                Building 7, R05<br />
                Dubai Design District<br />
                Dubai, UAE
                <div className="small">Open in <a href="https://maps.google.com/?q=Building+7+R05+Dubai+Design+District+Mirage" target="_blank" rel="noreferrer">Google Maps ↗</a></div>
              </div>
            </div>
            <div className="row">
              <div className="l">Hours</div>
              <div className="r">
                Monday – Saturday<br />
                09:00 – 18:00 (GST)
                <div className="small">Sunday — closed</div>
              </div>
            </div>
            <div className="row">
              <div className="l">Phone</div>
              <div className="r">
                <a href="tel:+97145543944">+971 4 554 3944</a>
                <div className="small">Walk-ins welcome · appointments preferred</div>
              </div>
            </div>
            <div className="row">
              <div className="l">Online</div>
              <div className="r">
                Instagram, LinkedIn, Pinterest, YouTube
                <div className="small">Global Mirage handles — no Dubai-specific account</div>
              </div>
            </div>
          </div>
        </div>

        <form className="form-card" onSubmit={onSubmit} noValidate>
          <div className="pretitle">Tell us about your project</div>
          <h3>How can we help?</h3>

          <div className="enquiry-types" role="radiogroup" aria-label="Enquiry type">
            {ENQUIRY_TYPES.map(t => (
              <button key={t.id} type="button" role="radio" aria-checked={type === t.id}
                className={"enquiry-type" + (type === t.id ? " active" : "")}
                onClick={() => setType(t.id)}>
                {t.label}
              </button>
            ))}
          </div>

          <div className="form-row">
            <div className="field">
              <label>Full name *</label>
              <input type="text" value={form.name} onChange={onChange("name")} required />
            </div>
            <div className="field">
              <label>Company / Studio</label>
              <input type="text" value={form.company} onChange={onChange("company")} />
            </div>
          </div>
          <div className="form-row">
            <div className="field">
              <label>E-mail *</label>
              <input type="email" value={form.email} onChange={onChange("email")} required />
            </div>
            <div className="field">
              <label>Phone</label>
              <input type="tel" value={form.phone} onChange={onChange("phone")} />
            </div>
          </div>
          <div className="form-row">
            <div className="field">
              <label>Profession</label>
              <select value={form.role} onChange={onChange("role")}>
                <option value="">Select…</option>
                <option>Architect</option>
                <option>Interior Designer</option>
                <option>Developer</option>
                <option>Contractor / Fit-out</option>
                <option>Procurement / Specification</option>
                <option>End-client</option>
                <option>Other</option>
              </select>
            </div>
            <div className="field">
              <label>Project location</label>
              <input type="text" value={form.project} onChange={onChange("project")} placeholder="Dubai, Abu Dhabi, Riyadh…" />
            </div>
          </div>
          <div className="form-row solo">
            <div className="field">
              <label>Project brief / message</label>
              <textarea rows="3" value={form.message} onChange={onChange("message")} placeholder="Briefly describe the project, surfaces of interest, target dates…"></textarea>
            </div>
          </div>

          <div className="form-foot">
            <label className="privacy">
              <input type="checkbox" checked={form.privacy} onChange={onChange("privacy")} required />
              <span>I authorise Mirage to process my data in order to respond to my enquiry.</span>
            </label>
            <button type="submit" className="btn">
              Send enquiry <ArrowR />
            </button>
          </div>

          {submitted && (
            <div className="form-success">
              Thank you — we'll be in touch from the Dubai Project Point within one working day.
            </div>
          )}
        </form>
      </div>
    </section>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer() {
  return (
    <footer className="foot">
      <div className="shell">
        <div className="foot-top">
          <div className="col">
            <MirageWordmark className="logo" />
            <p className="blurb">
              Mirage Project Point Dubai — the d3 specification, consultation and co-working
              space for architects, designers and practitioners working with Italian porcelain
              stoneware across the GCC.
            </p>
          </div>
          <div className="col">
            <h5>Explore</h5>
            <a href="#collections">Collections</a>
            <a href="#applications">Applications</a>
            <a href="#gallery">The Project Point</a>
            <a href="#about">About Mirage</a>
            <a href="#book">Book a consultation</a>
          </div>
          <div className="col">
            <h5>Visit</h5>
            <span style={{display: "block", padding: "4px 0", fontSize: 14}}>
              Building 7, R05<br />Dubai Design District<br />Dubai, UAE
            </span>
            <a href="tel:+97145543944">+971 4 554 3944</a>
          </div>
          <div className="col">
            <h5>Global brand</h5>
            <a href="https://www.instagram.com/mirage_it/" target="_blank" rel="noreferrer">Instagram ↗</a>
            <a href="https://www.linkedin.com/company/mirage-spa/" target="_blank" rel="noreferrer">LinkedIn ↗</a>
            <a href="https://www.pinterest.com/Mirageit/" target="_blank" rel="noreferrer">Pinterest ↗</a>
            <a href="https://www.youtube.com/c/mirageitofficial" target="_blank" rel="noreferrer">YouTube ↗</a>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© Mirage Granito Ceramico S.p.A. · Project Point Dubai</div>
          <div>EN · AR · RU · ZH</div>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   Tweaks panel (uses starter component)
   ============================================================ */
function TweaksUI({ t, setTweak }) {
  if (!window.TweaksPanel) return null;
  const { TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent palette">
        <TweakColor
          label="Accent"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#b07a4e", "#c78a3f", "#7a5a3a", "#8b3a3a", "#2e2a24"]}
        />
      </TweakSection>
      <TweakSection label="Hero">
        <TweakSelect
          label="Hero image"
          value={t.hero}
          options={[
            { value: "showroom", label: "Showroom interior" },
            { value: "entry",    label: "Entry / reception" },
            { value: "surface",  label: "Material wall" },
            { value: "ambient",  label: "Ambient surface" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />
      </TweakSection>
      <TweakSection label="Layout">
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "compact",   label: "Compact" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweakSection>
      <TweakSection label="Locale">
        <TweakRadio
          label="Direction"
          value={t.locale}
          options={[
            { value: "en", label: "EN (LTR)" },
            { value: "ar", label: "AR (RTL)" },
          ]}
          onChange={(v) => setTweak("locale", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ============================================================
   Root app
   ============================================================ */
function App() {
  const [tweaks, setTweaks] = useS3({ ...TWEAK_DEFAULTS });
  const setTweak = (k, v) => {
    setTweaks(t => ({ ...t, [k]: v }));
    if (window.parent !== window) {
      try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*"); } catch(e){}
    }
  };

  // apply data attrs to <html>
  useE3(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    // ink-on-light needs dark text on accent; otherwise white text
    const isDark = /^#?(2e2a24|1a1916|000)/i.test(tweaks.accent.replace("#",""));
    document.documentElement.style.setProperty("--accent-ink", isDark ? "#f4f2ee" : "#ffffff");
    document.documentElement.dataset.density = tweaks.density;
    document.documentElement.dir = tweaks.locale === "ar" ? "rtl" : "ltr";
    document.documentElement.lang = tweaks.locale;
  }, [tweaks]);

  const [locale, setLocale] = useS3("en");
  useE3(() => { if (locale !== tweaks.locale) setTweak("locale", locale); }, [locale]);
  useE3(() => { if (tweaks.locale !== locale) setLocale(tweaks.locale); }, [tweaks.locale]);

  return (
    <>
      <Nav locale={tweaks.locale} setLocale={setLocale} />
      <Hero variant={tweaks.hero} />
      <ProjectPointFeature />
      <Collections />
      <Applications />
      <Gallery />
      <WhySpecify />
      <Team />
      <Booking />
      <Footer />
      <div className="mobile-cta">
        <a className="btn" href="#book">Book a consultation <ArrowR /></a>
      </div>
      <TweaksUI t={tweaks} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);