// mart-app.jsx — Mart® homepage prototype.

const { useState, useEffect, useRef, useMemo } = React;

// ─── Tiny SVGs ───────────────────────────────────────────────────────────
const ArrowRight = ({ s = 14 }) => (
  <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
    <path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
  </svg>
);
const ArrowUpRight = ({ s = 14 }) => (
  <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
    <path d="M3 11L11 3M5 3h6v6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
  </svg>
);
const Check = ({ s = 12 }) => (
  <svg width={s} height={s} viewBox="0 0 12 12" fill="none">
    <path d="M2 6.5l2.5 2.5L10 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" fill="none" />
  </svg>
);
const MartWordmark = ({ height = 18 }) => (
  // Inline white "Mart®" wordmark — sourced from supplied media/logo-mart-white.svg
  <svg height={height} viewBox="0 0 89 26" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: "block" }}>
    <path d="M85.703 21.1768C87.0329 21.1768 88.09 22.2604 88.09 23.5903C88.09 24.9203 87.0329 26.0001 85.703 26.0001C84.373 26.0001 83.3235 24.9241 83.3235 23.5903C83.3235 22.2566 84.373 21.1768 85.703 21.1768ZM85.703 25.5758C86.8018 25.5758 87.6695 24.6891 87.6695 23.5903C87.6695 22.4915 86.8018 21.5973 85.703 21.5973C84.6042 21.5973 83.7365 22.4915 83.7365 23.5903C83.7365 24.6891 84.6042 25.5758 85.703 25.5758ZM86.0705 23.9389C86.438 23.8442 86.5972 23.5146 86.5972 23.1887C86.5972 22.7947 86.3433 22.3968 85.8204 22.3968H84.8845V24.8066H85.3544V23.973H85.5097L86.1084 24.8066H86.6805L86.0667 23.9389H86.0705ZM85.8166 22.8629C86.0137 22.8629 86.1311 23.0182 86.1311 23.1887C86.1311 23.3592 86.0137 23.5108 85.8053 23.5108H85.3544V22.8629H85.8166Z" fill="white"/>
    <path d="M0 10.3968L6.34276 5.39917V25.9544H0V10.4006V10.3968ZM18.2818 10.1089V25.9544H11.9391V8.86988L7.4984 8.91156L10.6584 6.41083C11.5071 5.75155 12.5188 5.39917 13.5721 5.39917C16.1752 5.39917 18.2818 7.50584 18.2818 10.1089ZM30.2209 10.1089V25.9544H23.9009V8.78652H19.5853L22.6202 6.41083C23.4462 5.75155 24.4579 5.39917 25.534 5.39917C28.1143 5.39917 30.2247 7.50584 30.2247 10.1089H30.2209Z" fill="white"/>
    <path d="M38.5642 20.0853C38.5642 22.336 40.1139 24.2987 42.3646 25.2687C41.3946 25.6817 40.2996 25.909 39.1212 25.909C35.2375 25.909 32.0964 23.306 32.0964 20.0853C32.0964 16.8647 35.2375 14.2579 39.1212 14.2579C40.2996 14.2579 41.3946 14.4852 42.3646 14.8982C40.1139 15.8909 38.5642 17.8309 38.5642 20.0815V20.0853ZM34.1652 8.49483C34.1652 6.7178 35.6126 5.29314 37.3859 5.29314C39.1591 5.29314 40.6065 6.7178 40.6065 8.49483C40.6065 10.2719 39.1591 11.7155 37.3859 11.7155C35.6126 11.7155 34.1652 10.2681 34.1652 8.49483ZM53.9968 22.461L50.9618 24.8557C50.1358 25.496 49.1014 25.8484 48.0481 25.8484C45.445 25.8484 43.3383 23.7417 43.3383 21.1387V5.56216C43.8536 5.35756 44.4106 5.25146 44.9714 5.25146C47.5744 5.25146 49.6811 7.38087 49.6811 9.98012V22.4572H53.9968V22.461Z" fill="white"/>
    <path d="M55.3571 5.27441H61.7188V25.9092H55.3571V5.27441ZM67.2772 11.7384C65.5002 11.7384 64.0566 10.291 64.0566 8.51778C64.0566 6.74454 65.504 5.29336 67.2772 5.29336C69.0504 5.29336 70.5016 6.74075 70.5016 8.51778C70.5016 10.2948 69.077 11.7384 67.2772 11.7384Z" fill="white"/>
    <path d="M77.9356 7.39989V22.5407H82.2739L79.239 24.9353C78.3902 25.5984 77.3786 25.947 76.3063 25.947C73.7033 25.947 71.5776 23.8403 71.5776 21.2145V5.0204L77.9393 0V5.26669H82.2777V7.3961H77.9393L77.9356 7.39989Z" fill="white"/>
  </svg>
);

