// Hero, Header, About — top of the page
const { useState, useEffect, useRef } = React;

// — small icon set
const Icon = ({ name, size = 20 }) => {
  const paths = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    play: <path d="M8 5v14l11-7L8 5z" fill="currentColor"/>,
    check: <path d="M4 12l5 5L20 6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    plus: <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>,
    pin: <path d="M12 22s7-7.58 7-13a7 7 0 10-14 0c0 5.42 7 13 7 13z M12 11.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    phone: <path d="M22 16.92v3a2 2 0 01-2.18 2 19.86 19.86 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.86 19.86 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.72 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0122 16.92z" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    calendar: <path d="M3 6a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6zM3 10h18M8 2v4M16 2v4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round"/>,
    menu: <path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>,
    close: <path d="M6 6l12 12M6 18L18 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>,
    grid: <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" stroke="currentColor" strokeWidth="1.6" fill="none"/>,
    window: <path d="M4 4h16v16H4zM12 4v16M4 12h16" stroke="currentColor" strokeWidth="1.6" fill="none"/>,
    layers: <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    bricks: <path d="M3 6h6V3H3zM9 6h6V3H9zM15 6h6V3h-6zM3 12h6V9H3zM9 12h6V9H9zM15 12h6V9h-6zM3 18h6v-3H3zM9 18h6v-3H9zM15 18h6v-3h-6z" stroke="currentColor" strokeWidth="1.4" fill="none"/>,
    sun: <g stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></g>,
    elevator: <g stroke="currentColor" strokeWidth="1.6" fill="none"><rect x="5" y="3" width="14" height="18" rx="1"/><path d="M9 8l3-3 3 3M9 16l3 3 3-3"/></g>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      {paths[name]}
    </svg>
  );
};

const Header = ({ lang, setLang, scrolled }) => {
  const [menuOpen, setMenuOpen] = useState(false);
  const items = window.SITE_DATA.nav[lang];
  const onLink = (e, id) => {
    e.preventDefault();
    setMenuOpen(false);
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <header className={`header ${scrolled ? 'scrolled' : ''}`}>
      <div className="container header-inner">
        <a href="#top" onClick={(e) => onLink(e, 'top')} className="brand" aria-label="QASIET CITY">
          <img src="assets/qasiet-gold.svg" alt="QASIET CITY" className="brand-logo"/>
        </a>
        <nav className="nav">
          {items.slice(0, 7).map(n => (
            <a key={n.id} href={`#${n.id}`} onClick={(e) => onLink(e, n.id)}>{n.label}</a>
          ))}
        </nav>
        <div className="header-right">
          <div className="lang-switch">
            <button className={lang === 'ru' ? 'active' : ''} onClick={() => setLang('ru')}>RU</button>
            <button className={lang === 'kz' ? 'active' : ''} onClick={() => setLang('kz')}>KZ</button>
          </div>
          <a href="#contact" onClick={(e) => onLink(e, 'contact')} className="btn btn--primary">
            {lang === 'ru' ? 'Заявка' : 'Өтінім'}
          </a>
          <button className="menu-toggle" onClick={() => setMenuOpen(!menuOpen)} aria-label="menu">
            <Icon name={menuOpen ? 'close' : 'menu'} />
          </button>
        </div>
      </div>
      {menuOpen && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'var(--bg)', borderBottom: '1px solid var(--line)',
          padding: '16px var(--pad-x)', display: 'flex', flexDirection: 'column', gap: 4
        }}>
          {items.map(n => (
            <a key={n.id} href={`#${n.id}`} onClick={(e) => onLink(e, n.id)}
               style={{ padding: '10px 0', fontSize: 16 }}>{n.label}</a>
          ))}
        </div>
      )}
    </header>
  );
};

const Hero = ({ lang, heroImg }) => {
  const d = window.SITE_DATA.hero[lang];
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-top reveal in">
          <div className="hero-eyebrow">{d.eyebrow}</div>
          <h1 className="hero-title">QASIET CITY</h1>
          <p className="hero-sub">{d.subtitle}</p>
          <div className="hero-ctas">
            <a href="#contact" className="btn btn--primary btn--lg" onClick={(e) => {
              e.preventDefault();
              document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' });
            }}>
              {d.cta1} <Icon name="arrow" size={16}/>
            </a>
            <a href="#plans" className="btn btn--ghost btn--lg" onClick={(e) => {
              e.preventDefault();
              document.getElementById('plans')?.scrollIntoView({ behavior: 'smooth' });
            }}>
              {d.cta2}
            </a>
          </div>
        </div>
      </div>
      <div className="hero-image hero-image--full reveal">
        <img src={heroImg} alt="QASIET CITY"/>
      </div>
      <div className="container">
        <div className="hero-stats">
          {d.stats.map((s, i) => (
            <div key={i} className="hero-stat">
              <div className="v">{s.value}</div>
              <div className="l">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const About = ({ lang, aboutImg }) => {
  const d = window.SITE_DATA.about[lang];
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="about-grid reveal">
          <div className="about-image">
            <img src={aboutImg} alt=""/>
            <div className="about-badge">Comfort+</div>
          </div>
          <div>
            <div className="kicker">{d.kicker}</div>
            <h2 style={{ marginTop: 16 }}>{d.title}</h2>
            <p className="about-lead">{d.lead}</p>
            <dl className="about-points">
              {d.points.map((p, i) => (
                <div key={i} className="about-point">
                  <dt>{p.k}</dt>
                  <dd>{p.v}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    </section>
  );
};

const Advantages = ({ lang, advImg }) => {
  const d = window.SITE_DATA.advantages[lang];
  return (
    <section className="section section--alt" id="advantages">
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{d.kicker}</div>
          <h2>{d.title}</h2>
        </div>
        <div className="adv-grid reveal">
          {d.items.map((it, i) => (
            <div key={i} className="adv-card">
              <div className="adv-photo">
                <img src={it.img} alt={it.t}/>
              </div>
              <div className="adv-body">
                <div className="adv-num">{String(i + 1).padStart(2, '0')}</div>
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Icon, Header, Hero, About, Advantages });