// Renewed landing page — long-form sales page
const { useState: useStateR, useMemo: useMemoR } = React;

function ArrowR({ size = 14 }) {
  return (
    <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>
  );
}

// Line-icon set — matches the site's stroke style (width 2, round caps)
function Ico({ name, size = 26 }) {
  const p = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
  };
  switch (name) {
    case 'wrench': return (
      <svg {...p}><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
    );
    case 'clipboard': return (
      <svg {...p}><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14 2 2 4-4"/></svg>
    );
    case 'globe': return (
      <svg {...p}><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
    );
    case 'users': return (
      <svg {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
    );
    case 'star': return (
      <svg {...p}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
    );
    case 'award': return (
      <svg {...p}><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/><circle cx="12" cy="8" r="6"/></svg>
    );
    case 'pin': return (
      <svg {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>
    );
    case 'presentation': return (
      <svg {...p}><path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-4 5 4"/><path d="M12 16v5"/></svg>
    );
    case 'compass': return (
      <svg {...p}><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
    );
    case 'layers': return (
      <svg {...p}><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="m22 12.5-9.17 4.16a2 2 0 0 1-1.66 0L2 12.5"/><path d="m22 17.5-9.17 4.16a2 2 0 0 1-1.66 0L2 17.5"/></svg>
    );
    default: return null;
  }
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1620C4",
  "lang": "en"
}/*EDITMODE-END*/;

function RenewedApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = t.lang || 'en';
  const story = window.RENEWED_STORY[lang];

  React.useEffect(() => {
    document.body.classList.toggle('ml', lang === 'ml');
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [lang, t.accent]);

  return (
    <>
      <RNav lang={lang} setLang={(l) => setTweak('lang', l)}/>
      <RHero lang={lang} story={story}/>
      <RIntroVideo lang={lang}/>
      <RSocialProof lang={lang}/>
      <RReviews lang={lang}/>
      <RStory story={story} lang={lang}/>
      <RPillars story={story} lang={lang}/>
      <RCourses lang={lang} story={story}/>
      <RFounder lang={lang}/>
      <RFAQ lang={lang}/>
      <RFinalCTA lang={lang} story={story}/>
      <RFooter lang={lang}/>

      <TweaksPanel>
        <TweakSection label="Accent"/>
        <TweakColor label="Accent" value={t.accent}
          options={['#1620C4', '#ED1015', '#FF6B47', '#4FB48A']}
          onChange={(v) => setTweak('accent', v)}/>
      </TweaksPanel>
    </>
  );
}

function RNav({ lang, setLang }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="r-nav-back" href="index.html">
          ← {lang === 'en' ? 'Back' : 'തിരികെ'}
        </a>
        <div className="r-nav-right">
          <a className="r-logo-link" href="renewed.html" aria-label="ReNEWed">
            <img className="r-logo r-logo-nav" src={(window.__resources && window.__resources.renewedLogo) || "img/renewed-logo.png"} alt="ReNEWed"/>
          </a>
          <a className="nav-book" href={window.SOCIAL.renewed} target="_blank" rel="noreferrer">
            {lang === 'en' ? 'Open app' : 'ആപ്പ്'} <ArrowR size={12}/>
          </a>
        </div>
      </div>
    </nav>
  );
}

