// Section components for the HVAC homepage. All Bulgarian copy.

const NAV_LINKS = [
  { href: "index.html", id: "home", label: "Начало" },
  { href: "uslugi.html", id: "uslugi", label: "Услуги" },
  { href: "za-nas.html", id: "za-nas", label: "За Нас" },
  { href: "kontakti.html", id: "kontakti", label: "Контакти" },
];

const Header = ({ theme, onToggleTheme, currentPage = "home" }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"site-header " + (scrolled ? "scrolled" : "")}>
      <div className="container">
        <a href="index.html" className="logo">
          <span className="logo-mark"></span>
          <span className="logo-text">
            Atria<small>Climate Systems</small>
          </span>
        </a>
        <nav className="nav-links">
          {NAV_LINKS.map((l) => (
            <a key={l.id} href={l.href} className={currentPage === l.id ? "active" : ""}>{l.label}</a>
          ))}
        </nav>
        <div className="header-right">
          <a href="tel:+35928901234" className="header-phone">
            <span className="phone-ico"><IconPhone size={13} /></span>
            +359 2 890 1234
          </a>
          <button
            className="theme-toggle"
            onClick={onToggleTheme}
            aria-label="Промени тема"
            title={theme === "dark" ? "Светла тема" : "Тъмна тема"}
          >
            {theme === "dark" ? <IconSun size={16} /> : <IconMoon size={16} />}
          </button>
          <a href="kontakti.html" className="btn btn-primary" style={{ padding: "10px 20px", fontSize: 14 }}>
            Безплатна консултация
          </a>
          <button className={"hamburger" + (menuOpen ? " open" : "")} aria-label="Меню" onClick={() => setMenuOpen(!menuOpen)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      {menuOpen && (
        <nav className="mobile-nav" aria-label="Мобилно меню">
          {NAV_LINKS.map((l) => (
            <a key={l.id} href={l.href} className={currentPage === l.id ? "active" : ""} onClick={() => setMenuOpen(false)}>{l.label}</a>
          ))}
          <a href="kontakti.html" className="btn btn-primary" onClick={() => setMenuOpen(false)}>Безплатна консултация</a>
        </nav>
      )}
    </header>
  );
};

const useLiveValue = (values, interval = 2400) => {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((x) => (x + 1) % values.length), interval);
    return () => clearInterval(t);
  }, [values.length, interval]);
  return values[i];
};

const Hero = () => {
  const temp = useLiveValue([22, 22, 23, 22, 21, 22], 2200);
  const hum = useLiveValue([45, 46, 44, 45, 47, 45], 2600);
  const flow = useLiveValue(["3.2", "3.4", "3.1", "3.3", "3.2"], 2000);
  const noise = useLiveValue([19, 20, 18, 19, 19, 21], 2800);

  return (
  <section className="hero bg-noise" id="home">
    <div className="hero-bg"></div>
    <div className="container">
      <div>
        <div className="hero-eyebrow reveal">
          <span className="line"></span>
          <span className="eyebrow">Климатични решения · от 2009</span>
        </div>
        <h1 className="serif reveal" data-stagger="1">
          Монтаж и сервиз на климатични системи<br />
          в <span className="accent-warm-text">София</span>.
        </h1>
        <p className="hero-subtitle reveal" data-stagger="2">
          Проектиране, монтаж и сервиз на климатични, отоплителни и
          вентилационни системи за дома и бизнеса. Без компромис в качеството.
        </p>
        <div className="hero-ctas reveal" data-stagger="3">
          <a href="kontakti.html" className="btn btn-primary">
            Поискай оферта <IconArrow size={14} />
          </a>
          <a href="uslugi.html" className="btn btn-ghost">
            Нашите услуги
          </a>
        </div>
        <div className="hero-trust reveal" data-stagger="4">
          <div className="trust-item">
            <span className="trust-icon"><IconStar /></span>
            <span><strong>4.9</strong> · 127 ревюта в Google</span>
          </div>
          <div className="trust-item">
            <span className="trust-icon"><IconCheck /></span>
            <span><strong>15+</strong> години опит</span>
          </div>
          <div className="trust-item">
            <span className="trust-icon"><IconShield /></span>
            <span>Оторизиран партньор</span>
          </div>
        </div>
      </div>
      <div className="hero-visual reveal bg-grid" data-stagger="2">
        <div className="spec-row">
          <span>Atria · Live Status</span>
          <span className="badge-live"><span className="dot"></span>Online</span>
        </div>
        <div className="spec-display">
          <div className="arc spinning"></div>
          <div className="temp">
            <span key={temp} className="live-flip">{temp}</span><sup>°C</sup>
          </div>
          <div className="label">Целева температура</div>
        </div>
        <div className="spec-grid">
          <div>
            <div className="k">Влажност</div>
            <div className="v"><span key={hum} className="live-flip">{hum}</span><small>%</small></div>
          </div>
          <div>
            <div className="k">Поток</div>
            <div className="v"><span key={flow} className="live-flip">{flow}</span><small>m³/h</small></div>
          </div>
          <div>
            <div className="k">Шум</div>
            <div className="v"><span key={noise} className="live-flip">{noise}</span><small>dB</small></div>
          </div>
        </div>
        <div className="wave-bg" aria-hidden="true">
          <span></span><span></span><span></span>
        </div>
      </div>
    </div>
    <div className="scroll-cue">
      <span>Scroll</span>
      <span className="line"></span>
    </div>
  </section>
  );
};

