// Home page sections — Popular Videos, WhatsApp, Renewed Teaser, etc.
const { useState, useMemo } = React;

const Arrow = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
  </svg>
);
const Check = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="20 6 9 17 4 12"/>
  </svg>
);

// ---------- Marquee ----------
function Marquee({ items }) {
  const dup = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {dup.map((s, i) => (
          <span key={i}>{s}<i className="dot"/></span>
        ))}
      </div>
    </div>
  );
}

// ---------- About ----------
function About({ t, lang }) {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-photo">
            <div className="badge">
              {lang === 'en' ? <>20+ years<br/>in the arena</> : <>20+ വർഷം<br/>പ്രവൃത്തിപരിചയം</>}
            </div>
            <img src={(window.__resources && window.__resources.jishad2) || "img/jishad-2.webp"} alt="Jishad Bakar"/>
          </div>
          <div>
            <div className="kicker">{t.aboutKicker}</div>
            <h2 className="section-title" style={{ marginTop: 14, marginBottom: 24 }}>
              {lang === 'en'
                ? <>From a 20-year-old in a car showroom to a coach for <em>a million people.</em></>
                : <>കാർ ഷോറൂമിലെ 20-കാരനിൽ നിന്ന് <em>പത്ത് ലക്ഷം പേരുടെ കോച്ച്</em> വരെ.</>}
            </h2>
            <div className="about-body">
              {t.aboutBody.slice(0, 3).map((p, i) => <p key={i}>{p}</p>)}
            </div>
            <div className="philosophy-card">
              <p className="pq">{lang === 'en'
                ? <>Material things can be lost. <em>The skills you build can never be taken from you.</em></>
                : <>ഭൗതിക വസ്തുക്കൾ നഷ്ടപ്പെടാം. <em>നിങ്ങൾ നേടിയ കഴിവുകൾ ഒരിക്കലും തിരിച്ചെടുക്കാനാവില്ല.</em></>}</p>
              <div className="sig">— {lang === 'en' ? 'Jishad Bakar · The Turning Point' : 'ജിഷാദ് ബാക്കർ · വഴിത്തിരിവ്'}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Stats ----------
function Stats({ t, lang }) {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="section-head" style={{ textAlign: 'center', margin: '0 auto clamp(36px, 5vw, 60px)' }}>
          <div className="kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>{t.statsKicker}</div>
          <h2 className="section-title" style={{ marginTop: 14 }}>
            {lang === 'en' ? <>The numbers <em>behind the work.</em></> : <>ജോലിയുടെ <em>സംഖ്യകൾ.</em></>}
          </h2>
        </div>
        <div className="stats-strip">
          {t.stats.map((s, i) => (
            <div key={i} className="stat-card">
              <div className="n">{s.n}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Core Areas ----------
function Areas({ t }) {
  return (
    <section className="section" id="work" style={{ background: 'var(--paper)' }}>
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.areasKicker}</div>
          <h2 className="section-title" style={{ marginTop: 14 }}>{t.areasTitle}</h2>
        </div>
        <div className="areas-grid">
          {t.areas.map((a, i) => (
            <div key={i} className="area-card">
              <div className="area-num">{a.k}</div>
              <div className="area-t">{a.t}</div>
              <div className="area-d">{a.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Popular Videos (Ali Abdaal Resources style) ----------
function PopularVideos({ lang }) {
  const videos = window.POPULAR_VIDEOS[lang];
  // doodles (simple inline SVGs)
  const sparkle = (
    <svg className="pc-doodle tl" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
      <path d="M12 2 L13 10 L21 12 L13 14 L12 22 L11 14 L3 12 L11 10 Z"/>
    </svg>
  );
  const subscribe = (
    <svg className="pc-doodle br" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/>
      <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
    </svg>
  );
  return (
    <section className="section popular" id="videos">
      <div className="container">
        <div className="popular-head">
          <div className="kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>
            {lang === 'en' ? 'On the channel' : 'YouTube ചാനൽ'}
          </div>
          <h2 className="section-title" style={{ marginTop: 14, fontSize: 'clamp(40px, 6.5vw, 88px)' }}>
            {lang === 'en' ? <>Watch My Most <em>Popular Videos</em></> : <>എന്റെ <em>പ്രശസ്ത വീഡിയോകൾ</em></>}
          </h2>
          <svg className="scribble" viewBox="0 0 320 22" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round">
            <path d="M4 14 Q 50 2, 90 12 T 170 12 T 250 10 T 314 14"/>
          </svg>
        </div>
        <div className="popular-grid">
          {videos.slice(0, 6).map((v, i) => {
            const url = (window.VIDEO_URLS && window.VIDEO_URLS[i]) || window.SOCIAL.youtube;
            const id = url.split('/').pop().split('?')[0];
            const thumb = `https://img.youtube.com/vi/${id}/hqdefault.jpg`;
            return (
              <a key={i} className="popular-card" href={url} target="_blank" rel="noreferrer">
                <div className="pc-thumb">
                  <img className="pc-thumb-img" src={thumb} alt="" loading="lazy"/>
                  <div className="pc-play">
                    <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20"/></svg>
                  </div>
                  {i === 0 && <div className="pc-badge">NEW</div>}
                </div>
                <div className="pc-body">
                  <div className="pc-meta">{lang === 'en' ? 'Watch on YouTube' : 'YouTube വീഡിയോ'}</div>
                  <span className="pc-view">{lang === 'en' ? 'Watch now' : 'ഇപ്പോൾ കാണൂ'} <Arrow/></span>
                </div>
              </a>
            );
          })}
        </div>
        <div className="popular-foot">
          <a className="btn btn-pop" style={{ background: 'var(--coral)' }} href={window.SOCIAL.youtube} target="_blank" rel="noreferrer">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20"/></svg>
            {lang === 'en' ? 'Subscribe on YouTube' : 'YouTube-ൽ സബ്സ്ക്രൈബ് ചെയ്യൂ'} <Arrow/>
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- WhatsApp Community ----------
function WhatsAppCommunity({ lang }) {
  const wa = window.WA_COPY[lang];
  const chat = lang === 'en' ? window.WA_CHAT_EN : window.WA_CHAT_ML;
  return (
    <section className="section whatsapp" id="whatsapp">
      <div className="container">
        <div className="wa-card">
          <div>
            <div className="wa-kicker">{wa.badge}</div>
            <h2>{lang === 'en' ? <>Inside my private <em>WhatsApp community</em></> : wa.title}</h2>
            <p className="wa-sub">{wa.sub}</p>
            <div className="wa-perks">
              {wa.perks.map((p, i) => <div key={i}>{p}</div>)}
            </div>
            <a className="wa-cta" href={window.SOCIAL.whatsapp} target="_blank" rel="noreferrer">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.2s-.8 1-.9 1.2c-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.3c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
              {wa.cta} <Arrow/>
            </a>
            <div className="wa-members">
              <div className="avs">
                <span>R</span><span>A</span><span>S</span><span>+</span>
              </div>
              <div>{wa.membersHint} · <b>{lang === 'en' ? '4,847 members' : '4,847 അംഗങ്ങൾ'}</b></div>
            </div>
          </div>
          <div className="wa-chat">
            <div className="wa-chat-head">
              <div className="av">J</div>
              <div>
                <div className="who">Jishad Bakar</div>
                <div className="status">{lang === 'en' ? 'online' : 'ഓൺലൈൻ'}</div>
              </div>
            </div>
            <div className="wa-chat-body">
              {chat.map((m, i) => (
                <div key={i} className={`wa-bubble ${m.side === 'me' ? 'me' : ''}`}>
                  {m.text}
                  <span className="time">{m.time} {m.side === 'me' && '✓✓'}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Renewed Teaser (slim) ----------
function RenewedTeaser({ lang }) {
  return (
    <section className="section renewed-teaser" id="renewed">
      <div className="container">
        <div className="renewed-card">
          <div>
            <div className="rkicker">{lang === 'en' ? 'My platform' : 'എന്റെ പ്ലാറ്റ്ഫോം'}</div>
            <h2 className="rtitle">
              {lang === 'en'
                ? <>The skills that <em>change lives,</em> in your pocket.</>
                : <>ജീവിതം <em>മാറ്റുന്ന കഴിവുകൾ,</em> നിങ്ങളുടെ പോക്കറ്റിൽ.</>}
            </h2>
            <p className="rsub">
              {lang === 'en'
                ? "Renewed is the platform I built for the people the world forgot to mentor. Practical courses, real strategies, a real community — on iOS, Android and the web."
                : "ലോകം മെന്റർ ചെയ്യാൻ മറന്നുപോയ ആളുകൾക്കായി ഞാൻ പണിത പ്ലാറ്റ്ഫോമാണ് Renewed. പ്രായോഗിക കോഴ്സുകൾ, യഥാർത്ഥ തന്ത്രങ്ങൾ, യഥാർത്ഥ കമ്മ്യൂണിറ്റി — iOS, Android, വെബ്."}
            </p>
            <a className="btn btn-pop" style={{ background: 'var(--coral)' }} href="renewed.html">
              {lang === 'en' ? 'Discover the story' : 'കഥ കാണൂ'} <Arrow/>
            </a>
            <div className="rstats">
              <div><b>20+</b><span>{lang === 'en' ? 'Courses' : 'കോഴ്സുകൾ'}</span></div>
              <div><b>EN · ML</b><span>{lang === 'en' ? 'Languages' : 'ഭാഷകൾ'}</span></div>
              <div><b>iOS · Android</b><span>{lang === 'en' ? 'Available' : 'ലഭ്യം'}</span></div>
            </div>
          </div>
          <div className="renewed-logo-stack">
            <div className="renewed-logo-box">
              <img className="renewed-logo-img" src={(window.__resources && window.__resources.renewedLogo) || "img/renewed-logo.png"} alt="ReNEWed"/>
              <div className="by">{lang === 'en' ? 'BY JISHAD BAKAR' : 'ജിഷാദ് ബാക്കർ'}</div>
              <div className="tagline">
                {lang === 'en' ? '"Practical, finishable, in your language."' : '"പ്രായോഗികം, പൂർത്തിയാക്കാവുന്നത്, നിങ്ങളുടെ ഭാഷയിൽ."'}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Testimonials ----------
function Testimonials({ t, lang }) {
  const initials = (n) => n.split(/\s+/).slice(0,2).map(w => w[0]).join('').toUpperCase();
  return (
    <section className="section testimonials" id="testimonials">
      <div className="container">
        <div className="section-head" style={{ textAlign: 'center', margin: '0 auto clamp(36px, 5vw, 60px)' }}>
          <div className="kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>{t.testimonialsKicker}</div>
          <h2 className="section-title" style={{ marginTop: 14 }}>
            {lang === 'en' ? <>What people say <em>after the room empties.</em></> : <>മുറി കാലിയായ ശേഷം <em>ആളുകൾ പറയുന്നത്.</em></>}
          </h2>
        </div>
        <div className="t-grid">
          {window.TESTIMONIALS.map((tt, i) => (
            <div key={i} className="testimonial">
              <div className="t-mark">"</div>
              <div className="t-quote">{tt.quote}</div>
              <div className="t-en">{tt.en}</div>
              <div className="t-attr">
                <div className="t-av">{initials(tt.name)}</div>
                <div>
                  <div className="t-name">{tt.name}</div>
                  <div className="t-role">{tt.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Speaking ----------
function Speaking({ t, lang, onBook }) {
  const formats = lang === 'en'
    ? [
        { n: "01", t: "Keynote", d: "45–90 min · stages of 200–10,000" },
        { n: "02", t: "Network Energy Workshop (Mind Power Training)", d: "Half-day flagship · 250+ delivered" },
        { n: "03", t: "Sales Training", d: "Field-tested scripts · two decades of selling" },
        { n: "04", t: "Leadership Transformation", d: "For founders, managers and rising leaders" },
        { n: "05", t: "Goal Setting Workshop", d: "The written-goal system behind 70% hit rates" },
        { n: "06", t: "Corporate Off-site", d: "1–2 days · custom for your team" },
        { n: "07", t: "Distributor Network", d: "Half-day · sales + leadership focus" }
      ]
    : [
        { n: "01", t: "കീനോട്ട്", d: "45–90 മിനിറ്റ് · 200–10,000 പേർ" },
        { n: "02", t: "Network Energy വർക്ക്ഷോപ്പ് (മൈൻഡ് പവർ ട്രെയിനിംഗ്)", d: "ഹാഫ്-ഡേ ഫ്ലാഗ്ഷിപ്പ് · 250+ തവണ" },
        { n: "03", t: "സെയിൽസ് ട്രെയിനിംഗ്", d: "പരീക്ഷിച്ചറിഞ്ഞ സ്ക്രിപ്റ്റുകൾ · രണ്ടു പതിറ്റാണ്ട്" },
        { n: "04", t: "ലീഡർഷിപ്പ് ട്രാൻസ്ഫർമേഷൻ", d: "സ്ഥാപകർ, മാനേജർമാർ, വളരുന്ന നേതാക്കൾക്ക്" },
        { n: "05", t: "ഗോൾ സെറ്റിംഗ് വർക്ക്ഷോപ്പ്", d: "70% വിജയത്തിന് പിന്നിലെ ലക്ഷ്യ-രീതി" },
        { n: "06", t: "കോർപ്പറേറ്റ് ഓഫ്-സൈറ്റ്", d: "1–2 ദിവസം · കസ്റ്റം" },
        { n: "07", t: "ഡിസ്ട്രിബ്യൂട്ടർ നെറ്റ്‌വർക്ക്", d: "ഹാഫ്-ഡേ · സെയിൽസ് + ലീഡർഷിപ്പ്" }
      ];
  return (
    <section className="section speaking" id="speaking">
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.speakingKicker}</div>
          <h2 className="section-title" style={{ marginTop: 14 }}>
            {lang === 'en' ? <>Bring Jishad to <em>your stage.</em></> : <>നിങ്ങളുടെ <em>വേദിയിലേക്ക്.</em></>}
          </h2>
        </div>
        <div className="speaking-grid">
          <div className="speaking-photo">
            <img src={(window.__resources && window.__resources.jishad3) || "img/jishad-3.webp"} alt="Jishad on stage"/>
            <div className="badge">
              <small>{lang === 'en' ? '250+ deliveries' : '250+ തവണ'}</small>
              {lang === 'en' ? 'The room is the workshop.' : 'മുറി തന്നെ വർക്ക്ഷോപ്പ്.'}
            </div>
          </div>
          <div>
            <p className="section-sub" style={{ margin: 0 }}>{t.speakingBody}</p>
            <div className="formats">
              {formats.map((f, i) => (
                <button key={i} className="format" onClick={() => onBook(f.t)}>
                  <div className="format-num">{f.n}</div>
                  <div className="format-main">
                    <div className="format-t">{f.t}</div>
                    <div className="format-d">{f.d}</div>
                  </div>
                  <span className="format-book">
                    {lang === 'en' ? 'Book' : 'ബുക്ക്'} <Arrow size={12}/>
                  </span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Newsletter (EN / ML toggle) ----------
function Newsletter({ t, lang }) {
  const [nlLang, setNlLang] = useState(lang);
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);

  React.useEffect(() => { setNlLang(lang); }, [lang]);

  const copy = nlLang === 'en'
    ? {
        kicker: 'The letter',
        title: <>One email. <em>Once a week.</em> No noise.</>,
        body: "A short note from Jishad — one idea, one story, one prompt you can use on Monday morning.",
        placeholder: 'your@email.com',
        cta: 'Subscribe',
        perks: ['One short note. No spam, ever.', 'Released every Sunday morning.', 'Unsubscribe in one click.'],
        success: "You're in! 🎉",
        confirmTo: (e) => `Confirmation sent to ${e}`
      }
    : {
        kicker: 'ന്യൂസ്‌ലെറ്റർ',
        title: <>ഒരു ഇമെയിൽ. <em>ആഴ്ചയിൽ ഒന്ന്.</em> ശബ്ദമില്ല.</>,
        body: "ജിഷാദിന്റെ ഒരു ചെറുകുറിപ്പ് — ഒരു ആശയം, ഒരു കഥ, തിങ്കളാഴ്ച ഉപയോഗിക്കാവുന്ന ഒരു പ്രേരണ.",
        placeholder: 'your@email.com',
        cta: 'സബ്സ്ക്രൈബ് ചെയ്യൂ',
        perks: ['ഒരു ചെറുകുറിപ്പ്. സ്പാം ഇല്ല.', 'ഞായർ രാവിലെ പുറത്തിറങ്ങുന്നു.', 'ഒരു ക്ലിക്കിൽ അൺസബ്സ്ക്രൈബ്.'],
        success: "ചേർന്നു! 🎉",
        confirmTo: (e) => `${e} -ലേക്ക് സ്ഥിരീകരണം അയച്ചു`
      };

  return (
    <section className="section newsletter" id="newsletter">
      <div className="container">
        <div className="nl-grid">
          <div>
            <div className="kicker">{copy.kicker}</div>
            <h2 className="section-title" style={{ marginTop: 14 }}>{copy.title}</h2>
            <p className="section-sub">{copy.body}</p>
          </div>
          <div>
            <div className="nl-toggle">
              <button className={nlLang === 'en' ? 'active' : ''} onClick={() => setNlLang('en')}>English</button>
              <button className={nlLang === 'ml' ? 'active' : ''} onClick={() => setNlLang('ml')}>മലയാളം</button>
            </div>
            {sent ? (
              <div style={{ background: 'white', color: 'var(--ink)', border: '2px solid var(--ink)', borderRadius: 'var(--r-lg)', padding: 28, boxShadow: 'var(--shadow-pop)' }}>
                <div className="display" style={{ fontSize: 32, marginBottom: 10 }}>{copy.success}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-3)' }}>{copy.confirmTo(email)}</div>
              </div>
            ) : (
              <>
                <form className="nl-form" onSubmit={(e) => { e.preventDefault(); if (email.includes('@')) setSent(true); }}>
                  <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder={copy.placeholder} required/>
                  <button type="submit">{copy.cta}</button>
                </form>
                <div className="nl-perks">
                  {copy.perks.map((p, i) => (
                    <div key={i}><Check/>{p}</div>
                  ))}
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ t, lang, onBook }) {
  return (
    <footer className="footer" id="contact">
      <div className="container">
        <div className="footer-cta">
          <div>
            <div className="kicker" style={{ color: 'rgba(255,255,255,0.6)' }}>{lang === 'en' ? 'Last word' : 'അവസാന വാക്ക്'}</div>
            <h2 style={{ marginTop: 14 }}>
              {lang === 'en' ? <>Ready to <em>start?</em></> : <><em>തുടങ്ങാം?</em></>}
            </h2>
          </div>
          <div>
            <p>{t.footerCTASub}</p>
            <button className="btn btn-pop" style={{ background: 'var(--coral)' }} onClick={onBook}>
              {t.primaryCTA} <Arrow/>
            </button>
          </div>
        </div>

        <div className="footer-grid">
          <div className="footer-brand-block">
            <div className="nav-brand"><span className="dot"/>{t.name}</div>
            <p>{lang === 'en'
              ? "Trainer, coach, and entrepreneur with 20+ years across sales, marketing and business leadership. Founder of Renewed."
              : "സെയിൽസ്, മാർക്കറ്റിംഗ്, ബിസിനസ് ലീഡർഷിപ്പ് — 20+ വർഷം. Renewed-ന്റെ സ്ഥാപകൻ."}</p>
            <div className="app-row">
              <a href={window.SOCIAL.appStore} target="_blank" rel="noreferrer">
                <div>
                  <span>Download on</span>
                  <b>App Store</b>
                </div>
              </a>
              <a href={window.SOCIAL.playStore} target="_blank" rel="noreferrer">
                <div>
                  <span>Get it on</span>
                  <b>Google Play</b>
                </div>
              </a>
            </div>
          </div>
          <div className="footer-col">
            <h4>{lang === 'en' ? 'Explore' : 'പര്യവേക്ഷണം'}</h4>
            <a href="#about">{t.nav.about}</a>
            <a href="#work">{t.nav.work}</a>
            <a href="#videos">{lang === 'en' ? 'Videos' : 'വീഡിയോകൾ'}</a>
            <a href="renewed.html">Renewed</a>
            <a href="#speaking">{t.nav.speaking}</a>
            <a href="#testimonials">{t.nav.testimonials}</a>
          </div>
          <div className="footer-col">
            <h4>Renewed</h4>
            <a href="renewed.html">{lang === 'en' ? 'The story' : 'കഥ'}</a>
            <a href="renewed.html#courses">{lang === 'en' ? 'All courses' : 'എല്ലാ കോഴ്സും'}</a>
            <a href={window.SOCIAL.appStore} target="_blank" rel="noreferrer">iOS App</a>
            <a href={window.SOCIAL.playStore} target="_blank" rel="noreferrer">Android App</a>
            <a href={window.SOCIAL.whatsapp} target="_blank" rel="noreferrer">WhatsApp Community</a>
          </div>
          <div className="footer-col">
            <h4>{lang === 'en' ? 'Find me' : 'ഫോളോ ചെയ്യൂ'}</h4>
            <a href={window.SOCIAL.youtube} target="_blank" rel="noreferrer">YouTube</a>
            <a href={window.SOCIAL.instagram} target="_blank" rel="noreferrer">Instagram</a>
            <a href={window.SOCIAL.facebook} target="_blank" rel="noreferrer">Facebook</a>
            <a href={window.SOCIAL.whatsapp} target="_blank" rel="noreferrer">WhatsApp</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} {t.name}. {t.rights}</div>
          <div>{lang === 'en' ? 'Kerala · India · Gulf' : 'കേരളം · ഇന്ത്യ · ഗൾഫ്'}</div>
        </div>
      </div>
    </footer>
  );
}

// ---------- Social handles ----------
function Socials({ t, lang }) {
  const items = [
    {
      key: 'youtube', name: 'YouTube', handle: '@jishadbuckerofficial',
      href: window.SOCIAL.youtube, brand: '#FF0000',
      icon: <svg viewBox="0 0 24 24" fill="currentColor" width="26" height="26"><path d="M23 12s0-3.8-.5-5.6a2.9 2.9 0 0 0-2-2C18.7 4 12 4 12 4s-6.7 0-8.5.4a2.9 2.9 0 0 0-2 2C1 8.2 1 12 1 12s0 3.8.5 5.6a2.9 2.9 0 0 0 2 2C5.3 20 12 20 12 20s6.7 0 8.5-.4a2.9 2.9 0 0 0 2-2C23 15.8 23 12 23 12zM9.8 15.3V8.7l5.7 3.3-5.7 3.3z"/></svg>
    },
    {
      key: 'instagram', name: 'Instagram', handle: '@jishadbuckerjb',
      href: window.SOCIAL.instagram, brand: '#E1306C',
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="24" height="24"><rect x="2" y="2" width="20" height="20" rx="5.5"/><circle cx="12" cy="12" r="4.2"/><circle cx="17.5" cy="6.5" r="1.3" fill="currentColor" stroke="none"/></svg>
    },
    {
      key: 'facebook', name: 'Facebook', handle: '/jishadbuckerofficial',
      href: window.SOCIAL.facebook, brand: '#1877F2',
      icon: <svg viewBox="0 0 24 24" fill="currentColor" width="26" height="26"><path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.9 3.78-3.9 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94z"/></svg>
    },
    {
      key: 'spotify', name: 'Spotify', handle: 'Listen on Spotify',
      href: window.SOCIAL.spotify, brand: '#1DB954',
      icon: <svg viewBox="0 0 24 24" fill="currentColor" width="26" height="26"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.59 14.43a.62.62 0 0 1-.86.21c-2.35-1.44-5.3-1.76-8.79-.96a.62.62 0 1 1-.28-1.21c3.81-.87 7.08-.5 9.72 1.11.3.18.39.57.21.85zm1.22-2.72a.78.78 0 0 1-1.07.26c-2.69-1.66-6.79-2.14-9.98-1.17a.78.78 0 1 1-.45-1.49c3.64-1.1 8.16-.57 11.24 1.33.37.22.49.7.26 1.07zm.11-2.84C14.8 8.86 9.34 8.69 6.25 9.63a.93.93 0 1 1-.54-1.78c3.55-1.08 9.58-.87 13.36 1.37a.93.93 0 0 1-.95 1.6z"/></svg>
    }
  ];
  return (
    <section className="section socials" id="socials">
      <div className="container">
        <div className="section-head" style={{ textAlign: 'center', margin: '0 auto clamp(36px, 5vw, 56px)' }}>
          <div className="kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>{t.socialKicker}</div>
          <h2 className="section-title" style={{ marginTop: 14 }}>{t.socialTitle}</h2>
          <p className="section-sub" style={{ margin: '16px auto 0', maxWidth: '46ch' }}>{t.socialBody}</p>
        </div>
        <div className="socials-grid">
          {items.map((s) => (
            <a key={s.key} className="social-card" href={s.href} target="_blank" rel="noreferrer" style={{ '--brand': s.brand }}>
              <span className="social-ico" style={{ color: s.brand }}>{s.icon}</span>
              <span className="social-meta">
                <span className="social-name">{s.name}</span>
                <span className="social-handle">{s.handle}</span>
              </span>
              <Arrow size={16}/>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Marquee, About, Stats, Areas, PopularVideos, WhatsAppCommunity, RenewedTeaser, Socials, Testimonials, Speaking, Newsletter, Footer, Arrow, Check });
