/* global React */
const { useState, useEffect, useMemo, useRef } = React;

// ─── Icon set ─────────────────────────────────────────────
const Icon = ({ name, className = "i" }) => {
  const paths = {
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    map: <><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z"/><path d="M9 4v14M15 6v14"/></>,
    home: <><path d="m3 11 9-7 9 7v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2v-9Z"/></>,
    bed: <><path d="M3 18V8h12a4 4 0 0 1 4 4v6"/><path d="M3 14h18M3 18v2M21 18v2"/><circle cx="7.5" cy="11.5" r="1.5"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    users: <><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M16 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-6-6.9"/></>,
    briefcase: <><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18"/></>,
    heart: <><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78Z"/></>,
    bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>,
    msg: <><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4l-5 1 1-5A8.5 8.5 0 1 1 21 11.5Z"/></>,
    grid: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    arrowRight: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    arrowLeft: <><path d="M19 12H5M11 18l-6-6 6-6"/></>,
    chevDown: <><path d="m6 9 6 6 6-6"/></>,
    chevRight: <><path d="m9 6 6 6-6 6"/></>,
    check: <><path d="m5 12 5 5L20 7"/></>,
    star: <><path d="m12 3 2.7 6 6.3.6-4.8 4.3 1.4 6.1L12 17l-5.6 3 1.4-6.1L3 9.6l6.3-.6L12 3Z"/></>,
    shield: <><path d="M12 3 4 6v6a9 9 0 0 0 8 9 9 9 0 0 0 8-9V6l-8-3Z"/><path d="m9 12 2 2 4-4"/></>,
    accessibility: <><circle cx="12" cy="4" r="1.5"/><path d="M5 8h14M9 8v6l-3 7M15 8v6l3 7M9 14h6"/></>,
    pet: <><path d="M5 12c1.5 0 2.5-1.5 2.5-3S6.5 6 5 6 2.5 7.5 2.5 9 3.5 12 5 12Z"/><path d="M19 12c1.5 0 2.5-1.5 2.5-3S20.5 6 19 6s-2.5 1.5-2.5 3 1 3 2.5 3Z"/><path d="M12 21c-3 0-5-2-5-4 0-3 5-7 5-7s5 4 5 7c0 2-2 4-5 4Z"/></>,
    leaf: <><path d="M11 20A7 7 0 0 1 4 13c0-7 8-9 16-9 0 8-2 16-9 16Z"/><path d="M2 22 16 8"/></>,
    key: <><circle cx="8" cy="15" r="4"/><path d="m11 12 9-9M16 7l3 3M14 9l3 3"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 11h18"/></>,
    cash: <><rect x="3" y="6" width="18" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M7 12h.01M17 12h.01"/></>,
    inbox: <><path d="M22 13h-6l-2 3h-4l-2-3H2"/><path d="M5 5h14l3 8v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6l3-8Z"/></>,
    chart: <><path d="M3 3v18h18"/><path d="M7 14l3-4 4 3 6-7"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4"/></>,
    moon: <><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>,
    filter: <><path d="M3 5h18l-7 9v6l-4-2v-4L3 5Z"/></>,
    pin: <><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12Z"/><circle cx="12" cy="10" r="2.5"/></>,
    door: <><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18M3 22h18"/><circle cx="14" cy="13" r=".7" fill="currentColor"/></>,
    eye: <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></>,
    eyeOff: <><path d="m3 3 18 18M10.6 6.1a10.5 10.5 0 0 1 1.4-.1c6 0 10 7 10 7a17 17 0 0 1-3.4 4.1M6.6 6.6C3.6 8.5 2 12 2 12s4 7 10 7c1.6 0 3-.4 4.4-1"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></>,
    upload: <><path d="M12 16V4M6 10l6-6 6 6"/><path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></>,
    logo: <><path d="M4 11 12 4l8 7v9a1 1 0 0 1-1 1h-4v-7H9v7H5a1 1 0 0 1-1-1v-9Z"/></>,
    cube: <><path d="m12 3 9 5v8l-9 5-9-5V8l9-5Z"/><path d="m12 12 9-4M12 12v9M12 12 3 8"/></>,
    sparkle: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6 7.7 7.7M16.3 16.3l2.1 2.1M5.6 18.4 7.7 16.3M16.3 7.7l2.1-2.1"/></>,
    paperclip: <><path d="m21 12-8.5 8.5a5 5 0 0 1-7-7L14 5a3.5 3.5 0 1 1 5 5L10.4 18.6a2 2 0 1 1-2.8-2.8L15 8.5"/></>,
    send: <><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z"/></>,
    flag: <><path d="M4 22V4M4 4h12l-2 4 2 4H4"/></>,
    clipboard: <><rect x="6" y="4" width="12" height="18" rx="2"/><path d="M9 4V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1"/><path d="M9 12h6M9 16h4"/></>,
    ext: <><path d="M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5"/></>,
    location: <><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></>,
    sober: <><path d="M8 3h8l-1 5a4 4 0 0 1-6 0L8 3Z"/><path d="M12 12v9M8 21h8"/><path d="m6 6 12 12" stroke="oklch(0.68 0.18 25)"/></>,
  };
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true">
      {paths[name] || null}
    </svg>
  );
};

// ─── Logo ─────────────────────────────────────────────
const Logo = ({ size = 28 }) => (
  <span className="logo">
    <span className="logo-mark" style={{ width: size, height: size }}>
      <svg viewBox="0 0 28 28" fill="none">
        <rect x="1" y="1" width="26" height="26" rx="7" stroke="var(--accent)" strokeWidth="1.5"/>
        <path d="M8 18V11l6-5 6 5v7" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
        <rect x="12" y="14" width="4" height="4" fill="var(--accent)"/>
      </svg>
    </span>
    Roomly
  </span>
);