const services = [
  { icon: IconClimate, num: "01", anchor: "klimatizaciya", title: "Климатизация", body: "Инверторни сплит системи и мулти-сплит решения с оптимизирана енергийна ефективност за всеки тип помещение." },
  { icon: IconHeating, num: "02", anchor: "otoplenie", title: "Отопление", body: "Термопомпи въздух-въздух и въздух-вода. Проектиране на хибридни системи с до 70% по-ниски разходи." },
  { icon: IconVent, num: "03", anchor: "ventilaciya", title: "Вентилация", body: "Рекуперативни системи с топлинно възстановяване — свеж въздух без енергийни загуби, целогодишно." },
  { icon: IconVRF, num: "04", anchor: "vrf", title: "VRF системи", body: "Индустриални и комерсиални VRV/VRF инсталации за хотели, офис сгради и многозонови обекти." },
  { icon: IconMaintenance, num: "05", anchor: "poddrazhka", title: "Поддръжка", body: "Сезонна профилактика, дезинфекция и удължени гаранционни планове за дома и бизнеса." },
  { icon: IconRepair, num: "06", anchor: "remont", title: "Сервиз и ремонт", body: "Диагностика и ремонт в рамките на 24 часа. Екипи в София, Пловдив, Варна и Бургас." },
];
window.HVAC_SERVICES = services;

