// components.jsx — all sections of v2 in one file (sub-1000 lines)

const { useState, useEffect, useRef } = React;

/* ----- shared helpers ----- */
function useCountUp(target, dur = 1400, start = 0) {
  const [v, setV] = useState(start);
  const ref = useRef(null);
  const [done, setDone] = useState(false);
  useEffect(() => {
    if (done) return;
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !done) {
          setDone(true);
          const t0 = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setV(Math.round(start + (target - start) * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [target, dur, start, done]);
  return [v, ref];
}

function fmt(n) { return n >= 1000 ? n.toLocaleString("en-US").replace(",", "\u00A0") : String(n); }

function ArrowRight({ size = 16 }) {
  return (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
}
function CheckIcon() {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>);
}
function LogoMark() {
  return (
    <svg viewBox="0 0 22 22">
      <polygon points="11,2 19,18 3,18" fill="#00AEEF" />
    </svg>
  );
}

/* ----- Top Nav ----- */
function Nav({ t, lang, onLang, onBook }) {
  return (
    <nav className="nav">
      <div className="nav__inner">
        <a className="nav__brand" href="#top">
          <span className="nav__brand-mark"><LogoMark /></span>
          <span className="nav__brand-name">ELAST</span>
        </a>
        <div className="nav__links">
          <a className="nav__link" href="#services">{t.nav.services}</a>
          <a className="nav__link" href="#about">{t.nav.about}</a>
          <a className="nav__link" href="#team">{t.nav.team}</a>
          <a className="nav__link" href="#book">{t.nav.contacts}</a>
          <div className="nav__lang">
            <button className={lang === "uk" ? "is-on" : ""} onClick={() => onLang("uk")}>UK</button>
            <button className={lang === "en" ? "is-on" : ""} onClick={() => onLang("en")}>EN</button>
          </div>
          <button className="nav__cta" onClick={onBook}>{t.nav.book}</button>
        </div>
      </div>
    </nav>
  );
}

/* ----- Hero variations ----- */
function HeroEyebrow({ children }) { return <div className="hero__eyebrow">{children}</div>; }

function HeroA({ t, onBook }) {
  return (
    <section className="hero">
      <div className="container container--wide">
        <HeroEyebrow>{t.hero.eyebrow}</HeroEyebrow>
        <div className="hero-a__grid">
          <div>
            <h1 className="hero__title">
              {t.hero.title_a[0]}<br/>
              {t.hero.title_a[1]} <em>{t.hero.title_a[2]}</em>
            </h1>
            <p className="hero__sub">{t.hero.sub}</p>
            <div className="hero__meta-row">
              <button className="hero__cta" onClick={onBook}>{t.hero.cta_primary}</button>
              <a className="hero__cta-ghost" href="#services">{t.hero.cta_secondary}</a>
            </div>
          </div>
          <div className="hero-a__numbers">
            {t.hero.rail.map((r, i) => (
              <div className="hero-a__num" key={i}>
                <div className="hero-a__num-val">{r.val}</div>
                <div className="hero-a__num-lbl">{r.lbl}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="hero-a__photo">
          <img src="assets/interior-corridor.webp" alt="" />
        </div>
      </div>
    </section>
  );
}

function HeroB({ t, onBook }) {
  return (
    <section className="hero hero-b">
      <div className="hero-b__bg" style={{ backgroundImage: "url('assets/interior-3.jpg')" }} />
      <div className="hero-b__inner">
        <div className="hero-b__copy">
          <HeroEyebrow>{t.hero.eyebrow}</HeroEyebrow>
          <h1 className="hero__title" style={{ marginTop: 32 }}>
            {t.hero.title_b[0]}<br/>
            {t.hero.title_b[1]} <em>{t.hero.title_b[2]}</em>
          </h1>
          <p className="hero__sub">{t.hero.sub}</p>
          <div className="hero__meta-row">
            <button className="hero__cta" onClick={onBook}>{t.hero.cta_primary}</button>
            <a className="hero__cta-ghost" href="#services">{t.hero.cta_secondary}</a>
          </div>
        </div>
      </div>
      <div className="hero-b__stats">
        <div className="container container--wide">
          <div className="stats__grid">
            {t.stats.items.map((s, i) => <Stat key={i} {...s} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroC({ t, onBook, lang }) {
  return (
    <section className="hero">
      <div className="container container--wide">
        <HeroEyebrow>{t.hero.eyebrow}</HeroEyebrow>
        <div className="hero-c__grid" style={{ marginTop: 32 }}>
          <div className="hero-c__left">
            <h1 className="hero-c__title-italic">
              {t.hero.title_c[0]}<br/>
              <span className="accent">{t.hero.title_c[1]}</span><br/>
              {t.hero.title_c[2]}
            </h1>
            <div>
              <p className="hero__sub" style={{ marginBottom: 24 }}>{t.hero.sub}</p>
              <div className="hero__meta-row" style={{ marginTop: 0 }}>
                <button className="hero__cta" onClick={onBook}>{t.hero.cta_primary}</button>
                <a className="hero__cta-ghost" href="#services">{t.hero.cta_secondary}</a>
              </div>
              <div className="hero-c__pull" style={{ marginTop: 40 }}>
                {lang === "uk"
                  ? "«Краса не приходить — її будують. Точно, методично, з повагою до людини.»"
                  : "“Beauty doesn't arrive — it is built. Precisely, methodically, with respect for the person.”"}
              </div>
            </div>
          </div>
          <div className="hero-c__photo">
            <img src="assets/interior-entrance.webp" alt="" />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroD({ t, onBook, services, lang, onPickService }) {
  const top6 = services.slice(0, 6);
  return (
    <section className="hero hero-d">
      <div className="container container--wide">
        <HeroEyebrow>{t.hero.eyebrow}</HeroEyebrow>
        <h1 className="hero__title">
          {t.hero.title_d[0]} <em>{t.hero.title_d[1]}</em>
        </h1>
        <p className="hero__sub">{t.hero.sub}</p>
        <div className="hero__meta-row">
          <button className="hero__cta" onClick={onBook}>{t.hero.cta_primary}</button>
        </div>
      </div>
      <div className="container container--wide">
        <div className="hero-d__grid">
          {top6.map((s, i) => (
            <div key={s.key} className="hero-d__cell" onClick={() => onPickService(s)}>
              <div>
                <div className="hero-d__cell-num">{String(i + 1).padStart(2, "0")} / 09</div>
                <h3 className="hero-d__cell-title" style={{ marginTop: 14 }}>{lang === "uk" ? s.uk : s.en}</h3>
              </div>
              <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between" }}>
                <div style={{ fontSize: 11, color: "var(--ink-500)", fontWeight: 600, letterSpacing: "0.1em" }}>
                  {t.services.from} {s.priceFrom[lang]}
                </div>
                <div className="hero-d__cell-arrow"><ArrowRight size={14}/></div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="marquee">
        <div className="marquee__track">
          <span>{lang === "uk" ? "ELAST CLINIC" : "ELAST CLINIC"} <i className="dot"/> Youth Is Now <i className="dot"/> Київ · Леонтовича 3 <i className="dot"/> щодня 10:00–21:00 <i className="dot"/></span>
          <span>{lang === "uk" ? "ELAST CLINIC" : "ELAST CLINIC"} <i className="dot"/> Youth Is Now <i className="dot"/> Київ · Леонтовича 3 <i className="dot"/> щодня 10:00–21:00 <i className="dot"/></span>
        </div>
      </div>
    </section>
  );
}

/* ----- Services index ----- */
function ServicesSection({ t, services, lang, onPick }) {
  return (
    <section className="services" id="services">
      <div className="container container--wide">
        <div className="section-head">
          <h2 className="section-head__title">{t.services.title_pre} <em>{t.services.title_em}</em></h2>
          <div className="section-head__rhs">{t.services.sub}</div>
        </div>
        <div className="svc-grid">
          {services.map((s, i) => (
            <a key={s.key} className="svc-card" onClick={(e) => { if (!s.page) { e.preventDefault(); onPick(s); } }}
               href={s.page || "#book"}>
              <div className="svc-card__head">
                <div className="svc-card__num">{String(i + 1).padStart(2, "0")}</div>
                <div className="svc-card__chip">{s.dur}</div>
              </div>
              <h3 className="svc-card__title">{lang === "uk" ? s.uk : s.en}</h3>
              <div className="svc-card__meta">
                <span>{t.services.from} <b>{s.priceFrom[lang]}</b></span>
                <ArrowRight />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Stats with counters ----- */
function Stat({ val, suffix, lbl }) {
  return (
    <div>
      <div className="stat__num"><span>{fmt(val)}</span><span className="stat__suffix">{suffix}</span></div>
      <div className="stat__rule" />
      <div className="stat__lbl">{lbl}</div>
    </div>
  );
}
window.Stat = Stat;
function StatsStrip({ t }) {
  return (
    <section className="stats">
      <div className="container container--wide">
        <div className="stats__grid">
          {t.stats.items.map((s, i) => <Stat key={i} {...s} />)}
        </div>
      </div>
    </section>
  );
}

/* ----- About ----- */
function About({ t }) {
  return (
    <section className="about" id="about">
      <div className="container container--wide">
        <div className="about__grid">
          <div className="about__photo"><img src="assets/interior-entrance.webp" alt="" /></div>
          <div className="about__copy">
            <HeroEyebrow>{t.about.eyebrow}</HeroEyebrow>
            <h2>{t.about.title_pre} <em>{t.about.title_em}</em></h2>
            <p>{t.about.p1}</p>
            <p>{t.about.p2}</p>
            <ul className="about__list">
              {t.about.list.map((l, i) => <li key={i}>{l}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Team ----- */
function Team({ t, team, lang }) {
  return (
    <section className="team" id="team">
      <div className="container container--wide">
        <div className="section-head">
          <div>
            <HeroEyebrow>{t.team.eyebrow}</HeroEyebrow>
            <h2 className="section-head__title" style={{ marginTop: 16 }}>
              {t.team.title_pre} <em>{t.team.title_em}</em>
            </h2>
          </div>
        </div>
        <div className="team__grid">
          {team.map((p, i) => (
            <div className="team__card" key={i}>
              <div className="team__card-photo">{p.initial}</div>
              <div className="team__card-info">
                <div className="team__name">{lang === "uk" ? p.uk : p.en}</div>
                <div className="team__role">{lang === "uk" ? p.uk_role : p.en_role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Booking form ----- */
function BookForm({ t, services, lang, prefilled, onSent }) {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [service, setService] = useState(prefilled || "");
  const [when, setWhen] = useState("");
  const [note, setNote] = useState("");
  const [sent, setSent] = useState(false);

  useEffect(() => { if (prefilled) setService(prefilled); }, [prefilled]);

  function submit(e) {
    e.preventDefault();
    const svc = services.find((s) => s.key === service);
    const serviceName = svc ? (lang === "uk" ? svc.uk : svc.en) : service;
    const message = [
      lang === "uk" ? "Заявка з сайту Elast Clinic" : "Request from Elast Clinic website",
      `${t.book.f_name}: ${name}`,
      `${t.book.f_phone}: ${phone}`,
      `${t.book.f_service}: ${serviceName || "—"}`,
      `${t.book.f_when}: ${when || "—"}`,
      `${t.book.f_note}: ${note || "—"}`
    ].join("\n");
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(message).catch(() => {});
    }
    window.open("https://t.me/elastclinickyiv", "_blank", "noopener");
    setSent(true);
    onSent && onSent({ name, phone, service, when, note });
  }

  if (sent) return (
    <div className="book__success">
      <h3>{t.book.success_h}</h3>
      <p>{t.book.success_p}</p>
    </div>
  );

  return (
    <form className="book__form" onSubmit={submit}>
      <div className="field">
        <label>{t.book.f_name}</label>
        <input value={name} onChange={(e) => setName(e.target.value)} required placeholder="—" />
      </div>
      <div className="field--inline">
        <div>
          <label>{t.book.f_phone}</label>
          <input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} required placeholder="+380…" />
        </div>
        <div>
          <label>{t.book.f_when}</label>
          <input value={when} onChange={(e) => setWhen(e.target.value)} placeholder={lang === "uk" ? "Будь-який зручний" : "Any time"} />
        </div>
      </div>
      <div className="field">
        <label>{t.book.f_service}</label>
        <select value={service} onChange={(e) => setService(e.target.value)} required>
          <option value="">{t.book.f_service_default}</option>
          {services.map((s) => <option key={s.key} value={s.key}>{lang === "uk" ? s.uk : s.en}</option>)}
        </select>
      </div>
      <div className="field">
        <label>{t.book.f_note}</label>
        <textarea rows="2" value={note} onChange={(e) => setNote(e.target.value)} placeholder="—" />
      </div>
      <button className="book__submit" type="submit">
        {t.book.submit}<ArrowRight />
      </button>
      <div className="book__hint">{t.book.hint}</div>
    </form>
  );
}

function BookSection({ t, services, lang, prefilled, onSent }) {
  return (
    <section className="book" id="book">
      <div className="container container--wide">
        <div className="book__grid">
          <div className="book__copy">
            <HeroEyebrow>{t.book.eyebrow}</HeroEyebrow>
            <h2>{t.book.title_pre} <em>{t.book.title_em}</em></h2>
            <p>{t.book.p1}</p>
            <ul>
              {t.book.bullets.map((b, i) => <li key={i}><CheckIcon/>{b}</li>)}
            </ul>
          </div>
          <BookForm t={t} services={services} lang={lang} prefilled={prefilled} onSent={onSent}/>
        </div>
      </div>
    </section>
  );
}

/* ----- Footer ----- */
function Foot({ t, services, lang }) {
  return (
    <footer className="foot">
      <div className="container container--wide">
        <div className="foot__top">
          <div>
            <span className="nav__brand-mark" style={{ display: "inline-flex", verticalAlign: "middle", width: 22, height: 22, marginRight: 8 }}><LogoMark/></span>
            <span className="foot__brand-name">ELAST</span>
            <div className="foot__lead">{t.foot.lead}</div>
          </div>
          <div className="foot__col">
            <h4>{t.foot.services}</h4>
            {services.slice(0, 5).map((s) => <a key={s.key} href={s.page || "#book"}>{lang === "uk" ? s.uk : s.en}</a>)}
          </div>
          <div className="foot__col">
            <h4>{t.foot.company}</h4>
            <a href="#about">{t.nav.about}</a>
            <a href="#team">{t.nav.team}</a>
            <a href="#book">{t.nav.contacts}</a>
          </div>
          <div className="foot__col">
            <h4>{t.foot.contact}</h4>
            <a href="#">{t.foot.addr}</a>
            <a href="tel:+380504248942">{t.foot.phone}</a>
            <a href="https://t.me/elastclinickyiv" target="_blank" rel="noreferrer">{t.foot.tg}</a>
          </div>
        </div>
        <div className="foot__bottom">
          <span>{t.foot.copy}</span>
          <span>youth_is_now / 2026</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, HeroA, HeroB, HeroC, HeroD,
  ServicesSection, StatsStrip, About, Team, BookSection, Foot,
  ArrowRight, useCountUp,
});