/* sections-b.jsx — Houses, Advantages, Location, Gallery, FAQ, Form, Footer */
const { useState: useStateB, useRef: useRefB, useEffect: useEffectB } = React;

const SHEETS_URL = "https://script.google.com/macros/s/AKfycbzDXsWykixh3-HAJqDOUqmRtjtuA8Xr0jXVrhztNif5UiqT5Q9u0POzsxUh-XRnfq2f/exec";

function Houses() {
  const specs = [
    ["ruler", "Загальна площа", "76", "м²"],
    ["deck", "Простора тераса", "18", "м²"],
    ["sofa", "Кухня-вітальня", "1", "відкритий простір"],
    ["bed", "Окремі спальні", "2", "кімнати"],
  ];
  return (
    <section className="section bg-vanilla" id="houses">
      <div className="wrap house">
        <div className="reveal">
          <span className="kicker">Будинки</span>
          <h2 className="h-lg" style={{ marginTop: 18 }}>Продумане<br />планування</h2>
          <p className="lead" style={{ marginTop: 18 }}>
            Ми проаналізували попит і різні сценарії використання нерухомості — і створили формат,
            що має стабільно високий попит серед гостей цілий рік.
          </p>
          <ul className="specs">
            {specs.map(([ic, k, v, u]) => (
              <li key={k}>
                <span className="k"><Icon name={ic} size={22} /> {k}</span>
                <span className="v">{v} <small>{u}</small></span>
              </li>
            ))}
          </ul>
          <p className="muted" style={{ fontSize: 16 }}>
            Конструкторська модель будинку дозволяє адаптувати площу та опції під запит інвестора.
          </p>
        </div>
        <div className="house__media reveal" data-d="2">
          <div className="big"><img src={R("interiorBedroom","assets/interior-bedroom.jpg")} alt="Спальня з панорамою Карпат" /></div>
          <div className="sm"><img src={R("interiorLiving","assets/interior-living.jpg")} alt="Вітальня-їдальня з виглядом на ліс" /></div>
          <div className="sm"><img src={R("interiorBath","assets/interior-bath.jpg")} alt="Ванна кімната в природних тонах" /></div>
        </div>
      </div>
    </section>
  );
}

