// Stat band, About, Problem, Method(seanso eiga), Process(poveikis), BeforeAfter, Pricing, Footer

const StatBand = () => (
  <section className="stat-band">
    <div className="container">
      <div className="stat-row">
        <div className="stat"><div className="num">Kaunas</div><div className="cap">Pagrindinė studija · vizitai ir Vilniuje</div></div>
        <div className="stat"><div className="num">10—19</div><div className="cap">Darbo valandos, kasdien</div></div>
        <div className="stat"><div className="num">100<em>%</em></div><div className="cap">Rankomis, gyvai — jokių instrukcijų ar įrašų</div></div>
        <div className="stat"><div className="num">1<span style={{color:'var(--sage)'}}>—</span>4</div><div className="cap">Seansai pagrindinei disfunkcijai koreguoti</div></div>
      </div>
    </div>
  </section>
);

const About = () => (
  <section className="section about" id="about">
    <div className="container">
      <div className="about-grid">
        <Reveal>
          <div className="about-photo">
            <div className="fill"></div>
            <div className="cap">[ Oksanos portretas studijoje ]</div>
          </div>
        </Reveal>
        <Reveal delay={140}>
          <div>
            <div className="eyebrow label" style={{display:'flex', alignItems:'center', gap:14, marginBottom: 24}}>
              <span style={{width:28, height:1, background:'var(--sage)', display:'inline-block'}}></span>
              <span>Kas aš</span>
            </div>
            <h2 className="heading" style={{fontSize: 'clamp(36px, 4.6vw, 58px)', margin: '0 0 28px'}}>
              Sveiki, aš <em style={{color:'var(--sage)', fontStyle:'italic'}}>Oksana</em>.
            </h2>
            <p className="body-lg" style={{maxWidth: 560, color:'var(--forest-60)'}}>
              Jeigu šiandien kas nors man būtų pasakęs, kad tapsiu osteopate ir savo gyvenimą paskirsiu žmogaus kūno pažinimui, tikriausiai nebūčiau patikėjusi. Mano profesinis kelias buvo ilgas, vingiuotas ir kupinas paieškų — nuo veterinarijos studijų iki kosmetologijos, kol dirbdama SPA centre išmėginau profesionalų veido masažą. Ta akimirka pakeitė viską: supratau, kad prisilietimas gali daryti daug daugiau nei bet kuri kosmetinė procedūra.
            </p>
            <p className="body" style={{maxWidth: 560, marginTop: 16}}>
              Atsakymus, kodėl vieniems rezultatai išlieka ilgai, o kitiems trumpai, radau osteopatijoje. Baigiau osteopatijos ir estetinės osteopatijos studijas Tarptautinėje Face Plastic osteopatijos akademijoje Dubajuje, toliau gilinu žinias MiOT osteopatijos mokykloje. Šiandien matau žmogų kaip vientisą sistemą — veido pokyčius lemia ne tik oda ar raumenys, bet ir laikysena, kvėpavimas, žandikaulio padėtis, fascijos bei nervų sistema.
            </p>
            <p className="body" style={{maxWidth: 560, marginTop: 16}}>
              Per daugiau nei ketverius praktikos metus atlikau tūkstančius individualių seansų. Man svarbiausia — padėti organizmui atkurti pusiausvyrą, kad išvaizda taptų natūraliu sveikatos rezultatu, o ne jo priedanga.
            </p>
            <div className="about-credentials">
              <div className="chip">Face Plastic akademija · Dubajus</div>
              <div className="chip">MiOT osteopatijos mokykla</div>
              <div className="chip">Kadaverinės anatomijos kursas</div>
              <div className="chip">Kosmetologijos bakalauras</div>
              <div className="chip">4+ metų praktikos</div>
            </div>
            <div className="about-sig">— Oksana Budraitė</div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const Problem = () => (
  <section className="problem" id="problema">
    <Reveal>
      <div className="inner">
        <div className="eyebrow"><span className="bar"></span><span>Filosofija</span></div>
        <p className="problem-quote">
          Argi amžius tikrai yra tik skaičius pase, o ne tai, <em>kaip jaučiatės</em>? Tai, kokio amžiaus jaučiamės esantys, gali visiškai nesutapti su gimimo data.
        </p>
        <p className="body-lg" style={{maxWidth: 760, marginTop: 40, color:'var(--forest-60)'}}>
          Mūsų kūnas nuolat atsinaujina, tačiau kartu kaupia gyvenimo patirtį — traumas, lėtinį stresą, netaisyklingus judesio įpročius. Kad prisitaikytų, kūnas kuria kompensacinius mechanizmus, kuriems reikia energijos — tos pačios, kuri kitu atveju būtų skiriama audinių atsinaujinimui. Todėl atsiranda patinimai, asimetrija, raukšlės ir kiti anksčiau laiko atėję senėjimo požymiai.
        </p>
        <p className="body-lg" style={{maxWidth: 760, marginTop: 20, color:'var(--forest-60)'}}>
          Kosmetologija ir injekcinės procedūros veikia paviršių. Jei priežastis — kaulų padėtis, fascijų įtampa, sutrikusi kraujotaka — nepašalinta, laikui bėgant problema sugrįžta. Tai tas pats, kas dažyti sienas name, kurio pamatai sugriuvę.
        </p>
      </div>
    </Reveal>
  </section>
);

const Method = () => {
  const cards = [
    { num: '01', h: 'Anamnezė', p: 'Pradedame nuo pokalbio: traumos, ligos, emocinė būklė, miegas, virškinimas, skausmai ir estetiniai pokyčiai, kuriuos norite pakeisti.', g: 'A' },
    { num: '02', h: 'Diagnostika', p: 'Vertikali, horizontali ir biomechaninė kūno diagnostika — „klausomasi“ kūno, kranialinio kvėpavimo, vidaus organų motiliteto. Randama pagrindinė disfunkcija.', g: 'D' },
    { num: '03', h: 'Korekcija', p: 'Ant kušetės, gulint ir atsipalaidavus. Skausmo praktiškai nebūna — jaučiamas atsipalaidavimas, šiluma, lengvas dilgčiojimas ir audinio „išsiplėtimo“ pojūtis.', g: 'K' }
  ];
  return (
    <section className="section bg-white" id="method">
      <div className="container">
        <Reveal>
          <div className="section-intro">
            <div>
              <div className="eyebrow label" style={{display:'flex', alignItems:'center', gap:14}}>
                <span className="bar" style={{width:28, height:1, background:'var(--sage)', display:'inline-block'}}></span>
                <span>Kaip vyksta seansas</span>
              </div>
            </div>
            <div>
              <h2>Trys žingsniai — <em>viena kušetė</em>, dirbama gyvai, savo rankomis.</h2>
              <p className="body" style={{marginTop: 20}}>
                Į seansą rekomenduojama atsinešti laisvus, tampius drabužius — leginsus ar sportines kelnes. Džinsai riboja judesį ir trukdo tiksliai diagnozuoti bei dirbti su audiniais.
              </p>
            </div>
          </div>
        </Reveal>
        <div className="method-grid">
          {cards.map((c, i) => (
            <Reveal key={c.num} delay={i * 120}>
              <div className="method-card">
                <div className="num">{c.num} / 03</div>
                <div className="glyph">{c.g}</div>
                <h3>{c.h}</h3>
                <p>{c.p}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const Process = () => {
  const groups = [
    { n: '01', h: 'Nervų sistema', p: 'Gali pagerėti miego kokybė, atsirasti daugiau energijos. Rečiau kamuoja galvos skausmai, įskaitant migreną su aura. Švelnėja nervingumas, gerėja nuotaika.' },
    { n: '02', h: 'Kraujotaka ir kvėpavimas', p: 'Harmonizuojasi limfinė ir kraujotakos sistema — mažėja patinimai. Atsistato diafragmos darbas, kvėpavimas tampa laisvesnis, kai kuriais atvejais harmonizuojasi pulsas ir kraujospūdis.' },
    { n: '03', h: 'Nugara ir laikysena', p: 'Gerėja laikysena. Mažėja arba išnyksta nugaros, juosmens ir kaklo įtampa bei skausmai, švelnėja „našlės kupra“.' },
    { n: '04', h: 'Veidas ir kaukolė', p: 'Sulėtėja veido ir kaukolės kaulų senėjimo procesai. Koreguojama veido ir kaukolės asimetrija — pvz., akių dydžio skirtumas, apatinio žandikaulio padėtis.' }
  ];
  return (
    <section className="section process" id="process">
      <div className="container">
        <Reveal>
          <div className="section-intro">
            <div>
              <div className="eyebrow label" style={{display:'flex', alignItems:'center', gap:14, color:'var(--soft-peach)'}}>
                <span style={{width:28, height:1, background:'var(--warm-peach)', display:'inline-block'}}></span>
                <span>Ką tai duoda kūnui</span>
              </div>
            </div>
            <div>
              <h2>Poveikis, kurį jaučia <em>visas kūnas</em>, ne tik veidas.</h2>
              <p className="body" style={{marginTop: 20}}>
                Po korekcijos organizmas pradeda dirbti naujoje, subalansuotoje pusiausvyroje. Kiekvienas organizmas reaguoja individualiai — poveikis priklauso nuo pradinės būklės, seansų skaičiaus ir reguliarumo.
              </p>
            </div>
          </div>
        </Reveal>
        <div className="process-steps">
          {groups.map((s, i) => (
            <Reveal key={s.n} delay={i * 120}>
              <div className="process-step">
                <div className="time">{s.n} →</div>
                <h4>{s.h}</h4>
                <p>{s.p}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={480}>
          <p className="body" style={{marginTop: 48, maxWidth: 700, opacity: .65, fontSize: 13}}>
            Svarbu: tai individualiai stebimi pokyčiai, o ne garantuotas medicininis rezultatas. Osteopatinė korekcija nepakeičia gydytojo konsultacijos ar medikamentinio gydymo.
          </p>
        </Reveal>
      </div>
    </section>
  );
};

const BeforeAfter = () => {
  const [pos, setPos] = useState(50);
  const wrapRef = useRef(null);
  const drag = useRef(false);

  const update = (clientX) => {
    const r = wrapRef.current.getBoundingClientRect();
    const p = Math.max(2, Math.min(98, ((clientX - r.left) / r.width) * 100));
    setPos(p);
  };
  const onDown = (e) => { drag.current = true; update(e.clientX || e.touches?.[0]?.clientX); };
  const onMove = (e) => { if (!drag.current) return; update(e.clientX || e.touches?.[0]?.clientX); };
  const onUp = () => { drag.current = false; };

  useEffect(() => {
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchmove', onMove);
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  return (
    <section className="section bg-apricot" id="pries-po">
      <div className="container">
        <Reveal>
          <div className="section-intro">
            <div>
              <div className="eyebrow label" style={{display:'flex', alignItems:'center', gap:14}}>
                <span style={{width:28, height:1, background:'var(--sage)', display:'inline-block'}}></span>
                <span>Prieš ir po</span>
              </div>
            </div>
            <div>
              <h2>Realūs vaizdiniai rezultatai <em>veikia stipriau</em> nei bet koks tekstas.</h2>
              <p className="body" style={{marginTop: 20}}>Vieta nuotraukoms iš Instagram highlight „PRIEŠ IR PO“ — su klientų sutikimu.</p>
            </div>
          </div>
        </Reveal>
        <div className="ba-wrap" ref={wrapRef}
             onMouseDown={onDown} onTouchStart={onDown}>
          <div className="ba-layer ba-before"></div>
          <div className="ba-layer ba-after" style={{clipPath: `inset(0 ${100-pos}% 0 0)`}}></div>
          <div className="ba-label before">Prieš</div>
          <div className="ba-label after">Po</div>
          <div className="ba-handle" style={{left: `${pos}%`}}>
            <div className="knob">⇆</div>
          </div>
        </div>
        <div className="ba-note">[ vietos rezervuotos · įdėkite 2–4 realias „prieš ir po“ nuotraukų poras ]</div>
      </div>
    </section>
  );
};

const Pricing = ({ onBook }) => {
  const tiers = [
    {
      tier: 'Palaikomasis',
      name: 'Veido masažas',
      price: '70',
      per: '60 min · arba 100 € už 90 min',
      list: ['Minkštųjų audinių technikos', 'Darbas su veido ir kaklo raumenimis bei fascijomis', 'Be gilesnės osteopatinės korekcijos', 'Tinka pirmam bandomajam seansui'],
      cta: 'Registruotis seansui'
    },
    {
      tier: 'Populiariausia',
      name: 'OsteoEstetika seansas',
      price: '100',
      per: '60 min · pilna diagnostika + korekcija',
      list: ['Anamnezė ir kūno diagnostika', 'Osteopatinė korekcija', 'Veido masažas', '1–4 seansai pagrindinei disfunkcijai', 'Rekomenduojama: kartą per savaitę'],
      featured: true,
      badge: 'Populiariausia',
      cta: 'Registruotis seansui'
    },
    {
      tier: 'Intensyvus',
      name: 'OsteoEstetika + pratimai',
      price: '130',
      per: '60 min · su individualiu pratimų rinkiniu',
      list: ['Ta pati pilna diagnostika ir korekcija', 'Individualus pratimų rinkinys kasdien', 'Pagreitina ir sustiprina rezultatą', 'Seansų intervalas: 10–12 dienų'],
      cta: 'Registruotis seansui'
    }
  ];

  return (
    <section className="section bg-apricot" id="pricing">
      <div className="container">
        <Reveal>
          <div className="section-intro">
            <div>
              <div className="eyebrow label" style={{display:'flex', alignItems:'center', gap:14}}>
                <span style={{width:28, height:1, background:'var(--sage)', display:'inline-block'}}></span>
                <span>Paslaugos ir kainos</span>
              </div>
            </div>
            <div>
              <h2>Aiškios kainos. <em>Be nustebimų.</em></h2>
              <p className="body" style={{marginTop: 20}}>Pasirinkite pagal tai, ko šiuo metu labiausiai reikia jūsų kūnui — visada galima pereiti prie kitos paslaugos.</p>
            </div>
          </div>
        </Reveal>
        <div className="pricing-grid">
          {tiers.map(t => (
            <div key={t.name} className={`price-card ${t.featured ? 'featured' : ''}`}>
              {t.badge && <div className="badge">{t.badge}</div>}
              <div className="tier">{t.tier}</div>
              <h3>{t.name}</h3>
              <div className="price"><sup>€</sup>{t.price}</div>
              <div className="per">{t.per}</div>
              <ul>
                {t.list.map(l => <li key={l}>{l}</li>)}
              </ul>
              <button className={`btn ${t.featured ? 'btn-sage' : 'btn-ghost-light'}`} onClick={onBook}>
                {t.cta} <Icon name="arrow" size={14} />
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div className="wordmark">Face<em>by</em>Oxy</div>
          <p className="tagline">Estetinė osteopatija · Oksana Budraitė. Kaunas &amp; Vilnius.</p>
          <div className="socials">
            <a href="https://instagram.com/face_by_oxy" target="_blank" rel="noopener noreferrer"><Icon name="instagram" size={16} /></a>
            <a href="https://wa.me/37067253955" target="_blank" rel="noopener noreferrer"><Icon name="whatsapp" size={16} /></a>
          </div>
        </div>
        <div>
          <h5>Studija</h5>
          <ul>
            <li>Grožio salonas ETRE</li>
            <li>Kęstučio g. 51, Kaunas</li>
            <li>10:00–19:00</li>
            <li>+370 672 53955</li>
          </ul>
        </div>
        <div>
          <h5>Naršyti</h5>
          <ul>
            <li><a href="#about">Apie mane</a></li>
            <li><a href="#method">Seansas</a></li>
            <li><a href="#pricing">Kainos</a></li>
            <li><a href="#faq">DUK</a></li>
          </ul>
        </div>
        <div>
          <h5>Teisinė info</h5>
          <ul>
            <li><a href="#">Privatumo politika</a></li>
            <li><a href="#">Naudojimo sąlygos</a></li>
            <li><a href="#">Slapukai</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Face by Oxy</span>
        <span>Tikras grožis prasideda ten, kur prasideda sveikai funkcionuojantis kūnas.</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { StatBand, Problem, Method, Process, BeforeAfter, About, Pricing, Footer });