/* global React */
const KW_BASE_S = typeof window !== "undefined" && window.KW_BASE || "";
const KW_HOME_S = typeof window !== "undefined" && window.KW_HOME || "";

function Hero({ brushIntensity, heroImage = "massage", showRail = true }) {
  const brushStyle = { opacity: brushIntensity ?? 0.07 };

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__bg">
        <video
          src="assets/videos/hero-bg.mp4"
          autoPlay
          loop
          muted
          playsInline
          preload="auto"
          aria-hidden="true" />
        
      </div>
      <div className="hero__inner">
        <div className="hero__content">
          <h1 className="hero__title">
            Quiet care,<br />
            <span className="em">deeply rooted.</span>
          </h1>
          <p className="hero__hangul">Vancouver <span className="dot" style={{ color: "rgb(43, 108, 177)" }}>·</span> Langley</p>
          <p className="hero__sub">
            Acupuncture, registered massage therapy, pilates, kinesiology, and herbal medicine —
            practiced together with the time, depth and clinical literacy that real healing asks for.
          </p>
          <div className="hero__cta">
            <a href="https://koreanclinic.janeapp.com/" target="_blank" rel="noopener" className="btn btn--light btn--lg">
              Book a visit <ArrowUR />
            </a>
            <a href="#approach" className="btn btn--ghost-light btn--lg">
              Five ways we treat
            </a>
          </div>
        </div>

        {showRail && <div className="hero__rail" aria-hidden="true">
          <div className="hero__rail-line" />
          <div className="hero__rail-text">건강한 삶의 시작</div>
          <div className="hero__rail-line" />
          <div style={{ fontFamily: "var(--kw-font-brush)", fontSize: 22, lineHeight: 1 }}>K</div>
        </div>}
      </div>

      <div className="hero__meta">
        <div className="hero__meta-inner">
          <div className="hero__meta-loc">
            <div>
              <strong>Downtown</strong>
              <span>Mon–Sat · 8:30 a.m. – 7:30 p.m.</span>
            </div>
            <div>
              <strong>Langley</strong>
              <span>Open 7 days · <a href="#locations" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: 3 }}>see hours below</a></span>
            </div>
          </div>
          <div className="hero__meta-scroll">
            <span>Scroll to explore</span>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><line x1="12" y1="5" x2="12" y2="19" /><polyline points="5 12 12 19 19 12" /></svg>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------------------------------------------------- */
function Marquee() {
  const items = [...KWELL_DATA.insurers, ...KWELL_DATA.insurers];
  return (
    <section className="marquee" data-screen-label="02 Insurers">
      <div className="marquee__label">Direct-billed insurers</div>
      <div className="marquee__track">
        {items.map((i, idx) => <img key={idx} src={i.src} alt={i.alt} />)}
      </div>
    </section>);

}

