/* global React, HOUSE */
// ============== CHROME: Nav, Footer, Silk placeholder, Marquee, Page header ==============

const { useState, useEffect, useRef } = React;

const ROUTES = [
  { id: "home",         label: "Maison" },
  { id: "haute-couture",label: "Haute Couture" },
  { id: "bridal",       label: "Bridal" },
  { id: "ready-to-wear",label: "Ready-to-Wear" },
  { id: "jewellery",    label: "Jewellery" },
  { id: "fragrance",    label: "Fragrance" },
  { id: "archive",      label: "Archive" },
  { id: "founders",     label: "Founders" },
];

function Nav({ route, setRoute }) {
  const [open, setOpen] = useState(false);
  const go = (r) => { setRoute(r); setOpen(false); };

  return (
    <nav className="nav" data-screen-label="nav">
      <div className="nav-ticker">
        <span>Atelier · Dubai Design District</span>
        <span>By private appointment — Monday to Saturday</span>
        <span>WhatsApp · {HOUSE.appointmentMobile}</span>
      </div>
      <div className="nav-bar">
        <div className="nav-left">
          <button className={`nav-link ${route === 'home' ? 'active' : ''}`} onClick={() => setRoute('home')}>Maison</button>
          <button className={`nav-link collapsible ${route === 'haute-couture' ? 'active' : ''}`} onClick={() => setRoute('haute-couture')}>Haute Couture</button>
          <button className={`nav-link collapsible ${route === 'bridal' ? 'active' : ''}`} onClick={() => setRoute('bridal')}>Bridal</button>
          <button className={`nav-link collapsible ${route === 'ready-to-wear' ? 'active' : ''}`} onClick={() => setRoute('ready-to-wear')}>Ready-to-Wear</button>
        </div>
        <div className="nav-logo" onClick={() => setRoute('home')} role="button">
          MICHAEL CINCO
          <small>Couture House · Dubai</small>
        </div>
        <div className="nav-right">
          <button className={`nav-link collapsible ${route === 'jewellery' ? 'active' : ''}`} onClick={() => setRoute('jewellery')}>Jewellery</button>
          <button className={`nav-link collapsible ${route === 'fragrance' ? 'active' : ''}`} onClick={() => setRoute('fragrance')}>Fragrance</button>
          <button className={`nav-link collapsible ${route === 'archive' ? 'active' : ''}`} onClick={() => setRoute('archive')}>Archive</button>
          <button className={`nav-link collapsible ${route === 'founders' ? 'active' : ''}`} onClick={() => setRoute('founders')}>Founders</button>
          <button className="nav-menu-btn" onClick={() => setOpen(true)}>Menu <span style={{fontSize: 14}}>≡</span></button>
          <button className="btn btn-sm nav-appt-btn" onClick={() => setRoute('appointments')}>
            Request Appointment <span className="arrow">→</span>
          </button>
        </div>
      </div>

      {open && (
        <div className="nav-overlay" role="dialog" aria-modal="true">
          <div className="ov-top">
            <div className="nav-logo">MICHAEL CINCO<small>Couture House · Dubai</small></div>
            <button className="nav-menu-btn" onClick={() => setOpen(false)} style={{ display: 'inline-flex' }}>Close ✕</button>
          </div>
          <div className="ov-list">
            {ROUTES.map(r => (
              <button key={r.id} className={route === r.id ? 'active' : ''} onClick={() => go(r.id)}>
                {r.label} <span className="serif-it" style={{ fontSize: '0.5em', color: 'var(--ink-soft)', marginLeft: 12 }}>{String(ROUTES.indexOf(r) + 1).padStart(2,'0')}</span>
              </button>
            ))}
            <button className={route === 'appointments' ? 'active' : ''} onClick={() => go('appointments')}>Appointments <span className="serif-it" style={{ fontSize: '0.5em', color: 'var(--ink-soft)', marginLeft: 12 }}>09</span></button>
            <button className={route === 'contact' ? 'active' : ''} onClick={() => go('contact')}>Contact <span className="serif-it" style={{ fontSize: '0.5em', color: 'var(--ink-soft)', marginLeft: 12 }}>10</span></button>
          </div>
          <div className="ov-foot">
            <span>Building 4, Dubai Design District</span>
            <span>{HOUSE.appointmentMobile}</span>
            <span>{HOUSE.email}</span>
          </div>
        </div>
      )}
    </nav>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="footer" data-screen-label="footer">
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, marginBottom: 72 }}>
        <div>
          <div className="display-m" style={{ marginBottom: 18 }}>Michael Cinco</div>
          <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.6 }}>
            Atelier & Maison · Dubai Design District
          </div>
          <p className="body" style={{ marginTop: 22, color: 'inherit', opacity: 0.7, maxWidth: 360 }}>
            A Filipino couture house in Dubai. Made-to-measure haute couture, bridal,
            ready-to-wear, jewellery and fragrance — under one private appointment.
          </p>
        </div>

        <div>
          <FooterCol title="Maison">
            {['home','haute-couture','bridal','ready-to-wear'].map(r => (
              <li key={r}><a className="link" onClick={(e) => { e.preventDefault(); setRoute(r); }} style={{borderColor:'rgba(244,238,227,0.18)'}}>{ROUTES.find(x=>x.id===r).label}</a></li>
            ))}
          </FooterCol>
        </div>
        <div>
          <FooterCol title="Continued">
            {['jewellery','fragrance','archive','founders'].map(r => (
              <li key={r}><a className="link" onClick={(e) => { e.preventDefault(); setRoute(r); }} style={{borderColor:'rgba(244,238,227,0.18)'}}>{ROUTES.find(x=>x.id===r).label}</a></li>
            ))}
            <li><a className="link" onClick={(e) => { e.preventDefault(); setRoute('appointments'); }} style={{borderColor:'rgba(244,238,227,0.18)'}}>Appointments</a></li>
            <li><a className="link" onClick={(e) => { e.preventDefault(); setRoute('contact'); }} style={{borderColor:'rgba(244,238,227,0.18)'}}>Contact</a></li>
          </FooterCol>
        </div>
        <div>
          <FooterCol title="Atelier">
            <li>Building 4, Dubai Design District</li>
            <li>Dubai · United Arab Emirates</li>
            <li style={{ marginTop: 14 }}>By appointment, Mon–Sat</li>
            <li><a className="link" style={{borderColor:'rgba(244,238,227,0.18)'}} href={`mailto:${HOUSE.email}`}>{HOUSE.email}</a></li>
            <li><a className="link" style={{borderColor:'rgba(244,238,227,0.18)'}} href={`tel:${HOUSE.appointmentMobile.replace(/\s/g,'')}`}>{HOUSE.appointmentMobile}</a></li>
          </FooterCol>
        </div>
      </div>

      <hr style={{ border: 0, height: 1, background: 'rgba(244,238,227,0.12)', margin: '0 0 24px' }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.55 }}>
        <span>© Michael Cinco · 2026</span>
        <span>{HOUSE.founded}</span>
        <span>
          <a className="link" style={{borderColor:'rgba(244,238,227,0.18)'}}>Privacy</a>
          <span style={{ padding: '0 14px' }}>·</span>
          <a className="link" style={{borderColor:'rgba(244,238,227,0.18)'}}>Terms</a>
        </span>
      </div>
    </footer>
  );
}

