const T = {
  en: {
    nav: { programs:"Programs", about:"About", testimonials:"Stories", contact:"Contact", join:"Join Us" },
    hero: {
      badge:"Strength & Mobility Coaching · Adults 55+",
      h1a:"This is your",
      h1b:"Movement Community.",
      h1c:"We work to strengthen your Body and Mind.",
      sub:"Strong & Free is live online group fitness designed specifically for adults 55+. Build real strength, move without pain, and stay independent — from home, once a week.",
      cta1:"Join the Group — $89/mo",
      cta2:"Connect With Us First",
    },
    trust: [
      { value:"55+", label:"Ages We Serve" },
      { value:"Move Weekly", label:"Choose Mon · Wed · or Fri · 10–10:45 AM ET" },
      { value:"$89", label:"Per Month, No Contract" },
      { value:"Google Meet", label:"No App Required" },
    ],
    programs_title:"What We Offer",
    programs_sub:"A group membership, and two ways to get personal coaching. Simple.",
    programs:[
      {
        type:"group",
        name:"Group Movement",
        tag:"Most Popular",
        price:"$89",
        period:"/month",
        desc:"One live class per week via Google Meet — your choice of Monday, Wednesday, or Friday at 10 AM ET. No download, no app. Strength, balance, and mobility in a warm group that knows your name.",
        features:["Your choice: Mon, Wed, or Fri at 10 AM ET","Google Meet — open in any browser","Community WhatsApp group","Monthly movement progress check-in","Cancel anytime"],
        cta:"Subscribe Now",
        href:"/subscribe.html",
      },
      {
        type:"remote",
        name:"Remote Consultation",
        tag:"One-on-One",
        price:"$100",
        period:"/session",
        desc:"A 30-minute private video call with Gnani. Ideal if you want a personalised movement plan before joining the group, or need specific guidance.",
        features:["30-minute 1:1 video call","Movement assessment + plan","Book a time that suits you","Includes follow-up notes","No commitment required"],
        cta:"Book a Remote Call",
        href:"/book.html?type=remote",
      },
      {
        type:"inperson",
        name:"In-Person Consultation",
        tag:"Toronto · Markham",
        price:"$250",
        period:"/session",
        desc:"A 30-minute in-person session in Markham. Hands-on movement assessment, posture analysis, and a personalised plan you can start that day.",
        features:["30-minute in-person session","Markham (address confirmed on booking)","Full movement + posture assessment","Take-home movement plan","Priority access to group program"],
        cta:"Book In Person",
        href:"/book.html?type=inperson",
      },
    ],
    for_title:"You are stronger than you think.",
    for_sub:"You just need the right program.",
    for_points:[
      { icon:"🦵", title:"You're feeling weaker than you used to", body:"Climbing stairs, carrying groceries, getting up from a chair — it's harder than it was. Targeted strength work changes that, fast." },
      { icon:"🧠", title:"You want to stay sharp and energised", body:"Movement is not just about the body. Regular exercise is one of the most evidence-backed ways to protect your memory and mood as you age." },
      { icon:"🏠", title:"You want to do it from home", body:"No driving, no gym membership, no intimidating equipment. Just you, your living room, and a coach who knows exactly what your body needs." },
    ],
    how_title:"Simple From Day One",
    how_steps:[
      { n:"01", title:"Sign Up Securely", body:"Choose your plan and pay via secure checkout. Takes about two minutes. No paperwork, no commitment period." },
      { n:"02", title:"Get Your Welcome Email", body:"Within minutes you'll receive your class schedule, a simple guide for joining your first session, and a reminder before every class. We will be in touch with you every step of the way." },
      { n:"03", title:"Show Up and Move", body:"Click the link in your reminder email, join on Google Meet — no download — and let Gnani take it from there. That's it." },
    ],
    about_label:"Gnani",
    about_name:"Gnani",
    about_title:"Founder, Strong & Free · Toronto",
    about_body1:"I started Strong & Free because I kept seeing the same thing: adults in their 50s, 60s, and 70s who were strong, capable, and determined — but had been told to slow down, or given programs that were never designed for them.",
    about_body2:"I believe your best years of movement are still ahead of you. My coaching meets you exactly where you are, adapts to your body, and gets real results — in a community that understands your life.",
    about_quote:"“Your body has carried you this far. Let us help it carry you further.”",
    schedule_label:"Class Schedule",
    schedule:[
      { day:"Monday", time:"10:00 – 10:45 AM ET", format:"Choose one" },
      { day:"Wednesday", time:"10:00 – 10:45 AM ET", format:"Choose one" },
      { day:"Friday", time:"10:00 – 10:45 AM ET", format:"Choose one" },
    ],
    testimonials_title:"What Our Community Says",
    faqs:[
      { q:"Is this program suitable for complete beginners?", a:"Absolutely. Most of our members had never exercised regularly before joining. We start from where you are, not where we think you should be." },
      { q:"Do I need any equipment?", a:"No equipment needed to start. Over time, simple items like a resistance band or a chair help — most cost under $15 and we guide you through it." },
      { q:"Do I need to download anything for the classes?", a:"No. We use Google Meet which opens directly in any web browser — Chrome, Safari, Edge. No app, no account needed." },
      { q:"What if I have health conditions or injuries?", a:"We work with your body, not against it. We ask about your health history during onboarding to make sure our class is the perfect fit for you. We are not a substitute for medical care — but we are trained to work alongside it." },
      { q:"Is it really just once a week?", a:"Yes — one live class per week with Gnani, your choice of Monday, Wednesday, or Friday at 10 AM ET. The programming is designed so that one session per week, done consistently, produces real, measurable results." },
      { q:"Can my spouse or partner join too?", a:"Yes — and they get a discount when you join together. Email us and we will sort it out." },
      { q:"How do I cancel my subscription?", a:"Email hello@movestrongandfree.com before your next billing date and we cancel with no questions and no fees." },
    ],
    blog_title:"From the Community",
    blogs:[
      { tag:"Movement", title:"Why Strength Training After 55 Changes Everything", date:"April 14, 2026", read:"4 min read" },
      { tag:"Wellness", title:"5 Balance Exercises You Can Do in Your Kitchen Right Now", date:"March 28, 2026", read:"3 min read" },
      { tag:"Community", title:"What We Learned From Our First 100 Members", date:"March 10, 2026", read:"6 min read" },
    ],
    contact_title:"Ready to Take the First Step?",
    contact_sub:"Tell us a little about yourself and we will be in touch with you within 24 hours. No sales pitch — just an honest conversation about where you are and where you want to go.",
    contact_cta:"Send Us a Message",
    form_title:"Get Started — 60 Seconds",
    form_sub:"Tell us a little about yourself. We will be in touch with you within 24 hours.",
    form_fields:{ first:"First Name", last:"Last Name", phone:"Phone Number", email:"Email Address", reason:"What brings you here? (optional)", reason_ph:"e.g. I want to move more freely, manage my balance, stay active for my grandchildren…", submit:"Send My Details →", sending:"Sending…", success:"Thank you! We will be in touch with you within 24 hours.", error:"Something went wrong. Please email hello@movestrongandfree.com" },
    footer_tagline:"Strength in Community.",
    footer_copy:"© 2026 Strong & Free · Movement for Life · A program by Gnani Life Systems · Toronto",
    mobile_cta:"I'm Interested — We'll Be in Touch",
  },
  ta: {
    nav: { programs:"திட்டங்கள்", about:"எங்களைப் பற்றி", testimonials:"அனுபவங்கள்", contact:"தொடர்பு", join:"சேருங்கள்" },
    hero: {
      badge:"வலிமை மற்றும் இயக்கம் · 55+ வயது",
      h1a:"இது உங்கள்",
      h1b:"இயக்க சமூகம்.",
      h1c:"உங்கள் உடலையும் மனதையும் வலுப்படுத்த நாங்கள் உழைக்கிறோம்.",
      sub:"Strong & Free என்பது 55 வயதுக்கு மேற்பட்டவர்களுக்கான நேரடி ஆன்லைன் குழு உடற்பயிற்சி. வீட்டிலிருந்தே வாரம் ஒரு முறை உண்மையான வலிமையை வளர்த்து, வலியின்றி நகர்ந்து, சுதந்திரமாக வாழுங்கள்.",
      cta1:"குழுவில் சேருங்கள் — $89/மாதம்",
      cta2:"முதலில் எங்களுடன் இணையுங்கள்",
    },
    trust: [
      { value:"55+", label:"நாங்கள் சேவிக்கும் வயது" },
      { value:"வாரம் ஒரு முறை", label:"திங் · புத · அல்லது வெள் · 10–10:45 AM ET" },
      { value:"$89", label:"மாதம், ஒப்பந்தம் இல்லை" },
      { value:"Google Meet", label:"செயலி தேவையில்லை" },
    ],
    programs_title:"நாம் என்ன வழங்குகிறோம்",
    programs_sub:"ஒரு குழு உறுப்பினர் திட்டம், மற்றும் தனிப்பட்ட பயிற்சி பெற இரண்டு வழிகள்.",
    programs:[
      {
        type:"group",
        name:"குழு இயக்கம்",
        tag:"மிகவும் பிரபலம்",
        price:"$89",
        period:"/மாதம்",
        desc:"Google Meet வழியாக வாரம் ஒரு நேரடி வகுப்பு — திங்கள், புதன் அல்லது வெள்ளி காலை 10 ET. பதிவிறக்கம் இல்லை, செயலி இல்லை.",
        features:["திங், புத அல்லது வெள் — உங்கள் தேர்வு, காலை 10 ET","Google Meet — எந்த உலாவியிலும்","சமூக WhatsApp குழு","மாதாந்திர முன்னேற்ற சரிபார்ப்பு","எந்நேரமும் ரத்து செய்யலாம்"],
        cta:"இப்போதே சேருங்கள்",
        href:"/subscribe.html",
      },
      {
        type:"remote",
        name:"தொலைதூர ஆலோசனை",
        tag:"தனிப்பட்ட சேவை",
        price:"$100",
        period:"/அமர்வு",
        desc:"Gnani உடன் 30 நிமிட தனிப்பட்ட வீடியோ அழைப்பு.",
        features:["30 நிமிட 1:1 வீடியோ அழைப்பு","இயக்க மதிப்பீடு + திட்டம்","உங்களுக்கு ஏற்ற நேரம்","பின்தொடர்தல் குறிப்புகள்","எந்த கட்டாயமும் இல்லை"],
        cta:"தொலைதூர அழைப்பு முன்பதிவு",
        href:"/book.html?type=remote",
      },
      {
        type:"inperson",
        name:"நேரில் ஆலோசனை",
        tag:"டொரொண்டோ · மார்க்கம்",
        price:"$250",
        period:"/அமர்வு",
        desc:"மார்க்கத்தில் 30 நிமிட நேரில் அமர்வு.",
        features:["30 நிமிட நேரில் அமர்வு","மார்க்கம் (பதிவின்போது முகவரி)","முழு இயக்க + தோரணை மதிப்பீடு","வீட்டிற்கு கொண்டு செல்லும் திட்டம்","குழு திட்டத்திற்கு முன்னுரிமை"],
        cta:"நேரில் முன்பதிவு",
        href:"/book.html?type=inperson",
      },
    ],
    for_title:"நீங்கள் நினைப்பதை விட வலிமையானவர்.",
    for_sub:"சரியான திட்டம் மட்டுமே தேவை.",
    for_points:[
      { icon:"🦵", title:"நீங்கள் முன்பை விட பலவீனமாக உணர்கிறீர்கள்", body:"படிக்கட்டுகள் ஏறுவது, மளிகை சுமப்பது, நாற்காலியிலிருந்து எழுவது — முன்பை விட கடினமாக இருக்கிறது. இலக்கிட்ட வலிமை பயிற்சி இதை மாற்றும்." },
      { icon:"🧠", title:"கூர்மையாகவும் சக்திவாய்ந்தாகவும் இருக்க விரும்புகிறீர்கள்", body:"இயக்கம் உடலுக்கு மட்டுமல்ல. வழக்கமான உடற்பயிற்சி உங்கள் நினைவாற்றலையும் மனநிலையையும் பாதுகாக்க உதவுகிறது." },
      { icon:"🏠", title:"வீட்டிலிருந்தே செய்ய விரும்புகிறீர்கள்", body:"வாகனம் இல்லை, உடற்பயிற்சிகூட உறுப்பினர் இல்லை. நீங்கள், உங்கள் வீட்டறை, உங்கள் உடலுக்கு என்ன தேவை என்று தெரிந்த பயிற்சியாளர் மட்டுமே." },
    ],
    how_title:"முதல் நாளிலிருந்தே எளிமையானது",
    how_steps:[
      { n:"01", title:"பாதுகாப்பாக பதிவு செய்யுங்கள்", body:"உங்கள் திட்டத்தை தேர்ந்தெடுத்து பாதுகாப்பான checkout வழியாக செலுத்துங்கள். இரண்டு நிமிடங்கள் மட்டுமே." },
      { n:"02", title:"வரவேற்பு மின்னஞ்சல் பெறுங்கள்", body:"சில நிமிடங்களில் உங்கள் வகுப்பு அட்டவணை, முதல் அமர்விற்கான வழிகாட்டல், ஒவ்வொரு வகுப்பிற்கும் முன்பு நினைவூட்டல் கிடைக்கும்." },
      { n:"03", title:"வந்து இயங்குங்கள்", body:"நினைவூட்டல் மின்னஞ்சலில் இணைப்பை கிளிக் செய்து Google Meet இல் சேருங்கள் — பதிவிறக்கம் தேவையில்லை." },
    ],
    about_label:"Gnani",
    about_name:"Gnani",
    about_title:"நிறுவனர், Strong & Free · டொரொண்டோ",
    about_body1:"நான் Strong & Free ஐ ஆரம்பித்தேன் ஏனென்றால் மீண்டும் மீண்டும் ஒரே விஷயம் பார்த்தேன்: 50, 60, 70 வயதிலுள்ளவர்கள் வலிமையாக, திறனாக, உறுதியாக இருந்தனர் — ஆனால் மெதுவாக போகச் சொல்லப்பட்டார்கள்.",
    about_body2:"உங்கள் இயக்கத்தின் சிறந்த ஆண்டுகள் இன்னும் உங்கள் முன்னால் உள்ளன. என் பயிற்சி உங்களை இருக்கும் இடத்தில் சந்திக்கிறது, உங்கள் உடலுக்கு ஏற்றபடி மாற்றிக்கொள்கிறது.",
    about_quote:"“உங்கள் உடல் இதுவரை உங்களை சுமந்தது. நாம் அதை மேலும் சுமக்க உதவுவோம்.”",
    schedule_label:"வகுப்பு அட்டவணை",
    schedule:[
      { day:"திங்கள்", time:"காலை 10:00 ET", format:"Google Meet" },
      { day:"புதன்", time:"காலை 10:00 ET", format:"Google Meet" },
      { day:"வெள்ளி", time:"காலை 10:00 ET", format:"Google Meet" },
    ],
    testimonials_title:"எங்கள் சமூகம் என்ன சொல்கிறது",
    faqs:[
      { q:"முழு தொடக்கநிலையாளர்களுக்கு இந்த திட்டம் பொருத்தமானதா?", a:"நிச்சயமாக. எங்கள் உறுப்பினர்களில் பெரும்பாலானோர் இணைவதற்கு முன்பு ஒருபோதும் தொடர்ந்து உடற்பயிற்சி செய்திருக்கவில்லை." },
      { q:"எனக்கு உபகரணங்கள் தேவையா?", a:"தொடங்க உபகரணங்கள் தேவையில்லை. காலப்போக்கில் எதிர்ப்பு பட்டை அல்லது நாற்காலி போன்ற எளிய பொருட்கள் உதவும்." },
      { q:"வகுப்புகளுக்கு ஏதாவது பதிவிறக்க வேண்டுமா?", a:"இல்லை. நாங்கள் Google Meet பயன்படுத்துகிறோம், இது எந்த வலை உலாவியிலும் நேரடியாக திறக்கும்." },
      { q:"உடல் நலக்குறைவு அல்லது காயங்கள் இருந்தால்?", a:"உங்கள் உடல் நல வரலாற்றை சேர்வதற்கு முன்பு கேட்கிறோம் — எங்கள் வகுப்பு உங்களுக்கு சரியான பொருத்தம் என்பதை உறுதி செய்வதற்கு." },
      { q:"ரத்து செய்வது எப்படி?", a:"அடுத்த பில்லிங் தேதிக்கு முன்பு hello@movestrongandfree.com க்கு மின்னஞ்சல் செய்யுங்கள். கேள்விகள் இல்லாமல் ரத்து செய்கிறோம்." },
    ],
    blog_title:"சமூகத்திலிருந்து",
    blogs:[
      { tag:"இயக்கம்", title:"55 வயதுக்கு பிறகு வலிமை பயிற்சி ஏன் எல்லாவற்றையும் மாற்றுகிறது", date:"ஏப்ரல் 14, 2026", read:"4 நிமிட வாசிப்பு" },
      { tag:"ஆரோக்கியம்", title:"உங்கள் சமையலறையில் இப்போதே செய்யக்கூடிய 5 சமநிலை பயிற்சிகள்", date:"மார்ச் 28, 2026", read:"3 நிமிட வாசிப்பு" },
      { tag:"சமூகம்", title:"முதல் 100 உறுப்பினர்களிடம் நாங்கள் கற்றது", date:"மார்ச் 10, 2026", read:"6 நிமிட வாசிப்பு" },
    ],
    contact_title:"முதல் அடி எடுக்க தயாரா?",
    contact_sub:"உங்களைப் பற்றி கொஞ்சம் சொல்லுங்கள். 24 மணி நேரத்திற்குள் தொடர்பு கொள்கிறோம்.",
    contact_cta:"செய்தி அனுப்புங்கள்",
    form_title:"60 வினாடிகளில் தொடங்குங்கள்",
    form_sub:"உங்களைப் பற்றி கொஞ்சம் சொல்லுங்கள். 24 மணி நேரத்திற்குள் தொடர்பு கொள்கிறோம்.",
    form_fields:{ first:"முதல் பெயர்", last:"கடைசி பெயர்", phone:"தொலைபேசி எண்", email:"மின்னஞ்சல்", reason:"நீங்கள் ஏன் இங்கே வந்தீர்கள்? (விருப்பமானது)", reason_ph:"எ.கா. சுதந்திரமாக நகர விரும்புகிறேன்…", submit:"என் விவரங்களை அனுப்புங்கள் →", sending:"அனுப்புகிறோம்…", success:"நன்றி! 24 மணி நேரத்திற்குள் தொடர்பு கொள்கிறோம்.", error:"ஏதோ தவறு நடந்தது. hello@movestrongandfree.com க்கு மின்னஞ்சல் செய்யுங்கள்." },
    footer_tagline:"சமூகத்தில் வலிமை.",
    footer_copy:"© 2026 Strong & Free · வாழ்க்கைக்கான இயக்கம் · Gnani Life Systems · டொரொண்டோ",
    mobile_cta:"ஆர்வமாக இருக்கிறேன் — தொடர்பு கொள்ளுங்கள்",
  }
};