function RHero({ lang, story }) {
  return (
    <section className="r-hero">
      <div className="container">
        <div className="r-hero-inner">
          <img className="r-logo r-logo-hero" src={(window.__resources && window.__resources.renewedLogo) || "img/renewed-logo.png"} alt="ReNEWed"/>
          <div className="r-hero-kicker">
            {lang === 'en' ? 'A platform by Jishad Bakar' : 'ജിഷാദ് ബാക്കറുടെ പ്ലാറ്റ്ഫോം'}
          </div>
          <h1>
            {lang === 'en'
              ? <>Skills that <em>change lives.</em></>
              : <>ജീവിതം <em>മാറ്റുന്ന കഴിവുകൾ.</em></>}
          </h1>
          <p>{story.intro}</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginTop: 12 }}>
            <a className="btn btn-pop" style={{ background: 'var(--coral)' }} href={window.SOCIAL.renewed} target="_blank" rel="noreferrer">
              {lang === 'en' ? 'Start free' : 'സൗജന്യമായി തുടങ്ങൂ'} <ArrowR/>
            </a>
            <a className="btn btn-ghost" href="#story">
              {lang === 'en' ? 'Read the story' : 'കഥ വായിക്കൂ'}
            </a>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 28, marginTop: 48, flexWrap: 'wrap' }}>
            <div className="hero-meta-item" style={{ alignItems: 'center', textAlign: 'center' }}>
              <b>20+</b><span>{lang === 'en' ? 'Practical courses' : 'പ്രായോഗിക കോഴ്സുകൾ'}</span>
            </div>
            <div className="hero-meta-item" style={{ alignItems: 'center', textAlign: 'center' }}>
              <b>EN · ML</b><span>{lang === 'en' ? 'Two languages' : 'രണ്ട് ഭാഷകൾ'}</span>
            </div>
            <div className="hero-meta-item" style={{ alignItems: 'center', textAlign: 'center' }}>
              <b>iOS · Android</b><span>{lang === 'en' ? 'On every device' : 'എല്ലാ ഉപകരണത്തിലും'}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function RIntroVideo({ lang }) {
  const [playing, setPlaying] = useStateR(false);
  return (
    <section style={{ padding: '0 0 clamp(80px, 10vw, 140px)', background: 'var(--bg)' }}>
      <div className="container">
        <div className={`r-video${playing ? ' is-playing' : ''}`} onClick={() => !playing && setPlaying(true)}>
          {!playing && (
            <>
              <div className="r-video-meta">
                <span className="red-dot"/>
                {lang === 'en' ? 'A note from Jishad' : 'ജിഷാദിന്റെ കുറിപ്പ്'}
              </div>
              <div className="r-video-play">
                <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20"/></svg>
              </div>
            </>
          )}
          {playing && (
            <iframe
              className="r-video-frame"
              src="https://player.vimeo.com/video/1108622845?autoplay=1&title=0&byline=0&portrait=0"
              title="Renewed — a note from Jishad"
              frameBorder="0"
              allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
              allowFullScreen
            />
          )}
        </div>
      </div>
    </section>
  );
}