const Services = () => (
  <section id="services">
    <div className="container">
      <div className="section-label reveal">
        <span className="num">01</span>
        <div className="title-block">
          <div className="kicker">Услуги · Шест направления</div>
          <h2>Пълен спектър услуги — от консултация до 24/7 сервиз</h2>
        </div>
      </div>
      <div className="services-grid">
        {services.map((s, i) => {
          const Ic = s.icon;
          return (
            <div className="service-card reveal" data-stagger={(i % 3) + 1} key={s.num}>
              <span className="num">/ {s.num}</span>
              <div className="icon"><Ic /></div>
              <h3 className="serif">{s.title}</h3>
              <p>{s.body}</p>
              <a className="arrow-link" href={`uslugi.html#${s.anchor}`}>
                Научи повече <IconArrow size={12} />
              </a>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

const processSteps = [
  { n: "01", t: "Заявка", d: "Свържете се с нас по телефон или формата. Отговаряме в рамките на час." },
  { n: "02", t: "Оглед", d: "Безплатно посещение от инженер — оценка, измервания и проектно предложение." },
  { n: "03", t: "Монтаж", d: "Сертифициран екип, чисто работно място, пълно тестване и пускане в експлоатация." },
  { n: "04", t: "Гаранция", d: "До 5 години гаранция и план за сезонна поддръжка с приоритетно реагиране." },
];

const Process = () => (
  <section id="process">
    <div className="container">
      <div className="section-label reveal">
        <span className="num">02</span>
        <div className="title-block">
          <div className="kicker">Процес · Прозрачно от старт до финал</div>
          <h2>Как работим</h2>
        </div>
      </div>
      <div className="process-track">
        {processSteps.map((p, i) => (
          <div className="process-step reveal" data-stagger={i + 1} key={p.n}>
            <div className="step-num">{p.n}</div>
            <h4 className="serif">{p.t}</h4>
            <p>{p.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const stats = [
  { n: 15, suffix: "+", label: "Години", sub: "На пазара от 2009 година" },
  { n: 150, suffix: "+", label: "Проекта", sub: "Завършени обекти в страната" },
  { n: 4.9, suffix: "★", label: "Рейтинг", sub: "1200+ доволни клиенти" },
  { n: 24, suffix: "/7", label: "Поддръжка", sub: "Аварийно реагиране целогодишно" },
];

const useCounter = (target, ref) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!ref.current) return;
    let started = false;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const dur = 1400;
          const t0 = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(target * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [target]);
  return val;
};

const StatCard = ({ s, i }) => {
  const ref = React.useRef(null);
  const v = useCounter(s.n, ref);
  const isFloat = !Number.isInteger(s.n);
  return (
    <div className="stat-card reveal" data-stagger={i + 1} ref={ref}>
      <div className="stat-num">
        {isFloat ? v.toFixed(1) : Math.round(v)}
        <span className="unit">{s.suffix}</span>
      </div>
      <div className="stat-label">
        <strong>{s.label}</strong>
        {s.sub}
      </div>
    </div>
  );
};

const Why = () => (
  <section className="why-section">
    <div className="container">
      <div className="why-grid">
        <div className="why-headline reveal">
          <div className="eyebrow" style={{ marginBottom: 24 }}>· Доверие в цифри</div>
          <h2 className="serif">
            Защо клиентите<br />ни <em style={{ color: "var(--accent-warm)" }}>избират.</em>
          </h2>
          <p>
            Не правим компромиси с качеството на оборудването или
            квалификацията на екипа. Всеки обект — независимо от мащаба —
            получава еднакво внимание към детайла.
          </p>
          <ul className="why-feature-list">
            <li>Сертифицирани техници по EN 378 и Регламент (ЕС) 517/2014</li>
            <li>Оригинални части и оторизирано обслужване</li>
            <li>Прозрачно ценообразуване, без скрити такси</li>
            <li>Документация и енергиен паспорт за всеки обект</li>
          </ul>
        </div>
        <div className="stats-grid">
          {stats.map((s, i) => <StatCard s={s} i={i} key={s.label} />)}
        </div>
      </div>
    </div>
  </section>
);

const reviews = [
  { quote: "Изключително професионално отношение от първия контакт до финалния монтаж. Препоръчах ги на половината квартал.", name: "Мария Петкова", meta: "София · Лозенец" },
  { quote: "Монтираха VRF система в офиса ни за два дни — без прекъсване на работата. Енергийното потребление падна с 38%.", name: "Стоян Иванов", meta: "Solidify · Пловдив" },
  { quote: "Спешен ремонт в неделя в 22ч. Дойдоха за 40 минути и оправиха проблема. Сервиз от друго ниво.", name: "Десислава Тодорова", meta: "Варна" },
  { quote: "Прецизна работа, чисто работно място, спазени срокове. Комуникацията на инженерите беше изрядна.", name: "Александър Йорданов", meta: "Архитект · София" },
  { quote: "От оглед до монтаж — точно 9 дни. Дадоха честна препоръка за по-евтин модел вместо най-скъпия.", name: "Веселина Маринова", meta: "Бургас" },
  { quote: "Поддържат климатиците на всичките ни 4 ресторанта. За 3 години — нула проблеми.", name: "Николай Стоянов", meta: "Hotel & Restaurant Group" },
  { quote: "Рекуперативната система промени напълно усещането в апартамента. Свеж въздух без шум.", name: "Елена Димитрова", meta: "Витоша · София" },
  { quote: "Намериха решение за нестандартен таван без да правим компромис с естетиката. Висок професионализъм.", name: "Петър Костов", meta: "Интериорен дизайнер" },
  { quote: "Инсталираха термопомпа за къщата ни. Сметката за ток падна почти наполовина още първата зима.", name: "Радостина Илиева", meta: "Пловдив" },
];

const initials = (name) => name.split(" ").map((p) => p[0]).slice(0, 2).join("");

const ReviewCard = ({ r }) => (
  <div className="t-card">
    <p className="t-quote">{r.quote}</p>
    <div className="t-author">
      <div className="t-avatar">{initials(r.name)}</div>
      <div>
        <div className="t-name">{r.name}</div>
        <div className="t-meta">{r.meta}</div>
      </div>
      <div className="t-stars">★★★★★</div>
    </div>
  </div>
);

const TestimonialsColumn = ({ items, duration = 30, delay = 0 }) => (
  <div className="t-col-mask">
    <div
      className="t-col-track"
      style={{ animationDuration: `${duration}s`, animationDelay: `-${delay}s` }}
    >
      {[0, 1].map((dup) => (
        <React.Fragment key={dup}>
          {items.map((r, i) => <ReviewCard key={`${dup}-${i}`} r={r} />)}
        </React.Fragment>
      ))}
    </div>
  </div>
);

const Reviews = () => {
  const col1 = reviews.slice(0, 3);
  const col2 = reviews.slice(3, 6);
  const col3 = reviews.slice(6, 9);
  return (
  <section id="reviews">
    <div className="container">
      <div className="reviews-header">
        <div className="section-label reveal" style={{ marginBottom: 0 }}>
          <span className="num">03</span>
          <div className="title-block">
            <div className="kicker">Отзиви · Реални клиенти</div>
            <h2>Какво казват <em style={{ color: "var(--accent-cool)" }}>клиентите</em></h2>
          </div>
        </div>
        <div className="google-badge reveal">
          <div>
            <div className="stars">★★★★★</div>
            <div className="meta">Google Reviews · 127</div>
          </div>
          <div className="rating serif">4.9</div>
        </div>
      </div>
      <div className="t-grid">
        <TestimonialsColumn items={col1} duration={32} delay={0} />
        <TestimonialsColumn items={col2} duration={40} delay={6} />
        <TestimonialsColumn items={col3} duration={36} delay={3} />
      </div>
    </div>
  </section>
  );
};

const brands = [
  { n: "Daikin", s: "Japan · 1924" },
  { n: "Mitsubishi", s: "Electric" },
  { n: "Toshiba", s: "Carrier" },
  { n: "Panasonic", s: "Heatpumps" },
  { n: "LG", s: "Therma V" },
  { n: "Vaillant", s: "Germany" },
];

const Brands = () => (
  <section className="brands-strip">
    <div className="container">
      <div className="label">Оторизиран партньор на водещи производители</div>
      <div className="brands-row">
        {brands.map((b) => (
          <div className="brand-logo" key={b.n}>
            {b.n}
            <span className="sub">{b.s}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const CtaBanner = () => (
  <section>
    <div className="container">
      <div className="cta-banner-inner reveal">
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>· Готови за следваща стъпка</div>
          <h2 className="serif">
            Готови за <em style={{ color: "var(--accent-warm)" }}>комфорт</em>?
          </h2>
          <p>
            Безплатен оглед в рамките на 48 часа. Без ангажимент,
            без скрити условия — само експертна оценка.
          </p>
        </div>
        <div className="cta-banner-right">
          <div className="cta-phone-label">Обадете се сега</div>
          <a href="tel:+35928901234" className="cta-phone">+359 2 890 1234</a>
          <a href="kontakti.html" className="btn btn-primary">
            Изпрати запитване <IconArrow size={14} />
          </a>
        </div>
      </div>
    </div>
  </section>
);

const faqs = [
  { q: "Колко време отнема монтажът на климатик?",
    a: "Стандартен монтаж на сплит система се извършва за 3–5 часа. Мулти-сплит и VRF системи отнемат 1–3 дни в зависимост от обекта. Преди монтажа извършваме оглед и ви даваме точна времева рамка." },
  { q: "Каква гаранция предоставяте?",
    a: "Предлагаме до 5 години производствена гаранция върху оборудването и 2 години гаранция върху монтажа. С абонаментен план за поддръжка гаранцията може да бъде удължена до 7 години." },
  { q: "Обслужвате ли извън София?",
    a: "Имаме офиси и сервизни екипи в София, Пловдив, Варна и Бургас. Покриваме цялата страна, като за по-отдалечени обекти координираме посещенията предварително." },
  { q: "Колко струва монтажът?",
    a: "Цената зависи от модела, сложността и спецификите на обекта. Огледът и проектното предложение са винаги безплатни. Работим с прозрачна спецификация — без скрити такси." },
  { q: "Кога трябва да се профилактира климатикът?",
    a: "Препоръчваме сезонна профилактика два пъти годишно — преди летния и преди зимния сезон. За търговски обекти с интензивна употреба интервалът е 3–4 месеца." },
  { q: "Какво включва безплатният оглед?",
    a: "Посещение от инженер, измервания на помещенията, изчисление на необходимата мощност, обсъждане на варианти, писмена оферта с пълна спецификация и срокове за монтаж." },
  { q: "Работите ли с фирмени клиенти?",
    a: "Да — обслужваме офис сгради, хотели, ресторанти и индустриални обекти. Издаваме всички необходими документи, работим по график и предлагаме корпоративни абонаментни планове." },
  { q: "Как да избера подходящ климатик за помещението?",
    a: "Мощността се изчислява според обема, изложението, изолацията и източниците на топлина. Не разчитайте на онлайн калкулатори — нашият оглед взема под внимание всички фактори за оптимално решение." },
];

const FaqItem = ({ item, open, onToggle, idx }) => {
  const ref = React.useRef(null);
  return (
    <div className={"faq-item " + (open ? "open" : "")}>
      <button className="faq-q" onClick={onToggle}>
        <span>{item.q}</span>
        <span className="toggle">{open ? "−" : "+"}</span>
      </button>
      <div className="faq-a">
        <div className="faq-a-inner-wrap">
          <div className="faq-a-inner" ref={ref}>{item.a}</div>
        </div>
      </div>
    </div>
  );
};

const Faq = () => {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-label reveal">
          <span className="num">04</span>
          <div className="title-block">
            <div className="kicker">Въпроси · Често търсени отговори</div>
            <h2>Често задавани въпроси</h2>
          </div>
        </div>
        <div className="faq-wrap">
          {faqs.map((f, i) => (
            <FaqItem
              key={i}
              item={f}
              idx={i}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="site-footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-col">
          <a href="index.html" className="logo">
            <span className="logo-mark"></span>
            <span className="logo-text">
              Atria<small>Climate Systems</small>
            </span>
          </a>
          <p className="footer-about-text">
            Премиум климатични решения за дома и бизнеса в България.
            Проектиране, монтаж и сервиз от един екип — от 2009 година.
          </p>
          <div className="socials">
            <a href="#" aria-label="Facebook"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M8 13 V 7 h 2 l 0.4 -2.5 H 8 V 3 c 0 -0.7 0.2 -1.2 1.2 -1.2 H 10.5 V 0 c -0.3 0 -1 -0.1 -1.8 -0.1 c -1.8 0 -3 1.1 -3 3 v 1.6 H 4 V 7 h 1.7 V 13 z"/></svg></a>
            <a href="#" aria-label="Instagram"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="1.5" y="1.5" width="11" height="11" rx="3" /><circle cx="7" cy="7" r="2.5" /><circle cx="10" cy="4" r="0.6" fill="currentColor" /></svg></a>
            <a href="#" aria-label="LinkedIn"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="1.5" y="1.5" width="11" height="11" rx="1" /><line x1="4" y1="6" x2="4" y2="10" /><circle cx="4" cy="4" r="0.5" fill="currentColor" /><path d="M7 10 V 6 M 7 7.5 c 0 -1 1 -1.5 2 -1.5 c 1 0 1.5 0.7 1.5 1.8 V 10" /></svg></a>
          </div>
        </div>
        <div className="footer-col">
          <h5>Навигация</h5>
          <ul>
            <li><a href="index.html">Начало</a></li>
            <li><a href="uslugi.html">Услуги</a></li>
            <li><a href="za-nas.html">За Нас</a></li>
            <li><a href="kontakti.html">Контакти</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Услуги</h5>
          <ul>
            <li><a href="uslugi.html#klimatizaciya">Климатизация</a></li>
            <li><a href="uslugi.html#otoplenie">Отопление</a></li>
            <li><a href="uslugi.html#ventilaciya">Вентилация</a></li>
            <li><a href="uslugi.html#vrf">VRF системи</a></li>
            <li><a href="uslugi.html#poddrazhka">Поддръжка</a></li>
            <li><a href="uslugi.html#remont">Ремонт</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Контакти</h5>
          <div className="footer-contact">
            <div className="field">
              <strong>Офис София</strong>
              ул. Тинтява 17, ет. 3<br />
              София 1113
            </div>
            <div className="field">
              <strong>Телефон</strong>
              +359 2 890 1234<br />
              +359 888 234 567
            </div>
            <div className="field">
              <strong>Работно време</strong>
              Пон–Пет · 08:00–18:00<br />
              Аварийно · 24/7
            </div>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Atria Climate Systems · ЕИК 200456789</div>
        <div style={{ display: "flex", gap: 24 }}>
          <a href="#">Поверителност</a>
          <a href="#">Общи условия</a>
          <a href="#">Бисквитки</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Header, Hero, Services, Process, Why, Reviews, Brands, CtaBanner, Faq, Footer,
});