/* -------------------------------------------------------------- */
function Approach() {
  return (
    <section id="approach" className="approach" data-screen-label="03 Five Ways">
      <div className="kw-container">
        <div className="approach__head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Our Approach</div>
            <h2 className="approach__title">
              Five ways<br />we treat
              <span className="accent">다섯</span>
            </h2>
          </div>
          <div className="approach__intro">
            <p>
              East and West, hands and needles, movement and rest. At K-Well we don't choose between
              traditions — we choose <strong style={{ color: "var(--kw-ink)" }}>what your body is asking for today</strong>, and we have the practitioners
              under one roof to deliver it.
            </p>
            <p style={{ fontSize: 14.5, letterSpacing: ".04em", color: "var(--kw-stone)", marginTop: 16 }}>
              No need to be referred out — every practice you'll need is in-house, so most patients combine two or three. We'll map yours during your first consult.
            </p>
          </div>
        </div>

        <div className="ways">
          {KWELL_DATA.ways.map((w) =>
          <div key={w.name} id={w.name} className="way">
              <div className="way__num">
                {w.num}
                <small>{w.numLabel} · {w.numKr}</small>
              </div>
              <div>
                <div className="way__name">
                  {w.name}
                  <span className="way__name-hangul">{w.hangul}</span>
                </div>
              </div>
              <div className="way__desc">{w.desc}</div>
              <div className="way__tags">
                {w.tags.map((t) => <span key={t} className="way__tag">{t}</span>)}
              </div>
              <a href={`${KW_BASE_S}services/${w.slug}.html`} className="way__cta">Read more <ArrowUR /></a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------------------------------------------------- */
function Philosophy() {
  return (
    <section className="philosophy" data-screen-label="04 Philosophy">
      <img className="philosophy__k" src="assets/K-mark.svg" alt="" />
      <div className="philosophy__inner">
        <div className="philosophy__side">
          뿌리가<br />
          깊은<br />
          나무는<br />
          바람에<br />
          흔들리지<br />
          않는다.
        </div>
        <div>
          <div className="eyebrow eyebrow--light" style={{ marginBottom: 28 }}>A note from the director</div>
          <p className="philosophy__quote">
            "We don't sell sessions. We listen, we map the pattern, then we use whatever
            <em> tradition or evidence</em> serves the body in front of us. That's all
            integrative care really means — and it's what we've been quietly practicing for years."
          </p>
          <div className="philosophy__attr">
            <div className="seal">한</div>
            <div>
              <strong>Ph.D. Hosung Jang</strong>
              <div>Founding director · Ph.D. Acu. R. TCM. P.</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------------------------------------------------- */
function Spotlight() {
  return (
    <section className="spotlight" data-screen-label="05 Spotlight">
      <div className="kw-container">
        <div className="spotlight__grid">
          <div className="spotlight__media">
            <img src="assets/images/cupping.jpg" alt="Cupping treatment in session" />
            <div className="spotlight__media-seal">
              <span className="seal">웰</span>
            </div>
            <div className="spotlight__media-caption">정성 — by hand, with care</div>
          </div>
          <div>
            <div className="eyebrow">The practice</div>
            <h2 className="spotlight__h">
              <span className="accent">정 · 성 · 의</span>
              Sincerity, in every session.
            </h2>
            <p className="spotlight__p">
              Korean medicine has a word — <em className="italic-serif">jeongseong</em> (정성) —
              that's hard to translate. The closest English is "wholehearted care, without watching the clock."
              That's the standard our team holds. First-visits run a full hour. Follow-ups don't get cut short
              because the schedule got tight. We'd rather book fewer patients than rush yours.
            </p>

            <div className="spotlight__stats">
              <div>
                <div className="spotlight__stat-num">1:1</div>
                <div className="spotlight__stat-label">Always</div>
              </div>
              <div>
                <div className="spotlight__stat-num">10<span style={{ fontSize: 24 }}>+</span></div>
                <div className="spotlight__stat-label">Practitioners</div>
              </div>
              <div>
                <div className="spotlight__stat-num">10<span style={{ fontSize: 24 }}>+ yr</span></div>
                <div className="spotlight__stat-label">In practice</div>
              </div>
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="#team" className="btn btn--primary">Meet the team <ArrowUR /></a>
              <a href="#" className="btn btn--ghost">Read our story</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------------------------------------------------- */
function Team() {
  return (
    <section id="team" className="team" data-screen-label="06 Team">
      <div className="kw-container">
        <div className="team__head">
          <div className="team__head-l">
            <div className="eyebrow">Our practitioners</div>
            <h2 className="h-display">
              Hands you can <span className="italic-serif">trust</span>.
            </h2>
          </div>
          <div className="team__count">
            <div className="team__count-n">10+</div>
            <div className="team__count-l">Licensed practitioners across both clinics</div>
          </div>
        </div>

        <div className="team__grid">
          {KWELL_DATA.team.map((m) =>
          <a
            key={m.name}
            className="member"
            href={m.url || "#"}
            target="_blank"
            rel="noopener">
            
              <div className="member__img-wrap">
                <img className="member__img" src={m.img} alt={m.name} loading="lazy" />
                <div className="member__role-tag">{m.tag}</div>
              </div>
              <h3 className="member__name">
                {m.name}
                <span className="member__name-hangul">{m.hangul}</span>
              </h3>
              <div className="member__role">{m.role}</div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------------------------------------------------- */
function Locations() {
  return (
    <section id="locations" className="locations" data-screen-label="07 Locations">
      <div className="kw-container">
        <div className="locations__head">
          <div className="eyebrow eyebrow--plain" style={{ justifyContent: "center" }}>지점 안내 · Where to find us</div>
          <h2 className="h-display">Two clinics, one practice.</h2>
        </div>
        <div className="locations__grid">
          <div className="loc-card">
            <div className="loc-card__hero">
              <img src="assets/images/web-block-bg.png" alt="" />
              <div className="loc-card__pin">Downtown</div>
              <div className="loc-card__title-overlay">
                Vancouver
                <span className="loc-card__title-hangul">밴쿠버 다운타운점</span>
              </div>
            </div>
            <div className="loc-card__body">
              <div className="loc-card__row">
                <div className="loc-card__row-l">Address</div>
                <div className="loc-card__row-r">
                  <strong>405–889 West Pender St.</strong><br />Vancouver, BC V6C 3B2
                  <em>For downtown parking, please contact us</em>
                </div>
              </div>
              <div className="loc-card__row">
                <div className="loc-card__row-l">Hours</div>
                <div className="loc-card__row-r">
                  <strong>Mon – Sat</strong> · 8:30 a.m. – 7:30 p.m.<br />
                  <strong>Sun</strong> · Closed
                </div>
              </div>
              <div className="loc-card__row">
                <div className="loc-card__row-l">Services</div>
                <div className="loc-card__row-r">Acupuncture, RMT, Pilates, Kinesiology, Herbal Med · 7 treatment rooms</div>
              </div>
              <div className="loc-card__footer">
                <a className="loc-card__maps" href="https://maps.app.goo.gl/cWFB2jd8uLVFMyNDA" target="_blank" rel="noopener">
                  <MapPin /> Open in Google Maps
                </a>
                <a className="btn btn--ghost" href="tel:6046990119"><Phone /> 604-699-0119</a>
              </div>
            </div>
          </div>

          <div className="loc-card">
            <div className="loc-card__hero">
              <img src="assets/images/web-block-bg-1.png" alt="" />
              <div className="loc-card__pin">Metro-Vancouver</div>
              <div className="loc-card__title-overlay">
                Langley
                <span className="loc-card__title-hangul">랭리점</span>
              </div>
            </div>
            <div className="loc-card__body">
              <div className="loc-card__row">
                <div className="loc-card__row-l">Address</div>
                <div className="loc-card__row-r">
                  <strong>19978 72 Ave #203</strong><br />Langley Twp, BC V2Y 1R7
                  <em>Free 2-hour parking in front of the building</em>
                </div>
              </div>
              <div className="loc-card__row">
                <div className="loc-card__row-l">Hours</div>
                <div className="loc-card__row-r">
                  <strong>Mon – Sat</strong> · 9 a.m. – 5:30 p.m.<br />
                  <strong>Sun</strong> · 10 a.m. – 4 p.m.
                </div>
              </div>
              <div className="loc-card__row">
                <div className="loc-card__row-l">Services</div>
                <div className="loc-card__row-r">Acupuncture, RMT, Herbal Med · 6 treatment rooms</div>
              </div>
              <div className="loc-card__footer">
                <a className="loc-card__maps" href="https://maps.app.goo.gl/9iqqmHiu2L3CmHyq8" target="_blank" rel="noopener">
                  <MapPin /> Open in Google Maps
                </a>
                <a className="btn btn--ghost" href="tel:6043682846"><Phone /> 604-368-2846</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------------------------------------------------- */
function Voices() {
  return (
    <section id="voices" className="voices" data-screen-label="08 Stories">
      <div className="kw-container">
        <div className="voices__head">
          <div>
            <div className="eyebrow">Patient stories</div>
            <h2 className="h-display">
              Quiet wins, told<br />in patient voices.
            </h2>
          </div>
          <div className="voices__rating">
            <div className="voices__stars">
              {[1, 2, 3, 4, 5].map((i) => <Star key={i} />)}
            </div>
            <div className="voices__rating-l">5.0 / 5.0</div>
            <div className="voices__rating-sub">140+ GOOGLE REVIEWS</div>
          </div>
        </div>
      </div>

      <div className="voices__marquee" aria-label="Patient stories — auto scrolling">
        <div className="voices__marquee-track">
          {[...KWELL_DATA.voices, ...KWELL_DATA.voices].map((v, i) =>
          <article key={i} className="voice">
              <div className="voice__mark">"</div>
              <p className="voice__q">{v.q}</p>
              <div className="voice__meta">
                <div className="voice__who">{v.who}<span>· {v.time}</span></div>
                <div className="voice__svc">{v.svc}</div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* -------------------------------------------------------------- */
function Booking() {
  return (
    <section className="booking" data-screen-label="09 Booking">
      <div className="booking__bg" aria-hidden="true">
        <img src="assets/images/booking-bg.png" alt="" />
      </div>
      <div className="booking__inner">
        <div>
          <div className="eyebrow eyebrow--light">Begin when you're ready</div>
          <h2 className="booking__h">
            Direct-billed,<br />
            <span className="em">never rushed.</span>
          </h2>
        </div>
        <div>
          <div className="booking__list">
            <div className="booking__row"><Check /> <span><strong>Direct billing</strong> to Sun Life, Manulife, Canada Life, Pacific Blue Cross, Medavie Blue Cross, Green Shield, MSP, ICBC and many more</span></div>
            <div className="booking__row"><Check /> <span><strong>Free consultation</strong> with your first treatment · no add-on fees</span></div>
            <div className="booking__row"><Check /> <span><strong>Bilingual care</strong> in English & 한국어</span></div>
            <div className="booking__row"><Check /> <span><strong>Open 7 days</strong> across Downtown & Langley</span></div>
          </div>
          <div className="booking__cta">
            <a href="https://koreanclinic.janeapp.com/" target="_blank" rel="noopener" className="btn btn--light btn--lg">
              Book online via Jane App <ArrowUR />
            </a>
            <div className="booking__note">Or call 604-699-0119 · info@k-acuwellness.com</div>
          </div>
        </div>
      </div>
    </section>);

}

/* -------------------------------------------------------------- */
function Footer() {
  return (
    <footer className="footer" data-screen-label="10 Footer">
      <img className="footer__watermark" src={KW_BASE_S + "assets/K-mark.svg"} alt="" />
      <div className="footer__top">
        <div className="footer__brand">
          <div className="footer__logo">
            <img src={KW_BASE_S + "assets/K-mark.svg"} alt="" />
            <div>
              <div className="footer__brand-name">K-Well</div>
              <div className="footer__brand-hangul">한국한의원 · K-Well Integrative Wellness Clinic</div>
            </div>
          </div>
          <p className="footer__brand-p">
            One-stop recovery care for ICBC patients. We go past symptom relief — combining our five practices into one plan that returns you to the life you had.
          </p>
        </div>

        <div className="footer__col">
          <div className="footer__col-h">Services</div>
          <ul>
            {KWELL_DATA.ways.map((w) =>
            <li key={w.name}><a href={`${KW_BASE_S}services/${w.slug}.html`}>{w.name} <small>{w.hangul}</small></a></li>
            )}
          </ul>
        </div>

        <div className="footer__col">
          <div className="footer__col-h">Clinic</div>
          <ul>
            <li><a href={KW_HOME_S + "#team"}>Our team</a></li>
            <li><a href={KW_HOME_S + "#locations"}>Locations</a></li>
            <li><a href={KW_HOME_S + "#voices"}>Patient stories</a></li>
            <li><a href="#">Prices & promotions</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Insurance & direct billing</a></li>
          </ul>
        </div>

        <div className="footer__col">
          <div className="footer__col-h">Hours</div>
          <div className="footer__hours-block">
            <strong>| Downtown |</strong>
            <div>Mon-Sat: 8:30 a.m. - 7:30 p.m.</div>
            <strong>| Langley |</strong>
            <div>Mon–Sat: 9 a.m. – 5:30 p.m.<br />Sun: 10 a.m. – 4 p.m.</div>
          </div>
        </div>
      </div>

      <div className="footer__bottom">
        <div className="footer__copy">© 2026 K-Well Integrative Wellness Clinic · 604-699-0119 · info@k-acuwellness.com</div>
        <div className="footer__social">
          <a href="tel:6046990119" aria-label="Phone"><Phone /></a>
          <a href="mailto:info@k-acuwellness.com" aria-label="Email"><Mail /></a>
          <a href="https://www.instagram.com/k_acuwellness" target="_blank" rel="noopener" aria-label="Instagram"><Instagram /></a>
          <a href="https://www.facebook.com" target="_blank" rel="noopener" aria-label="Facebook"><Facebook /></a>
          <a href="https://www.youtube.com" target="_blank" rel="noopener" aria-label="YouTube"><Youtube /></a>
          <a href="https://www.tiktok.com" target="_blank" rel="noopener" aria-label="TikTok"><TikTok /></a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Hero, Marquee, Approach, Philosophy, Spotlight, Team, Locations, Voices, Booking, Footer });