/* global React */
// ============================================================
// Espace — shared UI atoms
// ============================================================

// Render a headline array that may contain {em: "italic part"} fragments
function HeadlineFragments({ parts }) {
  return parts.map((p, i) => {
    if (typeof p === "string") return <React.Fragment key={i}>{p === " " ? "\u00A0" : p + " "}</React.Fragment>;
    if (p && p.em) return <em key={i} className="text-accent" style={{ fontStyle: "italic" }}>{p.em} </em>;
    return null;
  });
}

function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
    </svg>
  );
}

function ArrowDown({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M7 1v12M2 8l5 5 5-5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
    </svg>
  );
}

function WhatsAppIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.5 3.5A11 11 0 0 0 3.4 17.3L2 22l4.9-1.3a11 11 0 0 0 16.6-9.4 11 11 0 0 0-3-7.8zm-8.6 16.9a9.1 9.1 0 0 1-4.6-1.3l-.3-.2-2.9.8.8-2.8-.2-.3a9.1 9.1 0 1 1 7.2 3.7zm5.2-6.8c-.3-.1-1.7-.8-1.9-.9s-.4-.1-.6.1-.7.9-.8 1.1-.3.1-.5 0a7.5 7.5 0 0 1-3.7-3.2c-.3-.5.3-.4.8-1.4l-.1-.4-.8-2c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2c0 1.3 1 2.5 1.1 2.7s1.9 2.9 4.6 4.1c.6.3 1.2.4 1.6.5.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4s-.2-.3-.4-.4z"/>
    </svg>
  );
}

function PinIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M12 22s-7-7.5-7-13a7 7 0 1 1 14 0c0 5.5-7 13-7 13z" />
      <circle cx="12" cy="9" r="2.5" />
    </svg>
  );
}

function PhoneIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M22 16.9v3a2 2 0 0 1-2.2 2A20 20 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 12.9 12.9 0 0 0 .7 2.8 2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5 12.9 12.9 0 0 0 2.8.7 2 2 0 0 1 1.7 2z" />
    </svg>
  );
}

function VideoIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <rect x="2" y="6" width="14" height="12" rx="1.5" />
      <path d="M22 8l-6 4 6 4V8z" />
    </svg>
  );
}

function BedIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M2 18v-7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v7M2 18h20M2 18v2M22 18v2M7 9V7a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2" />
    </svg>
  );
}
function BathIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M4 12V6a2 2 0 0 1 4 0M2 12h20v3a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4v-3zM6 19v2M18 19v2" />
    </svg>
  );
}
function AreaIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M3 9V3h6M21 15v6h-6M3 15v6h6M21 9V3h-6" />
    </svg>
  );
}

// ── Navbar ────────────────────────────────────────────────────
function Navbar({ route, setRoute, locale, setLocale }) {
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a className="nav-logo-link" onClick={() => setRoute({ name: "home" })} style={{ cursor: "pointer" }}>
          <img src="media/logo-espace.svg" alt="Espace Real Estate" className="nav-logo" />
        </a>

        <nav className="nav-links" aria-label="Primary">
          <button className={route.name === "communities" || route.name === "community" ? "active" : ""} onClick={() => setRoute({ name: "communities" })}>Communities</button>
          <button className={route.name === "buy" ? "active" : ""} onClick={() => setRoute({ name: "communities" })}>Buy</button>
          <button className={route.name === "sell" ? "active" : ""} onClick={() => setRoute({ name: "sell" })}>Sell</button>
          <button onClick={() => setRoute({ name: "communities" })}>Rent</button>
          <button className={route.name === "team" || route.name === "agent" ? "active" : ""} onClick={() => setRoute({ name: "team" })}>Team</button>
          <button className={route.name === "contact" ? "active" : ""} onClick={() => setRoute({ name: "contact" })}>Contact</button>
        </nav>

        <div className="nav-right">
          <div className="locale-switch">
            {["EN","AR","RU","ZH"].map(L => (
              <button key={L} className={locale === L ? "active" : ""} onClick={() => setLocale(L)}>{L}</button>
            ))}
          </div>
          <button className="btn btn-primary btn-sm" onClick={() => setRoute({ name: "sell" })}>
            Book a viewing <Arrow />
          </button>
        </div>
      </div>
    </header>
  );
}

// ── WhatsApp FAB ──────────────────────────────────────────────
function WhatsAppFab() {
  const msg = encodeURIComponent("Hi Espace, I'd like to book a viewing for …");
  return (
    <a className="fab" href={`https://wa.me/971568296862?text=${msg}`} target="_blank" rel="noopener noreferrer" aria-label="Chat on WhatsApp">
      <WhatsAppIcon size={18} />
      <span className="label">WhatsApp us</span>
    </a>
  );
}

