// Owithu — components & shared UI
const { useState, useEffect, useRef, useMemo } = React;

const navigate = (hash) => { window.location.hash = hash; window.scrollTo({ top: 0, behavior: 'instant' }); };

function Brand() {
  return (
    <a href="#/" className="brand" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
      <span>Owithu<span className="dot">.</span></span>
      <small>B2B HoReCa</small>
    </a>
  );
}

function Nav({ route }) {
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [route]);
  const links = [
    ['/restaurante', 'Restaurante'],
    ['/cafenele', 'Cafenele'],
    ['/hoteluri', 'Hoteluri'],
    ['/colectii', 'Colecții'],
    ['/despre', 'Despre']
  ];
  return (
    <React.Fragment>
      <nav className="nav">
        <div className="nav-inner">
          <Brand />
          <div className="nav-links">
            {links.map(([h, l]) => (
              <a key={h} href={'#' + h} className={route === h ? 'active' : ''}
                onClick={(e) => { e.preventDefault(); navigate(h); }}>{l}</a>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button className="nav-cta" onClick={() => navigate('/oferta')}>Cere ofertă</button>
            <button className="nav-burger" aria-label="meniu" onClick={() => setOpen(!open)}>
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </nav>
      <div className={'mobile-menu ' + (open ? 'open' : '')}>
        {links.map(([h, l]) => (
          <a key={h} href={'#' + h} onClick={(e) => { e.preventDefault(); navigate(h); }}>{l}</a>
        ))}
        <a href="#/oferta" onClick={(e) => { e.preventDefault(); navigate('/oferta'); }}>Cere ofertă →</a>
      </div>
    </React.Fragment>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand-foot">Owithu<span className="dot">.</span></div>
            <p style={{ color: 'var(--ink-soft)', maxWidth: '32ch', fontSize: 14, margin: 0 }}>
              Furnizor de veselă profesională pentru restaurante, cafenele și hoteluri. Colecții complete, comandă prin cerere de ofertă.
            </p>
          </div>
          <div>
            <h5>Segmente</h5>
            <ul>
              <li><a href="#/restaurante" onClick={(e) => { e.preventDefault(); navigate('/restaurante'); }}>Restaurante</a></li>
              <li><a href="#/cafenele" onClick={(e) => { e.preventDefault(); navigate('/cafenele'); }}>Cafenele</a></li>
              <li><a href="#/hoteluri" onClick={(e) => { e.preventDefault(); navigate('/hoteluri'); }}>Hoteluri</a></li>
            </ul>
          </div>
          <div>
            <h5>Colecții</h5>
            <ul>
              <li><a href="#/colectii" onClick={(e) => { e.preventDefault(); navigate('/colectii'); }}>Toate colecțiile</a></li>
              <li><a href="#/colectii?c=genesis" onClick={(e) => { e.preventDefault(); navigate('/colectii'); }}>GENESIS</a></li>
              <li><a href="#/colectii?c=iris" onClick={(e) => { e.preventDefault(); navigate('/colectii'); }}>IRIS</a></li>
              <li><a href="#/colectii?c=magma" onClick={(e) => { e.preventDefault(); navigate('/colectii'); }}>MAGMA</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="#/oferta" onClick={(e) => { e.preventDefault(); navigate('/oferta'); }}>Cere ofertă</a></li>
              <li><a href="#/despre" onClick={(e) => { e.preventDefault(); navigate('/despre'); }}>Despre noi</a></li>
              <li style={{ color: 'var(--ink-mute)', fontSize: 13 }}>contact@<span style={{ opacity: 0.6 }}>placeholder</span></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Owithu Management · București, România</div>
          <div className="mono">v0.1 · demo prototip</div>
        </div>
      </div>
    </footer>
  );
}

/* Collection card */
function CollectionCard({ c, onOpen }) {
  // Pick a "secondary" image from the same collection that is meaningfully
  // different from the primary — prefer a later image (typically a lifestyle
  // or detail shot), falling back to image 2 if the collection only has 2.
  const primary = c.images[0];
  const secondary = c.images[Math.min(2, c.images.length - 1)] || c.images[1] || primary;
  return (
    <button className="collection-card reveal" onClick={() => onOpen(c)}>
      <div className="cc-img">
        <img className="cc-img-primary" src={IMG(c.folder, primary)} alt={c.name + ' ' + c.finish} loading="lazy" />
        <img className="cc-img-hover" src={IMG(c.folder, secondary)} alt="" loading="lazy" aria-hidden="true" />
        <div className="cc-color">
          <span className="sw" style={{ background: c.swatch }}></span>
          <span>{c.finish}</span>
        </div>
      </div>
      <div className="cc-body">
        <div className="cc-top">
          <div>
            <div className="cc-name">{c.name}</div>
            <div className="cc-finish">{c.finish}</div>
          </div>
          <div className="cc-pieces">{c.pieces} PIESE</div>
        </div>
        <div className="cc-meta">
          <span className="pill">pentru {c.persons} persoane</span>
          {c.tags.slice(0, 2).map(t => <span key={t} className="pill">{t}</span>)}
        </div>
      </div>
    </button>
  );
}

/* Piece row — used inside the modal, alternates layout */
function PieceRow({ p, i, c, onClose }) {
  const typeLabel = (window.PIECE_TYPES[p.type] || p.type);
  return (
    <article className={'piece-row ' + (i % 2 === 0 ? 'left' : 'right')}>
      <div className="piece-img">
        <img src={PIMG(c.folder, p.id)} alt={p.name} loading="lazy" />
        {p.included ? (
          <div className="piece-badge piece-badge-incl">În set · {p.qty} buc</div>
        ) : (
          <div className="piece-badge piece-badge-acc">Accesoriu · separat</div>
        )}
      </div>
      <div className="piece-text">
        <div className="piece-num mono">PIESA · {String(i + 1).padStart(2, '0')}</div>
        <div className="piece-type">{typeLabel}</div>
        <h4 className="piece-name">{p.name}</h4>
        <div className="piece-spec">
          {p.size && <span>{p.size}</span>}
          {p.capacity && <span>{p.capacity}</span>}
          <span className="dot-sep">·</span>
          <span className="piece-use">{p.useFor}</span>
        </div>
        <p className="piece-desc">{p.desc}</p>
        <div className="piece-meta">
          {p.included ? (
            <span className="piece-meta-pill piece-meta-pill-on">Inclus în setul de {c.pieces} piese — {p.qty} bucăți</span>
          ) : (
            <span className="piece-meta-pill">Nu este în setul complet · disponibil ca extensie</span>
          )}
        </div>
        <div className="piece-ctas">
          <button className="btn-link" onClick={() => { onClose(); navigate('/oferta?c=' + c.id + '&p=' + p.id); }}>
            Cere ofertă doar pentru această piesă →
          </button>
        </div>
      </div>
    </article>
  );
}

/* Modal: collection detail */
function CollectionModal({ c, onClose }) {
  const [active, setActive] = useState(0);
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, []);
  if (!c) return null;
  const thumbs = c.images.slice(0, 4);
  const pieces = (window.PIECES && window.PIECES[c.id]) || [];
  const includedPieces = pieces.filter(p => p.included);
  const accessoryPieces = pieces.filter(p => !p.included);

  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target.classList.contains('modal-backdrop')) onClose(); }}>
      <div className="modal" role="dialog" aria-label={'Detalii colecție ' + c.name}>
        <button className="modal-close" onClick={onClose} aria-label="Închide">×</button>

        {/* TOP: full service overview */}
        <div className="modal-grid">
          <div className="modal-gallery">
            <div className="main">
              <img src={IMG(c.folder, c.images[active])} alt={c.name} />
            </div>
            <div className="thumbs">
              {thumbs.map((n, i) => (
                <button key={i} className={i === active ? 'active' : ''} onClick={() => setActive(i)}>
                  <img src={IMG(c.folder, n)} alt="" loading="lazy" />
                </button>
              ))}
            </div>
          </div>
          <div className="modal-body">
            <div className="eyebrow"><span className="dot"></span>Colecție · Service Complet</div>
            <h2>{c.name} <em>— {c.finish}</em></h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 16, margin: 0, maxWidth: '46ch' }}>
              {c.short}
            </p>

            <div className="specs">
              <div>
                <div className="l">Număr piese</div>
                <div className="v">{c.pieces} piese</div>
              </div>
              <div>
                <div className="l">Potrivit pentru</div>
                <div className="v">{c.persons} persoane</div>
              </div>
              <div>
                <div className="l">Material</div>
                <div className="v">{c.material}</div>
              </div>
              <div>
                <div className="l">Culori</div>
                <div className="v">{c.colors}</div>
              </div>
              <div style={{ gridColumn: '1 / -1' }}>
                <div className="l">Compoziție</div>
                <div className="v">{c.composition}</div>
              </div>
            </div>

            <div>
              <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 10, fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Compatibilitate · garanție {c.warranty}</div>
              <div className="compat">
                {c.compatibility.map(x => <span key={x}>{x}</span>)}
              </div>
            </div>

            <div className="cta-row">
              <button className="btn btn-primary" onClick={() => { onClose(); navigate('/oferta?c=' + c.id); }}>
                Cere ofertă pentru întreaga colecție <span className="arr">→</span>
              </button>
              <button className="btn btn-ghost" onClick={() => {
                const el = document.querySelector('.modal-pieces');
                if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
              }}>Vezi piesele individuale ↓</button>
            </div>
          </div>
        </div>

        {/* INDIVIDUAL PIECES */}
        {pieces.length > 0 && (
          <section className="modal-pieces">
            <header className="pieces-head">
              <div>
                <div className="eyebrow"><span className="dot"></span>Compoziție serviciu</div>
                <h3 className="pieces-h">Piese individuale<br/><em className="italic-serif">{c.name} — {c.finish}</em></h3>
                <p className="pieces-lead">
                  Fiecare piesă din colecție poate fi comandată separat, nu doar ca parte din serviciul complet. Util pentru extinderea unui set existent sau pentru locațiile care vor doar anumite tipuri de veselă.
                </p>
              </div>
              <div className="pieces-stats">
                <div>
                  <div className="mono-label">PIESE ÎN SET</div>
                  <div className="big-num">{c.pieces}</div>
                </div>
                <div>
                  <div className="mono-label">TIPURI UNICE</div>
                  <div className="big-num">{includedPieces.length}</div>
                </div>
                <div>
                  <div className="mono-label">ACCESORII OPȚIONALE</div>
                  <div className="big-num">{accessoryPieces.length}</div>
                </div>
              </div>
            </header>

            <div className="piece-rows">
              {pieces.map((p, i) => <PieceRow key={p.id} p={p} i={i} c={c} onClose={onClose} />)}
            </div>

            <div className="pieces-foot">
              <div>
                <div className="eyebrow" style={{ marginBottom: 14, display: 'block' }}><span className="dot"></span>Următorul pas</div>
                <h3 style={{ fontSize: 32, fontFamily: '"Cormorant Garamond", serif', fontWeight: 500, lineHeight: 1.1, margin: 0 }}>
                  Cere ofertă — pentru colecție<br/>sau pentru piese individuale.
                </h3>
              </div>
              <div className="cta-row">
                <button className="btn btn-primary" onClick={() => { onClose(); navigate('/oferta?c=' + c.id); }}>
                  Cere ofertă pentru colecție <span className="arr">→</span>
                </button>
                <button className="btn btn-ghost" onClick={onClose}>Înapoi la catalog</button>
              </div>
            </div>
          </section>
        )}
      </div>
    </div>
  );
}

