const { useState, useRef, useEffect } = React;

// ── useReveal: Intersection Observer scroll-reveal hook ───────────
function useReveal(ref, { threshold = 0.15, delay = 0 } = {}) {
  const [revealed, setRevealed] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setRevealed(true); io.disconnect(); } },
      { threshold }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [ref, threshold]);

  return revealed;
}


// ── Btn: button wrapper with click ripple ─────────────────────────
function Btn({ className = '', onClick, children, style, type }) {
  const ref = useRef(null);
  const fire = (e) => {
    const btn = ref.current;
    if (!btn) return;
    const rect = btn.getBoundingClientRect();
    const span = document.createElement('span');
    span.className = 'ripple';
    span.style.left = (e.clientX - rect.left) + 'px';
    span.style.top  = (e.clientY - rect.top)  + 'px';
    btn.appendChild(span);
    span.addEventListener('animationend', () => span.remove(), { once: true });
  };
  return (
    <button ref={ref} className={'btn ' + className} style={style} type={type}
      onClick={(e) => { fire(e); onClick && onClick(e); }}>
      {children}
    </button>
  );
}

// ── SVG Icon ──────────────────────────────────────────────────────
function Icon({ name, size = 18 }) {
  const paths = {
    leaf:    "M12 2C8 6 4 10 4 14a8 8 0 0016 0c0-4-4-8-8-12z M12 2v20",
    breath:  "M4 12c3 0 4-3 8-3s5 3 8 3 M4 8c3 0 4-3 8-3s5 3 8 3 M4 16c3 0 4 3 8 3s5-3 8-3",
    star:    "M12 3l2.5 6 6.5.5-5 4.5 1.5 6.5L12 17l-5.5 3.5L8 14 3 9.5l6.5-.5z",
    person:  "M12 12a5 5 0 100-10 5 5 0 000 10zm-8 8a8 8 0 0116 0",
    home:    "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
    users:   "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z",
    calendar:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z",
    map:     "M9 3l-6 3v15l6-3m0-15v15m0-15l6 3m-6 12l6-3m0 0l6 3V6l-6-3m0 15V3",
    arrow:   "M5 12h14M12 5l7 7-7 7",
    check:   "M20 6L9 17l-5-5",
    heart:   "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z",
    pose:    "M12 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM5 8l4 4-2 7h2l1.5-5 2.5 2 1 3h2l-1.5-5 3-3 1 2h2l-2-4-4-2-1.5-1.5",
  };
  const d = paths[name] || paths.leaf;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d={d} />
    </svg>
  );
}

