const { useState: useStateP } = React;

// ── HomePage ──────────────────────────────────────────────────────
function HomePage({ t, setPage }) {
  return (
    <div className="page">
      <Hero t={t} setPage={setPage} />
      <StatsBar t={t} />
      <Marquee items={t.marquee} />
      <BenefitsSection t={t} setPage={setPage} />
      <ClassesSection t={t} setPage={setPage} />
      <FeaturesHighlight t={t} />
      <TeamSection t={t} />
      <TestimonialsSection t={t} />
      <CTABanner t={t} setPage={setPage} />
    </div>
  );
}

// ── PackagesPage ──────────────────────────────────────────────────
function PackagesPage({ t, setPage }) {
  const [activeCat, setActiveCat] = useStateP(0);
  const [activeClassType, setActiveClassType] = useStateP(0);
  const categories = t.packages.categories;
  const currentCategory = categories[activeCat];
  const isGroupClasses = !!currentCategory.classTypes;
  const selectedClass = isGroupClasses ? currentCategory.classTypes[activeClassType] : null;

  const handleCatClick = (i) => { setActiveCat(i); setActiveClassType(0); };

  return (
    <div className="page">
      <section className="section" style={{background:"var(--bhs-page)", paddingBottom:48}}>
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:48, alignItems:"end"}}>
            <div>
              <div className="section-eb reveal is-revealed">{t.packages.eyebrow}</div>
              <h1 className="section-title reveal is-revealed" style={{fontSize:"clamp(44px,5.5vw,72px)", transitionDelay: '80ms'}}>{t.packages.title}</h1>
            </div>
            <p className="reveal is-revealed" style={{fontFamily:"var(--font-display)",fontStyle:"italic",fontSize:19,color:"var(--bhs-ink-soft)",lineHeight:1.55,margin:0, transitionDelay: '160ms'}}>
              {t.packages.lede}
            </p>
          </div>
        </div>
      </section>

      <section className="packages-section" style={{ paddingTop: 48, paddingBottom: 96 }}>
        <div className="container">
          {/* Beautiful interactive category tabs */}
          <div className="pricing-categories">
            {categories.map((cat, i) => (
              <button key={i} className={`pricing-cat-tab${activeCat === i ? " active" : ""}`} onClick={() => handleCatClick(i)}>
                <span className="pricing-cat-icon"><Icon name={cat.icon} size={18} /></span>
                <span className="pricing-cat-name">{cat.name}</span>
              </button>
            ))}
          </div>

          <div className="pricing-header-info" key={"info-" + activeCat}>
            <h3 className="pricing-cat-title">{currentCategory.name}</h3>
            <p className="pricing-cat-desc">{currentCategory.lede}</p>
            {!isGroupClasses && currentCategory.items && currentCategory.items.length > 0 && (
              <div className="pricing-cat-items">
                {currentCategory.items.map((item, index) => (
                  <span key={index} className="pricing-cat-item-tag">{item}</span>
                ))}
              </div>
            )}
          </div>

          {isGroupClasses && (
            <div className="class-type-tabs" key={"classtabs-" + activeCat}>
              {currentCategory.classTypes.map((ct, i) => (
                <button key={i} className={`class-type-tab${activeClassType === i ? " active" : ""}`} onClick={() => setActiveClassType(i)}>
                  <span className="class-type-tab-icon"><Icon name={ct.icon} size={14} /></span>
                  <span>{ct.name}</span>
                </button>
              ))}
            </div>
          )}

          <div className="pkg-grid" key={"grid-" + activeCat + "-" + activeClassType}>
            {currentCategory.tiers.map((p, i) => (
              <PackageCard key={i} eb={p.eb} title={p.t} price={p.p} desc={p.d}
                           featured={p.featured} cta={t.home.ctaPrimary} staggerIndex={i} />
            ))}
          </div>
        </div>
      </section>

      <section className="faq-section">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"1fr 2fr", gap:48, marginBottom:40}}>
            <div>
              <div className="section-eb">FAQ</div>
              <h2 className="section-title">{t.packages.faqTitle}</h2>
            </div>
          </div>
          <Accordion items={t.packages.faq} />
        </div>
      </section>

      <CTABanner t={t} setPage={setPage} />
    </div>
  );
}