/* RFQ form */
function RFQForm({ preselectedId }) {
  const [submitted, setSubmitted] = useState(false);
  const [loc, setLoc] = useState('restaurant');
  const [collection, setCollection] = useState(preselectedId || '');
  useEffect(() => { if (preselectedId) setCollection(preselectedId); }, [preselectedId]);

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    window.scrollTo({ top: document.querySelector('.form-card').offsetTop - 100, behavior: 'smooth' });
  };

  if (submitted) {
    return (
      <div className="form-card">
        <div className="form-success">
          <div className="check">✓</div>
          <h3>Cererea a fost înregistrată.</h3>
          <p>Mulțumim. Revenim în maxim 24 de ore lucrătoare cu o ofertă personalizată pentru locația ta. Pentru urgențe, te poți întoarce oricând la pagina de contact.</p>
          <button className="btn btn-ghost" onClick={() => setSubmitted(false)} style={{ marginTop: 10 }}>Trimite o altă cerere</button>
        </div>
      </div>
    );
  }

  return (
    <form className="form-card" onSubmit={onSubmit}>
      <div className="form-fields">
        <div className="field full">
          <label>Tipul locației <span className="req">*</span></label>
          <div className="chip-group">
            {[
              ['restaurant', 'Restaurant'],
              ['cafenea', 'Cafenea'],
              ['hotel', 'Hotel'],
              ['alt', 'Alt HoReCa']
            ].map(([v, l]) => (
              <label key={v}>
                <input type="radio" name="loc" value={v} checked={loc === v} onChange={() => setLoc(v)} />
                {l}
              </label>
            ))}
          </div>
        </div>

        <div className="field">
          <label>Nume firmă / locație <span className="req">*</span></label>
          <input required type="text" placeholder="ex. Restaurant Caré" />
        </div>
        <div className="field">
          <label>Oraș <span className="req">*</span></label>
          <input required type="text" placeholder="București" />
        </div>

        <div className="field">
          <label>Persoană de contact <span className="req">*</span></label>
          <input required type="text" placeholder="Nume și prenume" />
        </div>
        <div className="field">
          <label>Telefon <span className="req">*</span></label>
          <input required type="tel" placeholder="07xx xxx xxx" />
        </div>

        <div className="field full">
          <label>Email (opțional)</label>
          <input type="email" placeholder="contact@locatie.ro" />
        </div>

        <div className="field">
          <label>Colecție / produse de interes</label>
          <select value={collection} onChange={(e) => setCollection(e.target.value)}>
            <option value="">— Recomandare în funcție de profil —</option>
            {window.COLLECTIONS.map(c => (
              <option key={c.id} value={c.id}>{c.name} — {c.finish} ({c.pieces} piese)</option>
            ))}
            <option value="alta">Alta / nu sunt sigur încă</option>
          </select>
        </div>
        <div className="field">
          <label>Număr estimat de locuri / mese</label>
          <input type="text" placeholder="ex. 60 locuri / 18 mese" />
        </div>

        <div className="field full">
          <label>Mesaj / detalii cerere</label>
          <textarea placeholder="Detalii despre operațiunea ta, frecvența de utilizare, intervalul de timp..." rows="3"></textarea>
        </div>
      </div>

      <div className="form-submit">
        <p className="legal">Datele tale sunt folosite doar pentru a-ți răspunde cu o ofertă personalizată. Nu sunt partajate cu terți.</p>
        <button type="submit" className="btn btn-mustard">Trimite cererea <span className="arr">→</span></button>
      </div>
    </form>
  );
}

/* Intersection reveal */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.is-vis)');
    if (!('IntersectionObserver' in window)) {
      els.forEach(e => e.classList.add('is-vis'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => {
        if (en.isIntersecting) {
          en.target.classList.add('is-vis');
          io.unobserve(en.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  });
}

Object.assign(window, { Nav, Footer, CollectionCard, CollectionModal, RFQForm, useReveal, navigate });