// Zen Interiors — shared components: Nav, Footer, primitives, Lightbox
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// Tiny SVG marks ---------------------------------------------------------------
function ZenMark({ size = 28, color = 'currentColor' }) {
  // Custom enso-style mark: a single broken ring with a low horizon line.
  // Not derived from the client's facebook avatar — this is a placeholder until
  // the official SVG logo is supplied (see CLAUDE-DESIGN §5, §10).
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-label="Zen Interiors">
      <circle cx="20" cy="20" r="14" stroke={color} strokeWidth="1.25" strokeDasharray="80 8" strokeDashoffset="-2" />
      <line x1="6" y1="28" x2="34" y2="28" stroke={color} strokeWidth="0.75" />
    </svg>
  );
}

function ArrowRight({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
      <path d="M1 6h10M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1" strokeLinecap="square" />
    </svg>
  );
}
function ArrowDown({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
      <path d="M6 1v10M2 7l4 4 4-4" stroke="currentColor" strokeWidth="1" strokeLinecap="square" />
    </svg>
  );
}
function Plus({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
      <path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1" />
    </svg>
  );
}
function Close({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.1" />
    </svg>
  );
}

// Navigation -----------------------------------------------------------------
function Nav({ route, navigate, locale, setLocale, openEnquiry }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { label: 'Projects', to: '/projects' },
    { label: 'Sectors', to: '/sectors' },
    { label: 'Services', to: '/services' },
    { label: 'Studio', to: '/about' },
    { label: 'Awards', to: '/awards' },
    { label: 'Journal', to: '/journal' },
    { label: 'Contact', to: '/contact' },
  ];

  const isActive = (to) => route === to || (to !== '/' && route.startsWith(to));

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(250,247,242,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'background 240ms ease, border-color 240ms ease',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', gap: 24,
        height: 72,
      }}>
        <a href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }}
           style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
          <ZenMark size={24} />
          <span className="display" style={{ fontSize: 22, letterSpacing: '0.04em' }}>
            ZEN <span className="display-italic" style={{ color: 'var(--clay)' }}>interiors</span>
          </span>
        </a>

        <nav className="desktop-nav" style={{ marginLeft: 'auto', display: 'flex', gap: 28, alignItems: 'center' }}>
          {items.map(item => (
            <a key={item.to} href={`#${item.to}`}
               onClick={(e) => { e.preventDefault(); navigate(item.to); }}
               style={{
                 fontFamily: 'var(--font-mono)',
                 fontSize: 11,
                 letterSpacing: '0.18em',
                 textTransform: 'uppercase',
                 color: isActive(item.to) ? 'var(--ink)' : 'var(--stone)',
                 paddingBottom: 4,
                 borderBottom: isActive(item.to) ? '1px solid var(--ink)' : '1px solid transparent',
               }}>
              {item.label}
            </a>
          ))}
          <LocaleSwitcher locale={locale} setLocale={setLocale} />
          <button className="btn" onClick={openEnquiry} style={{ padding: '12px 18px' }}>
            Start a project <ArrowRight />
          </button>
        </nav>

        <button className="mobile-nav-toggle" onClick={() => setOpen(true)}
          style={{
            marginLeft: 'auto', background: 'transparent', border: 0, padding: 8,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase'
          }}>
          <svg width="22" height="14" viewBox="0 0 22 14"><line x1="0" y1="1" x2="22" y2="1" stroke="currentColor"/><line x1="0" y1="7" x2="22" y2="7" stroke="currentColor"/><line x1="0" y1="13" x2="22" y2="13" stroke="currentColor"/></svg>
          Menu
        </button>

        {open && (
          <div style={{
            position: 'fixed', inset: 0, background: 'var(--paper)', zIndex: 80,
            padding: 'var(--gutter)', display: 'flex', flexDirection: 'column', gap: 28,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <ZenMark size={26} />
              <button onClick={() => setOpen(false)} style={{ background: 'transparent', border: 0, padding: 8 }}>
                <Close size={16} />
              </button>
            </div>
            <nav style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 20 }}>
              {items.map(item => (
                <a key={item.to} href={`#${item.to}`} onClick={(e) => { e.preventDefault(); navigate(item.to); setOpen(false); }}
                   className="display" style={{ fontSize: 38, lineHeight: 1.1 }}>{item.label}</a>
              ))}
            </nav>
            <div style={{ marginTop: 'auto' }}>
              <button className="btn" onClick={() => { setOpen(false); openEnquiry(); }} style={{ width: '100%', justifyContent: 'center' }}>
                Start a project <ArrowRight />
              </button>
            </div>
          </div>
        )}
      </div>
    </header>
  );
}