function Advantages() {
  const cards = [
    ["mountain", "Локація з попитом цілий рік", "Тиша лісу поєднується з близькістю до сучасної інфраструктури — 5–15 хв до всього необхідного."],
    ["phone", "Безконтактний сервіс", "Усі послуги для гостей доступні через мобільний додаток — зручно та сучасно."],
    ["coins", "Пулова система доходу", "Прибуток від оренди всіх будинків об'єднується та рівномірно розподіляється між інвесторами за прозорими правилами."],
    ["shield", "Гарантії забудовника", "Незмінність ціни з моменту підписання договору та гнучкий графік оплати під 0% на весь час будівництва."],
  ];
  return (
    <section className="section bg-cream" id="invest">
      <div className="wrap">
        <div className="shead reveal">
          <span className="kicker">Чому «Теплий»</span>
          <h2 className="h-lg" style={{ marginTop: 16 }}>Керований дохідний продукт,<br />підтверджений нерухомістю</h2>
          <p className="lead">
            Ми — забудовник із власною керуючою компанією. Створюємо теплий відпочинок «як удома»
            з рівнем готельного сервісу, а для інвесторів — повністю керований дохідний продукт.
          </p>
        </div>
        <div className="adv-grid" style={{ marginTop: 50 }}>
          {cards.map(([ic, t, d], i) => (
            <div className="acard reveal" data-d={(i % 2) + 1} key={t}>
              <div className="acard__ico"><Icon name={ic} size={28} /></div>
              <div><h3>{t}</h3><p>{d}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Location() {
  const chips = [
    ["pin", "Яремче, вул. Довбуша"],
    ["road", "5–15 хв до інфраструктури"],
    ["mountain", "Краєвиди Карпат"],
    ["tree", "Тиша смерекового лісу"],
  ];
  return (
    <section className="section bg-vanilla">
      <div className="wrap loc">
        <div className="reveal">
          <span className="kicker">Локація</span>
          <h2 className="h-lg" style={{ marginTop: 16 }}>Яремче — перлина&nbsp;Карпат</h2>
          <p className="lead" style={{ marginTop: 18 }}>
            Місце, що поєднує гірську природу, автентику та комфорт. Для тих, хто шукає спокій,
            традиції та активний відпочинок у будь-яку пору року.
          </p>
          <div className="loc__chips">
            {chips.map(([ic, t]) => <span className="chip" key={t}><Icon name={ic} size={18} /> {t}</span>)}
          </div>
          <a className="btn btn--ghost" style={{ marginTop: 28 }} href="https://maps.google.com/?q=Яремче+вул+Довбуша" target="_blank" rel="noreferrer">
            Прокласти маршрут <Icon name="arrow" size={18} className="arrow" />
          </a>
        </div>
        <div className="loc__map reveal" data-d="2">
          <svg className="loc__topo" viewBox="0 0 600 460" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
            <defs>
              <linearGradient id="mapg" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="#E7E0CC" /><stop offset="1" stopColor="#D8DCC4" />
              </linearGradient>
            </defs>
            <rect width="600" height="460" fill="url(#mapg)" />
            <g fill="none" stroke="#4A5B36" strokeOpacity="0.16" strokeWidth="1.5">
              <path d="M-20 90 C120 60 220 130 320 100 S520 60 640 110" />
              <path d="M-20 140 C120 110 230 180 330 150 S520 110 640 160" />
              <path d="M-20 200 C140 170 240 240 340 205 S520 165 640 215" />
              <path d="M-20 265 C140 235 250 300 350 268 S520 230 640 280" />
              <path d="M-20 330 C150 300 250 365 360 332 S520 295 640 345" />
              <path d="M-20 400 C150 372 260 430 370 398 S520 360 640 410" />
            </g>
            <path d="M70 470 C150 360 180 300 300 250 S470 150 560 40" fill="none" stroke="#6E93B8" strokeOpacity="0.5" strokeWidth="6" strokeLinecap="round" />
            <path d="M40 40 C120 120 200 150 300 220 S430 320 480 470" fill="none" stroke="#E16B28" strokeOpacity="0.55" strokeWidth="3" strokeDasharray="2 9" strokeLinecap="round" />
          </svg>
          <div className="loc__pin">
            <span className="loc__pin-dot"><Icon name="pin" size={22} /></span>
            <span className="loc__pin-label">«Теплий» · Яремче</span>
          </div>
          <a className="loc__open" href="https://maps.google.com/?q=Яремче+вул+Довбуша" target="_blank" rel="noreferrer">Відкрити в Google Maps <Icon name="arrow" size={16} className="arrow" /></a>
        </div>
      </div>
    </section>
  );
}

const GALLERY = [
  [R("cabinMountain","assets/cabin-mountain.jpg"), "Дім із виглядом на гори"],
  [R("cabinBalcony","assets/cabin-balcony.png"), "Краєвид з тераси"],
  [R("cabinFire","assets/cabin-fire.jpg"), "Вечори біля ватри"],
  [R("cabinFamily","assets/cabin-family.jpg"), "Тепло сімейного відпочинку"],
  [R("cabinForest","assets/cabin-forest.png"), "Котеджі серед лісу"],
];

function Gallery() {
  const [current, setCurrent] = useStateB(0);
  const [idx, setIdx] = useStateB(-1);
  const open = idx >= 0;
  const touchX = useRefB(null);
  const N = GALLERY.length;

  const prev = () => setCurrent(c => (c - 1 + N) % N);
  const next = () => setCurrent(c => (c + 1) % N);

  const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touchX.current === null) return;
    const dx = e.changedTouches[0].clientX - touchX.current;
    if (Math.abs(dx) > 45) (dx < 0 ? next : prev)();
    touchX.current = null;
  };

  // Keyboard arrows drive the lightbox when open, otherwise the carousel.
  useEffectB(() => {
    const onKey = (e) => {
      if (open && e.key === "Escape") return setIdx(-1);
      if (e.key === "ArrowRight") open ? setIdx(i => (i + 1) % N) : next();
      if (e.key === "ArrowLeft") open ? setIdx(i => (i - 1 + N) % N) : prev();
    };
    window.addEventListener("keydown", onKey);
    if (open) document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);

  return (
    <section className="section bg-cream" id="gallery">
      <div className="wrap">
        <div className="shead reveal" style={{ marginBottom: 44 }}>
          <span className="kicker">Галерея</span>
          <h2 className="h-lg" style={{ marginTop: 16 }}>Подивіться, де вас&nbsp;чекають</h2>
        </div>
        <div className="carousel reveal">
          <div className="carousel__viewport" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
            <div className="carousel__track" style={{ transform: `translateX(-${current * 100}%)` }}>
              {GALLERY.map(([src, cap], i) => (
                <figure className="carousel__slide" key={i} onClick={() => setIdx(i)}>
                  <img src={src} alt={cap} loading={i <= 1 ? "eager" : "lazy"} draggable="false" />
                  <figcaption className="carousel__cap">{cap}</figcaption>
                  <span className="carousel__zoom" aria-hidden="true"><Icon name="plus" size={20} /></span>
                </figure>
              ))}
            </div>
            <button className="carousel__nav prev" onClick={(e) => { e.stopPropagation(); prev(); }} aria-label="Назад"><Icon name="chevL" size={26} /></button>
            <button className="carousel__nav next" onClick={(e) => { e.stopPropagation(); next(); }} aria-label="Далі"><Icon name="chevR" size={26} /></button>
            <span className="carousel__count">{current + 1} / {N}</span>
          </div>
          <div className="carousel__dots" role="tablist">
            {GALLERY.map((_, i) => (
              <button key={i} className={"carousel__dot" + (i === current ? " active" : "")}
                onClick={() => setCurrent(i)} aria-label={`Слайд ${i + 1}`} aria-selected={i === current} />
            ))}
          </div>
        </div>
      </div>
      <div className={"lightbox" + (open ? " open" : "")} onClick={() => setIdx(-1)}>
        {open && <img src={GALLERY[idx][0]} alt={GALLERY[idx][1]} onClick={(e) => e.stopPropagation()} />}
        <button className="lb-btn lb-close" onClick={() => setIdx(-1)} aria-label="Закрити"><Icon name="close" size={24} /></button>
        <button className="lb-btn lb-prev" onClick={(e) => { e.stopPropagation(); setIdx(i => (i - 1 + N) % N); }} aria-label="Назад"><Icon name="chevL" size={24} /></button>
        <button className="lb-btn lb-next" onClick={(e) => { e.stopPropagation(); setIdx(i => (i + 1) % N); }} aria-label="Далі"><Icon name="chevR" size={24} /></button>
      </div>
    </section>
  );
}

const FAQS = [
  ["Де і коли відбудеться захід?",
    <span>Зустрічаємося в <strong>Яремче, вул. Довбуша</strong>, <strong>27 червня о 12:00</strong> за київським часом. Після реєстрації ми надішлемо всі деталі заходу на вашу електронну пошту — тож вам не доведеться ні про що хвилюватися.</span>],
  ["Що буде на заході?",
    <span>На вас чекає особливий день знайомства з «Теплим» — його концепцією, перевагами та інвестиційним потенціалом. Ми подбали і про зміст, і про атмосферу: фуршет, вино та узвар, DJ-сет, welcome pack для кожного гостя, мольфарка з передбаченнями, фотозони та професійний фотограф. Для комфорту — затишні лаунж-зони з краєвидом на ліс, пледи та парасолі на випадок будь-якої погоди.</span>],
  ["Як запросити колегу?",
    <span>Раді, що ви плануєте відвідати подію разом! Просто надішліть колегам посилання на цей сайт, щоб вони також зареєструвалися. Так ми врахуємо всіх гостей і завчасно підготуємо welcome pack.</span>],
  ["Як дізнатися про «Теплий» більше?",
    <span>На <a href="https://tepliy-yaremcha.com" target="_blank" rel="noreferrer">основному сайті</a> ви знайдете локацію, фінансові розрахунки та прогноз прибутковості, планування будинків і PDF-каталоги. Підписуйтесь на <a href="https://www.instagram.com/tepliy.yaremche?igsh=MW9kd2QyZm01ajMwcQ==" target="_blank" rel="noreferrer">Instagram</a> та <a href="https://t.me/tepliy_yaremcha" target="_blank" rel="noreferrer">Telegram</a>, щоб першими отримувати новини.</span>],
];

function Faq() {
  const [open, setOpen] = useStateB(0);
  return (
    <section className="section bg-paper" id="faq">
      <div className="wrap">
        <div className="shead center reveal" style={{ margin: "0 auto 40px" }}>
          <span className="eyebrow" style={{ display: "block" }}>Питання та відповіді</span>
          <h2 className="h-lg" style={{ marginTop: 6 }}>Усе, що варто знати</h2>
        </div>
        <div className="faq reveal">
          {FAQS.map(([q, a], i) => (
            <div className={"faq__item" + (open === i ? " open" : "")} key={i}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                {q}<span className="faq__plus"><Icon name="plus" size={20} /></span>
              </button>
              <div className="faq__a" style={{ maxHeight: open === i ? "360px" : "0" }}>
                <div className="faq__a-inner">{a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RegForm({ formRef }) {
  const [role, setRole] = useStateB("Інвестор");
  const [guests, setGuests] = useStateB(1);
  const [vals, setVals] = useStateB({ name: "", phone: "", email: "", company: "" });
  const [errs, setErrs] = useStateB({});
  const [consent, setConsent] = useStateB(false);
  const [done, setDone] = useStateB(false);
  const [loading, setLoading] = useStateB(false);

  const set = (k) => (e) => { setVals(v => ({ ...v, [k]: e.target.value })); setErrs(er => ({ ...er, [k]: false })); };
  const validate = () => {
    const e = {};
    if (vals.name.trim().length < 2) e.name = "Вкажіть ваше ім'я";
    if (!/^[+()\d\s-]{9,}$/.test(vals.phone.trim())) e.phone = "Перевірте номер телефону";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(vals.email.trim())) e.email = "Перевірте email";
    if (role === "Брокер" && vals.company.trim().length < 2) e.company = "Вкажіть назву компанії";
    if (!consent) e.consent = "Потрібна згода";
    setErrs(e);
    return Object.keys(e).length === 0;
  };
  const submit = (e) => {
    e.preventDefault();
    if (!validate()) return;
    setLoading(true);
    fetch(SHEETS_URL, {
      method: "POST",
      mode: "no-cors",
      headers: { "Content-Type": "text/plain" },
      body: JSON.stringify({ role, name: vals.name, phone: vals.phone, email: vals.email, company: vals.company, guests }),
    })
      .catch(() => {})
      .finally(() => { setLoading(false); setDone(true); });
  };

  return (
    <section className="section bg-green" id="register">
      <div className="wrap" ref={formRef}>
        <div className="reg reveal">
          <div className="reg__aside">
            <div>
              <span className="eyebrow">Реєстрація</span>
              <h2 className="h-md" style={{ marginTop: 8 }}>Займіть місце на «Теплому прийомі»</h2>
              <ul className="reg__pts">
                {["Особистий welcome pack для кожного гостя", "Презентація проєкту та інвестиційних умов", "Фуршет, етно-музика та активності Карпат", "Кількість місць обмежена"].map(t => (
                  <li key={t}><Icon name="check" size={20} /> {t}</li>
                ))}
              </ul>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 32 }}>
              <span className="pill" style={{ fontSize: 14 }}><Icon name="calendar" size={16} /> 27 червня · 12:00</span>
              <span className="pill" style={{ fontSize: 14 }}><Icon name="pin" size={16} /> Яремче</span>
            </div>
          </div>
          <div className="reg__form">
            {done ? (
              <div className="reg__success">
                <div className="check"><Icon name="check" size={40} className="" /></div>
                <h3 className="h-sm" style={{ color: "var(--green-deep)" }}>Дякуємо, {vals.name.split(" ")[0]}!</h3>
                <p className="muted" style={{ marginTop: 12, maxWidth: 380, marginInline: "auto" }}>
                  Ваше місце заброньовано. Усі деталі заходу та welcome pack ми надішлемо на <strong>{vals.email}</strong>.
                  До зустрічі в серці Карпат!
                </p>
                <button className="btn btn--ghost" style={{ marginTop: 24 }} onClick={() => { setDone(false); setVals({ name: "", phone: "", email: "" }); setConsent(false); }}>
                  Зареєструвати ще когось
                </button>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className="field">
                  <label>Як до вас звертатися?</label>
                  <div className="roleseg">
                    {["Інвестор", "Брокер"].map(r => (
                      <button type="button" key={r} className={role === r ? "active" : ""} onClick={() => setRole(r)}>{r}</button>
                    ))}
                  </div>
                </div>
                {role === "Брокер" && (
                  <div className={"field" + (errs.company ? " err" : "")}>
                    <label>З якої ви компанії?</label>
                    <input value={vals.company} onChange={set("company")} placeholder="Назва агентства нерухомості" />
                    <span className="msg">{errs.company}</span>
                  </div>
                )}
                <div className={"field" + (errs.name ? " err" : "")}>
                  <label>Ім'я та прізвище</label>
                  <input value={vals.name} onChange={set("name")} placeholder="Наприклад, Олег Карпатський" />
                  <span className="msg">{errs.name}</span>
                </div>
                <div className="field--row">
                  <div className={"field" + (errs.phone ? " err" : "")}>
                    <label>Телефон</label>
                    <input value={vals.phone} onChange={set("phone")} placeholder="+38 (063) 000-00-00" inputMode="tel" />
                    <span className="msg">{errs.phone}</span>
                  </div>
                  <div className={"field" + (errs.email ? " err" : "")}>
                    <label>Email</label>
                    <input value={vals.email} onChange={set("email")} placeholder="you@email.com" inputMode="email" />
                    <span className="msg">{errs.email}</span>
                  </div>
                </div>
                <div className="field">
                  <label>Кількість гостей</label>
                  <div className="stepper">
                    <button type="button" onClick={() => setGuests(g => Math.max(1, g - 1))} aria-label="−">−</button>
                    <input value={guests} readOnly />
                    <button type="button" onClick={() => setGuests(g => Math.min(8, g + 1))} aria-label="+">+</button>
                  </div>
                </div>
                <label className="consent" style={{ color: errs.consent ? "#C0492B" : undefined }}>
                  <input type="checkbox" checked={consent} onChange={(e) => { setConsent(e.target.checked); setErrs(er => ({ ...er, consent: false })); }} />
                  <span>Погоджуюсь на обробку персональних даних та отримання деталей заходу.</span>
                </label>
                <button type="submit" className="btn btn--primary btn--lg" style={{ width: "100%" }} disabled={loading}>
                  {loading ? "Надсилаємо…" : <React.Fragment>Зайняти місце <Icon name="arrow" size={20} className="arrow" /></React.Fragment>}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ onRegister }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__brand">
            <Logo />
            <p>Котеджне містечко «Теплий» — теплий відпочинок «як удома» в серці Карпат, Яремче. Місце, де природа дарує натхнення, а люди — тепло сердець.</p>
          </div>
          <div>
            <h4>Навігація</h4>
            <a className="fl" href="#about">Про подію</a>
            <a className="fl" href="#program">Програма</a>
            <a className="fl" href="#houses">Будинки</a>
            <a className="fl" href="#invest">Інвестиції</a>
            <a className="fl" href="#faq">FAQ</a>
          </div>
          <div>
            <h4>Контакти</h4>
            <a className="fl" href="tel:+380633658844">+38 (063) 365-88-44</a>
            <a className="fl" href="mailto:tepliy.yaremcha@gmail.com">tepliy.yaremcha@gmail.com</a>
            <a className="fl" href="https://tepliy-yaremcha.com" target="_blank" rel="noreferrer">tepliy-yaremcha.com</a>
            <div className="socials" style={{ marginTop: 18 }}>
              <a href="https://www.instagram.com/tepliy.yaremche?igsh=MW9kd2QyZm01ajMwcQ==" target="_blank" rel="noreferrer" aria-label="Instagram"><Icon name="instagram" size={20} /></a>
              <a href="https://t.me/tepliy_yaremcha" target="_blank" rel="noreferrer" aria-label="Telegram"><Icon name="telegram" size={20} /></a>
            </div>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 «Теплий» хутір в Яремче. Усі права захищені.</span>
          <button className="btn btn--primary" onClick={onRegister}>Зареєструватися на івент</button>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Houses, Advantages, Location, Gallery, Faq, RegForm, Footer });