// ── AboutPage ─────────────────────────────────────────────────────
function AboutPage({ t, setPage }) {
  return (
    <div className="page">
      <section className="section" style={{background:"var(--bhs-page)"}}>
        <div className="container">
          <div className="about-split">
            <div className="about-letter reveal is-revealed">
              <div className="about-portrait">
                <img src="/assets/photos/studio-circle.jpg" alt="" />
              </div>
              <div className="section-eb">{t.about.eyebrow}</div>
              <h1 className="about-letter-title">{t.about.title}</h1>
              <div className="about-body" style={{marginTop:16}}>
                {t.about.body.map((p, i) => <p key={i}>{p}</p>)}
              </div>
            </div>
            <div className="about-img reveal is-revealed" style={{transitionDelay: '150ms'}}>
              <img src="/assets/photos/hall.jpg" alt="Body Healing Studio" />
            </div>
          </div>
        </div>
      </section>


      <section className="section" style={{background:"#fff"}}>
        <div className="container">
          <div style={{marginBottom:40}}>
            <div className="section-eb reveal is-revealed">{t.about.principlesEb}</div>
            <h2 className="section-title reveal is-revealed" style={{transitionDelay:'80ms'}}>{t.home.introTitle}</h2>
          </div>
          <div className="principles">
            {t.about.principles.map((p, i) => (
              <div key={i} className="principle reveal is-revealed" style={{transitionDelay: (i * 100) + 'ms'}}>
                <span className="num">— 0{i + 1}</span>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>


      <TestimonialsSection t={t} />
      <CTABanner t={t} setPage={setPage} />
    </div>
  );
}

// ── ContactPage ───────────────────────────────────────────────────
function ContactPage({ t }) {
  return (
    <div className="page">
      <section className="section" style={{background:"var(--bhs-page)", paddingBottom:48}}>
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:48, alignItems:"end"}}>
            <div>
              <div className="section-eb reveal is-revealed">{t.contact.eyebrow}</div>
              <h1 className="section-title reveal is-revealed" style={{fontSize:"clamp(44px,5.5vw,72px)", transitionDelay:'80ms'}}>{t.contact.title}</h1>
            </div>
            <p className="reveal is-revealed" style={{fontFamily:"var(--font-display)",fontStyle:"italic",fontSize:19,color:"var(--bhs-ink-soft)",lineHeight:1.55,margin:0, transitionDelay:'160ms'}}>
              {t.contact.lede}
            </p>
          </div>
        </div>
      </section>


      <section className="section" style={{background:"var(--bhs-page)", paddingTop:0}}>
        <div className="container">
          <div className="contact-split">
            <div className="contact-form-card reveal is-revealed">
              <h2>{t.contact.title}</h2>
              <form className="contact-form" onSubmit={e => e.preventDefault()}>
                <Field label={t.contact.name} placeholder={t.contact.namePh} />
                <Field label={t.contact.emailLbl} placeholder="you@email.com" type="email" />
                <Field full label={t.contact.phoneLbl} placeholder={t.contact.phone} type="tel" />
                <Field full multiline label={t.contact.msg} placeholder={t.contact.msgPh} />
                <div style={{gridColumn:"1/-1", marginTop:8}}>
                  <button className="btn btn-primary" type="submit">{t.contact.send}</button>
                </div>
              </form>
            </div>
            <div className="contact-info-cards">
              {['hours', 'addr', 'contact'].map((key, i) => (
                <div key={key} className="contact-info-card reveal is-revealed" style={{transitionDelay: (150 + i * 80) + 'ms'}}>
                  <h4>{t.contact[key + 'Eb'] || (key === 'addr' ? t.contact.findEb : t.contact.hoursEb)}</h4>
                  <p>{key === 'addr' ? t.contact.addr.join("\n") : key === 'contact' ? `${t.contact.phone}\n${t.contact.email}` : t.contact.hours.join("\n")}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { HomePage, PackagesPage, AboutPage, ContactPage });