// Subpage components: Services, About, Contact

const Breadcrumb = ({ trail }) => (
  <div className="breadcrumb">
    {trail.map((t, i) => (
      <React.Fragment key={i}>
        {t.href ? <a href={t.href}>{t.label}</a> : <span className="current">{t.label}</span>}
        {i < trail.length - 1 && <span className="sep">/</span>}
      </React.Fragment>
    ))}
  </div>
);

const SubHero = ({ num, breadcrumb, title, subtitle }) => (
  <section className="subpage-hero bg-noise">
    <div className="hero-bg"></div>
    <div className="num-bg">{num}</div>
    <div className="container">
      <Breadcrumb trail={breadcrumb} />
      <h1 className="serif subpage-title reveal">{title}</h1>
      <p className="subpage-sub reveal" data-stagger="1">{subtitle}</p>
    </div>
  </section>
);

const BottomCta = ({ title, sub, btnLabel = "Свържете се с нас" }) => (
  <section>
    <div className="container">
      <div className="cta-banner-inner reveal">
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>· Свържете се</div>
          <h2 className="serif">{title}</h2>
          <p>{sub}</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">{btnLabel} <IconArrow size={14} /></a>
        </div>
      </div>
    </div>
  </section>
);

/* ============== SERVICES PAGE ============== */
const SERVICE_DETAILS = [
  { id: "klimatizaciya", num: "01", icon: IconClimate, warm: false, title: "Климатизация",
    img: "images/air-conditioning-services.png",
    tag: "Cooling · Split & Multi-split",
    desc: "Доставка и монтаж на климатични системи за жилищни и търговски обекти. Работим с водещи марки — Daikin, Toshiba, Mitsubishi Electric — за да осигурим максимална ефективност и дълготрайност.",
    list: ["Безплатен оглед и замерване", "Професионален монтаж с гаранция", "Пускане и настройка", "Инструктаж за ползване", "Гаранционно обслужване"] },
  { id: "otoplenie", num: "02", icon: IconHeating, warm: true, title: "Отоплителни системи",
    img: "images/heat-pump-underfloor heating-services.png",
    tag: "Heating · Heat pumps",
    desc: "Проектиране и инсталация на отоплителни решения — от подово отопление до термопомпи. Създаваме ефективни системи, които намаляват разходите за енергия и поддържат оптимален комфорт целогодишно.",
    list: ["Термопомпи въздух-вода", "Подово отопление", "Конвектори и радиатори", "Комбинирани системи", "Енергиен одит и консултация"] },
  { id: "ventilaciya", num: "03", icon: IconVent, warm: false, title: "Вентилационни системи",
    img: "images/ventilation-system-services.png",
    tag: "Ventilation · Recovery",
    desc: "Проектиране и монтаж на вентилационни системи за чист въздух и здравословна среда. От домашни рекуператори до индустриални вентилационни решения за големи обекти.",
    list: ["Приточно-смукателна вентилация", "Рекуперация на топлина", "Канални системи", "Филтрация и пречистване", "Автоматизация и контрол"] },
  { id: "vrf", num: "04", icon: IconVRF, warm: true, title: "VRF системи",
    img: "images/vrf-system-services.png",
    tag: "VRF · Multizone",
    desc: "Мултизонални VRF системи за сгради с множество помещения — хотели, офис сгради, търговски центрове. Централизирано управление с индивидуален контрол на температурата за всяка зона.",
    list: ["Проектиране по BDS/EN стандарти", "Доставка и монтаж на VRF блокове", "Тръбна разводка и окабеляване", "Програмиране и настройка", "Обучение на персонала"] },
  { id: "poddrazhka", num: "05", icon: IconMaintenance, warm: false, title: "Поддръжка и профилактика",
    img: "images/service-profilactic-services.png",
    tag: "Maintenance · Plans",
    desc: "Редовната профилактика удължава живота на системата и намалява разходите. Предлагаме абонаментни планове за жилищни и бизнес клиенти с приоритетно обслужване.",
    list: ["Почистване на филтри и изпарители", "Проверка на хладилен агент", "Тест на електрическата система", "Почистване на дренажа", "Годишен отчет за състоянието"] },
  { id: "remont", num: "06", icon: IconRepair, warm: true, title: "Ремонт и аварийно обслужване",
    img: "images/emergency-service-services.png",
    tag: "Repair · 24/7",
    desc: "Бърза реакция при повреда — диагностика и ремонт в рамките на 24 часа. Нашият екип е оборудван за работа с всички основни марки и типове системи.",
    list: ["Диагностика и отстраняване на повреди", "Смяна на компресор", "Допълване на хладилен агент", "Ремонт на електронни платки", "24/7 спешна линия"] },
];