const LOGO = "/images/strong-and-free-logo.png";
const WHATSAPP = "https://chat.whatsapp.com/JRausmtyM1f4uVSTMDDIMC?mode=gi_t";

function useFadeUp() {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVis(true); obs.disconnect(); }
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, vis];
}

function scrollToSection(id) {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}

function FadeUp({ children, className = "", style }) {
  const [ref, vis] = useFadeUp();
  return <div ref={ref} className={`fade-up ${vis ? "in" : ""} ${className}`} style={style}>{children}</div>;
}

function Header({ lang, setLang }) {
  const t = T[lang].nav;
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const links = ["programs","about","testimonials","contact"];
  return (
    <header className={`hdr${scrolled ? " scrolled" : ""}`}>
      <div className="hdr-inner">
        <button className="logo-btn" onClick={() => window.scrollToSection({top:0,behavior:"smooth"})}>
          <img src={LOGO} alt="Strong & Free" className="logo-img" />
        </button>
        <nav className={`main-nav${open ? " open" : ""}`}>
          {links.map(k => (
            <button key={k} className="nav-link" onClick={() => { scrollToSection(k); setOpen(false); }}>
              {t[k]}
            </button>
          ))}
        </nav>
        <div className="hdr-right">
          <button className="lang-btn" onClick={() => setLang(l => l === "en" ? "ta" : "en")}>
            {lang === "en" ? "தமிழ்" : "EN"}
          </button>
          <button className="btn-cta" onClick={() => scrollToSection("intake")}>{t.join}</button>
          <button className={`burger${open ? " open" : ""}`} onClick={() => setOpen(o => !o)} aria-label="Menu">
            <span /><span /><span />
          </button>
        </div>
      </div>
    </header>
  );
}