// ── Ticker ────────────────────────────────────────────────────
function Ticker({ items }) {
  // double the list for seamless loop
  const doubled = [...items, ...items];
  return (
    <div className="ticker" role="presentation" aria-hidden="true">
      <div className="ticker-track">
        {doubled.map((t, i) => (
          <span key={i}>{t} <span className="dot"></span></span>
        ))}
      </div>
    </div>
  );
}

// ── Section header ────────────────────────────────────────────
function SecHead({ eyebrow, headlineParts, lead, rightMeta }) {
  return (
    <div className="sec-head">
      <div>
        <div className="eyebrow eyebrow-ink">{eyebrow}</div>
        <h2 className="h-display-roman h2" style={{ margin: "16px 0 0" }}>
          <HeadlineFragments parts={headlineParts} />
        </h2>
        {lead && <p className="lead">{lead}</p>}
      </div>
      {rightMeta && <div className="right-meta">{rightMeta}</div>}
    </div>
  );
}

// ── Breadcrumbs ───────────────────────────────────────────────
function Crumbs({ items }) {
  return (
    <div className="crumbs">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">/</span>}
          {it.onClick ? <a onClick={it.onClick}>{it.label}</a> : <span>{it.label}</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

// ── Footer ────────────────────────────────────────────────────
function Footer({ setRoute }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <img src="media/logo-espace-white.svg" alt="Espace" className="footer-logo" />
            <p style={{ maxWidth: "42ch", fontSize: 14, lineHeight: 1.7, color: "rgba(255,255,255,.78)" }}>
              An award-winning Dubai brokerage, built on traditional UK estate-agency standards since 2009.
              Full-service across sales, leasing and property management.
            </p>
            <div style={{ display: "flex", gap: 16, marginTop: 24 }}>
              <a href="https://www.instagram.com/espacerealestate" target="_blank" rel="noopener" style={{ fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase" }}>Instagram</a>
              <a href="https://www.linkedin.com/company/espace-real-estate" target="_blank" rel="noopener" style={{ fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase" }}>LinkedIn</a>
              <a href="https://www.youtube.com/user/EspaceRealEstate" target="_blank" rel="noopener" style={{ fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase" }}>YouTube</a>
            </div>
          </div>
          <div>
            <h5>Communities</h5>
            <ul>
              <li><a onClick={() => setRoute({ name: "community", id: "arabian-ranches" })}>Arabian Ranches</a></li>
              <li><a onClick={() => setRoute({ name: "community", id: "emirates-hills" })}>Emirates Hills</a></li>
              <li><a onClick={() => setRoute({ name: "community", id: "palm-jumeirah" })}>Palm Jumeirah</a></li>
              <li><a onClick={() => setRoute({ name: "community", id: "dubai-marina" })}>Dubai Marina</a></li>
              <li><a onClick={() => setRoute({ name: "communities" })}>View all (22)</a></li>
            </ul>
          </div>
          <div>
            <h5>Services</h5>
            <ul>
              <li><a onClick={() => setRoute({ name: "communities" })}>Buy</a></li>
              <li><a onClick={() => setRoute({ name: "sell" })}>Sell</a></li>
              <li><a onClick={() => setRoute({ name: "communities" })}>Rent</a></li>
              <li><a onClick={() => setRoute({ name: "sell" })}>Free valuation</a></li>
              <li><a>Property management</a></li>
            </ul>
          </div>
          <div>
            <h5>Team</h5>
            <ul>
              <li><a onClick={() => setRoute({ name: "agent", id: "john-lyons" })}>John Lyons</a></li>
              <li><a onClick={() => setRoute({ name: "agent", id: "artur-ahmedov" })}>Artur Ahmedov</a></li>
              <li><a onClick={() => setRoute({ name: "agent", id: "harris-hiscoe" })}>Harris Hiscoe</a></li>
              <li><a onClick={() => setRoute({ name: "team" })}>All consultants</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="tel:+97143069999">+971 4 306 9999</a></li>
              <li><a href="https://wa.me/971568296862">WhatsApp +971 56 829 6862</a></li>
              <li><a href="mailto:info@espace.ae">info@espace.ae</a></li>
              <li style={{ color: "rgba(255,255,255,.6)", fontSize: 13 }}>Office 2702 &amp; 2703<br />Marina Plaza, Dubai Marina</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2009–{new Date().getFullYear()} Espace Real Estate · Mon–Fri 9am–6pm</div>
          <div className="legal">
            <a>Privacy</a><a>Cookies</a><a>Listings disclaimer</a>
            <span style={{ fontFamily: "var(--font-mono)", opacity: 0.6 }}>
              Prototype — ORN to display after DLD verification
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  HeadlineFragments, Arrow, ArrowDown, WhatsAppIcon, PinIcon, PhoneIcon, VideoIcon,
  BedIcon, BathIcon, AreaIcon,
  Navbar, WhatsAppFab, Ticker, SecHead, Crumbs, Footer,
});