// Shared components
const { useState, useEffect, useMemo } = React;

// -----------------------------------------------------
// WordPress admin bar (the only WP chrome shown)
// -----------------------------------------------------
function AdminBar({ visible, onHide }) {
  if (!visible) return null;
  return (
    <div className="wp-admin-bar">
      <div className="wp-item"><span style={{fontFamily:'serif', fontSize: 16}}>≡</span></div>
      <div className="wp-item"><span className="dot">W</span> Seenu George Realty</div>
      <div className="wp-item">＋ New</div>
      <div className="wp-item">✎ Edit Page</div>
      <div className="wp-item">↻ Updates <span className="wp-pill">3</span></div>
      <div className="wp-item">💬 Comments <span className="wp-pill">2</span></div>
      <div className="wp-item">📊 Yoast SEO</div>
      <div className="wp-spacer"></div>
      <div className="wp-item" onClick={onHide} title="Hide admin bar in this preview">Howdy, Seenu  ▾</div>
    </div>
  );
}

// -----------------------------------------------------
// Brand mark
// -----------------------------------------------------
function BrandMark({ onClick }) {
  return (
    <div className="brand" onClick={onClick} style={{cursor:'pointer'}}>
      <picture style={{display:'contents'}}>
        <source srcSet="images/sg-logo-light.webp" type="image/webp" />
        <img className="brand-logo" src="images/sg-logo-light.png" alt="Seenu George" width="40" height="46"
          style={{height:'40px', width:'auto', display:'block', flex:'0 0 auto'}} />
      </picture>
      <div>
        <div style={{lineHeight: 1}}>Seenu George</div>
        <div style={{fontFamily:'var(--mono)', fontSize: 9, letterSpacing: '0.18em', color: 'var(--muted)', marginTop: 4, textTransform:'uppercase'}}>
          REALTOR® · <span style={{textTransform:'none'}}>eXp</span> REALTY
        </div>
      </div>
    </div>
  );
}

// -----------------------------------------------------
// Top nav
// -----------------------------------------------------
const PAGES = [
  { key: 'home', label: 'Home' },
  { key: 'listings', label: 'Listings' },
  { key: 'neighborhoods', label: 'Communities' },
  { key: 'about', label: 'About' },
  { key: 'buyer', label: 'Buy' },
  { key: 'seller', label: 'Sell' },
  { key: 'blog', label: 'Insights' },
  { key: 'contact', label: 'Contact' },
];

function Nav({ page, setPage, adminVisible }) {
  const [open, setOpen] = React.useState(false);
  const go = (key) => { setPage(key); setOpen(false); };
  return (
    <React.Fragment>
    <nav className={"nav " + (adminVisible ? '' : 'no-admin')}>
      <div className="shell container">
        <div className="nav-row">
          <BrandMark onClick={() => go('home')} />
          <div className="nav-links">
            {PAGES.map(p => (
              <div key={p.key}
                className={"nav-link " + (page === p.key ? 'active' : '')}
                onClick={() => setPage(p.key)}>
                {p.label}
              </div>
            ))}
          </div>
          <div className="nav-cta">
            <a className="nav-phone" href={"tel:" + ((window.IDX && window.IDX.PHONE_RAW) || '+14038282359')}
              style={{whiteSpace:'nowrap', flex:'0 0 auto'}}>
              {(window.IDX && window.IDX.PHONE) || '+1 (403) 828-2359'}
            </a>
            <button className="btn btn-sm btn-ghost" onClick={() => window.openIdxRegister()}>
              Sign In
            </button>
            <button className="btn btn-sm btn-gold" onClick={() => setPage('contact')}>
              Get in Touch
            </button>
          </div>
          <button className={"nav-burger " + (open ? 'open' : '')} onClick={() => setOpen(!open)} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </nav>

    <div className={"nav-mobile " + (open ? 'open' : '')} data-admin={adminVisible ? '1' : '0'}>
      <div className="nav-mobile-links">
        {PAGES.map(p => (
          <div key={p.key}
            className={"nav-mobile-link " + (page === p.key ? 'active' : '')}
            onClick={() => go(p.key)}>
            {p.label}
          </div>
        ))}
      </div>
      <div className="nav-mobile-cta">
        <a className="nav-phone" href={"tel:" + ((window.IDX && window.IDX.PHONE_RAW) || '+14038282359')}>
          {(window.IDX && window.IDX.PHONE) || '+1 (403) 828-2359'}
        </a>
        <button className="btn btn-sm btn-ghost" onClick={() => { window.openIdxRegister(); setOpen(false); }}>Sign In</button>
        <button className="btn btn-sm btn-gold" onClick={() => go('contact')}>Get in Touch</button>
      </div>
    </div>
    </React.Fragment>
  );
}

// -----------------------------------------------------
// Image placeholder
// -----------------------------------------------------
function ImgPh({ label, dark, className, style }) {
  return (
    <div className={"imgph " + (dark ? 'dark ' : '') + (className || '')} style={style}>
      <span className="label">{label}</span>
    </div>
  );
}

