// Main app — Dmytro Semenyna coaching site
// Bilingual (UA default, EN toggle), responsive, single-page.

const { useState, useEffect, useRef, useMemo } = React;

/* ================ Language hook ================ */
function useLang() {
  const [lang, setLang] = useState(() => {
    try {
      return localStorage.getItem("lang") || "ua";
    } catch { return "ua"; }
  });
  useEffect(() => {
    try { localStorage.setItem("lang", lang); } catch {}
    document.documentElement.lang = lang;
  }, [lang]);
  return [lang, setLang];
}

/* ================ TopNav ================ */
function TopNav({ lang, setLang, t }) {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const links = [
    { href: "#about", label: t.nav.about },
    { href: "#achievements", label: t.nav.achievements },
    { href: "#testimonials", label: t.nav.testimonials },
    { href: "#services", label: t.nav.services },
    { href: "#gallery", label: t.nav.gallery },
  ];

  return (
    <React.Fragment>
      <nav className="topnav">
        <div className="container topnav-inner">
          <a className="brand" href="#top">
            <span className="brand-mark">DS</span>
            <span>Semenyna</span>
            <small>{lang === "ua" ? "Тренер" : "Coach"}</small>
          </a>

          <ul className="navlinks">
            {links.map((l) => (
              <li key={l.href}><a href={l.href}>{l.label}</a></li>
            ))}
          </ul>

          <div className="nav-right">
            <div className="lang-toggle" role="group" aria-label="Language">
              <button
                className={lang === "ua" ? "active" : ""}
                onClick={() => setLang("ua")}>UA</button>
              <button
                className={lang === "en" ? "active" : ""}
                onClick={() => setLang("en")}>EN</button>
            </div>
            <a className="nav-cta" href="#contact">{t.nav.contact}</a>
            <button className="menu-btn" aria-label="Menu" onClick={() => setOpen(!open)}>
              <span></span>
            </button>
          </div>
        </div>
      </nav>

      <div className={"mobile-drawer" + (open ? " open" : "")}>
        {links.map((l) => (
          <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
        ))}
        <a href="#contact" onClick={() => setOpen(false)}>{t.nav.contact}</a>
        <div className="meta">@semenynadmytro</div>
      </div>
    </React.Fragment>
  );
}

/* ================ Hero ================ */
function Hero({ t }) {
  return (
    <section id="top" className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="dot"></span>
              <span className="eyebrow">{t.hero.eyebrow}</span>
            </div>
            <h1 className="hero-title">
              {t.hero.title_1}
              <span className="line2">{t.hero.title_2}</span>
            </h1>
            <p className="hero-sub">{t.hero.subtitle}</p>
            <div className="hero-ctas">
              <a className="btn btn-primary" href="#contact">
                {t.hero.cta_primary}
                <span className="arrow">{"\u2192"}</span>
              </a>
              <a className="btn btn-ghost" href="#services">
                {t.hero.cta_secondary}
              </a>
            </div>
          </div>

          <div className="hero-portrait">
            <img src="assets/dmytro-hero.jpg" alt="Dmytro Semenyna" />
            <div className="frame-meta">DS {"\u00B7"} 2025</div>
          </div>
        </div>

        <div className="hero-stats">
          <div className="hero-stat">
            <div className="v">
              <em>{t.hero.stat_1_value}</em>
            </div>
            <div className="l">{t.hero.stat_1_label}</div>
          </div>
          <div className="hero-stat">
            <div className="v">{t.hero.stat_2_value}</div>
            <div className="l">{t.hero.stat_2_label}</div>
          </div>
          <div className="hero-stat">
            <div className="v">{t.hero.stat_3_value}</div>
            <div className="l">{t.hero.stat_3_label}</div>
          </div>
        </div>
      </div>

      <div className="scroll-indicator">
        <span className="bar"></span>
        <span>{t.hero.scroll}</span>
      </div>
    </section>
  );
}

