// =====================================================
// 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} />
      <TrainersGrid 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="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1600&q=80"
          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="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1600&q=80"
            placeholder={t(T.facilities.captions[0]) + " · main"} /></div>
          <div className="gal-2"><ImgSlot id="gal-2"
            src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=1200&q=80"
            placeholder={t(T.facilities.captions[1])} /></div>
          <div className="gal-3"><ImgSlot id="gal-3"
            src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=1200&q=80"
            placeholder={t(T.facilities.captions[2])} /></div>
          <div className="gal-4"><ImgSlot id="gal-4"
            src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?auto=format&fit=crop&w=1200&q=80"
            placeholder={t(T.facilities.captions[3])} /></div>
          <div className="gal-5"><ImgSlot id="gal-5"
            src="https://images.unsplash.com/photo-1593079831268-3381b0db4a77?auto=format&fit=crop&w=1200&q=80"
            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-sessions">{t(p.sessions)}</span>
                  <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;
  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(T.pricing.eyebrow)}</div>
            <h2 className="about-headline">{t(T.pricing.headline)}</h2>
          </div>
          <p className="about-copy reveal" style={{ "--reveal-delay": "0.1s" }}>{t(T.pricing.sub)}</p>
        </div>
        <div className="pricing-grid reveal">
          {T.pricing.plans.map((p, i) => (
            <div className={`plan ${p.featured ? "featured" : ""}`} key={i}>
              {p.badge && <div className="plan-badge">{t(p.badge)}</div>}
              <div className="plan-name">{t(p.name)}</div>
              <div className="plan-tagline">{t(p.tag)}</div>
              <div className="plan-price">
                <span className="amt">{p.price}</span>
                <span className="cur">{t(T.pricing.cur)}</span>
                <span className="per">{t(T.pricing[p.per])}</span>
              </div>
              <ul>
                {p.features.map((f, j) => <li key={`f${j}`}>{t(f)}</li>)}
                {p.muted.map((f, j) => <li key={`m${j}`} className="muted">— {t(f)}</li>)}
              </ul>
              <a href="#/#contact" className={`btn ${p.featured ? "btn-primary" : "btn-ghost"}`}>
                {t(p.cta)} <span className="arrow">→</span>
              </a>
            </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 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}<small>Tetovo, Macedonia</small></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="https://instagram.com" target="_blank" rel="noreferrer">{T.contact.socialVal}</a></span>
              </div>
            </div>
            <div className="map-wrap" aria-hidden="true">
              <div className="map-grid-bg"></div>
              <div className="map-pin">
                <span className="label">{t(T.contact.pin)}</span>
                <span className="dot"></span>
              </div>
            </div>
          </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>
              <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>
            <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}>
                  <div className="yr">{c.yr}</div>
                  <div className="what">{t(c.t)}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 40 }}>
              <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, TrainersGrid, Contact });