/* ============================================================
   Shared components — logo, nav, footer, placeholders, icons
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---- Brand mark: rising incense smoke (Weyba Tish) + glow sun ---- */
function LogoMark({ size = 38, dark = false }) {
  const gold = dark ? '#D9BE86' : '#A47E36';
  const clay = dark ? '#D9BE86' : '#B5683C';
  return (
    <svg className="logo-mark" width={size} height={size} viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="18.5" stroke={gold} strokeWidth="1" opacity="0.5" />
      {/* glow sun */}
      <circle cx="20" cy="25.5" r="3.1" fill={clay} />
      {[...Array(8)].map((_, i) => {
        const a = (i / 8) * Math.PI * 2;
        const x1 = 20 + Math.cos(a) * 5.2, y1 = 25.5 + Math.sin(a) * 5.2;
        const x2 = 20 + Math.cos(a) * 6.8, y2 = 25.5 + Math.sin(a) * 6.8;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={clay} strokeWidth="1" strokeLinecap="round" />;
      })}
      {/* rising smoke wisp */}
      <path d="M20 18.5 C 15 15, 25 12.5, 20 9 C 16 6, 23.5 4, 20.5 1.5"
            stroke={gold} strokeWidth="1.4" strokeLinecap="round" fill="none" />
    </svg>
  );
}

function Logo({ dark = false, onClick }) {
  return (
    <button className="logo" onClick={onClick} aria-label="E Glow Beauty & Weyba Tish home">
      <LogoMark dark={dark} />
      <span className="logo-txt">
        <span className="logo-name">E Glow Beauty</span>
        <span className="logo-sub">Weyba Tish&nbsp;·&nbsp;Spa</span>
      </span>
    </button>
  );
}

/* ---- Small leaf / botanical glyph for placeholders ---- */
function LeafGlyph({ size = 26 }) {
  return (
    <svg className="leaf" width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 22 C 12 14, 12 8, 12 3 M12 9 C 8 8, 6 6, 5.5 3 C 9 3.2, 11.4 5, 12 9 Z M12 13 C 16 12, 18 10, 18.5 7 C 15 7.2, 12.6 9, 12 13 Z"
            stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>
  );
}

/* ---- Art-directed image placeholder ---- */
function Placeholder({ tone = '', label = 'Photography', glyph = true, style, className = '' }) {
  return (
    <div className={`ph ${tone} ${className}`} style={style}>
      <div className="ph-inner">
        {glyph && <LeafGlyph />}
        <span className="ph-label">{label}</span>
      </div>
    </div>
  );
}

/* ---- Diamond divider (tibeb diamonds) ---- */
function DiamondRow({ n = 5 }) {
  return (
    <div className="diamond-row">
      {[...Array(n)].map((_, i) => (
        <span key={i} className={`diamond ${i % 2 === 0 ? 'fill' : ''}`} />
      ))}
    </div>
  );
}

/* ---- Navigation ---- */
const NAV_ITEMS = [
  ['home', 'Home'],
  ['about', 'About Weyba Tish'],
  ['products', 'Products'],
  ['book', 'Services'],
  ['gallery', 'Gallery'],
  ['contact', 'Contact'],
];

function Nav({ page, go, onDark = false }) {
  const [open, setOpen] = useState(false);
  const nav = (key) => { go(key); setOpen(false); };
  return (
    <nav className={`nav ${onDark ? 'on-dark' : ''}`}>
      <div className="nav-inner">
        <Logo dark={onDark} onClick={() => nav('home')} />
        <div className="nav-links">
          {NAV_ITEMS.map(([key, label]) => (
            <button
              key={key}
              className={`nav-link ${page === key ? 'active' : ''}`}
              onClick={() => go(key)}
            >{label}</button>
          ))}
        </div>
        <button className="btn btn-clay nav-book" style={{ padding: '12px 24px' }} onClick={() => go('book')}>
          Book Now
        </button>
        <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(true)}>
          <span /><span /><span />
        </button>
      </div>
      {open && (
        <div className="nav-sheet">
          <button className="nav-sheet-close" onClick={() => setOpen(false)} aria-label="Close">✕</button>
          <div className="nav-sheet-links">
            {NAV_ITEMS.map(([key, label]) => (
              <button key={key} className={`nav-sheet-link ${page === key ? 'active' : ''}`} onClick={() => nav(key)}>{label}</button>
            ))}
          </div>
          <button className="btn btn-clay" onClick={() => nav('book')}>Book Now <span className="arrow">→</span></button>
        </div>
      )}
    </nav>
  );
}

/* ---- Footer ---- */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="tibeb" />
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-col">
            <Logo dark={true} onClick={() => go('home')} />
            <p style={{ color: 'rgba(246,238,226,.62)', fontSize: 15, lineHeight: 1.7, marginTop: 22, maxWidth: 320 }}>
              Ancient Ethiopian healing, reimagined as a modern sanctuary. Cleanse, restore, glow —
              the Weyba&nbsp;Tish way.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 26 }}>
              {['Instagram', 'TikTok', 'Pinterest'].map(s => (
                <a key={s} href="#" style={{ fontSize: 12.5, letterSpacing: '.08em', textTransform: 'uppercase', borderBottom: '1px solid rgba(217,190,134,.3)', paddingBottom: 3 }}>{s}</a>
              ))}
            </div>
          </div>
          <div className="footer-col">
            <h4>Explore</h4>
            <ul>
              {NAV_ITEMS.slice(0, 4).map(([key, label]) => (
                <li key={key}><a href="#" onClick={(e) => { e.preventDefault(); go(key); }}>{label}</a></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h4>The Ritual</h4>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('about'); }}>What is Weyba Tish</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('book'); }}>Spa Services</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('products'); }}>Skincare Line</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('gallery'); }}>Gallery</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Visit</h4>
            <ul>
              <li>By appointment only</li>
              <li>Tue – Sun · 10am – 7pm</li>
              <li><a href="mailto:hello@eglowbeautyspa.com">hello@eglowbeautyspa.com</a></li>
              <li><a href="tel:+10000000000">+1 (000) 000-0000</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 E Glow Beauty & Weyba Tish Spa. Crafted with care.</span>
          <span style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 15, color: 'var(--gold-soft)' }}>
            ጤና ይስጥልኝ — be well
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ---- Scroll reveal hook ---- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

Object.assign(window, { LogoMark, Logo, LeafGlyph, Placeholder, DiamondRow, Nav, Footer, useReveal, NAV_ITEMS });