// ─── Nav ─────────────────────────────────────────────────────────────────
function Nav({ copy, locale, setLocale, t }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", fn, { passive: true });
    fn();
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <header className={"nav " + (scrolled ? "scrolled" : "")}>
      <div className="container nav-row">
        <a href="#home" className="nav-logo" aria-label="Mart home">
          <MartWordmark height={18} />
        </a>
        <nav className="nav-links">
          <a href="#brands">{copy.nav.brands}</a>
          <a href="#services">{copy.nav.services}</a>
          <a href="#projects" className="active">{copy.nav.projects}</a>
          <a href="#showroom">{copy.nav.showroom}</a>
          <a href="#about">{copy.nav.about}</a>
          <a href="#contact">{copy.nav.contact}</a>
        </nav>
        <div className="nav-cta">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={locale === "en" ? "active" : ""} onClick={() => setLocale("en")}>EN</button>
            <button className={locale === "ar" ? "active" : ""} onClick={() => setLocale("ar")}>عر</button>
          </div>
          <a href="#contact" className="btn btn-ghost" style={{ padding: "10px 16px" }}>
            {copy.nav.join}
          </a>
          <a href="#contact" className="btn btn-primary" style={{ padding: "10px 18px" }}>
            {copy.nav.quote} <span className="arr"><ArrowRight /></span>
          </a>
        </div>
      </div>
    </header>
  );
}

