/* Secondary pages: Wanted, Services, About, FAQs, Media, Contact */

function Wanted({ navigate, openEnquire }) {
  return (
    <div className="page" style={{ paddingTop: 120 }}>
      <section style={{ padding: "80px 0 60px" }}>
        <div className="shell">
          <div className="eyebrow" style={{ opacity: 0.55 }}>Wanted</div>
          <h1 className="display" style={{ marginTop: 16, maxWidth: "20ch" }}>
            We are buyers as well as sellers.
          </h1>
          <p className="muted" style={{ maxWidth: "62ch", fontSize: 17, marginTop: 18 }}>
            We actively acquire post-war collectible European sportscars for our own portfolio, and we
            accept trade-ins where the car matches our profile. We are not brokers — we own what we sell —
            so when we say we want a car, we mean it.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
            <button className="btn btn-solid" onClick={() => openEnquire({ kind: "sell" })}>
              <span className="label">Sell us your car</span>
            </button>
            <a href="mailto:contact@tominiclassics.com" className="btn btn-light"><span className="label">Email the team</span></a>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 100 }}>
        <div className="shell">
          <div className="eyebrow" style={{ opacity: 0.55, marginBottom: 12 }}>Currently looking for</div>
          <div className="hairline" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }} className="wanted-grid">
            {WANTED.map((w, i) => (
              <div key={i} style={{
                padding: "32px 28px",
                borderBottom: "1px solid var(--line)",
                borderRight: (i + 1) % 3 === 0 ? "none" : "1px solid var(--line)",
                background: "transparent",
              }}>
                <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 12 }}>{w.year}</div>
                <h3 className="display" style={{ fontSize: 26, margin: "0 0 8px", lineHeight: 1.1 }}>
                  {w.marque}<br/>{w.model}
                </h3>
                <p className="muted" style={{ fontSize: 14, margin: "12px 0 18px" }}>{w.note}</p>
                <button className="btn-link" onClick={() => openEnquire({ kind: "sell" })}>I have one →</button>
              </div>
            ))}
          </div>
          <p className="muted" style={{ fontSize: 13, marginTop: 24, fontStyle: "italic" }}>
            The Wanted list rotates. A car not on it can still be of interest if it fits the gallery — please write.
          </p>
        </div>
      </section>

      {/* CTA */}
      <section className="section noir">
        <div className="shell-narrow" style={{ textAlign: "center" }}>
          <div className="rule center"></div>
          <h2 className="display">Honest answers, fairly priced.</h2>
          <p className="muted" style={{ maxWidth: 540, margin: "20px auto 0" }}>
            Tell us what you have. If we want it, we'll make you an offer. If we don't, we'll tell you straight
            — and often suggest where else might be a better home for the car.
          </p>
          <div style={{ marginTop: 32 }}>
            <button className="btn btn-solid" onClick={() => openEnquire({ kind: "sell" })}>
              <span className="label">Submit your car →</span>
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ------------- SERVICES ------------- */
function Services({ navigate, openEnquire }) {
  const items = [
    {
      tag: "01",
      title: "Storage",
      img: "media/services-banner.webp",
      eyebrow: "White-glove · Climate-controlled · 24h",
      body: "Our storage facility is clean, confidential, secure, climate-controlled and dust-free. Minimum stay is one month; access is twenty-four hours by prior arrangement. Each car is started and run monthly, trickle-charged, and covered for fire and theft as standard. One recovery-truck trip and standard cleaning are included.",
      cta: { label: "Storage enquiry", action: () => openEnquire({ kind: "storage" }) },
      note: "Every car sold by Tomini Classics includes a complimentary month of storage."
    },
    {
      tag: "02",
      title: "Assessment & Valuation",
      img: "media/services-assessment.webp",
      eyebrow: "Insurance · Resale · Provenance",
      body: "We inspect a sportscar and produce a written valuation report — suitable for insurance or resale. Originality, provenance and vehicle-specific factors are weighed in arriving at a fair, unbiased value, free of trade incentive.",
      cta: { label: "Request valuation", action: () => openEnquire({ kind: "valuation" }) }
    },
    {
      tag: "03",
      title: "Consulting",
      img: "media/services-consulting.webp",
      eyebrow: "Collection-building · Market opinion",
      body: "Independent advisory for collectors building or rebalancing a portfolio: budget allocation, marque exposure, holding horizon, and a sober view of the market. We share what we know — including when not to buy.",
      cta: { label: "Speak to an advisor", action: () => openEnquire({ kind: "general" }) }
    }
  ];

  const declines = [
    "Restoration / aftersales service",
    "Spare-parts sourcing",
    "General car sourcing or brokering",
    "Open consignment",
    "Car rental / loan for photoshoots or weddings"
  ];

  return (
    <div className="page" style={{ paddingTop: 120 }}>
      <section style={{ padding: "80px 0 40px" }}>
        <div className="shell">
          <div className="eyebrow" style={{ opacity: 0.55 }}>Services</div>
          <h1 className="display" style={{ marginTop: 16, maxWidth: "22ch" }}>
            A small, deliberate range of services — done properly.
          </h1>
        </div>
      </section>

      {items.map((s, i) => (
        <section key={s.tag} className="section-tight" style={{ background: i % 2 ? "var(--stone)" : "transparent" }}>
          <div className="shell">
            <div className="editorial-two" style={{ gridTemplateColumns: i % 2 ? "1.4fr 1fr" : "1fr 1.4fr" }}>
              {i % 2 === 0 ? (
                <>
                  <div>
                    <div className="eyebrow" style={{ color: "var(--accent)" }}>{s.tag} — {s.eyebrow}</div>
                    <h2 className="display" style={{ marginTop: 16 }}>{s.title}</h2>
                    <p className="muted" style={{ fontSize: 17, lineHeight: 1.7 }}>{s.body}</p>
                    {s.note && <p className="italic-serif" style={{ color: "var(--accent)", fontSize: 18 }}>{s.note}</p>}
                    <div style={{ marginTop: 28 }}>
                      <button className="btn btn-solid" onClick={s.cta.action}><span className="label">{s.cta.label}</span></button>
                    </div>
                  </div>
                  <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "var(--ink)" }}>
                    <img src={s.img} alt={s.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  </div>
                </>
              ) : (
                <>
                  <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "var(--ink)" }}>
                    <img src={s.img} alt={s.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  </div>
                  <div>
                    <div className="eyebrow" style={{ color: "var(--accent)" }}>{s.tag} — {s.eyebrow}</div>
                    <h2 className="display" style={{ marginTop: 16 }}>{s.title}</h2>
                    <p className="muted" style={{ fontSize: 17, lineHeight: 1.7 }}>{s.body}</p>
                    <div style={{ marginTop: 28 }}>
                      <button className="btn btn-solid" onClick={s.cta.action}><span className="label">{s.cta.label}</span></button>
                    </div>
                  </div>
                </>
              )}
            </div>
          </div>
        </section>
      ))}

      {/* Decline list — honest */}
      <section className="section noir">
        <div className="shell">
          <div className="editorial-two">
            <div>
              <div className="eyebrow" style={{ color: "var(--brass-light)" }}>What we don't offer</div>
              <h2 className="display" style={{ marginTop: 14 }}>The honest list.</h2>
              <p className="muted" style={{ maxWidth: "48ch", color: "#c8c5bf" }}>
                Plenty of dealerships will say yes to anything. We won't. If you need one of the below,
                we are happy to recommend trusted specialists in the region.
              </p>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {declines.map(d => (
                <li key={d} style={{
                  padding: "20px 0",
                  borderBottom: "1px solid var(--line2)",
                  display: "flex",
                  gap: 16,
                  fontFamily: "var(--display)",
                  fontSize: 22,
                  color: "#d5d2cc"
                }}>
                  <span style={{ color: "var(--accent)", fontFamily: "var(--mono)", fontSize: 14, paddingTop: 4 }}>✕</span>
                  {d}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ------------- ABOUT ------------- */
function About({ navigate, openEnquire }) {
  return (
    <div className="page" style={{ paddingTop: 120 }}>
      <section style={{ padding: "80px 0 40px" }}>
        <div className="shell">
          <div className="eyebrow" style={{ opacity: 0.55 }}>About</div>
          <h1 className="display" style={{ marginTop: 16, maxWidth: "22ch", fontSize: "clamp(48px, 6.5vw, 96px)" }}>
            A private collection<br/>
            <em className="italic-serif" style={{ color: "var(--accent)" }}>that opened its doors.</em>
          </h1>
        </div>
      </section>

      <section>
        <div className="shell" style={{ aspectRatio: "16/7", overflow: "hidden", background: "var(--ink)" }}>
          <img src="media/about-we-are-banner.webp" alt="Tomini Classics gallery" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
      </section>

      <section className="section">
        <div className="shell-narrow">
          <div className="editorial-two" style={{ gridTemplateColumns: "1fr 1.6fr" }}>
            <div>
              <div className="eyebrow" style={{ color: "var(--accent)" }}>Origin</div>
              <h2 className="display" style={{ marginTop: 14 }}>2010 — a Jaguar E-Type.</h2>
            </div>
            <div className="provenance">
              <p className="dropcap">
                The story starts not with a business but with a car. In January 2010, our founder
                Imtiaz Shaikh — Chairman of the Tomini Group — bought his first classic: a 1967
                Jaguar E-Type 4.2-litre coupé. Others followed. By 2012, the new Tomini Group
                headquarters had been designed around a purpose-built space for the cars. By 2014,
                that private collection had been formally established as Tomini Classics — the
                automotive division of the Tomini Group, a Dubai-headquartered shipping
                conglomerate founded in the family in 1950.
              </p>
              <p>
                Today the public gallery shows around sixty post-war European sportscars — from
                the 1930s to the very latest future classics — alongside a curated selection of
                automobilia and timepieces. A wider rotating collection lives in our private vault.
                The collection is run as a long-term portfolio, not a volume sales operation. It
                will likely never be larger than the team can know intimately.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--stone)" }}>
        <div className="shell">
          <div className="editorial-two" style={{ gridTemplateColumns: "1.6fr 1fr" }}>
            <div className="provenance">
              <p className="italic-serif" style={{ fontSize: 28, color: "var(--ink2)", lineHeight: 1.4 }}>
                "We do business in a straightforward and honourable manner. We are transparent
                about every car's condition — and relationships always come before sales."
              </p>
              <p className="eyebrow" style={{ marginTop: 24, color: "var(--accent)" }}>— Our philosophy</p>
            </div>
            <div>
              <div className="value-list" style={{ borderColor: "var(--line)" }}>
                <div style={{ borderColor: "var(--line)", padding: "24px 20px", borderRight: "none", borderBottom: "1px solid var(--line)" }}>
                  <div className="n">/ 01</div>
                  <h3 style={{ color: "var(--ink2)" }}>Authenticity</h3>
                  <p style={{ color: "var(--muted)" }}>What you see is what we know — paint, provenance and patina alike.</p>
                </div>
                <div style={{ borderColor: "var(--line)", padding: "24px 20px", borderRight: "none", borderBottom: "1px solid var(--line)" }}>
                  <div className="n">/ 02</div>
                  <h3 style={{ color: "var(--ink2)" }}>Passion</h3>
                  <p style={{ color: "var(--muted)" }}>We hold the cars we love long enough to know them deeply.</p>
                </div>
                <div style={{ borderColor: "var(--line)", padding: "24px 20px", borderRight: "none" }}>
                  <div className="n">/ 03</div>
                  <h3 style={{ color: "var(--ink2)" }}>Diversity</h3>
                  <p style={{ color: "var(--muted)" }}>Nine decades, many marques — one philosophy.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Leadership */}
      <section className="section">
        <div className="shell">
          <div className="eyebrow" style={{ opacity: 0.55, marginBottom: 12 }}>Leadership</div>
          <h2 className="display" style={{ marginBottom: 48 }}>The people behind the gallery.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }} className="leadership-grid">
            <div>
              <div style={{ aspectRatio: "4/5", background: "var(--stone)", marginBottom: 18, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase" }}>
                Portrait — pending client photography
              </div>
              <h3 className="display" style={{ fontSize: 30, margin: "8px 0 4px" }}>Imtiaz Shaikh</h3>
              <p className="eyebrow muted">Founder · Chairman, Tomini Group</p>
              <p className="muted" style={{ marginTop: 12 }}>
                Bought the first car — a 1967 Jaguar E-Type — in January 2010. Established Tomini Classics in 2014.
              </p>
            </div>
            <div>
              <div style={{ aspectRatio: "4/5", background: "var(--stone)", marginBottom: 18, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase" }}>
                Portrait — pending client photography
              </div>
              <h3 className="display" style={{ fontSize: 30, margin: "8px 0 4px" }}>Miguel Llorente</h3>
              <p className="eyebrow muted">Head of Classic Car Division</p>
              <p className="muted" style={{ marginTop: 12 }}>
                Joined Tomini Group in 2016. Previously curated cars at the Al Ain Classic Car Museum
                and consulted for the Sharjah Classic Car Museum.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Tomini Group context */}
      <section className="section noir">
        <div className="shell">
          <div className="editorial-two">
            <div>
              <div className="eyebrow" style={{ color: "var(--brass-light)" }}>The wider group</div>
              <h2 className="display" style={{ marginTop: 14 }}>Part of Tomini Group.</h2>
            </div>
            <div>
              <p className="provenance" style={{ color: "#d5d2cc" }}>
                Tomini Classics is the automotive division of Tomini Group — a Dubai-headquartered
                shipping conglomerate whose origins trace back to a 1950 steamship company. Shipping
                remains the heart of the family business; the classics gallery is the long-held
                personal passion of its founder, formalised into a public-facing operation.
              </p>
              <div style={{ marginTop: 20 }}>
                <a href="https://tominigroup.com" target="_blank" rel="noreferrer" className="btn-link">
                  Visit tominigroup.com ↗
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ------------- FAQs ------------- */
function FAQs() {
  return (
    <div className="page" style={{ paddingTop: 120 }}>
      <section style={{ padding: "80px 0 60px" }}>
        <div className="shell">
          <div className="eyebrow" style={{ opacity: 0.55 }}>Frequently asked</div>
          <h1 className="display" style={{ marginTop: 16, maxWidth: "22ch" }}>
            Plainly answered. No-nonsense.
          </h1>
        </div>
      </section>
      <section style={{ paddingBottom: 120 }}>
        <div className="shell-narrow">
          {FAQS.map((f, i) => (
            <details key={i} className="faq-item">
              <summary>
                <span style={{ display: "flex", gap: 18, alignItems: "baseline" }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--accent)", letterSpacing: "0.16em", minWidth: 32 }}>/{String(i + 1).padStart(2, "0")}</span>
                  <span>{f.q}</span>
                </span>
                <span className="toggle">+</span>
              </summary>
              <div className="answer" style={{ paddingLeft: 50 }}>{f.a}</div>
            </details>
          ))}
          <p className="muted" style={{ fontSize: 13, fontStyle: "italic", marginTop: 36 }}>
            A condensed selection — the full twenty-four-question FAQ ports verbatim from the existing site.
          </p>
        </div>
      </section>
    </div>
  );
}

/* ------------- MEDIA / PRESS ------------- */
function Media() {
  const features = [
    { source: "The National", date: "Mar 2025", title: "Inside Dubai's quietest classic-car gallery" },
    { source: "Petrolicious",  date: "Nov 2024", title: "How a private E-Type became a public collection" },
    { source: "Gulf News",     date: "Sep 2024", title: "An honest dealership? In Dubai? Apparently, yes." },
    { source: "Automobili Ardent", date: "May 2024", title: "Tomini's quiet hand on the GCC market" }
  ];
  return (
    <div className="page" style={{ paddingTop: 120 }}>
      <section style={{ padding: "80px 0 40px" }}>
        <div className="shell">
          <div className="eyebrow" style={{ opacity: 0.55 }}>Media</div>
          <h1 className="display" style={{ marginTop: 16, maxWidth: "22ch" }}>
            As featured in.
          </h1>
        </div>
      </section>
      <section style={{ paddingBottom: 60 }}>
        <div className="shell">
          <PressStrip />
        </div>
      </section>
      <section style={{ paddingBottom: 120 }}>
        <div className="shell-narrow">
          {features.map((f, i) => (
            <a key={i} className="press-item" style={{
              display: "grid",
              gridTemplateColumns: "120px 1fr auto",
              gap: 24,
              padding: "28px 0",
              borderTop: "1px solid var(--line)",
              alignItems: "center",
              cursor: "pointer"
            }}>
              <span className="eyebrow" style={{ opacity: 0.6 }}>{f.date}</span>
              <span>
                <span className="display" style={{ fontSize: 22, display: "block" }}>{f.title}</span>
                <span className="eyebrow muted" style={{ marginTop: 4, display: "inline-block" }}>{f.source}</span>
              </span>
              <span className="mono" style={{ fontSize: 14 }}>↗</span>
            </a>
          ))}
          <div style={{ borderTop: "1px solid var(--line)" }} />
          <p className="muted" style={{ fontSize: 13, fontStyle: "italic", marginTop: 24 }}>
            Press features displayed with publisher logo rights confirmed. Source list maintained internally.
          </p>
        </div>
      </section>
    </div>
  );
}

/* ------------- CONTACT ------------- */
function Contact({ openEnquire, whatsappOn }) {
  return (
    <div className="page" style={{ paddingTop: 120 }}>
      <section style={{ padding: "80px 0 40px" }}>
        <div className="shell">
          <div className="eyebrow" style={{ opacity: 0.55 }}>Contact</div>
          <h1 className="display" style={{ marginTop: 16, maxWidth: "20ch" }}>
            Pay us a visit.
          </h1>
          <p className="muted" style={{ maxWidth: "56ch", fontSize: 17, marginTop: 18 }}>
            Appointments are highly recommended — but you are welcome simply to walk the gallery.
            Please do not touch or open the cars unless an authorised staff member is present.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }} className="contact-grid">

            <div>
              <div style={{ borderTop: "1px solid var(--line)", padding: "22px 0", borderBottom: "1px solid var(--line)" }}>
                <div className="eyebrow muted">Address</div>
                <p className="display" style={{ fontSize: 24, margin: "8px 0 0", lineHeight: 1.3 }}>
                  Tomini Building, Umm Suqeim Road,<br/>
                  Al Barsha 2, PO Box 172700,<br/>
                  Dubai, United Arab Emirates
                </p>
              </div>
              <div style={{ padding: "22px 0", borderBottom: "1px solid var(--line)" }}>
                <div className="eyebrow muted">Telephone · Email</div>
                <p style={{ margin: "8px 0 0" }}>
                  <a href="tel:+97143062032" style={{ fontFamily: "var(--display)", fontSize: 22 }}>+971 4 306 2032</a><br/>
                  <a href="mailto:contact@tominiclassics.com" style={{ fontFamily: "var(--display)", fontSize: 22 }}>contact@tominiclassics.com</a>
                </p>
              </div>
              <div style={{ padding: "22px 0", borderBottom: "1px solid var(--line)" }}>
                <div className="eyebrow muted">Hours</div>
                <table style={{ width: "100%", borderCollapse: "collapse", marginTop: 10 }}>
                  <tbody>
                    <tr><td style={{ padding: "8px 0", fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)", letterSpacing: "0.14em" }}>BY APPOINTMENT</td><td style={{ padding: "8px 0", textAlign: "right" }}>Mon — Fri, 09:00 – 17:00</td></tr>
                    <tr><td style={{ padding: "8px 0", fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)", letterSpacing: "0.14em" }}>GALLERY VIEWING</td><td style={{ padding: "8px 0", textAlign: "right" }}>Daily, 09:00 – 22:00</td></tr>
                  </tbody>
                </table>
              </div>
              <div style={{ padding: "22px 0" }}>
                <div className="eyebrow muted">Social</div>
                <p style={{ margin: "8px 0 0" }}>
                  <a href="https://instagram.com/tomini.classics" target="_blank" rel="noreferrer">@tomini.classics on Instagram ↗</a><br/>
                  <a href="https://facebook.com/tominiclassics" target="_blank" rel="noreferrer">facebook.com/tominiclassics ↗</a>
                </p>
              </div>

              <div style={{ display: "flex", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
                <button className="btn btn-solid" onClick={() => openEnquire({ kind: "viewing" })}>
                  <span className="label">Book a viewing</span>
                </button>
                {whatsappOn && (
                  <button className="btn btn-light" onClick={() => alert("WhatsApp deep-link — pending client number")}>
                    <span className="label">WhatsApp us</span>
                  </button>
                )}
              </div>
            </div>

            {/* Map */}
            <div>
              <div style={{
                aspectRatio: "1/1",
                background: "linear-gradient(135deg, #2A2E31 0%, #1A1D1F 100%)",
                position: "relative",
                overflow: "hidden",
                border: "1px solid var(--line)"
              }}>
                {/* schematic map */}
                <svg viewBox="0 0 400 400" style={{ width: "100%", height: "100%", display: "block" }} preserveAspectRatio="none">
                  <defs>
                    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#3a3f43" strokeWidth="0.5"/>
                    </pattern>
                  </defs>
                  <rect width="400" height="400" fill="url(#grid)"/>
                  {/* roads */}
                  <path d="M 0 240 L 400 200" stroke="#5e645c" strokeWidth="14" opacity="0.7"/>
                  <path d="M 0 240 L 400 200" stroke="#a8a39a" strokeWidth="2"/>
                  <path d="M 200 0 L 240 400" stroke="#5e645c" strokeWidth="10" opacity="0.7"/>
                  <path d="M 180 100 L 300 380" stroke="#4e5450" strokeWidth="6" opacity="0.5"/>
                  {/* labels */}
                  <text x="20" y="260" fill="#888884" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="0.15em">UMM SUQEIM RD</text>
                  <text x="248" y="120" fill="#888884" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="0.15em">AL BARSHA 2</text>
                  {/* pin */}
                  <circle cx="218" cy="218" r="40" fill="#D3303E" opacity="0.18"/>
                  <circle cx="218" cy="218" r="22" fill="#D3303E" opacity="0.35"/>
                  <circle cx="218" cy="218" r="7" fill="#D3303E"/>
                  <line x1="218" y1="226" x2="218" y2="260" stroke="#D3303E" strokeWidth="2"/>
                  <text x="226" y="208" fill="#F6F4EF" fontFamily="Cormorant Garamond, serif" fontSize="18" fontStyle="italic">Tomini Classics</text>
                  <text x="226" y="224" fill="#a8a39a" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="0.16em">25.1098° N  ·  55.2204° E</text>
                </svg>
                <div style={{
                  position: "absolute",
                  bottom: 16, right: 16,
                  fontFamily: "var(--mono)",
                  fontSize: 10, color: "#a8a39a", letterSpacing: "0.16em", textTransform: "uppercase"
                }}>Pin confirmation pending</div>
              </div>
              <p className="muted" style={{ fontSize: 12, fontStyle: "italic", marginTop: 14 }}>
                Map render is illustrative. The live embed will be confirmed by the client (the current
                pin points at "Tomini Group", not the gallery entrance).
              </p>
            </div>

          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Wanted, Services, About, FAQs, Media, Contact });