function Hero({ lang, variation }) {
  const t = T[lang].hero;
  return (
    <section id="hero" className={`hero hero-${variation}`}>
      <div className="hero-glow" />
      <div className="hero-content">
        <FadeUp>
          <p className="hero-badge">{t.badge}</p>
          <h1 className="hero-h1">
            {t.h1a}<br />{t.h1b}<br />
            <span className="hero-h1c">{t.h1c}</span>
          </h1>
          <p className="hero-sub">{t.sub}</p>
          <div className="hero-btns">
            <button className="btn-cta btn-lg" onClick={() => scrollToSection("intake")}>{t.cta1}</button>
            <button className="btn-ghost btn-lg" onClick={() => window.open(WHATSAPP, '_blank')}>{t.cta2}</button>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

function TrustBar({ lang }) {
  return (
    <div className="trust-bar">
      {T[lang].trust.map((item, i) => (
        <div key={i} className="trust-item">
          <span className="trust-val">{item.value}</span>
          <span className="trust-lbl">{item.label}</span>
        </div>
      ))}
    </div>
  );
}

function WhoFor({ lang }) {
  const t = T[lang];
  return (
    <section id="whyus" className="section">
      <FadeUp>
        <div className="sec-hdr">
          <p className="sec-label" style={{fontSize:"1.6rem",letterSpacing:"0",textTransform:"none",fontWeight:"bold",color:"var(--forest)",marginBottom:"8px"}}>
            {t.for_title}
          </p>
          <p className="sec-sub" style={{fontSize:"1.1rem"}}>{t.for_sub}</p>
        </div>
        <div className="for-grid">
          {t.for_points.map((p, i) => (
            <div key={i} className="for-card">
              <div className="for-icon">{p.icon}</div>
              <h3 className="for-title">{p.title}</h3>
              <p className="for-body">{p.body}</p>
            </div>
          ))}
        </div>
      </FadeUp>
    </section>
  );
}

function Programs({ lang }) {
  const t = T[lang];
  return (
    <section id="programs" className="section bg-tint">
      <FadeUp>
        <div className="sec-hdr">
          <p className="sec-label">{t.programs_title}</p>
          <p className="sec-sub">{t.programs_sub}</p>
        </div>
        <div className="programs-grid">
          {t.programs.map((p, i) => (
            <div key={i} className={`prog-card${i === 0 ? " prog-featured" : ""}`}>
              <span className="prog-tag">{p.tag}</span>
              <h3 className="prog-name">{p.name}</h3>
              <div className="prog-price">{p.price}<span className="prog-period">{p.period}</span></div>
              <p className="prog-desc">{p.desc}</p>
              <ul className="prog-features">
                {p.features.map((f, j) => <li key={j}><span className="check">✓</span>{f}</li>)}
              </ul>
              <button
                className={`prog-btn${i === 0 ? " btn-cta" : " btn-outline"}`}
                onClick={() => { window.location.href = p.href; }}
              >
                {p.cta}
              </button>
              {p.type === "group" && (
                <a href={WHATSAPP} target="_blank" rel="noopener"
                  style={{display:"block",textAlign:"center",marginTop:"12px",fontSize:"0.85rem",color:"rgba(250,246,240,0.65)",textDecoration:"underline"}}>
                  {lang === "en" ? "Or join our WhatsApp community first →" : "அல்லது WhatsApp குழுவில் சேருங்கள் →"}
                </a>
              )}
            </div>
          ))}
        </div>
      </FadeUp>
    </section>
  );
}

function HowItWorks({ lang }) {
  const t = T[lang];
  return (
    <section id="how" className="section bg-dark">
      <FadeUp>
        <div className="sec-hdr">
          <p className="sec-label light">{t.how_title}</p>
        </div>
        <div className="steps-grid">
          {t.how_steps.map((s, i) => (
            <div key={i} className="step">
              <div className="step-n">{s.n}</div>
              <h3 className="step-title">{s.title}</h3>
              <p className="step-body">{s.body}</p>
            </div>
          ))}
        </div>
      </FadeUp>
    </section>
  );
}

function About({ lang }) {
  const t = T[lang];
  const [ref, vis] = useFadeUp();
  return (
    <section id="about" className="section">
      <div ref={ref} className={`about-grid fade-up ${vis ? "in" : ""}`}>
        <div className="about-photo-wrap">
          <img src="/images/gnani-headshot.png" alt="Gnani" className="about-photo" />
          <div className="schedule-card">
            <p className="sched-label">{t.schedule_label}</p>
            {t.schedule.map((s, i) => (
              <div key={i} className="sched-row">
                <span className="sched-day">{s.day}</span>
                <span className="sched-time">{s.time}</span>
                <span className="sched-fmt">{s.format}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="about-text">
          <p className="sec-label">{t.about_label}</p>
          <h2 className="about-name">{t.about_name}</h2>
          <p className="about-role">{t.about_title}</p>
          <p className="about-p">{t.about_body1}</p>
          <p className="about-p">{t.about_body2}</p>
          <blockquote className="about-quote">{t.about_quote}</blockquote>
        </div>
      </div>
    </section>
  );
}

const MEMBERS = [
  { name:"Margaret T.", age:67, city:"Toronto", quote:"I've tried other fitness programs but nothing felt right for someone my age. Gnani understands what our bodies actually need. I've been moving pain-free for the first time in years.", result:"Moving pain-free for the first time in years", stars:5, photoColor:"#D4E8D0", videoThumb:"#B8D4B2" },
  { name:"Rajan P.", age:72, city:"Markham", quote:"My doctor is amazed at my balance scores. Three months in and I feel stronger than I did at 55. This program is the real thing.", result:"Measurable strength gains in 3 months", stars:5, photoColor:"#D0DEE8", videoThumb:"#B2C8D4" },
  { name:"David K.", age:71, city:"Scarborough", quote:"I was worried about the technology but it was so simple. I just clicked a link in my email and there I was. The class felt like being with friends.", result:"Zero tech barriers — joined from day one", stars:5, photoColor:"#E8DDD0", videoThumb:"#D4C4B2" },
  { name:"Patricia R.", age:63, city:"Mississauga", quote:"My daughter signed me up and I'm so glad she did. I look forward to these classes every week. I'm stronger than I've been in a decade.", result:"Stronger than she's been in 10 years", stars:5, photoColor:"#E0D0E8", videoThumb:"#C8B2D4" },
  { name:"Viji K.", age:64, city:"North York", quote:"The Tamil community aspect made all the difference. I felt seen and understood from day one. This is not a gym class — it is a family.", result:"Community connection & weekly consistency", stars:5, photoColor:"#D0E8E4", videoThumb:"#B2D4CE" },
];

const MEMBERS_TA = [
  { name:"மீனா S.", age:67, city:"டொரொண்டோ", quote:"67 வயதில் பல ஆண்டுகளுக்கு பிறகு முதல் முறையாக கைப்பிடி இல்லாமல் படிக்கட்டுகளில் ஏற முடிகிறது.", result:"சமநிலை மேம்பாடு" },
  { name:"ராஜன் P.", age:72, city:"மார்க்கம்", quote:"என் மருத்துவர் என் சமநிலை மதிப்பெண்களில் வியப்படைகிறார். மூன்று மாதங்களில் 55 வயதிலிருந்ததை விட வலிமையாக உணர்கிறேன்.", result:"3 மாதங்களில் வலிமை வளர்ச்சி" },
  { name:"விஜி K.", age:64, city:"ஸ்கார்போரோ", quote:"தமிழ் சமூக அம்சம் எல்லா வித்தியாசத்தையும் ஏற்படுத்தியது. முதல் நாளிலிருந்தே புரிந்துகொள்ளப்பட்டதாக உணர்ந்தேன். இது குடும்பம்.", result:"சமூக தொடர்பு மற்றும் நிலைத்தன்மை" },
  { name:"சுசேலா M.", age:69, city:"மிஸிசாகா", quote:"என் மகள் என்னை தள்ளினாள். இப்போது இது இல்லாமல் என் வாரத்தை கற்பனை செய்ய முடியாது.", result:"8 மாதங்கள் தொடர்ந்து பயிற்சி" },
  { name:"கிருஷ்ணமூர்த்தி N.", age:74, city:"நார்த் யார்க்", quote:"என் முழங்கால் அறுவைசிகிச்சைக்கு பிறகு என் செயலில் நாட்கள் முடிந்துவிட்டதாக நினைத்தேன். Strong & Free ஒரு புதிய பாதையை காட்டியது.", result:"அறுவைசிகிச்சைக்கு பிறகு மீட்சி" },
];

function TestimonialCarousel({ lang }) {
  const [active, setActive] = React.useState(0);
  const [tab, setTab] = React.useState("story");
  const [animDir, setAnimDir] = React.useState(null);
  const members = lang === "en" ? MEMBERS : MEMBERS_TA.map((m, i) => ({ ...MEMBERS[i], ...m }));
  const t = T[lang];
  const total = members.length;

  function go(dir) {
    setAnimDir(dir);
    setTimeout(() => { setActive(i => (i + dir + total) % total); setAnimDir(null); }, 220);
  }

  const touchStart = React.useRef(null);
  function onTouchStart(e) { touchStart.current = e.touches[0].clientX; }
  function onTouchEnd(e) {
    if (touchStart.current === null) return;
    const dx = e.changedTouches[0].clientX - touchStart.current;
    if (Math.abs(dx) > 40) go(dx < 0 ? 1 : -1);
    touchStart.current = null;
  }

  const m = members[active];

  return (
    <section id="testimonials" className="section bg-dark testi-carousel-section">
      <FadeUp>
        <div className="sec-hdr">
          <p className="sec-label light">{t.testimonials_title}</p>
          <p className="sec-sub light" style={{maxWidth:"480px",margin:"0 auto"}}>
            {lang === "en" ? "Real people. Real movement. In their own words." : "உண்மையான மனிதர்கள். உண்மையான இயக்கம்."}
          </p>
        </div>
        <div className="testi-tabs">
          <button className={`testi-tab${tab === "story" ? " active" : ""}`} onClick={() => setTab("story")}>
            {lang === "en" ? "Their Story" : "அவர்கள் கதை"}
          </button>
          <button className={`testi-tab${tab === "workout" ? " active" : ""}`} onClick={() => setTab("workout")}>
            {lang === "en" ? "In Action" : "இயக்கத்தில்"}
          </button>
        </div>
        <div className={`testi-main${animDir === 1 ? " exit-left" : animDir === -1 ? " exit-right" : ""}`} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
          {tab === "story" ? (
            <div className="testi-story">
              <div className="testi-photo" style={{background:m.photoColor}}>
                <div className="photo-placeholder">
                  <div className="photo-icon">👤</div>
                  <p className="photo-note">{lang === "en" ? `Photo of ${m.name}` : `${m.name} படம்`}</p>
                </div>
              </div>
              <div className="testi-content">
                <div className="testi-result-badge">{m.result}</div>
                <div className="testi-stars">{"★".repeat(m.stars || 5)}</div>
                <blockquote className="testi-big-quote">"{m.quote}"</blockquote>
                <div className="testi-byline">
                  <span className="testi-bname">{m.name}</span>
                  <span className="testi-bdot">·</span>
                  <span className="testi-bage">{lang === "en" ? `Age ${m.age}` : `வயது ${m.age}`}</span>
                  <span className="testi-bdot">·</span>
                  <span className="testi-bcity">{m.city}</span>
                </div>
              </div>
            </div>
          ) : (
            <div className="testi-video-wrap">
              <div className="testi-video" style={{background:m.videoThumb}}>
                <div className="video-placeholder">
                  <div className="play-btn">▶</div>
                  <p className="video-note">{lang === "en" ? `${m.name} — moving and working out` : `${m.name} இயக்கத்தில்`}</p>
                  <p className="video-sub">{lang === "en" ? "Video coming soon" : "வீடியோ விரைவில்"}</p>
                </div>
              </div>
              <div className="video-caption">
                <span className="testi-bname">{m.name}</span>
                <span className="testi-bdot">·</span>
                <span className="testi-bage">{lang === "en" ? `Age ${m.age}` : `வயது ${m.age}`}</span>
                <span className="testi-bdot">·</span>
                <span className="video-result">{m.result}</span>
              </div>
            </div>
          )}
        </div>
        <div className="testi-nav">
          <button className="testi-arrow" onClick={() => go(-1)}>←</button>
          <div className="testi-dots">
            {members.map((_, i) => (
              <button key={i} className={`testi-dot${i === active ? " active" : ""}`}
                onClick={() => { setAnimDir(i > active ? 1 : -1); setTimeout(() => { setActive(i); setAnimDir(null); }, 220); }} />
            ))}
          </div>
          <button className="testi-arrow" onClick={() => go(1)}>→</button>
        </div>
        <div className="testi-strip">
          {members.map((member, i) => (
            <button key={i} className={`testi-thumb${i === active ? " active" : ""}`}
              onClick={() => { setAnimDir(i > active ? 1 : -1); setTimeout(() => { setActive(i); setAnimDir(null); }, 220); }}>
              <div className="thumb-photo" style={{background:member.photoColor}}><span>👤</span></div>
              <span className="thumb-name">{member.name.split(" ")[0]}</span>
            </button>
          ))}
        </div>
      </FadeUp>
    </section>
  );
}

function IntakeForm({ lang }) {
  const t = T[lang];
  const f = t.form_fields;
  const [form, setForm] = React.useState({ first:"", last:"", phone:"", email:"", reason:"" });
  const [status, setStatus] = React.useState("idle");
  const set = k => e => setForm(p => ({...p, [k]: e.target.value}));

  async function submit(e) {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch("/api/intake", {
        method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify(form)
      });
      setStatus(res.ok ? "success" : "error");
    } catch {
      setStatus("error");
    }
  }

  return (
    <section id="intake" className="section">
      <FadeUp>
        <div className="form-shell">
          <div className="form-left">
            <img src={LOGO} alt="" className="form-logo" />
            <h2 className="form-title">{t.form_title}</h2>
            <p className="form-sub">{t.form_sub}</p>
            <div className="form-trust">
              <p>✓ {lang === "en" ? "No pressure, no commitment" : "அழுத்தம் இல்லை"}</p>
              <p>✓ {lang === "en" ? "We will be in touch within 24 hours" : "24 மணி நேரத்திற்குள் தொடர்பு கொள்கிறோம்"}</p>
              <p>✓ {lang === "en" ? "Your first class is free" : "முதல் வகுப்பு இலவசம்"}</p>
            </div>
          </div>
          <div className="form-right">
            {status === "success" ? (
              <div className="form-success">
                <div className="success-check">✓</div>
                <p className="success-msg">{f.success}</p>
              </div>
            ) : (
              <form onSubmit={submit} className="intake-form">
                <div className="form-row">
                  <div className="field"><label>{f.first}</label><input type="text" value={form.first} onChange={set("first")} required placeholder="Meena" /></div>
                  <div className="field"><label>{f.last}</label><input type="text" value={form.last} onChange={set("last")} required placeholder="Sundaram" /></div>
                </div>
                <div className="form-row">
                  <div className="field"><label>{f.phone}</label><input type="tel" value={form.phone} onChange={set("phone")} required placeholder="+1 (416) 000-0000" /></div>
                  <div className="field"><label>{f.email}</label><input type="email" value={form.email} onChange={set("email")} required placeholder="you@example.com" /></div>
                </div>
                <div className="field"><label>{f.reason}</label><textarea value={form.reason} onChange={set("reason")} rows={3} placeholder={f.reason_ph} /></div>
                {status === "error" && <p className="form-err">{f.error}</p>}
                <button type="submit" className="btn-cta btn-lg form-sub-btn" disabled={status === "sending"}>
                  {status === "sending" ? f.sending : f.submit}
                </button>
              </form>
            )}
          </div>
        </div>
      </FadeUp>
    </section>
  );
}

function FAQ({ lang }) {
  const t = T[lang];
  const [open, setOpen] = React.useState(null);
  return (
    <section id="faq" className="section bg-tint">
      <FadeUp>
        <div className="sec-hdr"><p className="sec-label">{lang === "en" ? "Questions We Hear Often" : "அடிக்கடி கேட்கும் கேள்விகள்"}</p></div>
        <div className="faq-list">
          {t.faqs.map((item, i) => (
            <div key={i} className={`faq-item${open === i ? " open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
                <span>{item.q}</span>
                <span className="faq-icon">{open === i ? "−" : "+"}</span>
              </button>
              <div className="faq-a"><p>{item.a}</p></div>
            </div>
          ))}
        </div>
      </FadeUp>
    </section>
  );
}

function Blog({ lang }) {
  const t = T[lang];
  return (
    <section id="blog" className="section">
      <FadeUp>
        <div className="sec-hdr"><p className="sec-label">{t.blog_title}</p></div>
        <div className="blog-grid">
          {t.blogs.map((b, i) => (
            <div key={i} className="blog-card">
              <div className="blog-img"><span className="img-placeholder">article image</span></div>
              <div className="blog-body">
                <span className="blog-tag">{b.tag}</span>
                <h3 className="blog-title">{b.title}</h3>
                <p className="blog-meta">{b.date} · {b.read}</p>
              </div>
            </div>
          ))}
        </div>
      </FadeUp>
    </section>
  );
}

function Contact({ lang }) {
  const t = T[lang];
  return (
    <section id="contact" className="section bg-dark">
      <FadeUp>
        <div className="contact-inner">
          <img src={LOGO} alt="Strong & Free" className="contact-logo" />
          <h2 className="contact-title">{t.contact_title}</h2>
          <p className="contact-sub">{t.contact_sub}</p>
          <button className="btn-cta btn-lg" onClick={() => scrollToSection("intake")}>{t.contact_cta}</button>
          <p className="contact-email">
            {lang === "en" ? "Or email us at" : "அல்லது மின்னஞ்சல்:"}{" "}
            <a href="mailto:hello@movestrongandfree.com">hello@movestrongandfree.com</a>
          </p>
        </div>
      </FadeUp>
    </section>
  );
}

function Footer({ lang }) {
  const t = T[lang];
  return (
    <footer className="footer">
      <img src={LOGO} alt="Strong & Free" className="footer-logo" />
      <p className="footer-tagline">{t.footer_tagline}</p>
      <p className="footer-copy">{t.footer_copy}</p>
    </footer>
  );
}

function MobileCTA({ lang }) {
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setVis(window.scrollY > 480);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <div className={`mob-cta${vis ? " vis" : ""}`}>
      <button className="btn-cta btn-lg mob-cta-btn" onClick={() => scrollToSection("intake")}>
        {T[lang].mobile_cta}
      </button>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{"variation":"warm","accentColor":"#E8621A","bodySize":17}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = React.useState("en");
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--orange", tweaks.accentColor);
    document.documentElement.style.setProperty("--body-size", tweaks.bodySize + "px");
  }, [tweaks.accentColor, tweaks.bodySize]);

  return (
    <>
      <Header lang={lang} setLang={setLang} />
      <main>
        <Hero lang={lang} variation={tweaks.variation} />
        <TrustBar lang={lang} />
        <WhoFor lang={lang} />
        <TestimonialCarousel lang={lang} />
        <Programs lang={lang} />
        <HowItWorks lang={lang} />
        <About lang={lang} />
        <IntakeForm lang={lang} />
        <FAQ lang={lang} />
        <Blog lang={lang} />
        <Contact lang={lang} />
        <Footer lang={lang} />
      </main>
      <MobileCTA lang={lang} />
      <window.TweaksPanel>
        <window.TweakSection label="Visual Variation">
          <window.TweakRadio label="Style" options={[{value:"warm",label:"Warm"},{value:"bold",label:"Bold"}]} value={tweaks.variation} onChange={v => setTweak("variation", v)} />
          <window.TweakColor label="Accent" value={tweaks.accentColor} onChange={v => setTweak("accentColor", v)} />
        </window.TweakSection>
        <window.TweakSection label="Type">
          <window.TweakSlider label="Body Size" min={14} max={20} step={1} value={tweaks.bodySize} onChange={v => setTweak("bodySize", v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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