// ─── Top nav ─────────────────────────────────────────
const TopNav = ({ onNav, current, theme, setTheme, role = "guest" }) => {
  return (
    <header className="top-nav">
      <div className="container">
        <div className="row gap-8">
          <a onClick={() => onNav("home")} style={{ cursor: "pointer" }}><Logo /></a>
          <nav className="row gap-2" style={{ marginLeft: 8 }}>
            <button className={`btn btn-sm btn-ghost ${current === "search" ? "btn-secondary" : ""}`} onClick={() => onNav("search")}>Find a room</button>
            <button className={`btn btn-sm btn-ghost ${current === "lister-dash" ? "btn-secondary" : ""}`} onClick={() => onNav("lister-dash")}>List a room</button>
            <button className="btn btn-sm btn-ghost" onClick={() => onNav("home")}>How it works</button>
          </nav>
        </div>
        <div className="row gap-3">
          <button className="btn btn-icon btn-ghost" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} title="Theme">
            <Icon name={theme === "dark" ? "sun" : "moon"} />
          </button>
          <button className="btn btn-sm btn-ghost" onClick={() => onNav("login-seeker")}>Sign in</button>
          <button className="btn btn-sm btn-primary" onClick={() => onNav("signup-pick")}>Get started</button>
        </div>
      </div>
    </header>
  );
};

// ─── Footer ─────────────────────────────────────────
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="col gap-4">
          <Logo />
          <p className="t-sm muted" style={{ maxWidth: 320 }}>
            A trusted marketplace connecting case workers, individuals, and verified hosts with safe, affordable rooms.
          </p>
          <div className="row gap-2">
            <span className="badge">SOC 2 · Type II</span>
            <span className="badge">HUD-VASH</span>
          </div>
        </div>
        <div className="footer-col">
          <h4>Platform</h4>
          <ul>
            <li><a>Find a room</a></li>
            <li><a>List a room</a></li>
            <li><a>For agencies</a></li>
            <li><a>Voucher network</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Trust</h4>
          <ul>
            <li><a>Verification</a></li>
            <li><a>Safety standards</a></li>
            <li><a>Tenant rights</a></li>
            <li><a>Report a concern</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <ul>
            <li><a>About</a></li>
            <li><a>Partners</a></li>
            <li><a>Contact</a></li>
            <li><a>Press</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-legal">
        <span>© 2026 Roomly Housing Network, PBC</span>
        <span>Privacy · Terms · Accessibility</span>
      </div>
    </div>
  </footer>
);

// Real photo URLs (Unsplash)
const ROOM_IMG = [
  "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1540518614846-7eded433c457?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1598928506311-c55ded91a20c?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1567767292278-a4f21aa2d36e?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1595526114035-0d45ed16cfbf?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=900&q=70&auto=format&fit=crop",
];
const CITY_IMG = {
  "Oakland": "https://images.unsplash.com/photo-1605640840605-14ac1855827b?w=600&q=70&auto=format&fit=crop",
  "Phoenix": "https://images.unsplash.com/photo-1558389186-438424b00a3f?w=600&q=70&auto=format&fit=crop",
  "Houston": "https://images.unsplash.com/photo-1571867424488-4565932edb41?w=600&q=70&auto=format&fit=crop",
  "Atlanta": "https://images.unsplash.com/photo-1575917649705-5b59aaa12e6b?w=600&q=70&auto=format&fit=crop",
  "Detroit": "https://images.unsplash.com/photo-1564594985645-4427056e22e2?w=600&q=70&auto=format&fit=crop",
  "Portland": "https://images.unsplash.com/photo-1587613864521-9ef8dfe617cc?w=600&q=70&auto=format&fit=crop",
  "Cleveland": "https://images.unsplash.com/photo-1610483178519-1ec7ba78d9b7?w=600&q=70&auto=format&fit=crop",
  "Tampa": "https://images.unsplash.com/photo-1605723517503-3a51f04f0fcb?w=600&q=70&auto=format&fit=crop",
  "Denver": "https://images.unsplash.com/photo-1602800458591-eddda28a498b?w=600&q=70&auto=format&fit=crop",
  "Memphis": "https://images.unsplash.com/photo-1606154996379-cf6e96eaae9c?w=600&q=70&auto=format&fit=crop",
  "Albuquerque": "https://images.unsplash.com/photo-1583318432730-a19c89692612?w=600&q=70&auto=format&fit=crop",
  "Baltimore": "https://images.unsplash.com/photo-1587161937999-b81fbf48a89c?w=600&q=70&auto=format&fit=crop",
};
const PATH_IMG = {
  case: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=900&q=70&auto=format&fit=crop",
  ind: "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=900&q=70&auto=format&fit=crop",
  host: "https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=900&q=70&auto=format&fit=crop",
};
const ROOM_DETAIL_IMGS = [
  "https://images.unsplash.com/photo-1540518614846-7eded433c457?w=1400&q=75&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1556909172-54557c7e4fb7?w=900&q=70&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1592595896616-c37162298647?w=900&q=70&auto=format&fit=crop",
];
window.ROOM_IMG = ROOM_IMG;
window.CITY_IMG = CITY_IMG;
window.PATH_IMG = PATH_IMG;
window.ROOM_DETAIL_IMGS = ROOM_DETAIL_IMGS;

const Photo = ({ src, tone, label, style, className = "" }) => (
  <div
    className={`photo ${src ? "has-img" : ""} ${tone ? `tone-${tone}` : ""} ${className}`}
    style={{ ...(src ? { backgroundImage: `url(${src})` } : {}), ...style }}
  >
    {!src && label && <span className="photo-label">{label}</span>}
  </div>
);
window.Photo = Photo;