/* ============================================================
   SHARED COMPONENTS — Nav, Footer, WhatsAppFab, LeadModal, Logo
   ============================================================ */

const WA_URL = "https://wa.me/971800776655?text=Hi%20Driven%20Properties%2C%20I%27d%20like%20to%20speak%20with%20a%20broker";
const TEL    = "tel:+97142454800";

/* ----- Logo (redrawn from supplied svg — placeholder quality) ----- */
function Logo({ light, withForbes }) {
  const stroke = light ? "#FBF9F4" : "#0E1216";
  return (
    <a className="nav__logo" onClick={() => window.__nav("home")}>
      <svg viewBox="0 0 220 36" width="120" height="22" aria-label="Driven Properties">
        {/* mark — frame with vertical bars */}
        <g fill={stroke}>
          <path d="M0 2 H32 V34 H28 V6 H4 V34 H0 Z" />
          <path d="M0 30 H32 V34 H0 Z" />
          <rect x="6"  y="16" width="3" height="14"/>
          <rect x="11" y="11" width="3" height="19"/>
          <rect x="16" y="19" width="3" height="11"/>
          <rect x="21" y="13" width="3" height="17"/>
        </g>
        {/* wordmark */}
        <text x="42" y="24" fontFamily="Manrope, Helvetica, sans-serif"
              fontWeight="700" fontSize="17" letterSpacing="4" fill={stroke}>
          DRIVEN
        </text>
      </svg>
      {withForbes ? (
        <span className="lockup">
          Exclusive UAE member<br/><em>Forbes Global Properties</em>
        </span>
      ) : null}
    </a>
  );
}

/* ----- Nav ----- */
function Nav({ page, t, lang, setLang, onPage, dark, openLead }) {
  return (
    <header className={"nav " + (dark ? "nav--ink" : "")}>
      <div className="wrap">
        <div className="nav__row">
          <Logo light={dark} withForbes={true} />
          <nav className="nav__links">
            <a className={page==="buy"     ? "active" : ""} onClick={() => onPage("buy")}>{t.nav.buy}</a>
            <a className={page==="rent"    ? "active" : ""} onClick={() => onPage("rent")}>{t.nav.rent}</a>
            <a className={page==="area"    ? "active" : ""} onClick={() => onPage("area")}>{t.nav.areas}</a>
            <a className={page==="agent"   ? "active" : ""} onClick={() => onPage("agent")}>{t.nav.agents}</a>
            <a onClick={() => onPage("home")}>{t.nav.services}</a>
            <a className={page==="contact" ? "active" : ""} onClick={() => onPage("contact")}>{t.nav.contact}</a>
          </nav>
          <div className="nav__right">
            <div className="lang-tog" role="tablist" aria-label="Language">
              <button className={lang==="en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
              <button className={lang==="ar" ? "active" : ""} onClick={() => setLang("ar")}>عربي</button>
              <button onClick={() => setLang("en")} title="Coming soon">RU</button>
              <button onClick={() => setLang("en")} title="Coming soon">中文</button>
            </div>
            <button className="btn btn--sm" onClick={() => openLead("viewing")}>
              {t.nav.bookView}
              <Icon.arrowSm />
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ----- Footer ----- */
function Footer({ t, onPage }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div>
            <Logo light={true} />
            <p className="footer__brand">{t.footer.tag}</p>
            <p style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".14em", color: "var(--accent-l)", textTransform: "uppercase", margin: 0 }}>
              Exclusive UAE member<br/>Forbes Global Properties
            </p>
          </div>
          <div className="footer__col">
            <h5>{t.footer.explore}</h5>
            <a onClick={() => onPage("buy")}>{t.nav.buy}</a>
            <a onClick={() => onPage("rent")}>{t.nav.rent}</a>
            <a onClick={() => onPage("area")}>{t.nav.areas}</a>
            <a onClick={() => onPage("agent")}>{t.nav.agents}</a>
            <a onClick={() => onPage("home")}>{t.nav.services}</a>
          </div>
          <div className="footer__col">
            <h5>{t.footer.company}</h5>
            <a onClick={() => onPage("home")}>About</a>
            <a onClick={() => onPage("home")}>Careers</a>
            <a onClick={() => onPage("home")}>Press</a>
            <a onClick={() => onPage("home")}>Insights</a>
          </div>
          <div className="footer__col">
            <h5>{t.footer.legal}</h5>
            <a>Privacy</a>
            <a>Terms</a>
            <a>Cookies</a>
            <a>RERA disclosure</a>
          </div>
          <div className="footer__col footer__contact">
            <h5>{t.footer.contact}</h5>
            <div><strong>Main</strong> +971 4 245 4800</div>
            <div><strong>Toll-free</strong> 800 374836</div>
            <div><strong>WhatsApp</strong> wa.me/971800776655</div>
            <div><strong>Email</strong> info@drivenproperties.com</div>
          </div>
        </div>
        <div className="footer__bot">
          <span>{t.footer.copy} · {t.footer.rera}</span>
          <div className="footer__socials">
            <a aria-label="Instagram"><Icon.insta/></a>
            <a aria-label="LinkedIn"><Icon.linkedin/></a>
            <a aria-label="Facebook"><Icon.fb/></a>
            <a aria-label="YouTube"><Icon.yt/></a>
            <a aria-label="X"><Icon.x/></a>
          </div>
        </div>
        <p style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "rgba(255,255,255,.4)", letterSpacing: ".04em", marginTop: 16, maxWidth: "70ch", lineHeight: 1.6 }}>
          {t.footer.disc}
        </p>
      </div>
    </footer>
  );
}

