/* sections-a.jsx — Nav, Hero, Concept, Stats, Program, Welcome pack */
const { useState: useStateA, useEffect: useEffectA } = React;

function Nav({ onRegister, accent }) {
  const [scrolled, setScrolled] = useStateA(false);
  const [menu, setMenu] = useStateA(false);
  useEffectA(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["Галерея", "#gallery"], ["Програма", "#program"],
    ["Будинки", "#houses"], ["Інвестиції", "#invest"], ["FAQ", "#faq"],
  ];
  return (
    <React.Fragment>
      <nav className={"nav" + (scrolled ? " scrolled" : "")}>
        <div className="wrap nav__inner">
          <Logo dark={scrolled} />
          <div className="nav__links">
            {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
          </div>
          <div className="nav__right">
            <span className="nav__date"><Icon name="calendar" size={17} /> 27 червня</span>
            <button className="btn btn--primary" onClick={onRegister}>Зайняти місце</button>
            <button className="nav__burger" aria-label="Меню" onClick={() => setMenu(true)}>
              <svg width="26" height="26" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke={scrolled ? "#36431F" : "#F5EFE1"} strokeWidth="2.2" strokeLinecap="round"/></svg>
            </button>
          </div>
        </div>
      </nav>
      <div className={"mmenu" + (menu ? " open" : "")}>
        <button className="mmenu__close" onClick={() => setMenu(false)}><Icon name="close" size={30} /></button>
        {links.map(([t, h]) => <a key={h} href={h} onClick={() => setMenu(false)}>{t}</a>)}
        <button className="btn btn--primary btn--lg" style={{ marginTop: 24 }} onClick={() => { setMenu(false); onRegister(); }}>Зайняти місце</button>
      </div>
    </React.Fragment>
  );
}

function Hero({ variant, onRegister }) {
  const pills = (
    <div className="hero__meta">
      <span className="pill pill--solid"><Icon name="calendar" size={18} /> 27 червня</span>
      <span className="pill"><Icon name="clock" size={18} /> 12:00 за Києвом</span>
      <span className="pill"><Icon name="pin" size={18} /> Яремче, вул. Довбуша</span>
    </div>
  );
  if (variant === "split") {
    return (
      <header className="hero hero--split" id="top">
        <div className="hero__panel">
          <span className="hero__oh reveal in">Open&nbsp;House</span>
          <h1 className="h-lg reveal in" data-d="1" style={{ marginTop: 14 }}>
            Теплий прийом<span className="script">як вдома у серці&nbsp;Карпат</span>
          </h1>
          <p className="hero__sub reveal in" data-d="2">
            Запрошуємо інвесторів і брокерів на день знайомства з «Теплим» — проєктом,
            що поєднує відпочинок у Карпатах із високою дохідністю інвестицій.
          </p>
          <div className="hero__cta reveal in" data-d="3">
            <button className="btn btn--primary btn--lg" onClick={onRegister}>Зайняти місце <Icon name="arrow" size={20} className="arrow" /></button>
            <a className="btn btn--light btn--lg" href="#program">Програма заходу</a>
          </div>
          <div className="reveal in" data-d="4">{pills}</div>
        </div>
        <div className="hero__bg"><img src={R("heroImg","assets/hero.jpg")} alt="Котедж «Теплий», Яремче" /></div>
      </header>
    );
  }
  return (
    <header className="hero" id="top">
      <div className="hero__bg"><img src={R("heroImg","assets/hero.jpg")} alt="Котедж «Теплий», Яремче" /></div>
      <div className="wrap hero__inner">
        <span className="hero__oh reveal in">Open&nbsp;House</span>
        <h1 className="h-xl reveal in" data-d="1">
          Теплий прийом<span className="script">як вдома у серці&nbsp;Карпат</span>
        </h1>
        <p className="hero__sub reveal in" data-d="2">
          Запрошуємо інвесторів і брокерів на день знайомства з «Теплим» — проєктом,
          що поєднує відпочинок у Карпатах із високою дохідністю інвестицій.
        </p>
        <div className="hero__cta reveal in" data-d="3">
          <button className="btn btn--primary btn--lg" onClick={onRegister}>Зайняти місце <Icon name="arrow" size={20} className="arrow" /></button>
          <a className="btn btn--light btn--lg" href="#program">Дивитись програму</a>
        </div>
        <div className="reveal in" data-d="4">{pills}</div>
      </div>
      <div className="scrollcue"><span>гортайте</span><span className="dot" /></div>
    </header>
  );
}

function Concept() {
  return (
    <section className="section bg-cream" id="about">
      <div className="wrap legend">
        <div className="legend__media reveal">
          <img src={R("teaBlanket","assets/tea-blanket.jpg")} alt="Тепло домашнього затишку" />
          <div className="legend__badge">як<br />удома</div>
        </div>
        <div className="reveal" data-d="1">
          <span className="kicker">Концепція</span>
          <h2 className="h-lg" style={{ marginTop: 18 }}>Дім, що гріє серце.<br />Природа, що надихає&nbsp;душу.</h2>
          <blockquote style={{ fontFamily: "var(--ff-hand)", fontSize: "clamp(26px,3vw,40px)", color: "var(--orange-deep)", lineHeight: 1.15, margin: "26px 0 20px" }}>
            «Тут живуть не просто поряд, а разом.»
          </blockquote>
          <p className="lead">
            У самому серці Карпат, серед смерекових лісів і кришталевих потоків, народилося місце,
            де життя тече в гармонії з природою. «Теплий» — це про затишок, спокій і справжні теплі стосунки.
          </p>
          <p style={{ marginTop: 18, color: "var(--ink-soft)" }}>
            Прийом «Теплий» — це не просто презентація комплексу, а атмосфера, в якій гості відчують
            майбутній стиль життя: гостинність, тепло домашнього вогню та сучасний комфорт серед гір.
          </p>
        </div>
      </div>
    </section>
  );
}

function Stats() {
  const data = [
    ["31", "окремий будинок", false],
    ["8", "таунхаусів", false],
    ["5–15", "хв до інфраструктури", false],
    ["365", "днів попиту на рік", true],
  ];
  return (
    <section className="section--tight bg-vanilla">
      <div className="wrap">
        <div className="stats reveal">
          {data.map(([n, l, hl]) => (
            <div className="stat" key={l}>
              <div className="stat__num">{hl ? <span>{n}</span> : n}</div>
              <div className="stat__lbl">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Program() {
  const items = [
    ["present", "Презентація проєкту", "Жива розповідь про «Теплий» у форматі діалогу — концепція, архітектура й інвестиційний потенціал проєкту."],
    ["mountain", "Карпати", "Гірські краєвиди, смерековий ліс і чисте повітря — відчуйте атмосферу місця наживо."],
    ["fire", "Панорами природи", "Lounge-зони з м'яким світлом і живою ватрою та виглядом на Карпати."],
    ["crystal", "Погляд у майбутнє", "Атмосферна зона з мольфаркою — символічне передбачення та послання-настрій."],
    ["music", "DJ-сет", "Сучасне звучання та гарний настрій від діджея, що супроводжуватиме гостей протягом дня."],
  ];
  return (
    <section className="section bg-green" id="program">
      <div className="wrap">
        <div className="shead reveal" style={{ maxWidth: 820 }}>
          <span className="eyebrow" style={{ color: "#F4C9A0" }}>На вас чекає</span>
          <h2 className="h-lg" style={{ marginTop: 6 }}>Що ви побачите під час Open House</h2>
          <p className="lead" style={{ color: "rgba(255,255,255,.82)" }}>
            Протягом дня ви зможете особисто оглянути котеджне містечко, оцінити архітектуру
            та краєвиди Карпат, поставити запитання команді проєкту й дізнатися більше
            про інвестиційні можливості «Теплого».
          </p>
        </div>
        <div className="prog-grid" style={{ marginTop: 54 }}>
          {items.map(([ic, t, d], i) => (
            <div className="pcard reveal" data-d={(i % 3) + 1} key={t}>
              <span className="pcard__no">{String(i + 1).padStart(2, "0")}</span>
              <div className="pcard__ico"><Icon name={ic} size={28} /></div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <div className="reveal" data-d="2" style={{ marginTop: 40, display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center" }}>
          <span style={{ fontWeight: 800, color: "#F4C9A0", fontSize: 15 }}>А ще:</span>
          {["Welcome pack для кожного гостя", "Фотозони та професійний фотограф", "Затишні лаунж-зони з пледами"].map(c => (
            <span className="pill" key={c} style={{ fontSize: 14 }}>{c}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function WelcomePack() {
  const items = [
    ["М'які домашні тапочки", "з вишитим логотипом комплексу"],
    ["Набір карпатських трав", "для ароматного домашнього чаю"],
    ["Локальний смаколик", "карпатський мед або варення"],
    ["Листівка-запрошення", "з гравіюванням на пам'ять"],
    ["Ароматична свічка", "з нотами хвої, дерева та диму ватри"],
  ];
  return (
    <section className="section bg-choc">
      <div className="wrap pack">
        <div className="reveal">
          <span className="eyebrow" style={{ color: "#F4C9A0" }}>Ласкаво просимо додому</span>
          <h2 className="h-md" style={{ color: "#fff", marginTop: 8 }}>Welcome pack,<br />що передає тепло</h2>
          <p style={{ color: "rgba(255,255,255,.78)", marginTop: 18, maxWidth: 440 }}>
            Кожен гість отримає особливе запрошення з атмосферним набором — щоб відчуття тепла,
            затишку та карпатської гостинності почалося ще до приїзду.
          </p>
          <ul className="pack__list">
            {items.map(([t, d], i) => (
              <li key={t}><span className="n">{String(i + 1).padStart(2, "0")}</span><span><strong>{t}</strong><span>{d}</span></span></li>
            ))}
          </ul>
        </div>
        <div className="pack__media reveal" data-d="2">
          <img src={R("interiorFamily","assets/interior-family.jpg")} alt="Тепло домашнього відпочинку" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Concept, Stats, Program, WelcomePack });