// ─── Hero ────────────────────────────────────────────────────────────────
function Hero({ copy, heroIdx, setHeroIdx, useGreenHeadline }) {
  const img = MART_HERO_IMAGES[heroIdx] || MART_HERO_IMAGES[0];
  return (
    <section id="home" className="hero" style={{ padding: 0 }} data-screen-label="01 Hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text">
            <div>
              <div className="eyebrow" style={{ marginBottom: 32 }}>{copy.hero.eyebrow}</div>
              <h1>
                {copy.hero.h1a}
                {useGreenHeadline
                  ? <span className="green">{copy.hero.h1g}</span>
                  : <em style={{ fontStyle: "italic", fontWeight: 400 }}>{copy.hero.h1g}</em>}
                {copy.hero.h1b}
              </h1>
              <p className="lead" style={{ marginTop: 32, maxWidth: "52ch" }}>{copy.hero.lead}</p>
              <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
                <a href="#contact" className="btn btn-primary">
                  {copy.hero.cta1} <span className="arr"><ArrowRight /></span>
                </a>
                <a href="#contact" className="btn btn-ghost">
                  {copy.hero.cta2} <span className="arr"><ArrowUpRight /></span>
                </a>
              </div>
            </div>
            <div className="hero-meta">
              <div>
                <div className="num-big num">{copy.hero.brandsV}</div>
                <div className="label">{copy.hero.brands}</div>
              </div>
              <div>
                <div className="num-big num" style={{ fontSize: 18, fontFamily: "Inter Tight", lineHeight: 1.2 }}>{copy.hero.sectorsV}</div>
                <div className="label">{copy.hero.sectors}</div>
              </div>
              <div>
                <div className="num-big num" style={{ fontSize: 22 }}>{copy.hero.backingV}</div>
                <div className="label">{copy.hero.backing}</div>
              </div>
            </div>
          </div>
          <div className="hero-img-wrap">
            <img src={img.src} alt="Workspace install" key={img.src} />
            <div className="hero-cap">
              <span className="ind"></span>
              {img.cap}
            </div>
            <div className="hero-thumbs">
              {MART_HERO_IMAGES.map((h, i) => (
                <button
                  key={h.src}
                  className={i === heroIdx ? "active" : ""}
                  onClick={() => setHeroIdx(i)}
                  aria-label={"Show hero " + (i + 1)}>
                  <img src={h.src} alt="" />
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section head ────────────────────────────────────────────────────────
function SectHead({ eyebrow, title, lead, cta }) {
  return (
    <div className="sect-head">
      <div className="eyebrow">{eyebrow}</div>
      <div>
        <h2>{title}</h2>
        {lead ? <p className="lead" style={{ marginTop: 20, maxWidth: "58ch" }}>{lead}</p> : null}
        {cta ? <div style={{ marginTop: 24 }}>{cta}</div> : null}
      </div>
    </div>
  );
}

// ─── Services Journey ───────────────────────────────────────────────────
function ServicesJourney({ copy }) {
  const [active, setActive] = useState(0);
  const svc = MART_SERVICES[active];
  return (
    <section id="services" data-screen-label="02 Services">
      <div className="container">
        <SectHead eyebrow={copy.svc.eyebrow} title={copy.svc.h2} lead={copy.svc.lead} />
      </div>
      <div className="container">
        <div className="svc" role="tablist">
          {MART_SERVICES.map((s, i) => (
            <button
              key={s.id}
              role="tab"
              className={"svc-step " + (i === active ? "active" : "")}
              onClick={() => setActive(i)}
              aria-selected={i === active}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span className="svc-num">{s.n}</span>
                <span className="eyebrow" style={{ fontSize: 10, opacity: i === active ? 1 : 0.6 }}>
                  {i === active ? "VIEWING" : "STEP"}
                </span>
              </div>
              <div className="svc-title">{s.title}</div>
              <span className="svc-arr"><ArrowUpRight /></span>
            </button>
          ))}
        </div>

        <div className="svc-detail">
          <div className="svc-detail-text">
            <div>
              <div className="eyebrow" style={{ color: "rgba(251,250,246,.55)", marginBottom: 16 }}>
                STEP {svc.n} — {svc.title.toUpperCase()}
              </div>
              <h3>{svc.title}.</h3>
              <p className="lead" style={{ marginTop: 20 }}>{svc.blurb}</p>
            </div>
            <div style={{ marginTop: 40 }}>
              <div className="eyebrow" style={{ color: "rgba(251,250,246,.55)", marginBottom: 16 }}>
                DELIVERABLES
              </div>
              <ul className="svc-list">
                {svc.deliverables.map((d, i) => (
                  <li key={d}>
                    <span className="ix">{String(i + 1).padStart(2, "0")}</span>
                    <span>{d}</span>
                  </li>
                ))}
              </ul>
              <div style={{
                marginTop: 32, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,.14)",
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap"
              }}>
                <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                  <Check />
                  <span style={{ fontSize: 14, color: "rgba(251,250,246,.85)" }}>{svc.outcome}</span>
                </div>
                <a href="#contact" className="btn btn-light" style={{ padding: "10px 16px", fontSize: 13 }}>
                  Brief us on {svc.title.toLowerCase()} <span className="arr"><ArrowRight /></span>
                </a>
              </div>
            </div>
          </div>
          <div className="svc-detail-img">
            <img src={svc.img} alt={svc.title + " — Mart® process"} key={svc.img} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Brand wall ─────────────────────────────────────────────────────────
function Brands({ copy }) {
  return (
    <section id="brands" data-screen-label="03 Brands">
      <div className="container">
        <SectHead
          eyebrow={copy.brands.eyebrow}
          title={copy.brands.h2}
          lead={copy.brands.lead}
        />
        <div className="brands-row">
          {MART_BRANDS.slice(0, 24).map((b, i) => (
            <div className="brand-cell" key={b.name} style={!b.logo ? {} : {}}>
              <span className="badge num">{String(i + 1).padStart(2, "0")}</span>
              {b.logo
                ? <img src={b.logo} alt={b.name} />
                : <span className={!b.logo ? "" : ""} style={{ fontFamily: "Inter Tight", fontSize: 17, fontWeight: 500, color: "var(--slate)", letterSpacing: "-0.01em" }}>{b.name}</span>
              }
            </div>
          ))}
        </div>
        <div className="brands-more">
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span className="pill"><span className="dot coral"></span>Third-party — logo rights pending</span>
            <span style={{ fontSize: 13, color: "var(--slate)" }}>
              + Torasen, Weisner, Colan and more on request
            </span>
          </div>
          <a href="#contact" className="btn btn-ghost" style={{ padding: "10px 18px", fontSize: 14 }}>
            Full brand roster (PDF) <span className="arr"><ArrowRight /></span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── Projects ───────────────────────────────────────────────────────────
function Projects({ copy, showPermissionBadges }) {
  const [filter, setFilter] = useState("All");
  const sectors = ["All", "Workspace", "Education", "Hospitality"];
  const filtered = useMemo(
    () => MART_PROJECTS.filter(p => filter === "All" || p.sector === filter),
    [filter]
  );
  return (
    <section id="projects" style={{ background: "var(--paper)" }} data-screen-label="04 Projects">
      <div className="container">
        <SectHead
          eyebrow={copy.proj.eyebrow}
          title={copy.proj.h2}
          lead={copy.proj.lead}
        />
        <div className="proj-filters">
          {sectors.map(s => (
            <button
              key={s}
              className={s === filter ? "active" : ""}
              onClick={() => setFilter(s)}>
              {s}
              <span style={{ marginLeft: 8, opacity: 0.6, fontFamily: "JetBrains Mono", fontSize: 11 }}>
                {s === "All"
                  ? String(MART_PROJECTS.length).padStart(2, "0")
                  : String(MART_PROJECTS.filter(p => p.sector === s).length).padStart(2, "0")}
              </span>
            </button>
          ))}
          <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10, fontSize: 12, color: "var(--muted)" }}>
            <span className="num">{String(filtered.length).padStart(2, "0")}</span>
            <span>showing</span>
          </div>
        </div>

        <div className="proj-grid">
          {filtered.map((p, i) => (
            <a
              key={p.id}
              href={`#project-${p.id}`}
              className={`proj-card span-${p.span || 4}`}>
              <div className={`proj-img ar-${p.ar || "4-3"}`}>
                {showPermissionBadges
                  ? <div className="permission-badge pending">
                      <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#fff" }}></span>
                      Permission pending
                    </div>
                  : null}
                <img src={p.img} alt={p.name + " — Mart® install"} loading="lazy" />
                <div className="proj-overlay">
                  <div className="stats">
                    <span>
                      <span style={{ opacity: 0.7 }}>SQ FT</span>
                      <b>{p.sqft}</b>
                    </span>
                    <span>
                      <span style={{ opacity: 0.7 }}>SCOPE</span>
                      <b>{p.scope}</b>
                    </span>
                  </div>
                </div>
              </div>
              <div className="proj-meta">
                <span className="name">{p.name}</span>
                <span className="sector">{p.sector}</span>
              </div>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 56, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <div style={{ fontSize: 14, color: "var(--slate)", maxWidth: "52ch" }}>
            10 of 32 installs shown. Named-client case studies — including adidas, WSP and McDonald's Hamburger University — are published on a permission-by-permission basis.
          </div>
          <a href="#contact" className="btn btn-primary" style={{ padding: "12px 20px" }}>
            See the full project book <span className="arr"><ArrowRight /></span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── Credibility ─────────────────────────────────────────────────────────
function Cred({ copy }) {
  return (
    <section className="cred" id="about" data-screen-label="05 Group credibility">
      <div className="container">
        <div className="cred-grid">
          <div>
            <div className="eyebrow" style={{ color: "rgba(251,250,246,.55)", marginBottom: 20 }}>
              {copy.cred.eyebrow}
            </div>
            <h2 style={{ marginBottom: 24 }}>{copy.cred.h2}</h2>
            <p className="lead">{copy.cred.lead}</p>
            <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="https://kpsworld.com" target="_blank" rel="noopener" className="btn btn-light" style={{ padding: "12px 20px" }}>
                Visit KPS World <span className="arr"><ArrowUpRight /></span>
              </a>
              <a href="#about-mart" className="btn" style={{ padding: "12px 20px", color: "rgba(251,250,246,.8)", border: "1px solid rgba(255,255,255,.18)" }}>
                About Mart®
              </a>
            </div>
          </div>
          <div className="cred-stats">
            {MART_CRED.map((c, i) => (
              <div className="cred-stat" key={i}>
                <div className="ix">{String(i + 1).padStart(2, "0")} / {String(MART_CRED.length).padStart(2, "0")}</div>
                <div className="v">{c.v}</div>
                <div className="l">{c.l}</div>
                <div className="src">{c.src}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Showroom ───────────────────────────────────────────────────────────
function Showroom({ copy }) {
  return (
    <section id="showroom" data-screen-label="06 Showroom">
      <div className="container">
        <SectHead eyebrow={copy.showroom.eyebrow} title={copy.showroom.h2} lead={copy.showroom.lead} />

        <div className="showroom">
          <div className="showroom-img">
            <img src="media/showroom-01.webp" alt="Mart showroom interior — finishes & textures" />
          </div>
          <div>
            <h3 style={{ marginBottom: 20 }}>By appointment — bring your project.</h3>
            <p style={{ color: "var(--slate)", marginBottom: 24 }}>
              The Mart® showroom holds working samples from every brand on our roster — desking systems, task seating,
              acoustic pods, soft seating, lounge, finishes and textile libraries. Book a one-hour slot and we'll
              walk you through the long-list against your brief.
            </p>

            <div className="showroom-flag">
              <strong>⚠ Address pending client confirmation.</strong> Current Mart® contact pages
              list <em>Level Five, Building A3, Dubai CommerCity</em>; KP Confidencia / KPS World still reference a
              <em> d3 showroom</em>. We'll publish the final visitor pin once the client confirms — both addresses
              remain reachable in the interim.
            </div>

            <div className="visit-card">
              <div className="visit-row">
                <span className="k">CURRENT MART®</span>
                <span className="v">Level Five, Building A3<br />Dubai CommerCity</span>
              </div>
              <div className="visit-row">
                <span className="k">GROUP</span>
                <span className="v">d3 — Dubai Design District<br /><span style={{ color: "var(--muted)", fontWeight: 400, fontSize: 13 }}>via KP Confidencia / KPS World</span></span>
              </div>
              <div className="visit-row">
                <span className="k">PHONE</span>
                <span className="v">+971 4 423 8100<br /><span style={{ color: "var(--muted)", fontWeight: 400, fontSize: 13 }}>Toll-free 800 KPS (577)</span></span>
              </div>
              <div className="visit-row">
                <span className="k">EMAIL</span>
                <span className="v"><a href="mailto:hello@kpsmart.com">hello@kpsmart.com</a></span>
              </div>
              <div className="visit-row">
                <span className="k">HOURS</span>
                <span className="v" style={{ color: "var(--muted)", fontWeight: 400 }}>Sun–Thu by appointment <br /><span style={{ fontSize: 12 }}>(client to confirm published hours)</span></span>
              </div>
            </div>

            <a href="#contact" className="btn btn-primary" style={{ marginTop: 24 }}>
              Book a showroom visit <span className="arr"><ArrowRight /></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Quote form ─────────────────────────────────────────────────────────
function QuoteCTA({ copy }) {
  const [enquiry, setEnquiry] = useState("quote");
  const [submitted, setSubmitted] = useState(false);
  const [fields, setFields] = useState({
    name: "", company: "", email: "", phone: "", sector: "Workspace", sqft: "", brief: ""
  });
  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 5000);
  };
  const enquiries = [
    { id: "quote", label: "Request a quote" },
    { id: "consult", label: "Project consultation" },
    { id: "trade", label: "Trade enquiry" },
    { id: "join", label: "Join Mart® (designer)" },
  ];
  return (
    <section className="cta" id="contact" data-screen-label="07 Quote / contact">
      <div className="container">
        <SectHead eyebrow={copy.cta.eyebrow} title={copy.cta.h2} lead={copy.cta.lead} />

        <div className="cta-grid">
          <div className="quote-aside">
            <h3>Talk to a project manager.</h3>
            <p className="lead" style={{ marginTop: 16, marginBottom: 32 }}>
              Every enquiry routes to a named PM within one working day. We don't pass briefs around — the person
              who answers the first email runs the install.
            </p>

            <div className="contact-line">
              <span className="k">Phone</span>
              <span className="v">
                <a href="tel:+97144238100">+971 4 423 8100</a><br />
                <span style={{ fontSize: 13, color: "var(--muted)" }}>Toll-free 800 KPS (577)</span>
              </span>
            </div>
            <div className="contact-line">
              <span className="k">Email</span>
              <span className="v"><a href="mailto:hello@kpsmart.com">hello@kpsmart.com</a></span>
            </div>
            <div className="contact-line">
              <span className="k">Socials</span>
              <span className="v" style={{ display: "flex", gap: 14, fontSize: 14 }}>
                <a href="https://instagram.com/mart.platform" target="_blank" rel="noopener">Instagram <ArrowUpRight s={10} /></a>
                <a href="https://linkedin.com/company/martplatform" target="_blank" rel="noopener">LinkedIn <ArrowUpRight s={10} /></a>
                <a href="https://pinterest.com/martplatform" target="_blank" rel="noopener">Pinterest <ArrowUpRight s={10} /></a>
              </span>
            </div>
            <div className="contact-line">
              <span className="k">Group</span>
              <span className="v" style={{ fontSize: 14 }}>
                Mart® is owned by KP Confidencia.<br />
                <span style={{ color: "var(--muted)" }}>KPS World — sister fit-out & construction brand.</span>
              </span>
            </div>

            <div style={{ marginTop: 32, padding: "16px 18px", background: "var(--surface)", border: "1px dashed var(--line)", fontSize: 13, color: "var(--slate)" }}>
              <strong style={{ color: "var(--ink)" }}>Response SLA.</strong> One working day to a named PM.
              No call centres, no chatbots. Quotes typically returned within 5–10 working days
              depending on brand lead-times.
            </div>
          </div>

          <form className="quote-form" onSubmit={onSubmit}>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Enquiry type</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8 }}>
              {enquiries.map(e => (
                <button
                  type="button"
                  key={e.id}
                  onClick={() => setEnquiry(e.id)}
                  className="btn"
                  style={{
                    padding: "10px 14px",
                    fontSize: 13,
                    background: enquiry === e.id ? "var(--ink)" : "transparent",
                    color: enquiry === e.id ? "#fff" : "var(--ink)",
                    border: "1px solid " + (enquiry === e.id ? "var(--ink)" : "var(--line)"),
                    justifyContent: "flex-start",
                    borderRadius: 0,
                  }}>
                  <span style={{
                    display: "inline-block", width: 14, height: 14, marginRight: 8, position: "relative",
                    border: "1px solid " + (enquiry === e.id ? "#fff" : "var(--line)")
                  }}>
                    {enquiry === e.id
                      ? <span style={{ position: "absolute", inset: 2, background: "#fff" }}></span>
                      : null}
                  </span>
                  {e.label}
                </button>
              ))}
            </div>

            <div className="row">
              <div className="field">
                <label>Your name</label>
                <input value={fields.name} onChange={e => setFields({ ...fields, name: e.target.value })} placeholder="Full name" />
              </div>
              <div className="field">
                <label>Company / Studio</label>
                <input value={fields.company} onChange={e => setFields({ ...fields, company: e.target.value })} placeholder="Practice name" />
              </div>
            </div>
            <div className="row">
              <div className="field">
                <label>Email</label>
                <input type="email" value={fields.email} onChange={e => setFields({ ...fields, email: e.target.value })} placeholder="you@studio.com" />
              </div>
              <div className="field">
                <label>Phone (optional)</label>
                <input value={fields.phone} onChange={e => setFields({ ...fields, phone: e.target.value })} placeholder="+971 …" />
              </div>
            </div>
            <div className="row">
              <div className="field">
                <label>Sector</label>
                <select value={fields.sector} onChange={e => setFields({ ...fields, sector: e.target.value })}>
                  <option>Workspace</option>
                  <option>Education</option>
                  <option>Hospitality</option>
                  <option>Healthcare</option>
                  <option>Retail</option>
                  <option>Other / multi-sector</option>
                </select>
              </div>
              <div className="field">
                <label>Approx. sq ft</label>
                <input value={fields.sqft} onChange={e => setFields({ ...fields, sqft: e.target.value })} placeholder="e.g. 12,000" />
              </div>
            </div>
            <div className="field">
              <label>Project brief</label>
              <textarea
                value={fields.brief}
                onChange={e => setFields({ ...fields, brief: e.target.value })}
                placeholder="Programme, brands of interest, lead-time, anything else we should know…"></textarea>
            </div>
            <div className="check-row">
              <input id="consent" type="checkbox" defaultChecked />
              <label htmlFor="consent">I agree to be contacted by a Mart® project manager about this enquiry.</label>
            </div>
            <div style={{ display: "flex", gap: 12, alignItems: "center", justifyContent: "space-between", marginTop: 8, flexWrap: "wrap" }}>
              <span className="eyebrow" style={{ fontSize: 10 }}>
                {submitted ? <span style={{ color: "var(--primary)" }}>✓ Sent — a PM will reply within 1 working day</span> : "→ Routes to a named project manager"}
              </span>
              <button type="submit" className="btn btn-primary" style={{ padding: "14px 24px" }}>
                {submitted ? "Sent" : "Send enquiry"} <span className="arr"><ArrowRight /></span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ──────────────────────────────────────────────────────────────
function Footer({ copy }) {
  return (
    <footer data-screen-label="08 Footer">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-col">
            <div className="foot-logo">Mart<sup style={{ fontSize: 13, marginLeft: 2 }}>®</sup></div>
            <p className="foot-tag">
              The B2B contract-furniture platform & showroom for architects, designers and fit-out
              companies. Owned by KP Confidencia. Backed by 30 years of KPS World fit-out pedigree.
            </p>
          </div>
          <div className="foot-col">
            <h5>Explore</h5>
            <ul>
              <li><a href="#brands">Brands</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#projects">Projects</a></li>
              <li><a href="#showroom">Showroom</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Services</h5>
            <ul>
              <li><a href="#services">Consult</a></li>
              <li><a href="#services">Create</a></li>
              <li><a href="#services">Deliver</a></li>
              <li><a href="#services">Maintain</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Designers</h5>
            <ul>
              <li><a href="#contact">Join Mart®</a></li>
              <li><a href="#contact">Quote a project</a></li>
              <li><a href="#contact">Book a showroom slot</a></li>
              <li><a href="#contact">Request brand catalogues</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Contact</h5>
            <ul>
              <li><a href="tel:+97144238100">+971 4 423 8100</a></li>
              <li><a href="mailto:hello@kpsmart.com">hello@kpsmart.com</a></li>
              <li><a href="#showroom">Dubai CommerCity, A3 · L5</a></li>
              <li><a href="https://kpsworld.com" target="_blank" rel="noopener">kpsworld.com (group)</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© {new Date().getFullYear()} Mart® — a KP Confidencia company. All third-party brand marks belong to their respective owners.</div>
          <div className="socials">
            <a href="https://instagram.com/mart.platform" target="_blank" rel="noopener">IG @mart.platform</a>
            <a href="https://linkedin.com/company/martplatform" target="_blank" rel="noopener">LinkedIn</a>
            <a href="https://pinterest.com/martplatform" target="_blank" rel="noopener">Pinterest</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── Tweaks Panel ────────────────────────────────────────────────────────
function MartTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#1E4B43", "#1B3A5C", "#A8431E", "#3A4047", "#5A6B36"]}
        onChange={v => setTweak("accent", v)} />
      <TweakToggle
        label="Italic green headline"
        value={t.useGreenHeadline}
        onChange={v => setTweak("useGreenHeadline", v)} />
      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={["regular", "compact"]}
        onChange={v => setTweak("density", v)} />
      <TweakRadio
        label="Hero image"
        value={String(t.heroIdx)}
        options={["0", "1", "2"]}
        onChange={v => setTweak("heroIdx", parseInt(v, 10))} />
      <TweakSection label="Content" />
      <TweakRadio
        label="Locale"
        value={t.locale}
        options={["en", "ar"]}
        onChange={v => setTweak("locale", v)} />
      <TweakToggle
        label="Permission-pending badges"
        value={t.showPermissionBadges}
        onChange={v => setTweak("showPermissionBadges", v)} />
    </TweaksPanel>
  );
}

// ─── App ────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(window.MART_TWEAK_DEFAULTS);

  // Apply tweaks to <body> / :root
  useEffect(() => {
    document.documentElement.style.setProperty("--primary", t.accent);
    document.documentElement.style.setProperty("--focus", t.accent);
    document.body.classList.toggle("density-compact", t.density === "compact");
    document.documentElement.lang = t.locale;
    document.documentElement.dir = t.locale === "ar" ? "rtl" : "ltr";
  }, [t.accent, t.density, t.locale]);

  const copy = MART_COPY[t.locale] || MART_COPY.en;

  return (
    <div>
      <Nav copy={copy} locale={t.locale} setLocale={v => setTweak("locale", v)} t={t} />
      <Hero
        copy={copy}
        heroIdx={t.heroIdx}
        setHeroIdx={v => setTweak("heroIdx", v)}
        useGreenHeadline={t.useGreenHeadline}
      />
      <ServicesJourney copy={copy} />
      <Brands copy={copy} />
      <Projects copy={copy} showPermissionBadges={t.showPermissionBadges} />
      <Cred copy={copy} />
      <Showroom copy={copy} />
      <QuoteCTA copy={copy} />
      <Footer copy={copy} />
      <MartTweaks t={t} setTweak={setTweak} />
    </div>
  );
}

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