function RSocialProof({ lang }) {
  const stats = lang === 'en'
    ? [
        { n: '12,400+', l: 'Active learners', ic: 'users' },
        { n: '4.8', l: 'Average rating', ic: 'star' },
        { n: '93%', l: 'Course completion', ic: 'award' },
        { n: '50+', l: 'Cities reached', ic: 'pin' }
      ]
    : [
        { n: '12,400+', l: 'ലേണിംഗ് ചെയ്യുന്നവർ', ic: 'users' },
        { n: '4.8', l: 'ശരാശരി റേറ്റിംഗ്', ic: 'star' },
        { n: '93%', l: 'കോഴ്സ് പൂർത്തിയാക്കൽ', ic: 'award' },
        { n: '50+', l: 'നഗരങ്ങൾ', ic: 'pin' }
      ];
  return (
    <section style={{ background: 'var(--paper)', padding: 'clamp(50px,6vw,80px) 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }} className="rsp-grid">
          {stats.map((s, i) => (
            <div key={i} style={{ textAlign: 'center', padding: '16px 8px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div style={{
                width: 52, height: 52, marginBottom: 16,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: 'white', border: '2px solid var(--ink)', borderRadius: 16,
                color: 'var(--accent)', boxShadow: '3px 3px 0 var(--ink)'
              }}>
                <Ico name={s.ic} size={24}/>
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(36px,4vw,52px)', fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1, marginBottom: 6, color: 'var(--ink)' }}>
                {s.n}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', fontWeight: 500 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 700px) { .rsp-grid { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
    </section>
  );
}

function RReviews({ lang }) {
  const initials = (n) => n.split(/\s+/).slice(0,2).map(w => w[0]).join('').toUpperCase();
  const reviews = window.TESTIMONIALS.slice(0, 4);
  return (
    <section className="r-reviews">
      <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' }}>
            {lang === 'en' ? 'Voices from inside' : 'അംഗങ്ങൾ പറയുന്നത്'}
          </div>
          <h2 className="section-title" style={{ marginTop: 14 }}>
            {lang === 'en' ? <>What they say <em>once they start.</em></> : <>തുടങ്ങിയ ശേഷം <em>അവർ പറയുന്നത്.</em></>}
          </h2>
        </div>
        <div className="r-reviews-rail">
          {reviews.map((tt, i) => (
            <div key={i} className="r-review">
              <div className="stars">★★★★★</div>
              <div className="r-review-quote">{tt.quote}</div>
              <div className="r-review-en">{tt.en}</div>
              <div className="r-review-foot">
                <div className="r-av">{initials(tt.name)}</div>
                <div>
                  <div className="r-name">{tt.name}</div>
                  <div className="r-role">{tt.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RStory({ story, lang }) {
  return (
    <section className="r-story" id="story">
      <div className="container">
        <div className="r-story-wrap">
          <div className="r-story-head">
            <div className="kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>
              {lang === 'en' ? 'The story' : 'കഥ'}
            </div>
            <h2 className="section-title" style={{ marginTop: 14 }}>
              {lang === 'en' ? <>Why <em>Renewed</em> exists.</> : <><em>Renewed</em> എന്തിന്?</>}
            </h2>
          </div>
          {story.chapters.map((c, i) => (
            <div key={i} className="r-chapter">
              <div className="r-chapter-head">
                <div className="r-chapter-emblem">
                  <Ico name={['presentation', 'compass', 'layers'][i] || 'layers'} size={24}/>
                </div>
                <div className="r-chapter-num">{c.num}</div>
              </div>
              <h3>{c.title}</h3>
              {c.body.map((p, j) => <p key={j}>{p}</p>)}
              {c.pull && <blockquote className="pull">"{c.pull}"</blockquote>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RPillars({ story, lang }) {
  return (
    <section className="r-pillars">
      <div className="container">
        <div className="section-head" style={{ textAlign: 'center', margin: '0 auto' }}>
          <div className="kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>
            {lang === 'en' ? 'How it works' : 'പ്രവർത്തനരീതി'}
          </div>
          <h2 className="section-title" style={{ marginTop: 14 }}>
            {lang === 'en' ? <>Three rules I won't break.</> : <>മൂന്ന് നിയമങ്ങൾ ഞാൻ ലംഘിക്കില്ല.</>}
          </h2>
        </div>
        <div className="r-pillars-grid">
          {story.pillars.map((p, i) => (
            <div key={i} className="r-pillar">
              <div className="ico">
                <Ico name={['wrench', 'clipboard', 'globe'][i] || 'wrench'} size={26}/>
              </div>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RCourses({ lang, story }) {
  const [filter, setFilter] = useStateR('All');
  const cats = useMemoR(() => {
    const s = new Set(['All']);
    window.COURSES.forEach(c => s.add(c.tag));
    return Array.from(s);
  }, []);
  const list = useMemoR(() => {
    if (filter === 'All') return window.COURSES;
    return window.COURSES.filter(c => c.tag === filter);
  }, [filter]);

  return (
    <section className="r-courses" id="courses">
      <div className="container">
        <div className="r-courses-head">
          <div>
            <div className="kicker">{lang === 'en' ? 'The catalog' : 'കാറ്റലോഗ്'}</div>
            <h2 className="section-title" style={{ marginTop: 14, maxWidth: 18 + 'ch' }}>
              {story.coursesTitle.includes('<em>') ? story.coursesTitle : <>{story.coursesTitle}</>}
            </h2>
            <p className="section-sub">{story.coursesSub}</p>
          </div>
        </div>
        <div className="r-courses-tabs" style={{ marginBottom: 24 }}>
          {cats.map(c => (
            <button key={c} className={filter === c ? 'active' : ''} onClick={() => setFilter(c)}>
              {c} {filter === c && <span style={{ marginLeft: 6, opacity: 0.7 }}>({list.length})</span>}
            </button>
          ))}
        </div>
        <div className="courses-grid">
          {list.map((c, i) => (
            <a key={c.id} className={`course-card ${c.color} ${i === 0 || (filter === 'All' && c.featured) ? 'featured' : ''}`} href={window.SOCIAL.renewed} target="_blank" rel="noreferrer">
              <div className="c-tag">{c.tag}</div>
              <div className="c-title">{c.t}</div>
              {c.sub && <div className="c-sub">{c.sub}</div>}
              <div className="c-foot">
                <div>
                  <div className="c-price">
                    {c.free ? <span className="c-free">Free</span> : `₹${c.price.toLocaleString('en-IN')}`}
                  </div>
                  {!c.free && <div className="c-mrp">₹{c.mrp.toLocaleString('en-IN')}</div>}
                </div>
                <div className="c-btn">{lang === 'en' ? 'Enroll →' : 'ചേരൂ →'}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function RFounder({ lang }) {
  return (
    <section style={{ background: 'var(--paper)', padding: 'clamp(72px,9vw,130px) 0' }}>
      <div className="container">
        <div className="about-grid">
          <div className="about-photo" style={{ background: 'var(--coral)' }}>
            <img src={(window.__resources && window.__resources.jishad1) || "img/jishad-1.webp"} alt="Jishad Bakar"/>
            <div className="badge">
              <small>{lang === 'en' ? 'Founder' : 'സ്ഥാപകൻ'}</small>
              {lang === 'en' ? 'Jishad Bakar' : 'ജിഷാദ് ബാക്കർ'}
            </div>
          </div>
          <div>
            <div className="kicker">{lang === 'en' ? 'Meet the founder' : 'സ്ഥാപകനെ കാണൂ'}</div>
            <h2 className="section-title" style={{ marginTop: 14, marginBottom: 24 }}>
              {lang === 'en'
                ? <>20 years of doing the thing — <em>not just teaching it.</em></>
                : <>20 വർഷം പ്രവൃത്തിയിലൂടെ — <em>പഠിപ്പിച്ചതുകൊണ്ടല്ല.</em></>}
            </h2>
            <div className="about-body">
              <p>
                {lang === 'en'
                  ? "Jishad started at 20 in a car showroom. From there: insurance, healthcare, FMCG, direct selling. Thirteen years running his own company at the highest tier. Tens of thousands of people in the room. Over a million lives reached."
                  : "ജിഷാദ് 20 വയസ്സിൽ ഒരു കാർ ഷോറൂമിൽ തുടങ്ങി. അവിടെ നിന്ന്: ഇൻഷുറൻസ്, ഹെൽത്ത്കെയർ, FMCG, ഡയറക്ട് സെല്ലിംഗ്. പതിമൂന്ന് വർഷം ഉയർന്ന തലത്തിൽ സ്വന്തം കമ്പനി. ലക്ഷക്കണക്കിന് പേർ മുറിയിൽ. പത്ത് ലക്ഷത്തിലധികം ജീവിതങ്ങൾ."}
              </p>
              <p>
                {lang === 'en'
                  ? "Renewed is everything he wishes he had been given — when he was the 20-year-old in the showroom, when he was at his lowest, when he was looking for someone to hand him the playbook."
                  : "20-കാരനായി ഷോറൂമിൽ നിന്നപ്പോൾ, ഏറ്റവും താഴ്ന്ന അവസ്ഥയിലായപ്പോൾ, ഒരാളെ തേടിയപ്പോൾ — അന്ന് ജിഷാദ് ആഗ്രഹിച്ച എല്ലാം. അതാണ് Renewed."}
              </p>
            </div>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 24 }}>
              <a className="btn btn-ghost" href="index.html#about">
                {lang === 'en' ? 'Read his full story' : 'പൂർണ്ണ കഥ വായിക്കൂ'} <ArrowR/>
              </a>
              <a className="btn" style={{ background: 'transparent', color: 'var(--ink)' }} href={window.SOCIAL.youtube} target="_blank" rel="noreferrer">
                {lang === 'en' ? 'Watch on YouTube' : 'YouTube-ൽ കാണൂ'} →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function RFAQ({ lang }) {
  const faqs = lang === 'en'
    ? [
        { q: "Who is Renewed for?", a: "Working professionals, small-business owners, direct-selling distributors, housewives building something, and anyone who has bought books about success but is still looking for someone to actually walk them through." },
        { q: "Is everything in Malayalam?", a: "No — about half the catalog is in Malayalam, half in English. The flagship pieces (Wealth Attraction, Be a Sales Superstar, Diamond in You) are available in both." },
        { q: "Do I need to be online to learn?", a: "Once you enrol, courses can be downloaded inside the iOS or Android app and watched offline." },
        { q: "Is there a refund policy?", a: "Yes. 7-day no-questions-asked refund on every paid course. The free courses are, well, free." },
        { q: "Can I get a 1:1 session with Jishad?", a: "Yes — send an enquiry from the main site. Renewed members get priority access and a member discount." }
      ]
    : [
        { q: "Renewed ആർക്കു വേണ്ടി?", a: "ജോലിക്കാർ, ചെറുകിട ബിസിനസ് ഉടമകൾ, ഡയറക്ട് സെല്ലിംഗ് ഡിസ്ട്രിബ്യൂട്ടർമാർ, എന്തെങ്കിലും തുടങ്ങാൻ ശ്രമിക്കുന്ന വീട്ടമ്മമാർ, വിജയത്തെക്കുറിച്ച് പുസ്തകങ്ങൾ വാങ്ങി ഇപ്പോഴും ആരെങ്കിലും കൂടെ നടക്കാൻ കാത്തിരിക്കുന്ന ആരും." },
        { q: "എല്ലാം മലയാളത്തിലാണോ?", a: "അല്ല — ഏകദേശം പകുതി മലയാളത്തിലും പകുതി ഇംഗ്ലീഷിലുമാണ്. ഫ്ലാഗ്ഷിപ്പ് കോഴ്സുകൾ രണ്ട് ഭാഷകളിലും ലഭ്യമാണ്." },
        { q: "പഠിക്കാൻ ഓൺലൈൻ ആകേണ്ടതുണ്ടോ?", a: "ഒരിക്കൽ എൻറോൾ ചെയ്താൽ, iOS അല്ലെങ്കിൽ Android ആപ്പിൽ കോഴ്സുകൾ ഡൗൺലോഡ് ചെയ്ത് ഓഫ്‌ലൈനായി കാണാം." },
        { q: "റീഫണ്ട് നയം ഉണ്ടോ?", a: "അതെ. എല്ലാ പെയ്ഡ് കോഴ്സിനും 7 ദിവസത്തെ റീഫണ്ട്. സൗജന്യ കോഴ്സുകൾ സൗജന്യമാണ്." },
        { q: "ജിഷാദുമായി 1:1 സെഷൻ ലഭിക്കുമോ?", a: "അതെ — പ്രധാന സൈറ്റിൽ നിന്ന് അന്വേഷിക്കാം. Renewed അംഗങ്ങൾക്ക് മുൻ‌ഗണനയും ഡിസ്കൗണ്ടും." }
      ];
  const [open, setOpen] = useStateR(0);
  return (
    <section style={{ padding: 'clamp(72px,9vw,130px) 0', background: 'var(--bg)' }}>
      <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' }}>FAQ</div>
          <h2 className="section-title" style={{ marginTop: 14 }}>
            {lang === 'en' ? <>Honest <em>answers.</em></> : <>തുറന്ന <em>ഉത്തരങ്ങൾ.</em></>}
          </h2>
        </div>
        <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map((f, i) => (
            <div key={i} style={{
              background: open === i ? 'var(--paper)' : 'white',
              border: '2px solid var(--ink)',
              borderRadius: 'var(--r-md)',
              overflow: 'hidden',
              transition: 'all .2s'
            }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', padding: '22px 24px',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                fontFamily: 'var(--serif)', fontSize: 'clamp(18px,2vw,22px)', fontWeight: 600,
                textAlign: 'left', cursor: 'pointer', color: 'var(--ink)', letterSpacing: '-0.015em', lineHeight: 1.2
              }}>
                {f.q}
                <span style={{ flexShrink: 0, fontSize: 22, transition: 'transform .2s', transform: open === i ? 'rotate(45deg)' : 'none' }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 24px 22px', fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)' }}>
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RFinalCTA({ lang, story }) {
  return (
    <section className="r-final-cta">
      <div className="container">
        <div className="wrap">
          <h2>
            {lang === 'en' ? <>{story.finalTitle.replace(/\.$/, '')} <em>The choice is yours.</em></> : story.finalTitle}
          </h2>
          <p>{story.finalSub}</p>
          <div className="ctas">
            <a className="btn btn-pop" style={{ background: 'var(--coral)' }} href={window.SOCIAL.renewed} target="_blank" rel="noreferrer">
              {lang === 'en' ? 'Browse Renewed' : 'Renewed കാണൂ'} <ArrowR/>
            </a>
            <a className="btn" style={{ background: 'transparent', color: 'white', border: '1.5px solid rgba(255,255,255,0.3)' }} href={window.SOCIAL.appStore} target="_blank" rel="noreferrer">
              {lang === 'en' ? 'Get the app' : 'ആപ്പ് നേടൂ'} →
            </a>
          </div>
          <div style={{ marginTop: 56, display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
            <a href={window.SOCIAL.appStore} target="_blank" rel="noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 20px',
              border: '1.5px solid rgba(255,255,255,0.22)',
              borderRadius: 14,
              fontSize: 13, color: 'white', transition: 'all .2s'
            }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
              <div style={{ textAlign: 'left' }}>
                <div style={{ fontSize: 10, opacity: 0.7, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Download on</div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>App Store</div>
              </div>
            </a>
            <a href={window.SOCIAL.playStore} target="_blank" rel="noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 20px',
              border: '1.5px solid rgba(255,255,255,0.22)',
              borderRadius: 14,
              fontSize: 13, color: 'white', transition: 'all .2s'
            }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 2.43L13.55 12 3.6 21.57c-.32-.18-.6-.55-.6-1.07V3.5c0-.52.28-.9.6-1.07zm10.97 10.16l2.95 2.84-11.4 6.36 8.45-9.2zm5.16-3.36c.74.42.74 1.52 0 1.94l-2.96 1.65L13.83 12l2.94-2.81 2.96 1.04zM5.12 2.43l11.4 6.36-2.95 2.84L5.12 2.43z"/></svg>
              <div style={{ textAlign: 'left' }}>
                <div style={{ fontSize: 10, opacity: 0.7, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Get it on</div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>Google Play</div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function RFooter({ lang }) {
  return (
    <footer style={{ background: 'var(--ink)', color: 'white', padding: '40px 0', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
      <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 18 }}>
        <a className="nav-brand" href="index.html" style={{ color: 'white' }}>
          <span className="dot"/>Jishad Bakar
        </a>
        <div style={{ display: 'flex', gap: 22, fontSize: 14, flexWrap: 'wrap' }}>
          <a href="index.html" style={{ color: 'rgba(255,255,255,0.7)' }}>{lang === 'en' ? 'Home' : 'ഹോം'}</a>
          <a href={window.SOCIAL.renewed} target="_blank" rel="noreferrer" style={{ color: 'rgba(255,255,255,0.7)' }}>renewedup.com</a>
          <a href={window.SOCIAL.whatsapp} target="_blank" rel="noreferrer" style={{ color: 'rgba(255,255,255,0.7)' }}>WhatsApp</a>
          <a href={window.SOCIAL.youtube} target="_blank" rel="noreferrer" style={{ color: 'rgba(255,255,255,0.7)' }}>YouTube</a>
        </div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>
          © {new Date().getFullYear()} Renewed by Jishad Bakar
        </div>
      </div>
    </footer>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<RenewedApp/>);