function FooterCol({ title, children }) {
  return (
    <div>
      <div style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 18 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, fontSize: 13, opacity: 0.88 }}>
        {children}
      </ul>
    </div>
  );
}

// Striped silk placeholder — used in place of imagery we don't have/should not invent
function Silk({ label, aspect = "3/4", style = {} }) {
  return (
    <div className="silk" style={{ aspectRatio: aspect, ...style }}>
      <div className="silk-tag">{label}</div>
    </div>
  );
}

// Section header with eyebrow + display + side note
function SectionHeader({ eyebrow, title, note, align = 'kicker' }) {
  if (align === 'kicker') {
    return (
      <div className="kicker" style={{ marginBottom: 56 }}>
        <div>
          <div className="eyebrow"><span className="dot"></span>{eyebrow}</div>
          <h2 className="display-l" style={{ marginTop: 16, marginBottom: 0 }}>{title}</h2>
        </div>
        {note && <div className="body" style={{ maxWidth: 460 }}>{note}</div>}
      </div>
    );
  }
  return (
    <div style={{ marginBottom: 48 }}>
      <div className="eyebrow"><span className="dot"></span>{eyebrow}</div>
      <h2 className="display-l" style={{ marginTop: 16, marginBottom: 14 }}>{title}</h2>
      {note && <p className="lede" style={{ maxWidth: 720 }}>{note}</p>}
    </div>
  );
}

// Page hero — a generic title bar used by every interior page
function PageHero({ eyebrow, title, sub, imageSrc, imageAlt }) {
  return (
    <section className="shell" style={{ paddingTop: 72, paddingBottom: 48 }}>
      <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot"></span>{eyebrow}</div>
      <h1 className="display-xl" style={{ margin: 0 }}>{title}</h1>
      {sub && <p className="lede" style={{ maxWidth: 720, marginTop: 28 }}>{sub}</p>}
      {imageSrc && (
        <div style={{ marginTop: 56, aspectRatio: '16/8', overflow: 'hidden', background: 'var(--ink)' }}>
          <img src={imageSrc} alt={imageAlt || ''} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%' }} />
        </div>
      )}
    </section>
  );
}

// Currency formatter
function aed(n) {
  return new Intl.NumberFormat('en-AE', { maximumFractionDigits: 0 }).format(n);
}

Object.assign(window, { Nav, Footer, FooterCol, Silk, SectionHeader, PageHero, aed, ROUTES });