/* ================ About ================ */
function About({ t }) {
  return (
    <section id="about" className="section">
      <div className="container">
        <div className="about-grid">
          <div className="about-eyebrow">
            <div className="eyebrow">{t.about.eyebrow}</div>
            <h2 className="about-name">{t.about.title}</h2>
          </div>

          <div>
            <p className="about-lead">{t.about.lead}</p>
            <div className="about-body">
              <p>{t.about.body_1}</p>
              <p>{t.about.body_2}</p>
            </div>
            <div className="about-signature">{t.about.signature}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================ Achievements ================ */
function Achievements({ t }) {
  return (
    <section id="achievements" className="section">
      <div className="container">
        <div className="achi-head">
          <div className="eyebrow">{t.achievements.eyebrow}</div>
          <h2 className="section-title">
            {(() => {
              const title = t.achievements.title;
              // Italicize the last 2 words
              const words = title.split(" ");
              const tail = words.slice(-2).join(" ");
              const head = words.slice(0, -2).join(" ");
              return <React.Fragment>{head} <em>{tail}</em></React.Fragment>;
            })()}
          </h2>
        </div>

        <div className="achi-list">
          {t.achievements.items.map((it, i) => (
            <div className="achi-row" key={i}>
              <div className="achi-year">{it.year}</div>
              <div><span className="achi-tag">{it.tag}</span></div>
              <div className="achi-main-cell">
                <div className="achi-title">{it.title}</div>
                <div className="achi-sub">{it.subtitle}</div>
              </div>
              <div className="achi-icon">{"\u2197"}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================ Testimonials ================ */
function Testimonials({ t }) {
  return (
    <section id="testimonials" className="section">
      <div className="container">
        <div className="testi-head">
          <div className="eyebrow">{t.testimonials.eyebrow}</div>
          <h2 className="section-title">{t.testimonials.title}</h2>
          <p className="testi-sub">{t.testimonials.subtitle}</p>
        </div>

        <div className="testi-list">
          {t.testimonials.items.map((item, i) => (
            <article key={i} className="testi-row">
              <div className="testi-num">0{i + 1}</div>

              <div className="testi-person">
                <img src={item.photo} alt={item.name} className="testi-avatar" loading="lazy" />
                <div className="testi-meta">
                  <div className="testi-name">{item.name}</div>
                  {item.handle ? (
                    <a className="testi-handle" href={item.ig} target="_blank" rel="noopener noreferrer">
                      {item.handle}
                      <span className="testi-handle-arrow" aria-hidden="true">{"\u2197"}</span>
                    </a>
                  ) : (
                    <div className="testi-handle testi-handle-static"></div>
                  )}
                </div>
              </div>

              <div className="testi-body">
                <div className="testi-highlight">{item.highlight}</div>
                <p className="testi-quote">{item.quote}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================ Services (packages + standalone) ================ */
function Services({ t }) {
  return (
    <section id="services" className="section">
      <div className="container">
        <div className="pack-head">
          <div className="eyebrow">{t.packages.eyebrow}</div>
          <h2 className="section-title">{t.packages.title}</h2>
          <p>{t.packages.subtitle}</p>
        </div>

        <div className="pack-grid">
          {t.packages.tiers.map((tier, i) => (
            <div key={i} className={"pack-card" + (tier.featured ? " featured" : "")}>
              {tier.featured && <span className="pack-badge">Most popular</span>}
              <div className="pack-name">{tier.name}</div>
              <div className="pack-price">
                <span className="num">{tier.price}</span>
                <span className="unit">{tier.unit}</span>
              </div>
              {tier.promo && (
                <div className="pack-promo-row">
                  <span className="pack-old-price">1 200 {tier.unit}</span>
                  <span className="pack-promo-tag">{"\u2212"}33% акція</span>
                </div>
              )}
              <div className="pack-period">{tier.period}</div>
              <div className="pack-desc">{tier.desc}</div>
              <ul className="pack-features">
                {tier.features.map((f, j) => <li key={j}>{f}</li>)}
              </ul>
              <div className="pack-cta">
                <a className="btn btn-primary" href="#contact">
                  {tier.cta}
                  <span className="arrow">{"\u2192"}</span>
                </a>
              </div>
            </div>
          ))}
        </div>

        <div className="pack-foot">{t.packages.footnote}</div>

        <div className="addons-block">
          <div className="addons-head">
            <h3 className="addons-title">{t.packages.addons_title}</h3>
            <p className="addons-subtitle">{t.packages.addons_subtitle}</p>
          </div>
          <div className="addons-grid">
            {t.packages.addons.map((c, i) => (
              <div key={i} className="addon-card">
                <div className="addon-tag">{c.tag}</div>
                <div className="addon-title">{c.title}</div>
                <div className="addon-desc">{c.desc}</div>
                <div className="addon-price">{c.price}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================ Gallery ================ */
function Gallery({ t }) {
  const photos = [
    { src: "assets/dmytro_1.jpg", alt: "Competition handshake" },
    { src: "assets/dmytro_2.jpg", alt: "Handstand walk" },
    { src: "assets/dmytro_3.jpg", alt: "Deadlift" },
    { src: "assets/dmytro_4.jpg", alt: "Dumbbell snatch" },
    { src: "assets/dmytro_5.jpg", alt: "Overhead press" },
    { src: "assets/dmytro_6.jpg", alt: "Portrait" },
  ];

  return (
    <section id="gallery" className="section">
      <div className="container">
        <div className="gal-head">
          <div>
            <div className="eyebrow">{t.gallery.eyebrow}</div>
            <h2 className="section-title" style={{ marginTop: 16 }}>{t.gallery.title}</h2>
          </div>
          <div>
            <div className="meta" style={{ marginBottom: 16 }}>{t.gallery.subtitle}</div>
            <a className="btn btn-ghost"
               href="https://www.instagram.com/semenynadmytro/"
               target="_blank" rel="noreferrer">
              {t.gallery.cta} <span className="arrow">{"\u2197"}</span>
            </a>
          </div>
        </div>

        <div className="gal-grid-six">
          {photos.map((p, i) => (
            <div key={i} className={"gal-tile-six pos-" + (i + 1)}>
              <img src={p.src} alt={p.alt} loading="lazy" />
              <div className="gal-num">{String(i + 1).padStart(2, "0")}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================ Contact ================ */
function Contact({ t }) {
  return (
    <section id="contact" className="section contact">
      <div className="container">
        <div className="contact-grid">
          <div>
            <div className="eyebrow">{t.contact.eyebrow}</div>
            <h2 className="contact-title">
              {t.contact.title_1} <em>{t.contact.title_2}</em>
            </h2>
            <p className="contact-sub">{t.contact.subtitle}</p>
          </div>

          <div className="contact-direct">
            <span className="label">{t.contact.direct}</span>
            <a href="https://www.instagram.com/semenynadmytro/" target="_blank" rel="noreferrer">
              Instagram {"\u00B7"} @semenynadmytro <span>{"\u2197"}</span>
            </a>
            <a href="https://t.me/dimnikolaich" target="_blank" rel="noreferrer">
              Telegram {"\u00B7"} @dimnikolaich <span>{"\u2197"}</span>
            </a>
            <a href="tel:+380664373923">+380 66 437 39 23 <span>{"\u2197"}</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================ Footer ================ */
function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div className="footer-tag">{t.footer.tagline}</div>
          <div className="footer-meta">
            <span>{t.footer.rights}</span>
            <span>{t.footer.built}</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ================ App ================ */
function App() {
  const [lang, setLang] = useLang();
  const t = window.SITE_CONTENT[lang];

  return (
    <React.Fragment>
      <TopNav lang={lang} setLang={setLang} t={t} />
      <Hero t={t} />
      <About t={t} />
      <Achievements t={t} />
      <Testimonials t={t} />
      <Services t={t} />
      <Gallery t={t} />
      <Contact t={t} />
      <Footer t={t} />
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);