/* ----- WhatsApp FAB ----- */
function WhatsAppFab() {
  return (
    <a className="wa-fab" href={WA_URL} target="_blank" rel="noreferrer">
      <Icon.whatsapp/>
      <span>WhatsApp a broker</span>
    </a>
  );
}

/* ============================================================
   LEAD MODAL — viewing / valuation / list / talk / brochure
   ============================================================ */
function LeadModal({ open, kind, ctx, t, onClose }) {
  const [active, setActive] = React.useState(kind || "viewing");
  const [sent, setSent] = React.useState(false);

  React.useEffect(() => {
    if (open) { setActive(kind || "viewing"); setSent(false); }
  }, [open, kind]);

  React.useEffect(() => {
    function key(e) { if (e.key === "Escape") onClose(); }
    document.addEventListener("keydown", key);
    return () => document.removeEventListener("keydown", key);
  }, [onClose]);

  function submit(e) { e.preventDefault(); setTimeout(() => setSent(true), 250); }

  const m = t.leadModal;
  const title = m.titles[active] || m.titles.viewing;
  const isList = active === "listProp" || active === "valuation";

  return (
    <div className={"modal-bd " + (open ? "open" : "")} onClick={(e) => e.target.classList.contains("modal-bd") && onClose()}>
      <div className="modal" role="dialog" aria-modal="true">
        <button className="modal__close" onClick={onClose} aria-label="Close"><Icon.close/></button>

        <div className="modal__art">
          <img src="media/hero-dubai-skyline.webp" alt="" />
          <div className="scrim"></div>
          <div className="eyebrow on-ink">DRIVEN · {t.nav.contact}</div>
          <h3>{title}</h3>
          <p>{m.strap}</p>
          {ctx ? (
            <p style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".06em", color: "var(--accent-l)", textTransform: "uppercase", marginTop: -8 }}>
              Re: {ctx}
            </p>
          ) : null}
          <div className="trust">
            {m.trust.map((s, i) => <span key={i}>{s}</span>)}
          </div>
        </div>

        <div className="modal__form">
          {sent ? (
            <div className="success">
              <div className="check"><Icon.check/></div>
              <h4>{m.successH}</h4>
              <p>{m.successP}</p>
              <a className="wa-chip" href={WA_URL} target="_blank" rel="noreferrer" style={{ marginTop: 8 }}>
                <span className="wa-dot"></span>{m.f.wa}
              </a>
            </div>
          ) : (
            <React.Fragment>
              <div className="tabs">
                {m.tabs.map((tab) => (
                  <button key={tab.id} className={active===tab.id?"active":""} onClick={() => setActive(tab.id)}>
                    {tab.label}
                  </button>
                ))}
              </div>

              <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div className="field">
                  <label>{m.f.name}</label>
                  <input type="text" required placeholder="" />
                </div>
                <div className="field-row">
                  <div className="field">
                    <label>{m.f.phone}</label>
                    <input type="tel" required placeholder="+971 ..." />
                  </div>
                  <div className="field">
                    <label>{m.f.email}</label>
                    <input type="email" required placeholder="" />
                  </div>
                </div>
                {active === "viewing" ? (
                  <div className="field">
                    <label>{m.f.when}</label>
                    <input type="text" placeholder="e.g. Saturday afternoon" />
                  </div>
                ) : null}
                {isList ? (
                  <div className="field-row">
                    <div className="field">
                      <label>{m.f.area}</label>
                      <select defaultValue="">
                        <option value="" disabled>—</option>
                        {AREAS.map(a => <option key={a.slug}>{a.name}</option>)}
                      </select>
                    </div>
                    <div className="field">
                      <label>{m.f.ptype}</label>
                      <select defaultValue="">
                        <option value="" disabled>—</option>
                        <option>Apartment</option>
                        <option>Villa</option>
                        <option>Townhouse</option>
                        <option>Penthouse</option>
                        <option>Plot / land</option>
                      </select>
                    </div>
                  </div>
                ) : null}
                <div className="field">
                  <label>{m.f.notes}</label>
                  <textarea rows="3" placeholder=""></textarea>
                </div>
                <div className="submit-row">
                  <button type="submit" className="btn btn--accent" style={{ justifyContent: "center" }}>
                    {m.f.submit}<Icon.arrowSm/>
                  </button>
                  <div className="alt-row">
                    <div className="line"></div><span>OR</span><div className="line"></div>
                  </div>
                  <a className="wa-chip" href={WA_URL} target="_blank" rel="noreferrer" style={{ justifyContent: "center" }}>
                    <span className="wa-dot"></span>{m.f.wa}
                  </a>
                </div>
              </form>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Footer, WhatsAppFab, LeadModal, Logo, WA_URL, TEL });