function LocaleSwitcher({ locale, setLocale }) {
  const locales = ['EN', 'AR', 'RU', 'ZH'];
  return (
    <div style={{ display: 'flex', gap: 0, alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em' }}>
      {locales.map((l, i) => (
        <React.Fragment key={l}>
          {i > 0 && <span style={{ color: 'var(--line-strong)', margin: '0 6px' }}>·</span>}
          <button onClick={() => setLocale(l)}
            style={{
              background: 'transparent', border: 0, padding: 0,
              color: locale === l ? 'var(--ink)' : 'var(--stone-soft)',
              fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit',
            }}>
            {l}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
}

// Footer ---------------------------------------------------------------------
function Footer({ navigate, openEnquiry }) {
  const c = window.ZEN_CONTACT;
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--paper)', marginTop: 120 }}>
      <div className="container" style={{ paddingTop: 96, paddingBottom: 40 }}>

        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 56, alignItems: 'start' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--stone-soft)' }}>Start a project</div>
            <p className="display" style={{ fontSize: 'clamp(36px, 4vw, 56px)', margin: '16px 0 28px', color: 'var(--paper)' }}>
              A quiet conversation about your home.
            </p>
            <button className="btn" onClick={openEnquiry}
              style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)' }}>
              Request a consultation <ArrowRight />
            </button>
          </div>

          <div>
            <div className="eyebrow" style={{ color: 'var(--stone-soft)' }}>Studio</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.addressLines.map((l, i) => (
                <li key={i} style={{ fontSize: 14, color: 'var(--linen)' }}>{l}</li>
              ))}
            </ul>
            <div style={{ marginTop: 18, fontSize: 13, color: 'var(--stone-soft)', fontStyle: 'italic' }}>{c.hoursNote}</div>
          </div>

          <div>
            <div className="eyebrow" style={{ color: 'var(--stone-soft)' }}>Reach us</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li><a href={c.phoneHref} style={{ borderBottom: '1px solid var(--stone)' }}>{c.phone}</a></li>
              <li><a href={`mailto:${c.email}`} style={{ borderBottom: '1px solid var(--stone)' }}>{c.email}</a></li>
              <li><span style={{ color: 'var(--stone-soft)', fontSize: 12, fontStyle: 'italic' }}>WhatsApp — number to be confirmed</span></li>
            </ul>
          </div>

          <div>
            <div className="eyebrow" style={{ color: 'var(--stone-soft)' }}>Navigate</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Projects','Sectors','Services','Studio','Awards','Contact'].map(label => (
                <li key={label}>
                  <a href={`#/${label.toLowerCase() === 'studio' ? 'about' : label.toLowerCase()}`}
                     onClick={(e) => { e.preventDefault(); navigate('/' + (label.toLowerCase() === 'studio' ? 'about' : label.toLowerCase())); }}
                     style={{ fontSize: 14, color: 'var(--linen)' }}>{label}</a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <hr className="rule" style={{ background: 'var(--ink-soft)', marginTop: 80, marginBottom: 32 }} />

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <ZenMark size={22} color="var(--paper)" />
            <span className="display" style={{ fontSize: 18, letterSpacing: '0.04em' }}>
              ZEN <span className="display-italic" style={{ color: 'var(--clay)' }}>interiors</span>
            </span>
          </div>
          <div style={{ display: 'flex', gap: 28, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--stone-soft)' }}>
            <span>© {c.studio} · Est. {c.founded}</span>
            <a href="#" onClick={(e) => e.preventDefault()}>Privacy</a>
            <a href="#" onClick={(e) => e.preventDefault()}>Imprint</a>
          </div>
        </div>

        <p style={{ marginTop: 32, fontSize: 11, color: 'var(--stone)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', lineHeight: 1.7 }}>
          Photography reference-only — credit & republication rights to be confirmed per image before publishing. Project names taken from Zen's archived filenames are indicative; final publishable labels and per-project metadata to be confirmed.
        </p>
      </div>
    </footer>
  );
}

// Enquiry drawer -------------------------------------------------------------
function EnquiryDrawer({ open, onClose }) {
  const [submitted, setSubmitted] = useState(false);
  useEffect(() => {
    if (open) { document.body.style.overflow = 'hidden'; }
    else { document.body.style.overflow = ''; setSubmitted(false); }
  }, [open]);

  if (!open) return null;

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 70, display: 'flex', justifyContent: 'flex-end' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(20,18,14,0.5)', animation: 'fadeIn 220ms ease' }} />
      <aside style={{
        position: 'relative', width: 'min(560px, 100%)', background: 'var(--paper)',
        height: '100vh', overflowY: 'auto',
        padding: 'clamp(28px, 4vw, 56px)',
        animation: 'slideIn 360ms cubic-bezier(.2,.7,.2,1)'
      }}>
        <style>{`@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }`}</style>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
          <span className="eyebrow">Start your project</span>
          <button onClick={onClose} style={{ background: 'transparent', border: 0, padding: 8 }} aria-label="Close"><Close size={16} /></button>
        </div>

        {!submitted ? (
          <>
            <h2 className="display" style={{ fontSize: 44, margin: '0 0 14px', lineHeight: 1 }}>
              A quiet conversation <span className="display-italic" style={{ color: 'var(--clay)' }}>about your home.</span>
            </h2>
            <p style={{ color: 'var(--stone)', margin: '0 0 32px', maxWidth: 460 }}>
              Tell us a little about the project. We'll come back within two working days to arrange a discovery call — by phone, video, or at our Al Barsha showroom.
            </p>

            <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <Field label="Your name" required><input required type="text" style={inputStyle} placeholder="Full name" /></Field>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                <Field label="Email" required><input required type="email" style={inputStyle} placeholder="you@email.com" /></Field>
                <Field label="Phone"><input type="tel" style={inputStyle} placeholder="+971 …" /></Field>
              </div>
              <Field label="Project type" required>
                <select required style={inputStyle} defaultValue="">
                  <option value="" disabled>Choose one</option>
                  <option>Penthouse</option>
                  <option>Apartment</option>
                  <option>Villa</option>
                  <option>Furniture / styling only</option>
                  <option>Other</option>
                </select>
              </Field>
              <Field label="Location"><input type="text" style={inputStyle} placeholder="Dubai, Palm Jumeirah, …" /></Field>
              <Field label="Scope">
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {['Design only', 'Turnkey design + build', 'Furniture & styling', 'Bespoke joinery'].map(s => (
                    <label key={s} style={{
                      display: 'inline-flex', alignItems: 'center', gap: 8,
                      padding: '8px 14px', border: '1px solid var(--line-strong)',
                      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                      cursor: 'pointer'
                    }}>
                      <input type="checkbox" style={{ accentColor: 'var(--clay-deep)' }} /> {s}
                    </label>
                  ))}
                </div>
              </Field>
              <Field label="A little about the project">
                <textarea rows="4" style={{ ...inputStyle, resize: 'vertical', minHeight: 96 }} placeholder="Brief, preferred timeline, anything you'd like us to know." />
              </Field>

              <div style={{ display: 'flex', gap: 14, marginTop: 8 }}>
                <button type="submit" className="btn" style={{ flex: 1, justifyContent: 'center' }}>
                  Send enquiry <ArrowRight />
                </button>
                <a className="btn btn-ghost" href={window.ZEN_CONTACT.phoneHref}>Call instead</a>
              </div>

              <p style={{ fontSize: 11, color: 'var(--stone)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginTop: 8 }}>
                We treat enquiries in confidence. No NDA needed at this stage.
              </p>
            </form>
          </>
        ) : (
          <div style={{ paddingTop: 40 }}>
            <div className="eyebrow" style={{ color: 'var(--clay-deep)' }}>Received</div>
            <h2 className="display" style={{ fontSize: 44, margin: '14px 0 18px', lineHeight: 1 }}>
              Thank you. <span className="display-italic" style={{ color: 'var(--clay)' }}>We'll write back soon.</span>
            </h2>
            <p style={{ color: 'var(--stone)', maxWidth: 460 }}>
              We typically respond within two working days. If your project is time-sensitive, please call us at <a href={window.ZEN_CONTACT.phoneHref} style={{ borderBottom: '1px solid var(--ink)' }}>{window.ZEN_CONTACT.phone}</a>.
            </p>
            <button className="btn btn-ghost" onClick={onClose} style={{ marginTop: 32 }}>Close</button>
          </div>
        )}
      </aside>
    </div>
  );
}

function Field({ label, required, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <span className="eyebrow">{label}{required && <span style={{ color: 'var(--clay-deep)', marginLeft: 6 }}>*</span>}</span>
      {children}
    </label>
  );
}
const inputStyle = {
  fontFamily: 'var(--font-sans)',
  fontSize: 15,
  padding: '12px 14px',
  background: 'var(--paper)',
  border: '1px solid var(--line-strong)',
  color: 'var(--ink)',
  outline: 'none',
  borderRadius: 0,
};

// Lightbox -------------------------------------------------------------------
function Lightbox({ images, index, onClose, onPrev, onNext }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev();
      if (e.key === 'ArrowRight') onNext();
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose, onPrev, onNext]);

  return (
    <div className="lightbox" onClick={onClose}>
      <button onClick={(e) => { e.stopPropagation(); onClose(); }}
        style={{ position: 'absolute', top: 24, right: 24, background: 'transparent', border: 0, color: 'var(--paper)', padding: 12 }}>
        <Close size={20} />
      </button>
      <button onClick={(e) => { e.stopPropagation(); onPrev(); }}
        style={{ position: 'absolute', left: 24, top: '50%', transform: 'translateY(-50%) rotate(180deg)', background: 'transparent', border: 0, color: 'var(--paper)', padding: 18 }}>
        <ArrowRight size={20} />
      </button>
      <button onClick={(e) => { e.stopPropagation(); onNext(); }}
        style={{ position: 'absolute', right: 24, top: '50%', transform: 'translateY(-50%)', background: 'transparent', border: 0, color: 'var(--paper)', padding: 18 }}>
        <ArrowRight size={20} />
      </button>
      <img src={images[index]} alt="" onClick={(e) => e.stopPropagation()} />
      <div style={{ position: 'absolute', bottom: 24, left: 0, right: 0, textAlign: 'center', color: 'var(--paper)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em' }}>
        {String(index + 1).padStart(2, '0')} / {String(images.length).padStart(2, '0')} · PHOTO CREDIT TBC
      </div>
    </div>
  );
}

// Section block --------------------------------------------------------------
function SectionHeader({ eyebrow, title, italicTail, kicker, link }) {
  return (
    <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 32, marginBottom: 56, flexWrap: 'wrap' }}>
      <div style={{ maxWidth: 720 }}>
        <div className="eyebrow">{eyebrow}</div>
        <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: '14px 0 0', lineHeight: 1.02 }}>
          {title}
          {italicTail && <> <span className="display-italic" style={{ color: 'var(--clay)' }}>{italicTail}</span></>}
        </h2>
        {kicker && <p style={{ color: 'var(--stone)', marginTop: 18, maxWidth: 520 }}>{kicker}</p>}
      </div>
      {link}
    </div>
  );
}

