/* ==========================================================
   DOCE ENCANTO — Shared components
   ========================================================== */

const { useState, useEffect, useRef, useMemo } = React;

/* --------- Logo SVG (re-uses the PNG) --------- */
function Logo({ size = 40, color = 'currentColor' }) {
  return (
    <img
      src="assets/logo-vinho.png"
      alt="Doce Encanto"
      style={{ width: size, height: size, display: 'block', filter: color === 'creme' ? 'brightness(0) invert(0.96) sepia(0.2) hue-rotate(-15deg) saturate(0.8)' : 'none' }} />);


}

function LogoCreme({ size = 40 }) {
  return (
    <div style={{
      width: size, height: size,
      background: 'var(--creme)',
      WebkitMask: 'url("assets/logo-original.png") center/contain no-repeat',
      mask: 'url("assets/logo-original.png") center/contain no-repeat'
    }} />);

}

function LogoVinho({ size = 40 }) {
  return <img src="assets/logo-vinho.png" alt="Doce Encanto" style={{ ...{ width: size, height: size, display: 'block' }, width: "50px", height: "50px" }} />;
}

/* --------- Placeholder / image with name --------- */
function Placeholder({ name, tone = '', className = '', style = {}, img, children }) {
  if (img) {
    return (
      <div className={`placeholder has-img ${tone} ${className}`} style={style}>
        <img src={img} alt={name} loading="lazy" />
        {children}
      </div>);

  }
  return (
    <div className={`placeholder ${tone} ${className}`} style={style}>
      <div className="placeholder-label">{name}</div>
      {children}
    </div>);

}

/* --------- Top navigation --------- */
function Nav({ route, navigate }) {
  const links = [
  { id: 'home', label: 'Início' },
  { id: 'menu', label: 'Menu' },
  { id: 'bolos', label: 'Bolos' },
  { id: 'contato', label: 'Contacto' }];

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#home" onClick={(e) => {e.preventDefault();navigate('home');}} className="nav-mark">
          <LogoVinho size={42} />
          <div>
            <div className="wordmark">Doce Encanto</div>
            <div className="sub">CONFEITARIA & BRUNCH</div>
          </div>
        </a>
        <div className="nav-links">
          {links.map((l) =>
          <a
            key={l.id}
            href={`#${l.id}`}
            onClick={(e) => {e.preventDefault();navigate(l.id);}}
            className={`nav-link ${route === l.id ? 'active' : ''}`}>
            
              {l.label}
            </a>
          )}
        </div>
        <div className="nav-cta">
          <a href={window.WHATSAPP_URL} target="_blank" rel="noreferrer" className="btn btn-primary btn-sm">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
            Encomendar
          </a>
        </div>
      </div>
    </nav>);

}

/* --------- Marquee --------- */
function Marquee({ items }) {
  const content = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {content.map((it, i) =>
        <span key={i}><i>{it}</i><span className="dot" /></span>
        )}
      </div>
    </div>);

}

/* --------- Footer --------- */
function Footer({ navigate }) {
  return (
    <>
      <footer className="footer">
        <div className="footer-inner">
          <div>
            <div className="brand-mark">Doce Encanto</div>
            <p style={{ maxWidth: 320, opacity: 0.85 }}>Confeitaria & Brunch em Fátima. Doces feitos à mão, com Amor, Catinho e atenção aos detalhes.


            </p>
          </div>
          <div>
            <h4>Visite-nos</h4>
            <p>Av. Nossa Senhora de Fátima, 9<br />2495-407 Fátima<br />Portugal</p>
            <p style={{ marginTop: 12 }}>
              <a href={window.MAPS_LINK} target="_blank" rel="noreferrer">Abrir no Google Maps →</a>
            </p>
          </div>
          <div>
            <h4>Horário</h4>
            <p>Qua – Dom · 09 — 19h<br />Terça · 14 — 19h<br />Segunda · encerrado</p>
          </div>
          <div>
            <h4>Conecte-se</h4>
            <p>
              <a href={window.WHATSAPP_URL} target="_blank" rel="noreferrer">WhatsApp</a><br />
              <a href={window.INSTAGRAM_URL} target="_blank" rel="noreferrer">@doceencantofatima</a><br />
              <a href="mailto:ola@doceencanto.pt">ola@doceencanto.pt</a>
            </p>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Doce Encanto · Confeitaria & Brunch</div>
          <div>Fátima · Portugal</div>
        </div>
      </footer>
    </>);

}