const ServicePillNav = () => {
  const [active, setActive] = React.useState("klimatizaciya");
  React.useEffect(() => {
    const onScroll = () => {
      let cur = SERVICE_DETAILS[0].id;
      for (const s of SERVICE_DETAILS) {
        const el = document.getElementById(s.id);
        if (el && el.getBoundingClientRect().top < 200) cur = s.id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className="pill-nav">
      <div className="container">
        <div className="pill-row">
          {SERVICE_DETAILS.map((s) => (
            <a key={s.id} href={`#${s.id}`} className={"pill " + (active === s.id ? "active" : "")}>{s.title.split(" ")[0]}</a>
          ))}
        </div>
      </div>
    </div>
  );
};

const ServiceBlock = ({ s, i }) => {
  const Ic = s.icon;
  return (
    <div className={"svc-block " + (i % 2 ? "flip " : "") + (s.warm ? "warm" : "")} id={s.id}>
      <div className="svc-num">{s.num}</div>
      <div className="svc-text reveal">
        <div className="icon-tag"><Ic size={18} stroke={1.4} /> {s.tag}</div>
        <h3 className="serif">{s.title}</h3>
        <p className="svc-desc">{s.desc}</p>
        <div className="includes-title">Какво включва</div>
        <ul className="includes">
          {s.list.map((it, j) => (
            <li key={j}><span className="check"><IconCheck size={14} /></span>{it}</li>
          ))}
        </ul>
        <a href="kontakti.html" className="btn btn-primary">Поискай оферта <IconArrow size={14} /></a>
      </div>
      <div className="svc-img reveal" data-stagger="1">
        <img src={s.img} alt={s.title} width="800" height="600" loading={i === 0 ? "eager" : "lazy"} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
    </div>
  );
};

const ServicesPage = () => (
  <>
    <SubHero num="01" breadcrumb={[{ href: "index.html", label: "Начало" }, { label: "Услуги" }]}
      title="Нашите услуги"
      subtitle="Пълен спектър от климатични решения за дома и бизнеса — от проектиране до сервиз." />
    <ServicePillNav />
    <section style={{ paddingTop: 40 }}>
      <div className="container">
        {SERVICE_DETAILS.map((s, i) => <ServiceBlock key={s.id} s={s} i={i} />)}
      </div>
    </section>
    <Brands />
    <BottomCta title={<>Не сте сигурни коя услуга<br />ви <em style={{ color: "var(--accent-warm)" }}>трябва</em>?</>}
      sub="Обадете се за безплатна консултация — ще ви помогнем да изберете оптималното решение." />
  </>
);

/* ============== ABOUT DATA ============== */
const TIMELINE = [
  { y: "2009", t: "Основаване на Atria Climate Systems в София. Започваме с монтаж на битови климатични системи." },
  { y: "2013", t: "Разширяване на услугите с отоплителни и вентилационни системи. Получаване на ISO 9001 сертификация." },
  { y: "2017", t: "Първи VRF проект за хотелски комплекс. Над 500 завършени обекта." },
  { y: "2021", t: "Оторизиран партньор на Daikin и Toshiba. Екипът нараства до 15+ техници." },
  { y: "2025", t: "150+ завършени проекта, 1200+ доволни клиенти, 4.9★ Google рейтинг, лидер в premium HVAC сегмента." },
];

const TEAM = [
  { n: "Александър Н.", r: "Основател и управител", b: "15 години в HVAC индустрията, начело на всеки проект.", img: "images/t1-about.png" },
  { n: "Мария К.", r: "Главен инженер", b: "Проектира системи, които съчетават ефективност с елегантност.", img: "images/t2-about.png" },
  { n: "Иван Д.", r: "Технически директор", b: "Следи всеки монтаж да е по стандарт, без компромиси.", img: "images/t3-about.png" },
  { n: "Елена П.", r: "Мениджър обслужване", b: "Първата точка на контакт — грижи се за всеки клиент.", img: "images/t4-about.png" },
  { n: "Георги С.", r: "Водещ техник", b: "10+ години опит в монтаж и сервиз на Daikin системи.", img: "images/t5-about.png" },
  { n: "Стефан В.", r: "VRF специалист", b: "Експерт по мултизонални системи за големи обекти.", img: "images/t6-about.png" },
];

const ABOUT_SERVICES = [
  { icon: IconClimate, title: "Климатизация", desc: "Доставка и монтаж на климатични системи за жилищни и търговски обекти с водещи марки.", warm: false },
  { icon: IconHeating, title: "Отопление", desc: "Проектиране и инсталация на отоплителни решения — от подово отопление до термопомпи.", warm: true },
  { icon: IconVent, title: "Вентилация", desc: "Вентилационни системи за чист въздух и здравословна среда в дома и бизнеса.", warm: false },
  { icon: IconMaintenance, title: "Поддръжка", desc: "Абонаментни планове за редовна профилактика и удължаване живота на системата.", warm: true },
  { icon: IconRepair, title: "Ремонт", desc: "Бърза диагностика и ремонт в рамките на 24 часа. 24/7 спешна линия.", warm: false },
  { icon: IconVRF, title: "VRF Системи", desc: "Мултизонални решения за хотели, офиси и търговски центрове.", warm: true },
];

const ABOUT_STATS = [
  { value: "150+", label: "Проекта Завършени" },
  { value: "1200+", label: "Доволни Клиенти" },
  { value: "15+", label: "Години Опит" },
  { value: "98%", label: "Удовлетвореност" },
];

const CERTS = ["ISO 9001", "ISO 14001", "F-Gas", "EN 378"];
const PARTNERS = ["Daikin", "Toshiba", "Mitsubishi", "Fujitsu"];

const VALUES_DATA = [
  { title: "Качество", desc: "Всеки монтаж е по стандарт. Без компромиси с материалите, без бързане.", warm: false, Icon: IconCheck },
  { title: "Прозрачност", desc: "Ясна оферта, без скрити разходи. Знаете точно какво получавате.", warm: true, Icon: IconShield },
  { title: "Иновация", desc: "Следим новостите в индустрията и предлагаме най-ефективните решения.", warm: false, Icon: IconVent },
  { title: "Отговорност", desc: "Стоим зад работата си с реална гаранция и бърз сервиз.", warm: true, Icon: IconMaintenance },
];

/* ============== ABOUT COMPONENTS ============== */

const AboutServiceItem = ({ icon: Ic, title, desc, warm, direction }) => (
  <div className={"about-svc-item reveal " + (warm ? "warm" : "")}>
    <div className="about-svc-head">
      <div className={"about-svc-icon " + (warm ? "warm" : "")}>
        <Ic size={24} stroke={1.4} />
      </div>
      <h3>{title}</h3>
    </div>
    <p>{desc}</p>
  </div>
);

const AboutHeroSection = () => (
  <section className="about-hero-section">
    <div className="container">
      <div className="section-label reveal">
        <span className="num">01</span>
        <div className="title-block">
          <div className="kicker">Нашата Компания</div>
          <h2>Какво правим</h2>
        </div>
      </div>
      <p className="about-intro reveal">Ние сме отдаден екип от инженери и техници, специализирани в проектирането и инсталацията на климатични системи. С внимание към всеки детайл и ангажимент към съвършенството, превръщаме пространствата в комфортни и ефективни среди.</p>

      <div className="about-grid-3col">
        <div className="about-col-left">
          {ABOUT_SERVICES.filter((_, i) => i < 3).map((s, i) => (
            <AboutServiceItem key={i} {...s} direction="left" />
          ))}
        </div>

        <div className="about-center-img reveal">
          <div className="about-img-frame">
            <img src="images/central-about.png" alt="Atria Climate Systems" width="600" height="800" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            <a href="uslugi.html" className="about-portfolio-btn">Нашите Услуги <IconArrow size={14} /></a>
          </div>
        </div>

        <div className="about-col-right">
          {ABOUT_SERVICES.filter((_, i) => i >= 3).map((s, i) => (
            <AboutServiceItem key={i} {...s} direction="right" />
          ))}
        </div>
      </div>

      <div className="about-stats-row reveal">
        {ABOUT_STATS.map((s, i) => (
          <div className="about-stat-card reveal" key={i} data-stagger={i + 1}>
            <div className="about-stat-value serif">{s.value}</div>
            <div className="about-stat-label">{s.label}</div>
            <div className="about-stat-bar"></div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const TeamShowcase = () => {
  const [hoveredId, setHoveredId] = React.useState(null);

  const col1 = TEAM.filter((_, i) => i % 3 === 0);
  const col2 = TEAM.filter((_, i) => i % 3 === 1);
  const col3 = TEAM.filter((_, i) => i % 3 === 2);

  const PhotoCard = ({ member, idx, colClass }) => {
    const isActive = hoveredId === idx;
    const isDimmed = hoveredId !== null && !isActive;
    const initials = member.n.split(" ").map(s => s[0]).join("");
    return (
      <div
        className={"team-photo-card " + colClass + (isDimmed ? " dimmed" : "") + (isActive ? " active" : "")}
        onMouseEnter={() => setHoveredId(idx)}
        onMouseLeave={() => setHoveredId(null)}
      >
        {member.img
          ? <img src={member.img} alt={member.n} width="400" height="400" loading="lazy" />
          : <div className="team-photo-initials"><span className="serif">{initials}</span></div>
        }
      </div>
    );
  };

  const MemberRow = ({ member, idx }) => {
    const isActive = hoveredId === idx;
    const isDimmed = hoveredId !== null && !isActive;
    return (
      <div
        className={"team-member-row" + (isDimmed ? " dimmed" : "") + (isActive ? " active" : "")}
        onMouseEnter={() => setHoveredId(idx)}
        onMouseLeave={() => setHoveredId(null)}
      >
        <div className="team-member-name">
          <span className={"team-dot" + (isActive ? " active" : "")}></span>
          <span className="name">{member.n}</span>
        </div>
        <div className="team-member-role">{member.r}</div>
      </div>
    );
  };

  return (
    <section>
      <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="team-showcase reveal">
          <div className="team-photo-grid">
            <div className="team-col">
              {col1.map((m, i) => <PhotoCard key={i} member={m} idx={i * 3} colClass="col-a" />)}
            </div>
            <div className="team-col team-col-offset-1">
              {col2.map((m, i) => <PhotoCard key={i} member={m} idx={i * 3 + 1} colClass="col-b" />)}
            </div>
            <div className="team-col team-col-offset-2">
              {col3.map((m, i) => <PhotoCard key={i} member={m} idx={i * 3 + 2} colClass="col-c" />)}
            </div>
          </div>
          <div className="team-name-list">
            {TEAM.map((m, i) => <MemberRow key={i} member={m} idx={i} />)}
          </div>
        </div>
      </div>
    </section>
  );
};

const LogoCloud = () => (
  <section>
    <div className="container">
      <div className="section-label reveal">
        <span className="num">03</span>
        <div className="title-block">
          <div className="kicker">Сертификати · Стандарти</div>
          <h2>Сертификати и партньори</h2>
        </div>
      </div>
      <div className="cert-grid reveal">
        {CERTS.map((c) => (
          <div className="cert-card" key={c}><span>{c}</span></div>
        ))}
      </div>
      <div className="cert-grid reveal" style={{ marginTop: "16px" }}>
        {PARTNERS.map((p) => (
          <div className="cert-card" key={p}><span>{p}</span></div>
        ))}
      </div>
    </div>
  </section>
);

const ValuesSection = () => (
  <section>
    <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="values-cards-grid">
        {VALUES_DATA.map((v, i) => (
          <div className={"values-card reveal " + (v.warm ? "warm" : "")} key={i} data-stagger={i + 1}>
            <div className="values-card-content">
              <h3 className="serif">{v.title}</h3>
              <p>{v.desc}</p>
            </div>
            <div className="values-card-icon-bg">
              <v.Icon size={80} stroke={0.8} />
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const AboutPage = () => (
  <>
    <SubHero num="02" breadcrumb={[{ href: "index.html", label: "Начало" }, { label: "За Нас" }]}
      title="За нас"
      subtitle="15+ години опит в проектирането и инсталацията на климатични системи в България." />
    <AboutHeroSection />
    <TeamShowcase />
    <LogoCloud />
    <ValuesSection />
    <BottomCta title={<>Искате да работите <em style={{ color: "var(--accent-cool)" }}>с нас</em>?</>}
      sub="Свържете се за безплатна консултация за вашия проект." />
  </>
);

/* ============== CONTACT PAGE ============== */

const CONTACT_INFO = [
  { icon: IconPhone, label: "Телефон", value: "+359 2 890 1234", href: "tel:+35928901234", warm: false },
  { icon: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="3" width="12" height="8" rx="1.5"/><path d="M1 4 l6 4 6-4"/></svg>, label: "Имейл", value: "info@atria-climate.bg", href: "mailto:info@atria-climate.bg", warm: false },
  { icon: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M7 1 C4 1 2 3.5 2 6 c0 4 5 7 5 7 s5-3 5-7 C12 3.5 10 1 7 1z"/><circle cx="7" cy="6" r="1.5"/></svg>, label: "Офис", value: "ул. Тинтява 17, ет. 3, София 1113", href: null, warm: true },
  { icon: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="7" cy="7" r="6"/><path d="M7 3 v4 l2.5 2.5"/></svg>, label: "Работно време", value: "Пон–Пет: 08:00–18:00 · Съб: 09:00–14:00", href: null, warm: true },
];

const ContactPage = () => {
  const [sent, setSent] = React.useState(false);

  return (
    <>
      <SubHero num="03" breadcrumb={[{ href: "index.html", label: "Начало" }, { label: "Контакти" }]}
        title="Свържете се с нас"
        subtitle="Отговаряме в рамките на 1 час в работно време. За спешни случаи — обадете се директно." />

      {/* Emergency strip */}
      <div className="emergency-strip">
        <div className="container">
          <div className="row">
            <span className="label">Спешен ремонт?</span>
            <a href="tel:+35928901234" className="serif">+359 2 890 1234</a>
            <span>· 24/7 на ваше разположение</span>
          </div>
        </div>
      </div>

      {/* Contact Card */}
      <section>
        <div className="container">
          <div className="contact-card reveal">
            {/* Left: Info */}
            <div className="cc-info">
              <h2 className="serif cc-title">Свържете се<br />с нас</h2>
              <p className="cc-desc">Имате въпрос за нашите услуги или нуждаете се от помощ? Попълнете формата и ние ще се свържем с вас. Стараем се да отговорим в рамките на 1 работен час.</p>

              <div className="cc-contact-grid">
                {CONTACT_INFO.map((info, i) => {
                  const Ic = info.icon;
                  return (
                    <div className={"cc-contact-item" + (info.warm ? " warm" : "")} key={i}>
                      <div className={"cc-contact-icon" + (info.warm ? " warm" : "")}>
                        <Ic size={14} />
                      </div>
                      <div>
                        <div className="cc-contact-label">{info.label}</div>
                        {info.href
                          ? <a href={info.href} className="cc-contact-value">{info.value}</a>
                          : <div className="cc-contact-value">{info.value}</div>
                        }
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Map placeholder */}
              <div className="cc-map-area">
                <span>Google Maps</span>
              </div>
            </div>

            {/* Right: Form */}
            <div className="cc-form-side">
              <form className="cc-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <div className="cc-field">
                  <label>Вашето име</label>
                  <input type="text" required placeholder="Иван Иванов" />
                </div>
                <div className="cc-field">
                  <label>Имейл</label>
                  <input type="email" required placeholder="ivan@example.com" />
                </div>
                <div className="cc-field">
                  <label>Телефон</label>
                  <input type="tel" required placeholder="+359 ..." />
                </div>
                <div className="cc-field">
                  <label>Тип услуга</label>
                  <select defaultValue="">
                    <option value="" disabled>Изберете услуга</option>
                    <option>Климатизация</option>
                    <option>Отопление</option>
                    <option>Вентилация</option>
                    <option>VRF системи</option>
                    <option>Поддръжка</option>
                    <option>Ремонт</option>
                    <option>Друго</option>
                  </select>
                </div>
                <div className="cc-field">
                  <label>Съобщение</label>
                  <textarea rows="4" placeholder="Разкажете накратко за вашия проект..."></textarea>
                </div>
                <button type="submit" className={"cc-submit" + (sent ? " sent" : "")}>
                  {sent ? "✓ Благодарим! Ще се свържем скоро." : "Изпрати запитване"}
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      <BottomCta
        title={<>Предпочитате да <em style={{ color: "var(--accent-cool)" }}>говорите</em>?</>}
        sub="Обадете се директно и ще ви помогнем веднага."
        btnLabel="Обади се сега" />
    </>
  );
};

Object.assign(window, { ServicesPage, AboutPage, ContactPage, SubHero, BottomCta });