// Project card ---------------------------------------------------------------
function ProjectCard({ project, navigate, big }) {
  const [hover, setHover] = useState(false);
  return (
    <a href={`#/projects/${project.slug}`} onClick={(e) => { e.preventDefault(); navigate(`/projects/${project.slug}`); }}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{ display: 'block', cursor: 'pointer' }}>
      <div className="img-frame" style={{
        aspectRatio: big ? '4/5' : '4/3',
        marginBottom: 18,
      }}>
        <img src={project.cover} alt={project.name}
          loading="lazy"
          style={{
            width: '100%', height: '100%', objectFit: 'cover',
            transform: hover ? 'scale(1.04)' : 'scale(1)',
            transition: 'transform 700ms cubic-bezier(.2,.7,.2,1)',
          }} />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
        <div>
          <h3 className="display" style={{ fontSize: big ? 30 : 22, margin: 0, lineHeight: 1.1 }}>{project.name}</h3>
          <div className="eyebrow" style={{ marginTop: 8 }}>{project.sector} · {project.location}</div>
        </div>
        <div style={{ color: 'var(--stone)', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          View <ArrowRight />
        </div>
      </div>
    </a>
  );
}

// Make these available across babel scripts ---------------------------------
Object.assign(window, {
  ZenMark, ArrowRight, ArrowDown, Plus, Close,
  Nav, Footer, EnquiryDrawer, Lightbox, SectionHeader, ProjectCard,
  Field, inputStyle,
});