/* --------- Modal (menu item / cake details) --------- */
function Modal({ item, onClose }) {
  useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, []);

  if (!item) return null;
  const isCake = !!item.serves;

  const wa = `${window.WHATSAPP_URL}?text=${encodeURIComponent(`Olá! Gostaria de encomendar: ${item.name}`)}`;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Fechar">×</button>
        <Placeholder name={item.name} tone={item.tone} img={item.img} className="modal-img" />
        <div className="modal-body">
          <div className="eyebrow">{isCake ? item.type : 'Especialidade'}</div>
          <h2>{item.name.split(' ').map((w, i, a) =>
            i === a.length - 1 ? <em key={i}>{w}</em> : <React.Fragment key={i}>{w} </React.Fragment>
            )}</h2>
          <p className="lede">{item.desc}</p>

          {isCake ?
          <div className="specs">
              <div>
                <div className="label">Serve</div>
                <div className="value">{item.serves}</div>
              </div>
              <div>
                <div className="label">Tamanho</div>
                <div className="value">{item.diam}</div>
              </div>
              <div>
                <div className="label">Antecedência</div>
                <div className="value">48h</div>
              </div>
              <div>
                <div className="label">Tipo</div>
                <div className="value">{item.type}</div>
              </div>
            </div> :

          <div className="specs" style={{ gridTemplateColumns: '1fr' }}>
              <div>
                <div className="label">Disponibilidade</div>
                <div className="value">Diariamente · enquanto durar</div>
              </div>
            </div>
          }

          <div className="price-row">
            <div>
              <div className="label" style={{ color: 'var(--salvia)', marginBottom: 6 }}>{isCake ? 'A partir de' : 'Preço'}</div>
              <div className="price">{item.price}</div>
            </div>
            {item.tag && <span className={`menu-row tag ${item.tag === 'novo' ? 'new' : ''}`} style={{
              fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em',
              color: item.tag === 'novo' ? 'var(--vinho)' : 'var(--salvia)',
              border: '1px solid', padding: '4px 10px', textTransform: 'uppercase'
            }}>{item.tag}</span>}
          </div>

          <a href={wa} target="_blank" rel="noreferrer" className="btn btn-primary">
            Encomendar via WhatsApp
            <span style={{ fontSize: 14 }}>→</span>
          </a>
        </div>
      </div>
    </div>);

}

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

  if (index === null || index === undefined) return null;
  const item = items[index];

  return (
    <div className="lightbox" onClick={onClose}>
      <button className="lightbox-close" onClick={onClose}>FECHAR <span style={{ fontSize: 18 }}>×</span></button>
      <button className="lightbox-nav prev" onClick={(e) => {e.stopPropagation();onPrev();}}>‹</button>
      <button className="lightbox-nav next" onClick={(e) => {e.stopPropagation();onNext();}}>›</button>
      <div className="lightbox-content" onClick={(e) => e.stopPropagation()}>
        <Placeholder name={item.name} tone={item.tone} img={item.img} className="frame" />
        <div className="meta">
          <h3>{item.name}</h3>
          <p>{item.type} · {index + 1} / {items.length}</p>
        </div>
      </div>
    </div>);

}

window.Logo = Logo;
window.LogoVinho = LogoVinho;
window.LogoCreme = LogoCreme;
window.Placeholder = Placeholder;
window.Nav = Nav;
window.Marquee = Marquee;
window.Footer = Footer;
window.Modal = Modal;
window.Lightbox = Lightbox;