// Components — Trend Home buyer prototype
// Loads after data.jsx and tweaks-panel.jsx

const fmtEUR = (n) => '€' + n.toLocaleString('de-DE');
const fmtM2 = (n) => n.toFixed(1).replace('.', ',') + ' m²';

// ─────────────────────────────────────────────────────────────────
// Logo (recreated as SVG so it lives well on cream/dark/teal)
// ─────────────────────────────────────────────────────────────────
function THLogo({ mono = false, height = 32, color }) {
  const dot = mono ? 'currentColor' : 'var(--th-teal)';
  const word = color || 'currentColor';
  return (
    <svg viewBox="0 0 220 64" height={height} style={{ display: 'block' }} aria-label="Trend Home">
      <circle cx="32" cy="32" r="28" fill={dot} />
      <path d="M28 14 v8 h-8 v6 h8 v16 c0 5 3 8 9 8 c2 0 4 -.4 6 -1 v-7 c-1 .4 -2 .6 -3 .6 c-2 0 -3 -1 -3 -3 v-13 h7 v-6 h-7 v-8 z" fill="#fff"/>
      <text x="74" y="38" style={{ fontFamily: 'var(--th-sans)', fontWeight: 600, fontSize: 28, letterSpacing: '-0.02em' }} fill={word}>trend</text>
      <text x="173" y="50" style={{ fontFamily: 'var(--th-sans)', fontWeight: 700, fontSize: 11, letterSpacing: '0.18em' }} fill={dot}>HOME</text>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────
// Top nav
// ─────────────────────────────────────────────────────────────────
function NavBar({ onCta, scrolled }) {
  const items = [
    { id: 'komplekset', label: 'Komplekset' },
    { id: 'kati', label: 'Banesa' },
    { id: 'galeri', label: 'Galeria' },
    { id: 'kontakt', label: 'Kontakt' },
  ];
  const go = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <nav className={`th-nav ${scrolled ? 'th-nav--scrolled' : ''}`}>
      <div className="th-nav__inner">
        <a href="#top" className="th-nav__logo" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <THLogo height={28} />
        </a>
        <ul className="th-nav__links">
          {items.map((it) => (
            <li key={it.id}>
              <button onClick={() => go(it.id)}>{it.label}</button>
            </li>
          ))}
        </ul>
        <div className="th-nav__right">
          <a className="th-nav__phone" href="tel:+38349807840">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            +383 49 807 840
          </a>
          <button className="th-btn th-btn--solid" onClick={onCta}>Cakto vizitë</button>
        </div>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────────
// HERO — editorial split with parallax image + headline reveal
// ─────────────────────────────────────────────────────────────────
function Hero({ onScrollToBrowse }) {
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const parallax = Math.min(scrollY * 0.4, 220);
  const fade = Math.max(0, 1 - scrollY / 500);

  return (
    <section className="th-hero" id="top">
      <div className="th-hero__grid">
        <div className="th-hero__copy" style={{ opacity: fade, transform: `translateY(${scrollY * -0.15}px)` }}>
          <div className="th-eyebrow">
            <span className="th-dot" /> Pejë · Kosovë · Që nga 2018
          </div>
          <h1 className="th-display">
            Banimi që <em>e meriton</em><br/>
            jeta jote e re.
          </h1>
          <p className="th-lede">
            Trend Home ndërton komplekse banimi në Pejë me përkujdesje për detajet,
            materiale të zgjedhura dhe pamje që zgjasin gjithë jetën.
          </p>
          <div className="th-hero__ctas">
            <button className="th-btn th-btn--solid th-btn--lg" onClick={onScrollToBrowse}>
              Eksploro banesat
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <button className="th-btn th-btn--ghost th-btn--lg">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
              Shih videon
            </button>
          </div>
          <dl className="th-hero__stats">
            <div><dt>Kompleks</dt><dd>3</dd></div>
            <div><dt>Banesa</dt><dd>164</dd></div>
            <div><dt>Familje</dt><dd>410+</dd></div>
            <div><dt>Vite</dt><dd>8</dd></div>
          </dl>
        </div>
        <div className="th-hero__media">
          <div className="th-hero__image" style={{ transform: `translateY(${-parallax}px) scale(1.08)` }}>
            <img src="uploads/img2.jpg" alt="Kompleksi Kristal" />
          </div>
          <div className="th-hero__chip th-hero__chip--tl">
            <span className="th-chip-eyebrow">I sapombyllur</span>
            <span className="th-chip-title">Kompleksi Kristal · Kulla 2B</span>
          </div>
          <div className="th-hero__chip th-hero__chip--br">
            <div className="th-chip-stat">
              <strong>15</strong>
              <span>banesa<br/>të lira</span>
            </div>
          </div>
        </div>
      </div>
      <button className="th-hero__scroll" onClick={onScrollToBrowse} aria-label="Zbrit">
        <span>Zbrit</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
      </button>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// MARQUEE STRIP — scrolling values band between hero + browser
// ─────────────────────────────────────────────────────────────────
function ValuesStrip() {
  const items = [
    'Materiale natyrore', '· · ·', 'Ndërtim sizmik EC8', '· · ·',
    'Ngrohje me dysheme', '· · ·', 'Ashensor OTIS', '· · ·',
    'Parking i mbuluar', '· · ·', 'Sigurim 24/7', '· · ·',
    'Garanci 10 vjet', '· · ·', 'Hipotekë e mundshme', '· · ·',
  ];
  const row = [...items, ...items];
  return (
    <div className="th-marquee" aria-hidden>
      <div className="th-marquee__track">
        {row.map((t, i) => <span key={i} className="th-marquee__item">{t}</span>)}
      </div>
    </div>
  );
}

Object.assign(window, { THLogo, NavBar, Hero, ValuesStrip, fmtEUR, fmtM2 });