// -----------------------------------------------------
// Listing card
// -----------------------------------------------------
function ListingCard({ l, onClick }) {
  const [fav, setFav] = useState(false);
  return (
    <div className="listing-card" onClick={onClick}>
      <div className="listing-img imgph">
        <span className="tag">{l.tag}</span>
        <button className={"fav " + (fav ? 'active' : '')} onClick={(e)=>{e.stopPropagation(); setFav(!fav);}}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill={fav ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.6">
            <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"/>
          </svg>
        </button>
        <span className="label" style={{position:'absolute', bottom: 16, left: 16, zIndex: 2}}>
          {l.imgLabel}
        </span>
      </div>
      <div className="listing-meta">
        <span className="listing-area">{l.area}</span>
        <span className="listing-price">{l.price}</span>
      </div>
      <h3 className="listing-title">{l.title}</h3>
      <div className="listing-specs">
        <span>{l.beds} bed</span>
        <span className="sep">·</span>
        <span>{l.baths} bath</span>
        <span className="sep">·</span>
        <span>{l.sqft} sqft</span>
        <span className="sep">·</span>
        <span>{l.lot}</span>
      </div>
    </div>
  );
}

// -----------------------------------------------------
// Footer
// -----------------------------------------------------
function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="shell container">
        <div className="footer-top">
          <div>
            <picture style={{display:'contents'}}>
              <source srcSet="images/sg-logo-light.webp" type="image/webp" />
              <img className="footer-logo" src="images/sg-logo-light.png" alt="Seenu George" width="72" height="84"
                style={{height:'72px', width:'auto', display:'block', marginBottom:'20px'}} />
            </picture>
            <div className="footer-brand-mark">Seenu <em>George</em></div>
            <p className="body" style={{maxWidth: '36ch'}}>
              Helping families and investors buy and sell across Calgary, Airdrie, Cochrane,
              Chestermere, Canmore, Banff, High River and Okotoks.
            </p>
            <div className="flex gap mt">
              <button className="btn btn-gold btn-sm" onClick={() => setPage('contact')}>Book a Consultation</button>
            </div>
          </div>
          <div className="footer-col">
            <h4>Discover</h4>
            <ul>
              <li><a onClick={() => window.openIdxLink('allListings')}>Active MLS® Listings</a></li>
              <li><a onClick={() => window.openIdxLink('ourListings')}>Our Listings</a></li>
              <li><a onClick={() => setPage('neighborhoods')}>Communities</a></li>
              <li><a onClick={() => setPage('blog')}>Market Insights</a></li>
              <li><a onClick={() => window.openIdxLink('allListings')}>Full MLS® Search</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Work With Me</h4>
            <ul>
              <li><a href="buy.html">Buying a Home</a></li>
              <li><a href="sell.html">Selling Your Home</a></li>
              <li><a href="luxury.html">Private Client / Luxury</a></li>
              <li><a onClick={() => setPage('buyer')}>Buyer's Guide</a></li>
              <li><a onClick={() => setPage('seller')}>Seller's Guide</a></li>
              <li><a onClick={() => setPage('contact')}>Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Visit</h4>
            <ul>
              <li><a href="https://www.google.com/maps/search/?api=1&query=eXp+Realty+1816+Crowchild+Trail+NW+Calgary+AB+T2M+3Y7" target="_blank" rel="noopener">eXp Realty, Calgary</a></li>
              <li><a href="https://www.google.com/maps/search/?api=1&query=eXp+Realty+1816+Crowchild+Trail+NW+Calgary+AB+T2M+3Y7" target="_blank" rel="noopener">#700, 1816 Crowchild Trail NW</a></li>
              <li><a href="https://www.google.com/maps/search/?api=1&query=eXp+Realty+1816+Crowchild+Trail+NW+Calgary+AB+T2M+3Y7" target="_blank" rel="noopener">Calgary, AB T2M 3Y7</a></li>
              <li><a href="tel:+14038282359">+1 (403) 828-2359</a></li>
              <li><a href="mailto:seenu@homesbyseenu.ca">seenu@homesbyseenu.ca</a></li>
            </ul>
            <h4 style={{marginTop: 32}}>Follow</h4>
            <ul>
              <li><a href="https://www.instagram.com/seenugeorge3/reels/" target="_blank" rel="noopener">Instagram</a></li>
              <li><a href="https://www.instagram.com/seenugeorge3/reels/" target="_blank" rel="noopener">Reels</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom" style={{flexDirection:'column', alignItems:'stretch', gap: 20}}>
          <div style={{fontFamily:'var(--mono)', fontSize: 10, lineHeight: 1.7, color:'var(--muted-2)', maxWidth:'90ch'}}>
            {(window.IDX && window.IDX.COMPLIANCE) || ''}
          </div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div>© 2026 Seenu George · eXp Realty · REALTOR®</div>
            <div className="legal">
              <a onClick={() => setPage('privacy')}>Privacy</a>
              <a onClick={() => setPage('terms')}>Terms</a>
              <a onClick={() => setPage('mls')}>MLS® Disclaimer</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { AdminBar, Nav, BrandMark, ImgPh, ListingCard, Footer, PAGES });