// =====================================================
// HOME PAGE
// =====================================================
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

function Home({ lang, accent }) {
  const t = useT(lang);
  const T = window.I18N;

  return (
    <React.Fragment>
      <Hero lang={lang} />
      <Marquee />
      <About lang={lang} />
      <Facilities lang={lang} />
      <Programs lang={lang} />
      <Pricing lang={lang} />
      <Services lang={lang} />
      <Merch lang={lang} />
      <TrainersGrid lang={lang} />
      <Manager lang={lang} />
      <Partners lang={lang} />
      <Contact lang={lang} />
    </React.Fragment>
  );
}

function Hero({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  const stats = T.hero.stats;
  return (
    <section className="hero" id="home">
      <div className="hero-image">
        <ImgSlot id="hero-bg" shape="rect"
          src="assets/8.jpeg"
          placeholder="hero · gym floor (dark, moody)" />
      </div>
      <div className="container hero-grid">
        <div className="hero-content">
          <div className="hero-meta reveal">
            <div className="eyebrow"><span className="dot"></span>{t(T.hero.eyebrow)}</div>
            <div className="eyebrow">{t(T.hero.estd)} · 41° N</div>
          </div>
          <h1 className="hero-headline reveal" style={{ "--reveal-delay": "0.05s" }}>
            <span>{t(T.hero.line1)}</span><br/>
            <span className="gold">{t(T.hero.line2)}</span><br/>
            <span className="strike">{t(T.hero.line3)}</span> <span>{t(T.hero.line4)}</span>
          </h1>
          <p className="hero-sub reveal" style={{ "--reveal-delay": "0.15s" }}>{t(T.hero.sub)}</p>
          <div className="hero-cta reveal" style={{ "--reveal-delay": "0.25s" }}>
            <a href="#/#pricing" className="btn btn-primary">{t(T.hero.ctaPrimary)} <span className="arrow">→</span></a>
            <a href="#/#trainers" className="btn btn-ghost">{t(T.hero.ctaSecondary)}</a>
          </div>
        </div>
        <div className="hero-stats reveal" style={{ "--reveal-delay": "0.3s" }}>
          {stats.map((s, i) => (
            <div className="hero-stat" key={i}>
              <div className="num">{s.num}<span style={{ fontSize: 22, marginLeft: 2 }}>{s.unit}</span></div>
              <div className="lbl">{t(s.lbl)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ["STRENGTH", "DISCIPLINE", "COMMUNITY", "RECOVERY", "ATHLETICS", "MOBILITY", "MINDSET"];
  const renderRow = () => items.map((it, i) => (
    <span key={i} className={i % 2 === 0 ? "" : "gold"}>{it}<span className="marquee-dot"></span></span>
  ));
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {renderRow()}
        {renderRow()}
        {renderRow()}
        {renderRow()}
      </div>
    </div>
  );
}

function About({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  return (
    <section className="section section-bordered" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="reveal">
            <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(T.about.eyebrow)}</div>
            <h2 className="about-headline">{t(T.about.headline)}</h2>
            <p className="about-copy">{t(T.about.p1)}</p>
            <p className="about-copy">{t(T.about.p2)}</p>
          </div>
          <div className="about-pillars reveal" style={{ "--reveal-delay": "0.1s" }}>
            {T.about.pillars.map((p, i) => (
              <div className="pillar" key={i}>
                <div className="pillar-num">0{i+1}</div>
                <div>
                  <div className="pillar-title">{t(p.title)}</div>
                  <div className="pillar-body">{t(p.body)}</div>
                </div>
                <div className="pillar-icon">→</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Facilities({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  return (
    <section className="section section-bordered" id="facilities">
      <div className="container">
        <div className="facilities-head reveal">
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(T.facilities.eyebrow)}</div>
            <h2 className="about-headline">{t(T.facilities.headline)}</h2>
            <p className="about-copy">{t(T.facilities.sub)}</p>
          </div>
        </div>
        <div className="facilities-tags reveal">
          {T.facilities.tags.map((tag, i) => <span className="tag" key={i}>{t(tag)}</span>)}
        </div>
        <div className="gallery reveal" style={{ "--reveal-delay": "0.1s" }}>
          <div className="gal-1"><ImgSlot id="gal-1"
            src="assets/2.jpeg"
            placeholder={t(T.facilities.captions[0]) + " · main"} /></div>
          <div className="gal-2"><ImgSlot id="gal-2"
            src="assets/5.jpeg"
            placeholder={t(T.facilities.captions[1])} /></div>
          <div className="gal-3"><ImgSlot id="gal-3"
            src="assets/4.jpeg"
            placeholder={t(T.facilities.captions[2])} /></div>
          <div className="gal-4"><ImgSlot id="gal-4"
            src="assets/3.jpeg"
            placeholder={t(T.facilities.captions[3])} /></div>
          <div className="gal-5"><ImgSlot id="gal-5"
            src="assets/1.jpeg"
            placeholder={t(T.facilities.captions[4])} /></div>
        </div>
      </div>
    </section>
  );
}

function Programs({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  return (
    <section className="section section-bordered" id="programs">
      <div className="container">
        <div className="programs-head">
          <div className="reveal">
            <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(T.programs.eyebrow)}</div>
            <h2 className="about-headline">{t(T.programs.headline)}</h2>
          </div>
          <p className="about-copy reveal" style={{ "--reveal-delay": "0.1s" }}>{t(T.programs.sub)}</p>
        </div>
        <div className="programs-grid reveal">
          {T.programs.list.map((p, i) => (
            <a key={p.slug} href="#/contact" className="program-card">
              <div className="program-photo">
                <ImgSlot id={`prog-${p.slug}`}
                  src={window.DEMO_PROGRAMS[p.slug]}
                  placeholder={t(p.title)} />
                <span className="program-num">0{i+1}</span>
                <span className="program-kicker">{t(p.kicker)}</span>
              </div>
              <div className="program-info">
                <h3 className="program-title">{t(p.title)}</h3>
                <p className="program-body">{t(p.body)}</p>
                <div className="program-foot">
                  <span className="program-arrow">{t(T.programs.learnMore)} →</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  const P = T.pricing;
  return (
    <section className="section section-bordered" id="pricing">
      <div className="container">
        <div className="pricing-head">
          <div className="reveal">
            <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(P.eyebrow)}</div>
            <h2 className="about-headline">{t(P.headline)}</h2>
          </div>
          <p className="about-copy reveal" style={{ "--reveal-delay": "0.1s" }}>{t(P.sub)}</p>
        </div>

        <div className="membership-table reveal" style={{ "--reveal-delay": "0.1s" }}>
          <div className="mt-head">
            <div className="mt-label-cell"></div>
            <div className="mt-col-head">{t(P.womenLabel)}</div>
            <div className="mt-col-head gold">{t(P.menLabel)}</div>
          </div>
          {P.durations.map((d, i) => (
            <div className="mt-row" key={i}>
              <div className="mt-duration">{t(d.label)}</div>
              <div className="mt-price">{d.womenPrice}<span>€</span></div>
              <div className="mt-price gold-price">{d.menPrice}<span>€</span></div>
            </div>
          ))}
        </div>

        <div className="pt-plans-section reveal" style={{ "--reveal-delay": "0.15s" }}>
          <div className="eyebrow about-eyebrow" style={{ marginBottom: 28 }}>
            <span className="dot"></span>{t(P.ptLabel)}
          </div>
          <div className="pt-plans-grid">
            {P.ptPlans.map((plan, i) => (
              <div className="pt-plan-card" key={i}>
                <div className="pt-card-num">{plan.sessions}</div>
                <div className="pt-card-per">{t(P.perWeek)}</div>
                <div className="pt-card-price">{plan.price}<span>€</span></div>
              </div>
            ))}
          </div>
        </div>

        <div className="reveal" style={{ "--reveal-delay": "0.2s", marginTop: 48, textAlign: "center" }}>
          <a href="#/#contact" className="btn btn-primary">{t(P.cta)} <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

function Merch({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  const M = T.merch;
  const waUrl = `https://wa.me/38971907907?text=${encodeURIComponent("Hello, I'd like to order an Alpha T-shirt.")}`;
  const price = lang === 'mk' ? "1.000 ден" : "1.000 den";
  return (
    <section className="section section-bordered" id="merch">
      <div className="container">
        <div className="merch-head reveal">
          <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(M.eyebrow)}</div>
          <h2 className="about-headline">{t(M.headline)}</h2>
        </div>
        <div className="merch-grid reveal" style={{ "--reveal-delay": "0.1s" }}>
          <div className="merch-photos">
            <div className="merch-photo">
              <ImgSlot id="merch-front" src="assets/merch-tshirt-front.jpg" placeholder="Alpha T-Shirt — Front" />
            </div>
            <div className="merch-photo">
              <ImgSlot id="merch-back" src="assets/merch-tshirt-back.jpg" placeholder="Alpha T-Shirt — Back" />
            </div>
          </div>
          <div className="merch-info">
            <p className="merch-sub">{t(M.sub)}</p>
            <ul className="merch-features">
              {M.features.map((f, i) => <li key={i}>{t(f)}</li>)}
            </ul>
            <div className="merch-price-row">
              <span className="merch-price-label">{t(M.priceLabel)}</span>
              <span className="merch-price-value">{price}</span>
            </div>
            <a href={waUrl} target="_blank" rel="noreferrer" className="btn btn-primary">
              <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: 18, height: 18 }}><path d="M20.52 3.48A11.94 11.94 0 0 0 12.04 0C5.5 0 .2 5.3.2 11.84c0 2.09.55 4.13 1.6 5.93L0 24l6.4-1.68a11.83 11.83 0 0 0 5.64 1.44h.01c6.54 0 11.85-5.3 11.85-11.84 0-3.16-1.23-6.13-3.38-8.44z"/></svg>
              {t(M.cta)} <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Services({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  const S = T.services;
  const dp = (price) => lang === 'mk' ? price : price.replace('ден', 'den');
  return (
    <section className="section section-bordered" id="services">
      <div className="container">
        <div className="services-head">
          <div className="reveal">
            <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(S.eyebrow)}</div>
            <h2 className="about-headline">{t(S.headline)}</h2>
          </div>
          <p className="about-copy reveal" style={{ "--reveal-delay": "0.1s" }}>{t(S.sub)}</p>
        </div>
        <div className="svc-grid reveal" style={{ "--reveal-delay": "0.1s" }}>
          <div className="svc-card">
            <h3 className="svc-card-title">{t(S.massageTitle)}</h3>
            <ul className="svc-type-list">
              {S.massageTypes.map((type, i) => <li key={i}>{t(type)}</li>)}
            </ul>
            <div className="svc-price-list">
              {S.massagePrices.map((p, i) => (
                <div className="svc-price-row" key={i}>
                  <span className="svc-dur">{p.duration}</span>
                  <span className="svc-dots"></span>
                  <span className="svc-amt">{dp(p.price)}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="svc-card">
            <h3 className="svc-card-title">{t(S.solariumTitle)}</h3>
            <div className="svc-price-list">
              {S.solariumPrices.map((p, i) => (
                <div className="svc-price-row" key={i}>
                  <span className="svc-dur">{p.duration}</span>
                  <span className="svc-dots"></span>
                  <span className="svc-amt">{p.price}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="svc-card svc-card-wide">
            <h3 className="svc-card-title">{t(S.barTitle)}</h3>
            <div className="bar-cats">
              {S.barCategories.map((cat, ci) => (
                <div className="bar-cat" key={ci}>
                  <div className="bar-cat-label">{t(cat.title)}</div>
                  <div className="svc-price-list">
                    {cat.items.map((item, ii) => (
                      <div className="svc-price-row" key={ii}>
                        <span className="svc-dur">{t(item.name)}</span>
                        <span className="svc-dots"></span>
                        <span className="svc-amt">{dp(item.price)}</span>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrainersGrid({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  return (
    <section className="section section-bordered" id="trainers">
      <div className="container">
        <div className="trainers-head">
          <div className="reveal">
            <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(T.trainers.eyebrow)}</div>
            <h2 className="about-headline">{t(T.trainers.headline)}</h2>
          </div>
          <p className="about-copy reveal" style={{ "--reveal-delay": "0.1s" }}>{t(T.trainers.sub)}</p>
        </div>
        <div className="trainer-grid reveal">
          {T.trainerData.map((tr, i) => (
            <a key={tr.slug} href={`#/trainer/${tr.slug}`} className="trainer-card">
              <div className="trainer-photo">
                <span className="trainer-num">0{i+1} / 0{T.trainerData.length}</span>
                <span className="trainer-spec">{t(tr.spec)}</span>
                <ImgSlot id={`tr-${tr.slug}`}
                  src={window.DEMO_PORTRAITS[tr.slug]}
                  placeholder={`${tr.first} ${tr.last} · portrait`} />
              </div>
              <div className="trainer-info">
                <div>
                  <div className="trainer-name">{tr.first}<br/>{tr.last}</div>
                  <div className="trainer-role">{t(tr.role)}</div>
                </div>
                <div className="trainer-arrow">→</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Manager({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  const M = T.manager;
  const waText = lang === 'mk'
    ? "Здраво, сакам да дознам повеќе за Алфа Џим."
    : lang === 'sq'
    ? "Përshëndetje, dëshiroj të di më shumë rreth Alpha Gym."
    : "Hello, I'd like to know more about Alpha Gym.";
  const waUrl = `https://wa.me/${M.waNum}?text=${encodeURIComponent(waText)}`;

  return (
    <section className="section section-bordered" id="manager">
      <div className="container">
        <div className="manager-grid">
          <div className="manager-photo reveal">
            <ImgSlot
              id="manager-photo"
              src="assets/stanislav-bojcheski.jpeg"
              placeholder="Stanislav Bojcheski · Manager portrait"
              shape="rect"
            />
          </div>
          <div className="manager-info reveal" style={{ "--reveal-delay": "0.1s" }}>
            <div>
              <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(M.eyebrow)}</div>
            </div>
            <div>
              <h2 className="manager-name">{M.name}</h2>
              <div className="manager-role">{t(M.role)}</div>
            </div>
            <p className="manager-sub">{t(M.sub)}</p>
            <div className="manager-contact">
              <a className="manager-phone" href={`tel:${M.waNum}`}>{M.phone}</a>
              <a href={waUrl} target="_blank" rel="noreferrer" className="btn btn-primary">
                <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: 18, height: 18 }}>
                  <path d="M20.52 3.48A11.94 11.94 0 0 0 12.04 0C5.5 0 .2 5.3.2 11.84c0 2.09.55 4.13 1.6 5.93L0 24l6.4-1.68a11.83 11.83 0 0 0 5.64 1.44h.01c6.54 0 11.85-5.3 11.85-11.84 0-3.16-1.23-6.13-3.38-8.44z"/>
                </svg>
                {t(M.cta)} <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Partners({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  const P = T.partners;
  return (
    <section className="section section-bordered" id="partners">
      <div className="container">
        <div className="partners-head reveal">
          <div>
            <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(P.eyebrow)}</div>
            <h2 className="about-headline">{t(P.headline)}</h2>
          </div>
          <p className="about-copy">{t(P.sub)}</p>
        </div>
        <div className="partners-grid reveal" style={{ "--reveal-delay": "0.1s" }}>
          {P.list.map((partner, i) => (
            <div className="partner-card" key={i}>
              <div className="partner-logo-wrap">
                <img src={partner.logo} alt={partner.name} />
              </div>
              <div className="partner-name">{partner.name}</div>
              <p className="partner-body">{t(partner.body)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ lang }) {
  const t = useT(lang);
  const T = window.I18N;
  const [sent, setSent] = useStateP(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };
  return (
    <section className="section section-bordered" id="contact">
      <div className="container">
        <div className="reveal" style={{ marginBottom: 56 }}>
          <div className="eyebrow about-eyebrow"><span className="dot"></span>{t(T.contact.eyebrow)}</div>
          <h2 className="about-headline" style={{ maxWidth: 800 }}>{t(T.contact.headline)}</h2>
        </div>
        <div className="contact-grid">
          <div className="reveal">
            <div className="contact-info-list">
              <div className="contact-item">
                <span className="lbl">{t(T.contact.address)}</span>
                <span className="val">{T.contact.addrVal}</span>
              </div>
              <div className="contact-item">
                <span className="lbl">{t(T.contact.hours)}</span>
                <span className="val">{t(T.contact.hoursVal)}</span>
              </div>
              <div className="contact-item">
                <span className="lbl">{t(T.contact.phone)}</span>
                <span className="val"><a href={`tel:${T.contact.phoneVal.replace(/\s/g,'')}`}>{T.contact.phoneVal}</a></span>
              </div>
              <div className="contact-item">
                <span className="lbl">{t(T.contact.email)}</span>
                <span className="val"><a href={`mailto:${T.contact.emailVal}`}>{T.contact.emailVal}</a></span>
              </div>
              <div className="contact-item">
                <span className="lbl">{t(T.contact.whatsapp)}</span>
                <span className="val"><a href={`https://wa.me/${T.contact.whatsappVal.replace(/[^0-9]/g,'')}`} target="_blank" rel="noreferrer">{T.contact.whatsappVal}</a></span>
              </div>
              <div className="contact-item">
                <span className="lbl">{t(T.contact.social)}</span>
                <span className="val"><a href={T.contact.socialUrl} target="_blank" rel="noreferrer">{T.contact.socialVal}</a></span>
              </div>
            </div>
            <a className="map-wrap" href="https://www.google.com/maps/place/Alpha+Gym+Fitnes+%26+Sports+Center/@41.9994085,20.9597237,813m/data=!3m2!1e3!4b1!4m6!3m5!1s0x1353f1001ff1afaf:0x61b850ca4106233f!8m2!3d41.9994045!4d20.9622986!16s%2Fg%2F11x6lwqpp_" target="_blank" rel="noreferrer" aria-label="Open in Google Maps">
              <div className="map-grid-bg"></div>
              <div className="map-pin">
                <span className="label">{t(T.contact.pin)}</span>
                <span className="dot"></span>
              </div>
            </a>
          </div>
          {/* <form className="contact-form reveal" style={{ "--reveal-delay": "0.1s" }} onSubmit={submit}>
            <h3>{t(T.contact.formTitle)}</h3>
            <div className="field-row">
              <div className="field"><label>{t(T.contact.name)}</label><input type="text" required /></div>
              <div className="field"><label>{t(T.contact.yourPhone)}</label><input type="tel" /></div>
            </div>
            <div className="field"><label>{t(T.contact.yourEmail)}</label><input type="email" required /></div>
            <div className="field">
              <label>{t(T.contact.interest)}</label>
              <select>
                {T.contact.options.map((o, i) => <option key={i}>{t(o)}</option>)}
              </select>
            </div>
            <div className="field"><label>{t(T.contact.message)}</label><textarea></textarea></div>
            <button type="submit" className="btn btn-primary submit">
              {sent ? "✓ " + t(T.contact.sent).split(".")[0] : t(T.contact.send)} <span className="arrow">→</span>
            </button>
          </form> */}
        </div>
      </div>
    </section>
  );
}

// =====================================================
// TRAINER DETAIL PAGE
// =====================================================
function TrainerDetail({ slug, lang }) {
  const t = useT(lang);
  const T = window.I18N;
  const tr = T.trainerData.find((x) => x.slug === slug);

  useEffectP(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [slug]);

  if (!tr) {
    return <div className="container" style={{ paddingTop: 200, paddingBottom: 200 }}>
      <h2 className="display h-lg">Trainer not found</h2>
      <a href="#/#trainers" className="btn btn-ghost" style={{ marginTop: 24 }}>← {t(T.trainers.backTo)}</a>
    </div>;
  }

  const days = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
  const dayLabels = {
    mk: ["ПОН","ВТО","СРЕ","ЧЕТ","ПЕТ","САБ","НЕД"],
    sq: ["HËN","MAR","MËR","ENJ","PRE","SHT","DIE"],
    en: ["MON","TUE","WED","THU","FRI","SAT","SUN"],
  };

  const waNum = tr.whatsapp.replace(/[^0-9]/g, "");
  const waText = `Hello ${tr.first}, I'd like to book a session at Alpha Gym.`;
  const waUrl = `https://wa.me/${waNum}?text=${encodeURIComponent(waText)}`;
  const mailUrl = `mailto:${tr.email}?subject=Training inquiry — Alpha Gym&body=Hello ${tr.first},%0D%0A%0D%0AI'd like to learn more about your training.%0D%0A`;

  return (
    <div className="detail">
      <div className="container">
        <a href="#/#trainers" className="detail-back">← {t(T.trainers.backTo)}</a>
        <div className="detail-hero reveal">
          <div className="detail-photo">
            <ImgSlot id={`tr-detail-${tr.slug}`}
              src={window.DEMO_PORTRAITS[tr.slug]}
              placeholder={`${tr.first} ${tr.last} · full portrait`} />
          </div>
          <div className="detail-content">
            <div>
              <div className="eyebrow detail-eyebrow"><span className="dot"></span>0{T.trainerData.findIndex(x => x.slug === tr.slug) + 1} · {t(T.trainers.eyebrow)}</div>
              <h1 className="detail-name">{tr.first}<br/><span className="gold">{tr.last}</span></h1>
              <div className="detail-role">{t(tr.role)}</div>
              {tr.specs && (
                <div className="detail-specs">
                  {tr.specs.map((s, i) => <span key={i} className="detail-spec-tag">{s}</span>)}
                </div>
              )}
              <p className="detail-bio">{t(tr.bio)}</p>
              <div className="detail-cta-row">
                <a href={waUrl} target="_blank" rel="noreferrer" className="btn btn-whatsapp">
                  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A11.9 11.9 0 0 0 12 0C5.5 0 .2 5.3.2 11.8c0 2.1.5 4.1 1.6 5.9L0 24l6.4-1.7a11.8 11.8 0 0 0 5.6 1.4c6.5 0 11.9-5.3 11.9-11.8 0-3.2-1.2-6.1-3.4-8.4zm-8.5 18.2a9.9 9.9 0 0 1-5-1.4l-.4-.2-3.8 1 1-3.7-.2-.4a9.8 9.8 0 1 1 18.2-5.2c0 5.5-4.4 9.9-9.8 9.9z"/></svg>
                  WhatsApp
                </a>
                {/* <a href={mailUrl} className="btn btn-primary">{t(T.trainers.emailLabel)} →</a> */}
                {/* <a href="#/#contact" className="btn btn-ghost">{t(T.trainers.bookFree)}</a> */}
              </div>
            </div>
            <div className="detail-meta">
              <div className="detail-meta-item">
                <div className="lbl">{t(T.trainers.spec)}</div>
                <div className="val" style={{ fontSize: 20 }}>{t(tr.spec)}</div>
              </div>
              <div className="detail-meta-item">
                <div className="lbl">{t(T.trainers.exp)}</div>
                <div className="val">{tr.years}<small>{t(T.trainers.yrs)}</small></div>
              </div>
              <div className="detail-meta-item">
                <div className="lbl">{t(T.trainers.clients)}</div>
                <div className="val">{tr.clients}<small>{t(T.trainers.sessionsLabel)}</small></div>
              </div>
            </div>
          </div>
        </div>

        <div className="detail-sections reveal">
          <div>
            <div className="eyebrow about-eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>{t(T.trainers.approach)}</div>
            <h3 className="display h-md" style={{ marginBottom: 24 }}>{t({ mk: "Како работам", sq: "Si punoj", en: "How I work" })}</h3>
            <div className="spec-list">
              {tr.approach.map((a, i) => (
                <div className="spec-row" key={i}>
                  <div className="num">0{i+1}</div>
                  <div className="text">{t(a)}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            {tr.creds.length > 0 && (
              <React.Fragment>
                <div className="eyebrow about-eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>{t(T.trainers.creds)}</div>
                <h3 className="display h-md" style={{ marginBottom: 24 }}>{t({ mk: "Сертификати", sq: "Certifikatat", en: "Credentials" })}</h3>
                <div className="cred-list">
                  {tr.creds.map((c, i) => (
                    <div className="cred" key={i}>
                      {c.yr && <div className="yr">{c.yr}</div>}
                      <div className="what">{t(c.t)}</div>
                    </div>
                  ))}
                </div>
              </React.Fragment>
            )}
            <div style={{ marginTop: tr.creds.length > 0 ? 40 : 0 }}>
              <div className="eyebrow about-eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>{t(T.trainers.schedule)}</div>
              <div className="schedule-grid">
                {tr.sched.map((s, i) => {
                  const off = s === "off";
                  const peak = !off && (s.startsWith("16") || s.startsWith("14") || s.startsWith("12-20"));
                  return (
                    <div key={i} className={`day ${off ? "off" : peak ? "peak" : ""}`}>
                      <div className="dn">{(dayLabels[lang] || dayLabels.en)[i]}</div>
                      <div className="hr">{off ? "—" : s}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="detail-quote">
        <div className="container">
          <q>{t(tr.quote)}</q>
          <div className="by">— {tr.first} {tr.last}</div>
        </div>
      </div>

      <div className="container" style={{ padding: "80px 0" }}>
        <div className="trainers-head">
          <div>
            <div className="eyebrow about-eyebrow"><span className="dot"></span>{t({ mk: "Други тренери", sq: "Trajnerë të tjerë", en: "Other coaches" })}</div>
            <h3 className="display h-lg" style={{ marginTop: 12 }}>{t({ mk: "Запознај го тимот", sq: "Njohu me ekipin", en: "Meet the team" })}</h3>
          </div>
        </div>
        <div className="trainer-grid">
          {T.trainerData.filter((x) => x.slug !== tr.slug).map((other, i) => (
            <a key={other.slug} href={`#/trainer/${other.slug}`} className="trainer-card">
              <div className="trainer-photo">
                <span className="trainer-spec">{t(other.spec)}</span>
                <ImgSlot id={`tr-other-${other.slug}`}
                  src={window.DEMO_PORTRAITS[other.slug]}
                  placeholder={`${other.first} ${other.last}`} />
              </div>
              <div className="trainer-info">
                <div>
                  <div className="trainer-name">{other.first}<br/>{other.last}</div>
                  <div className="trainer-role">{t(other.role)}</div>
                </div>
                <div className="trainer-arrow">→</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Home, TrainerDetail, Hero, About, Facilities, Programs, Pricing, Merch, Services, Manager, Partners, TrainersGrid, Contact });