// ── TopNav — Layer 4: scrolled glass effect ───────────────────────
function TopNav({ page, setPage, lang, setLang, t }) {
  const [open,     setOpen]     = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const navRef = useRef(null);

  const items = [
    { id: "home",     label: t.nav.home },
    { id: "packages", label: t.nav.packages },
    { id: "about",    label: t.nav.about },
    { id: "contact",  label: t.nav.contact }
  ];
  const go = (id) => { setPage(id); setOpen(false); };

  useEffect(() => {
    const onScroll = () => {
      const heroEl = document.querySelector('.hero');
      const heroH  = heroEl ? heroEl.offsetHeight : 400;
      const progress = Math.min(window.scrollY / heroH, 1);
      setScrolled(progress > 0.9);
      if (navRef.current) navRef.current.style.setProperty('--np', progress);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const onHero = page === 'home' && !scrolled;

  return (
    <header ref={navRef} className={'nav' + (scrolled ? ' nav--scrolled' : (onHero ? ' nav--at-top' : ''))}>
      <div className="nav-inner">
        <div className="nav-brand" onClick={() => go("home")}>
          <img src={(onHero || scrolled) ? "/assets/logo%20white.png" : "/assets/logo.png"} alt="Body Healing Studio" className="nav-brand-logo" />
        </div>

        <nav className="nav-links">
          {items.map(i => (
            <a key={i.id} className={page === i.id ? "active" : ""} onClick={() => go(i.id)}>
              {i.label}
            </a>
          ))}
        </nav>

        <div className="nav-right">
          <LangSwitch lang={lang} setLang={setLang} />
          <Btn className="btn-dark btn-sm" onClick={() => go("packages")}>{t.nav.book}</Btn>
        </div>

        <button className={"hamburger" + (open ? " is-open" : "")}
          onClick={() => setOpen(!open)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>

      {open && (
        <div className="mobile-menu">
          <nav className="mobile-links">
            {items.map(i => (
              <a key={i.id} className={page === i.id ? "active" : ""} onClick={() => go(i.id)}>
                {i.label}
              </a>
            ))}
          </nav>
          <div className="mobile-actions">
            <LangSwitch lang={lang} setLang={setLang} />
            <Btn className="btn-primary" onClick={() => go("packages")}>{t.nav.book}</Btn>
          </div>
        </div>
      )}
    </header>
  );
}


// ── LangSwitch ────────────────────────────────────────────────────
function LangSwitch({ lang, setLang }) {
  return (
    <div className="lang">
      <button className={lang === "el" ? "active" : ""} onClick={() => setLang("el")}>EL</button>
      <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
    </div>
  );
}

// ── Hero — Layer 3: staggered entrance sequence ───────────────────
function Hero({ t, setPage }) {
  const h = t.home;
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    const id = setTimeout(() => setMounted(true), 50);
    return () => clearTimeout(id);
  }, []);

  const hel = (base, dy, delay) => ({
    className: (base ? base + ' ' : '') + 'hero-el-enter' + (mounted ? ' hero-el-ready' : ''),
    style: { '--hero-dy': dy + 'px', transitionDelay: delay + 'ms' }
  });

  return (
    <section className="hero">
      <div className="hero-inner">
        <div className="hero-left">
          <div {...hel('hero-eb', 24, 100)}>{h.eyebrow}</div>
          <h1 {...hel('', 32, 220)}>{h.hero}</h1>
          <p {...hel('hero-sub', 20, 340)}>{h.lede}</p>
          <div {...hel('hero-actions', 16, 460)}>
            <Btn className="btn-primary" onClick={() => setPage("packages")}>{h.ctaPrimary}</Btn>
            <Btn className="btn-outline" onClick={() => setPage("contact")}>{h.ctaContact}</Btn>
          </div>
          <div {...hel('hero-proof', 0, 580)}>
            <div className="av-stack">
              <div className="av"><img src="/assets/photos/studio-circle.jpg" alt="" /></div>
              <div className="av"><img src="/assets/photos/studio-lounge.jpg" alt="" /></div>
              <div className="av" style={{background:"var(--bhs-green-pale)"}} />
            </div>
            <p><strong>{h.socialProof}</strong></p>
          </div>
        </div>

        <div className="hero-right">
          <div className={'hero-img-wrap hero-img-enter' + (mounted ? ' hero-img-ready' : '')}
               style={{ transitionDelay: '200ms' }}>
            <img src="/assets/photos/hero-moon.jpg" alt="Body Healing Studio" />
          </div>
          <div className={'hero-badge hero-badge-enter' + (mounted ? ' hero-badge-ready' : '')}
               style={{ transitionDelay: '500ms' }}>
            <div className="n">{t.stats.years.n}</div>
            <div className="l">{t.stats.years.l}</div>
          </div>
        </div>
      </div>
    </section>
  );
}


// ── Stats bar — Layer 2: animated counters ────────────────────────
function StatItem({ x }) {
  const ref = useRef(null);
  const revealed = useReveal(ref, { threshold: 0.3 });
  const [count, setCount] = useState(0);

  const raw    = String(x.n);
  const match  = raw.match(/^([\d,]+(?:\.\d+)?)(.*)$/);
  const numStr = match ? match[1].replace(/,/g, '') : '0';
  const target = parseFloat(numStr);
  const suffix = match ? match[2] : '';
  const isFloat = numStr.includes('.');

  useEffect(() => {
    if (!revealed) return;
    const duration = 1400;
    const start = performance.now();
    const tick = (now) => {
      const p = Math.min((now - start) / duration, 1);
      const v = 1 - Math.pow(1 - p, 3);
      setCount(isFloat
        ? parseFloat((v * target).toFixed(1))
        : Math.round(v * target));
      if (p < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, [revealed, target, isFloat]);

  return (
    <div ref={ref} className="stat-item">
      <div className="n">{count}{suffix}</div>
      <div className="l">{x.l}</div>
    </div>
  );
}

function StatsBar({ t }) {
  const s = t.stats;
  return (
    <div className="stats-bar">
      <div className="stats-bar-inner">
        {[s.years, s.reformers, s.classes, s.students].map((x, i) => (
          <StatItem key={i} x={x} />
        ))}
      </div>
    </div>
  );
}


// ── Marquee ───────────────────────────────────────────────────────
function Marquee({ items }) {
  const full = [...items, ...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {full.map((x, i) => <span key={i} className="marquee-item">{x}</span>)}
      </div>
    </div>
  );
}

// ── Benefits section — Layer 1: staggered reveal ──────────────────
function BenefitItem({ b, icon, delay }) {
  const ref = useRef(null);
  const revealed = useReveal(ref);
  return (
    <div ref={ref} className={'benefit-item reveal' + (revealed ? ' is-revealed' : '')} style={{ transitionDelay: delay + 'ms' }}>
      <div className="benefit-icon"><Icon name={icon} size={18} /></div>
      <div><h4>{b.t}</h4><p>{b.d}</p></div>
    </div>
  );
}


function BenefitsSection({ t, setPage }) {
  const h = t.home;
  const ebRef = useRef(null); const ebRev = useReveal(ebRef);
  const tRef  = useRef(null); const tRev  = useReveal(tRef);
  const sRef  = useRef(null); const sRev  = useReveal(sRef);
  return (
    <section className="benefits-section">
      <div className="container">
        <div className="benefits-grid">
          <div className="benefits-photos">
            <div className="ph ph-tall"><img src="/assets/photos/hall.jpg" alt="" /></div>
            <div className="ph"><img src="/assets/photos/reformers.jpg" alt="" /></div>
            <div className="ph"><img src="/assets/photos/studio-circle.jpg" alt="" /></div>
          </div>
          <div>
            <div ref={ebRef} className={'section-eb reveal' + (ebRev ? ' is-revealed' : '')}>{h.benefitsEb}</div>
            <h2 ref={tRef} className={'section-title reveal' + (tRev ? ' is-revealed' : '')}
                style={{ transitionDelay: '80ms' }}>{h.benefitsTitle}</h2>
            <p ref={sRef} className={'section-sub reveal' + (sRev ? ' is-revealed' : '')}
               style={{ transitionDelay: '160ms' }}>{h.benefitsSub}</p>
            <div style={{marginTop: 24}}>
              <Btn className="btn-outline btn-sm" onClick={() => setPage("about")}>
                {t.nav.learnMore} →
              </Btn>
            </div>
            <div className="benefit-list">
              {h.benefits.map((b, i) => (
                <BenefitItem key={i} b={b} icon={i === 0 ? "heart" : "pose"} delay={i * 80} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


// ── Classes section — Layers 1 + 7: reveal + image parallax ──────
function ClassCard({ f, photo, position, index, t, setPage }) {
  const ref = useRef(null);
  const revealed = useReveal(ref);
  const imgRef = useRef(null);

  const onMouseMove = (e) => {
    if (!imgRef.current) return;
    const r = e.currentTarget.getBoundingClientRect();
    const x = (e.clientX - r.left - r.width  / 2) * 0.04;
    const y = (e.clientY - r.top  - r.height / 2) * 0.04;
    imgRef.current.style.transform = `scale(1.06) translate(${x}px, ${y}px)`;
  };
  const onMouseLeave = () => {
    if (imgRef.current) imgRef.current.style.transform = '';
  };

  return (
    <div ref={ref}
      className={'class-card reveal' + (revealed ? ' is-revealed' : '')}
      style={{ transitionDelay: (index * 100) + 'ms' }}
      onMouseMove={onMouseMove}
      onMouseLeave={onMouseLeave}>
      <div className="class-card-img">
        <img ref={imgRef} src={photo} alt={f.t}
             style={{ objectPosition: position, transition: 'transform 0.1s ease' }} />
      </div>
      <div className="class-card-body">
        <div className="class-card-eb">{f.eb}</div>
        <h3>{f.t}</h3>
        <p>{f.d}</p>
        <button className="class-card-link" onClick={() => setPage("packages")}>
          {t.nav.book} →
        </button>
      </div>
    </div>
  );
}


function ClassesSection({ t, setPage }) {
  const h = t.home;
  const photos    = ["/assets/photos/reformers.jpg", "/assets/photos/hall.jpg", "/assets/photos/space.jpg"];
  const positions = ["center top", "center", "center bottom"];
  const ebRef = useRef(null); const ebRev = useReveal(ebRef);
  const tRef  = useRef(null); const tRev  = useReveal(tRef);
  return (
    <section className="classes-section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-row">
            <div>
              <div ref={ebRef} className={'section-eb reveal' + (ebRev ? ' is-revealed' : '')}>{h.classesEb}</div>
              <h2 ref={tRef} className={'section-title reveal' + (tRev ? ' is-revealed' : '')}
                  style={{ transitionDelay: '80ms' }}>{h.classesTitle}</h2>
            </div>
            <Btn className="btn-outline btn-sm" onClick={() => setPage("packages")}>
              {t.nav.book} →
            </Btn>
          </div>
        </div>
        <div className="class-grid">
          {h.formats.map((f, i) => (
            <ClassCard key={i} f={f} photo={photos[i]} position={positions[i]}
                       index={i} t={t} setPage={setPage} />
          ))}
        </div>
      </div>
    </section>
  );
}


// ── Features highlight — Layer 1: staggered tile reveal ───────────
function FeatureTile({ f, icon, delay }) {
  const ref = useRef(null);
  const revealed = useReveal(ref);
  return (
    <div ref={ref} className={'feature-tile reveal' + (revealed ? ' is-revealed' : '')} style={{ transitionDelay: delay + 'ms' }}>
      <div className="feature-tile-icon"><Icon name={icon} size={16} /></div>
      <h4>{f.t}</h4>
      <p>{f.d}</p>
    </div>
  );
}


function FeaturesHighlight({ t }) {
  const h = t.home;
  const icons = ["person", "home", "users", "calendar"];
  const ebRef = useRef(null); const ebRev = useReveal(ebRef);
  const tRef  = useRef(null); const tRev  = useReveal(tRef);
  return (
    <section className="features-hl">
      <div className="container">
        <div className="features-hl-grid">
          <div className="features-hl-left">
            <div className="features-logo-icon" style={{ background: 'transparent', width: 'auto', height: 'auto', display: 'inline-block' }}>
              <img src="/assets/logo.png" alt="Body Healing Studio" style={{ height: '48px', width: 'auto', display: 'block' }} />
            </div>
            <div ref={ebRef} className={'section-eb reveal' + (ebRev ? ' is-revealed' : '')}>{h.featuresEb}</div>
            <h2 ref={tRef} className={'section-title reveal' + (tRev ? ' is-revealed' : '')}
                style={{ transitionDelay: '80ms' }}>{h.featuresTitle}</h2>
            <div className="feature-tiles">
              {h.features.map((f, i) => (
                <FeatureTile key={i} f={f} icon={icons[i]} delay={i * 80} />
              ))}
            </div>
          </div>
          <div className="features-hl-right">
            <div className="features-hl-img">
              <img src="/assets/photos/space.jpg" alt="Body Healing Studio" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


// ── Team section — Layer 1: staggered card reveal ─────────────────
function TeamCard({ m, delay }) {
  const ref = useRef(null);
  const revealed = useReveal(ref);
  return (
    <div ref={ref} className={'team-card reveal' + (revealed ? ' is-revealed' : '')} style={{ transitionDelay: delay + 'ms' }}>
      <div className="team-card-img">
        <img src="/assets/photos/studio-circle.jpg" alt={m.name} />
      </div>
      <h3>{m.name}</h3>
      <div className="role">{m.role}</div>
      <p className="bio">{m.bio}</p>
    </div>
  );
}


function TeamSection({ t }) {
  const ebRef = useRef(null); const ebRev = useReveal(ebRef);
  const tRef  = useRef(null); const tRev  = useReveal(tRef);
  return (
    <section className="team-section">
      <div className="container">
        <div className="section-head" style={{textAlign:"center"}}>
          <div ref={ebRef} className={'section-eb reveal' + (ebRev ? ' is-revealed' : '')}
               style={{ display: "block" }}>{t.team.eb}</div>
          <h2 ref={tRef} className={'section-title reveal' + (tRev ? ' is-revealed' : '')}
              style={{ margin: "0 auto", transitionDelay: '80ms' }}>{t.team.title}</h2>
        </div>
        <div className="team-grid">
          {t.team.members.map((m, i) => <TeamCard key={i} m={m} delay={i * 90} />)}
        </div>
      </div>
    </section>
  );
}


// ── Testimonials — Layer 1: staggered card reveal ─────────────────
function TestiCard({ tc, delay }) {
  const ref = useRef(null);
  const revealed = useReveal(ref);
  return (
    <div ref={ref} className={'testi-card reveal' + (revealed ? ' is-revealed' : '')} style={{ transitionDelay: delay + 'ms' }}>
      <div className="stars">{[1,2,3,4,5].map(j => <span key={j}>★</span>)}</div>
      <p className="q">"{tc.q}"</p>
      <div className="att">
        <div className="att-av"><img src="/assets/photos/studio-circle.jpg" alt="" /></div>
        <div>
          <div className="att-name">{tc.att ? tc.att.split(" · ")[0] : "Maria"}</div>
          <div className="att-loc">{tc.att ? tc.att.split(" · ")[1] || "Varkiza" : "Varkiza"}</div>
        </div>
      </div>
    </div>
  );
}


function TestimonialsSection({ t }) {
  return (
    <section className="testi-section">
      <div className="container">
        <div className="testi-layout">
          <div className="testi-left">
            <div className="testi-stars">{[1,2,3,4,5].map(i => <span key={i}>★</span>)}</div>
            <div className="testi-score">4.9</div>
            <p className="testi-count">{t.testimonialsLabel}</p>
            <div className="section-eb">{t.home.testiTitle}</div>
            <h2 className="section-title" style={{fontSize:"clamp(26px,2.8vw,36px)"}}>{t.home.testiTitle}</h2>
          </div>
          <div className="testi-cards">
            {t.testimonials.map((tc, i) => <TestiCard key={i} tc={tc} delay={i * 110} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── CTA Banner — Layer 1: heading reveal ──────────────────────────
function CTABanner({ t, setPage }) {
  const ref = useRef(null);
  const revealed = useReveal(ref);
  return (
    <section className="cta-banner">
      <div className="cta-banner-inner">
        <span className="eb">{t.home.ctaBannerEb}</span>
        <h2 ref={ref} className={'reveal' + (revealed ? ' is-revealed' : '')}
            style={{ transitionDelay: '80ms' }}>{t.home.ctaBannerTitle}</h2>
        <div className="cta-banner-btns">
          <Btn className="btn-white" onClick={() => setPage("packages")}>{t.nav.book}</Btn>
          <Btn className="btn-outline"
               style={{borderColor:"rgba(255,255,255,0.5)", color:"#fff"}}
               onClick={() => setPage("contact")}>{t.home.ctaSecondary}</Btn>
        </div>
      </div>
    </section>
  );
}


// ── Accordion (FAQ) ───────────────────────────────────────────────
function Accordion({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="accordion">
      {items.map((it, i) => (
        <div key={i} className={"acc-item" + (open === i ? " open" : "")}>
          <button className="acc-btn" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <span className="caret">+</span>
          </button>
          <div className="acc-body">{it.a}</div>
        </div>
      ))}
    </div>
  );
}

// ── Package Card — Layer 1: staggered reveal ──────────────────────
function PackageCard({ eb, title, price, desc, featured, cta, staggerIndex = 0 }) {
  const ref = useRef(null);
  const revealed = useReveal(ref);
  return (
    <div ref={ref}
      className={'pkg reveal' + (revealed ? ' is-revealed' : '') + (featured ? ' pkg-featured' : '')}
      style={{ transitionDelay: (staggerIndex * 120) + 'ms' }}>
      <div className="eb">{eb}</div>
      <div className="title">{title}</div>
      <div className="price">{price}</div>
      <hr className="rule" />
      <div className="desc">{desc}</div>
      <button className="pkg-cta">{cta}</button>
    </div>
  );
}


// ── Chips ─────────────────────────────────────────────────────────
function Chips({ items, active, onChange }) {
  return (
    <div className="chips">
      {items.map((x, i) => (
        <button key={i} className={"chip" + (active === i ? " active" : "")} onClick={() => onChange(i)}>
          {x}
        </button>
      ))}
    </div>
  );
}

// ── Field ─────────────────────────────────────────────────────────
function Field({ label, placeholder, type = "text", full, multiline }) {
  return (
    <div className={"field" + (full ? " full" : "")}>
      <label>{label}</label>
      {multiline
        ? <textarea rows="4" placeholder={placeholder} />
        : <input type={type} placeholder={placeholder} />}
    </div>
  );
}

// ── Footer ────────────────────────────────────────────────────────
function Footer({ t, lang, setPage }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand" onClick={() => setPage("home")}>
              <img src="/assets/logo.png" alt="Body Healing Studio" className="footer-brand-logo" />
            </div>
            <p className="footer-tagline">{t.footer.tagline}</p>
            <form className="footer-sub" onSubmit={e => e.preventDefault()}>
              <input type="email" placeholder={t.newsletter.ph} />
              <button type="submit">{t.newsletter.cta}</button>
            </form>
          </div>
          <div>
            <h5>{t.footer.studio}</h5>
            <ul>
              <li><a onClick={() => setPage("packages")}>{t.nav.packages}</a></li>
              <li><a onClick={() => setPage("about")}>{t.nav.about}</a></li>
              <li><a onClick={() => setPage("contact")}>{t.nav.contact}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.footer.hoursEb}</h5>
            <ul>{t.contact.hours.map((h, i) => <li key={i}>{h}</li>)}</ul>
          </div>
          <div>
            <h5>{t.footer.findEb}</h5>
            <ul>
              {t.contact.addr.map((a, i) => <li key={i}>{a}</li>)}
              <li><a href={"mailto:" + t.contact.email}>{t.contact.email}</a></li>
              <li><a href={"tel:"   + t.contact.phone}>{t.contact.phone}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Body Healing Studio</span>
          <span>{lang === "el" ? "Βάρκιζα · Αττική" : "Varkiza · Attica"}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  TopNav, LangSwitch, Icon, Field, Chips,
  Hero, StatsBar, Marquee, BenefitsSection, ClassesSection,
  FeaturesHighlight, TeamSection, TestimonialsSection,
  CTABanner, Accordion, PackageCard, Footer
});