/* global React, ReactDOM, lucide */
const { useState, useEffect, useRef, useCallback } = React;
const DS = window.RUDRASSCDesignSystem_26b557 || {};
const { Dialog, Button } = DS;

/* ---- Lucide icon as a self-managed node ---------------------- */
function Icon({ name, size = 20, strokeWidth = 2, className }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !window.lucide) return;
    el.innerHTML = "";
    const i = document.createElement("i");
    i.setAttribute("data-lucide", name);
    el.appendChild(i);
    window.lucide.createIcons({ attrs: { width: size, height: size, "stroke-width": strokeWidth } });
  }, [name, size, strokeWidth]);
  return <span ref={ref} className={"ico" + (className ? " " + className : "")} style={{ display: "inline-flex", lineHeight: 0 }} />;
}

/* ---- Brand trident mark -------------------------------------- */
function Trident({ className = "brand-mark" }) {
  return (
    <svg className={className} viewBox="0 0 40 40" fill="none" aria-hidden="true">
      <path d="M20 4.5v31" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
      <path d="M20 9.5c-2.4 0-4.3-2-4.3-4.6 0 0-3.3 2.2-3.3 6.1 0 3.1 2.2 5.4 5.1 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <path d="M20 9.5c2.4 0 4.3-2 4.3-4.6 0 0 3.3 2.2 3.3 6.1 0 3.1-2.2 5.4-5.1 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <circle cx="20" cy="4.2" r="1.7" fill="currentColor" />
      <path d="M13.2 33.5h13.6l-1.8 3.4H15z" fill="currentColor" />
    </svg>
  );
}

function BrandLogo() {
  return <img className="brand-logo-img" src="./src/assets/rudra-logo.png" alt="RUDRA SSC" />;
}

/* ============================================================
   DATA
   ============================================================ */
const HERO_POINTS = [
  { ic: "target", label: "Daily Targets" },
  { ic: "user-round-check", label: "Mentor Guidance" },
  { ic: "calendar-clock", label: "Revision Tracking" },
  { ic: "line-chart", label: "Performance Analysis" },
];

const FEATURE_STRIP = [
  { ic: "target", label: "Daily Study Targets" },
  { ic: "users", label: "Mentor-Guided Practice" },
  { ic: "refresh-cw", label: "Revision Before Forgetting" },
  { ic: "line-chart", label: "Performance Tracking" },
  { ic: "user-round-check", label: "Personal Mentor Guidance" },
  { ic: "flame", label: "Habit & Discipline Building" },
];

const JOURNEY = [
  { ic: "book-open", label: "Learn", sub: "Clear daily direction" },
  { ic: "file-pen-line", label: "Practice", sub: "Guided worksheets" },
  { ic: "refresh-cw", label: "Revise", sub: "Before you forget" },
  { ic: "line-chart", label: "Analyze", sub: "Spot weak topics" },
  { ic: "trending-up", label: "Improve", sub: "Week on week" },
  { ic: "trophy", label: "Select", sub: "The goal" },
];

const SOLUTIONS = [
  "Personal mentor guidance",
  "Daily study direction",
  "Revision structure",
  "Regular check-ins",
  "Selection-focused preparation",
];

const FEATURES = [
  { ic: "user-round", title: "Personal Mentor", sub: "A mentor who knows your level and guides your path." },
  { ic: "list-checks", title: "Daily Study Tasks", sub: "Clear daily direction — what to study and revise." },
  { ic: "refresh-cw", title: "Revision System", sub: "A fixed revision cycle so learning actually sticks." },
  { ic: "file-pen-line", title: "Practice Material", sub: "Topic-wise worksheets that sharpen your accuracy." },
  { ic: "clipboard-check", title: "Weekly Review", sub: "A weekly look at progress with your mentor." },
  { ic: "trending-up", title: "Progress Tracking", sub: "See your trends and fix weak topics before the exam." },
];

const CERT_BENEFITS = [
  { ic: "award", title: "A record of discipline", sub: "Recognises consistent effort across the program." },
  { ic: "badge-check", title: "Earned, not given", sub: "Issued only on genuine completion of the program." },
  { ic: "briefcase", title: "Proof of commitment", sub: "A credential you can carry beyond preparation." },
];

const ELITE_PRICE = "1599"; // change here if pricing updates
const FREE_TEST_URL = "https://test.rudrassc.com/test-series.html?tab=sectional&subject=reasoning";

const BATCHES = [
  {
    key: "foundation", name: "Foundation Batch", price: "499", oldPrice: null, flag: null, featured: false, mentor: false,
    tagline: "Clear system and direction for serious beginners.",
    mobileTagline: "For structure and daily study direction.",
    points: ["Daily study tasks", "Practice worksheets", "Revision system"],
    modal: {
      sub: "For students who want a clear system and direction. You study — we guide.",
      badge: "Self-driven",
      includes: ["Daily study tasks", "Structured study plan", "Practice worksheets", "Topic-wise & full-length tests", "Rudra Revision System™", "Monthly group mentorship session"],
      excludes: ["Personal mentor support", "Mentor check-in calls", "Habit & reflection tracking"],
      best: "Students who can study independently and just need proper direction.",
      philosophy: "Content teaches. Tests measure. Foundation gives you the system — the discipline to follow it stays with you.",
    },
  },
  {
    key: "advanced", name: "Advanced Batch", price: "799", oldPrice: "999", flag: "Limited Offer · Most Popular", featured: true, mentor: false,
    tagline: "Accountability, notes support, and regular mentor guidance.",
    mobileTagline: "For accountability, notes support, and mentor check-ins.",
    points: ["All Foundation benefits", "All-subject notes support", "Mentor check-in every 10–15 days"],
    modal: {
      sub: "For students who need accountability, consistency and regular guidance.",
      badge: "Limited Offer · Most chosen",
      includes: ["Everything in Foundation", "All-subject notes support", "Personalized daily targets", "Weak & strong area detection", "Personalized revision priority", "Success-habit system (sleep, reading, reflection)", "Mentor check-in call every 10–15 days"],
      excludes: ["Dedicated personal mentor", "Weekly 1-on-1 calls", "Priority support"],
      best: "Serious aspirants who keep losing to inconsistency and need guidance.",
      philosophy: "Most students fail not because they don't study, but because they cannot stay consistent long enough.",
    },
  },
  {
    key: "elite", name: "Elite Batch", price: ELITE_PRICE, oldPrice: null, flag: "Personal Mentor", featured: false, mentor: true,
    tagline: "Personal mentorship and end-to-end support.",
    mobileTagline: "For personal mentorship and end-to-end support.",
    points: ["Personal mentor provided", "Daily reflection + observation", "End-to-end support"],
    modal: {
      sub: "Personal mentorship until selection — for students who refuse to prepare alone.",
      badge: "Personal Mentor Provided",
      includes: ["Everything in Advanced", "Dedicated personal mentor", "Weekly personal mentor call (1/week)", "Personal progress dashboard", "Mentor intervention system", "Personalized roadmap + priority support"],
      excludes: [],
      best: "Students targeting selection in this cycle who want a coach beside them.",
      philosophy: "A teacher explains. A test evaluates. A mentor stays with you until you improve.",
    },
  },
];

// Apple-style grouped comparison — storytelling order: notes → practice → tracking → mentor.
const COMPARE_GROUPS = [
  {
    title: "Notes Support",
    icon: "book-open",
    rows: [
      { label: "English Notes", f: true, a: true, e: true },
      { label: "GS Notes", f: false, a: true, e: true },
      { label: "Maths Notes", f: false, a: true, e: true },
      { label: "Reasoning Notes", f: false, a: true, e: true },
    ],
  },
  {
    title: "Practice + PYQ Support",
    icon: "target",
    rows: [
      { label: "Practice / Mock Questions", f: "2,500+", a: "10,000+", e: "10,000+" },
      { label: "PYQ Support", f: "Selected PYQs", a: "200+ PYQs", e: "200+ PYQs" },
    ],
  },
  {
    title: "Tracking + Reflection",
    icon: "trending-up",
    rows: [
      { label: "Weak Area Detection", f: true, a: true, e: true },
      { label: "Habit Tracking", f: true, a: true, e: true },
      { label: "Monthly Growth Review", f: true, a: true, e: true },
      { label: "Daily Reflection", f: false, a: false, e: true },
      { label: "Daily Mentor Observation", f: false, a: true, e: true },
    ],
  },
  {
    title: "Mentor Support",
    icon: "user-round-check",
    rows: [
      { label: "Mentor Check-in", f: true, a: true, e: true },
      { label: "Mentor Calls", f: "Monthly", a: "Weekly / 10–15 days", e: "Regular Personal" },
      { label: "Proper Guidance", f: "General", a: "Guided", e: "Personalized" },
      { label: "Personal Mentor", f: false, a: false, e: true },
      { label: "End-to-End Support", f: false, a: false, e: true },
    ],
  },
];

/* Mobile-only: steps + key benefits that replace the FeatureStrip + Journey
   sections on phones, so the story collapses into one screen. */
const MSYS_STEPS = [
  { ic: "book-open",     label: "Learn" },
  { ic: "file-pen-line", label: "Practice" },
  { ic: "refresh-cw",    label: "Revise" },
  { ic: "line-chart",    label: "Analyze" },
  { ic: "trending-up",   label: "Improve" },
];
const MSYS_BENEFITS = [
  { ic: "calendar-check", label: "Daily study plan" },
  { ic: "target", label: "Weak-area tracking" },
  { ic: "user-round-check", label: "Mentor follow-up" },
];

/* Mobile-only comparison keeps the decision to five short accordion groups. */
const MOBILE_COMPARE_GROUPS = [
  {
    title: "Study Plan",
    icon: "book-open",
    rows: [
      { label: "Daily plan", f: "Standard", a: "Priority", e: "Personalized" },
      { label: "Revision plan", f: true, a: true, e: true },
    ],
  },
  {
    title: "Notes Support",
    icon: "notebook-tabs",
    rows: [
      { label: "English notes", f: true, a: true, e: true },
      { label: "All-subject notes", f: false, a: true, e: true },
    ],
  },
  {
    title: "Practice + PYQ",
    icon: "target",
    rows: [
      { label: "Practice sets", f: true, a: true, e: true },
      { label: "PYQ support", f: "Selected", a: "Expanded", e: "Expanded" },
    ],
  },
  {
    title: "Mentor Support",
    icon: "user-round-check",
    rows: [
      { label: "Check-in", f: "Monthly group", a: "10–15 days", e: "Weekly" },
      { label: "Personal mentor", f: false, a: false, e: true },
    ],
  },
];

// "Who should buy it" — one positioning paragraph per batch.
const WHO_BUY = [
  {
    key: "foundation", name: "Foundation", price: "499", tier: "Starter",
    text: "For students who need structure, English notes, daily tasks, a revision system, and basic practice support.",
  },
  {
    key: "advanced", name: "Advanced", price: "799", featured: true, tier: "Limited Offer",
    text: "For students who need accountability, all-subject notes, 10,000+ practice questions, PYQs, weak-area tracking, and regular mentor check-ins.",
  },
  {
    key: "elite", name: "Elite", price: ELITE_PRICE, elite: true, tier: "Premium",
    text: "For serious aspirants who want personal mentorship, daily reflection, proper personalized guidance, mentor observation, and end-to-end support.",
  },
];

/* ============================================================
   SECTIONS
   ============================================================ */
function Nav({ onJoin }) {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  return (
    <React.Fragment>
      <nav className="nav">
        <div className="wrap nav-inner">
          <a className="brand" href="#top" onClick={close}>
            <BrandLogo />
          </a>
          <div className="nav-links">
            <a className="nav-link" href="#top">Home</a>
            <a className="nav-link" href="#why">Why Rudra</a>
            <a className="nav-link" href="#what">What you get</a>
            <a className="nav-link" href="#batches">Batches</a>
            <a className="nav-link" href="#certificate">Certificate</a>
            <a className="nav-link" href={FREE_TEST_URL}>Test</a>
          </div>
          <div className="nav-cta">
            <a className="btn btn-md btn-navy-outline btn-explore" href="./student/">Login / Sign Up</a>
            <button className="btn btn-md btn-cta" onClick={onJoin}>Join Program</button>
            <button className="nav-burger" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
              <Icon name={open ? "x" : "menu"} size={22} />
            </button>
          </div>
        </div>
      </nav>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        <a href="#top" onClick={close}>Home</a>
        <a href="#why" onClick={close}>Why Rudra</a>
        <a href="#what" onClick={close}>What you get</a>
        <a href="#batches" onClick={close}>Batches</a>
        <a href="#certificate" onClick={close}>Certificate</a>
        <a href={FREE_TEST_URL} onClick={close}>Test</a>
        <a href="./student/" onClick={close}>Login / Sign Up</a>
        <button className="btn btn-lg btn-cta btn-block" onClick={() => { close(); onJoin(); }}>Join Mentorship Now</button>
      </div>
    </React.Fragment>
  );
}

function FloatCard({ pos, ic, title, children }) {
  return (
    <div className={"float-card " + pos}>
      <span className="fc-ic"><Icon name={ic} size={16} /></span>
      <div className="fc-body">
        <div className="fc-title">{title}</div>
        {children}
      </div>
    </div>
  );
}

function Hero({ onJoin }) {
  return (
    <header className="hero section" id="top">
      <div className="hero-bg"><div className="hero-glow g1" /><div className="hero-glow g2" /></div>
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <div className="hero-identity">
            <span className="hi-name">Rudra<span className="ssc">SSC</span></span>
            <span className="hi-bar" />
            <span className="hi-meta">Mentorship Program 2027<br /><span className="hi-gold">A System for Selection</span></span>
          </div>
          <h1 className="hero-headline">
            <span className="desktop-copy">Most students have content.<br /><span className="blue-text">Very few have a system.</span></span>
            <span className="mobile-copy">Most Students Have Content.<br /><span className="blue-text">Very Few Have A System.</span></span>
          </h1>
          <p className="hero-line2">
            <span className="desktop-copy">Personal mentorship, daily targets, revision tracking and performance guidance — <strong>until selection</strong>.</span>
            <span className="mobile-copy">Daily targets, mentor guidance, revision tracking — <strong>until selection.</strong></span>
          </p>
          <div className="hero-points">
            {HERO_POINTS.map((p) => (
              <span className="hp" key={p.label}><span className="hp-ic"><Icon name={p.ic} size={16} /></span>{p.label}</span>
            ))}
          </div>
          <div className="hero-actions">
            <button className="btn btn-lg btn-cta" onClick={onJoin}>Join Mentorship Now <Icon name="arrow-right" size={18} /></button>
            <a className="btn btn-lg btn-navy-outline" href={FREE_TEST_URL}>Take Free Test</a>
          </div>
          <p className="hero-audience">Built for SSC CGL, CHSL, MTS &amp; GD aspirants who need guidance, consistency and accountability.</p>
        </div>

        <div className="hero-visual">
          <div className="mentor-frame">
            <picture>
              <source srcSet="./src/assets/hero-preparation-selection-mobile.webp" media="(max-width: 768px)" type="image/webp" />
              <source srcSet="./src/assets/hero-preparation-selection.webp" type="image/webp" />
              <img
                className="mentor-photo"
                src="./src/assets/hero-preparation-selection.png"
                alt="RUDRA SSC mentorship system from preparation to selection"
                width="1536"
                height="1024"
                loading="eager"
                decoding="async"
                fetchPriority="high"
              />
            </picture>
            <div className="mf-watermark"><img src="./src/assets/rudra-emblem.png" alt="" /></div>
            <span className="mf-tag"><span className="dot" /> Mentorship in session</span>
            <div className="mf-grad" />
            <div className="mf-caption"><span className="mf-cap-ic"><Icon name="graduation-cap" size={17} /></span> Guided one-on-one — until selection</div>
          </div>

          <div className="float-card mf-c1">
            <span className="fc-ic"><Icon name="message-circle" size={16} /></span>
            <div className="fc-body"><div className="fc-title">Mentor Support</div><div className="fc-online"><span className="od" /> Online now</div></div>
          </div>
          <div className="float-card mf-c2">
            <span className="fc-ic"><Icon name="calendar-check" size={16} /></span>
            <div className="fc-body"><div className="fc-title">Revision Calendar</div><div className="fc-days">{[1,1,1,0,1,1,0].map((d,i)=><span key={i} className={d?"on":""} />)}</div></div>
          </div>
          <div className="float-card mf-c3">
            <span className="fc-ic"><Icon name="bar-chart-3" size={16} /></span>
            <div className="fc-body"><div className="fc-title">Performance Analysis</div><div className="fc-bars">{[42,68,54,80].map((h,i)=><span key={i} style={{height:h+"%"}} />)}</div></div>
          </div>
        </div>
      </div>
    </header>
  );
}

function FeatureStrip() {
  return (
    <section className="feature-strip">
      <div className="wrap fs-row">
        {FEATURE_STRIP.map((f) => (
          <div className="fs-item" key={f.label}>
            <span className="fs-ic"><Icon name={f.ic} size={19} /></span>
            <span className="fs-label">{f.label}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function JourneySection() {
  return (
    <section className="section section-pad band-white" id="journey">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow center">The Rudra Journey</span>
          <h2 className="section-title">One path, followed every week</h2>
        </div>
        <div className="journey">
          {JOURNEY.map((s, i) => (
            <React.Fragment key={s.label}>
              <div className={"j-node" + (i === JOURNEY.length - 1 ? " j-goal" : "")}>
                <span className="j-ic"><Icon name={s.ic} size={22} /></span>
                <div className="j-label">{s.label}</div>
                <div className="j-sub">{s.sub}</div>
              </div>
              {i < JOURNEY.length - 1 && <span className="j-arrow"><Icon name="arrow-right" size={18} /></span>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhySection() {
  return (
    <section className="section section-pad band-cream" id="why">
      <div className="wrap why-grid">
        <div className="why-statement-col reveal">
          <span className="eyebrow">Why Rudra</span>
          <p className="why-statement">Most students do not fail because they cannot study. <span className="blue-text">They fail because they cannot stay consistent.</span></p>
          <p className="lead" style={{ marginTop: 20 }}>Rudra replaces willpower with a system — a mentor-led routine that keeps you guided, accountable and improving every single week.</p>
        </div>
        <div className="compare good reveal">
          <span className="compare-eyebrow">With Rudra SSC</span>
          <h3>A mentor-led system</h3>
          <div className="compare-list">
            {SOLUTIONS.map((s) => (
              <div className="compare-li" key={s}><span className="ci"><Icon name="check" size={14} /></span>{s}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatSection() {
  return (
    <section className="section section-pad band-white" id="what">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">What you get</span>
          <h2 className="section-title">Everything a serious aspirant needs — <span className="blue-text">held together by a mentor.</span></h2>
        </div>
        <div className="feat-grid">
          {FEATURES.map((f, i) => (
            <div className="feat-card reveal" key={f.title}>
              <span className="feat-num">{String(i + 1).padStart(2, "0")}</span>
              <div className="feat-ic"><Icon name={f.ic} size={23} /></div>
              <h3>{f.title}</h3>
              <p>{f.sub}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CertificateSection() {
  return (
    <section className="section section-pad band-cream" id="certificate">
      <div className="wrap">
        <div className="cert-grid">
          <div className="cert-preview reveal">
            <div className="certificate">
              <img className="cert-emblem" src="./src/assets/rudra-emblem.png" alt="Rudra SSC" />
              <div className="cert-kicker">Certificate of Completion</div>
              <div className="cert-title">Rudra SSC Mentorship Program</div>
              <div className="cert-body">Awarded for completing the structured mentorship program with discipline and consistency.</div>
              <div className="cert-name">Student Name</div>
              <div className="cert-foot">
                <div className="cert-sign">
                  <div className="sig">Rudra SSC</div>
                  <div className="sig-l">Program Mentor</div>
                </div>
                <div className="cert-seal"><Icon name="award" size={26} /></div>
              </div>
            </div>
            <div className="cert-float">
              <span className="cf-ic"><Icon name="shield-check" size={18} /></span>
              <span><div className="cf-t">Verified completion</div><div className="cf-s">Issued on genuine completion</div></span>
            </div>
          </div>
          <div className="reveal">
            <span className="eyebrow">Certificate</span>
            <h2 className="section-title" style={{ marginTop: 16 }}>Your discipline <span className="gold-text">deserves recognition.</span></h2>
            <p className="lead" style={{ marginTop: 18 }}>Students who complete the mentorship program with consistency may receive a RUDRA SSC Completion Certificate.</p>
            <div className="cert-benefits">
              {CERT_BENEFITS.map((b) => (
                <div className="cert-benefit" key={b.title}>
                  <span className="cb-ic"><Icon name={b.ic} size={17} /></span>
                  <span><h4>{b.title}</h4><p>{b.sub}</p></span>
                </div>
              ))}
            </div>
            <p className="cert-note">Certification reflects program completion — not an exam result or government affiliation.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function CompareCell({ v }) {
  if (v === true) return <span className="cmp2-yes"><Icon name="check" size={16} /></span>;
  if (v === false) return <span className="cmp2-no"><Icon name="minus" size={15} /></span>;
  const isNum = /^[\d.,+]+$/.test(v);
  return <span className={"cmp2-txt" + (isNum ? " cmp2-num" : "")}>{v}</span>;
}

/* Mobile system section — replaces the desktop FeatureStrip + Journey on phones.
   One block: heading → vertical steps → 4 key benefits. */
function MobileSystem() {
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);
  return (
    <section className="section msys" id="system">
      <div className="wrap">
        <div className="msys-head">
          <h2 className="msys-title">Your Selection System</h2>
        </div>
        <ol className="msys-steps">
          {MSYS_STEPS.map((s, i) => (
            <li className={"msys-step" + (i === MSYS_STEPS.length - 1 ? " is-goal" : "")} key={s.label}>
              <span className="msys-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="msys-ic"><Icon name={s.ic} size={17} /></span>
              <div className="msys-body">
                <div className="msys-l">{s.label}</div>
              </div>
            </li>
          ))}
        </ol>
        <div className="msys-bens">
          {MSYS_BENEFITS.map((b) => (
            <div className="msys-ben" key={b.label}>
              <span className="msys-ben-ic"><Icon name={b.ic} size={15} /></span>
              <span>{b.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Mobile-only comparison: plan tabs + grouped accordion (first open by default).
   Replaces the wide desktop table AND the desktop "Who should buy it" cards. */
function CompareMobile() {
  const PLANS = [
    { key: "f", name: "Foundation", price: "₹499",              tone: "plain" },
    { key: "a", name: "Advanced",   price: "₹799",              tone: "pop"   },
    { key: "e", name: "Elite",      price: "₹" + ELITE_PRICE,   tone: "elite" },
  ];
  const GROUPS = MOBILE_COMPARE_GROUPS;
  const whoIdx = GROUPS.length;
  const [plan, setPlan] = useState("a");
  const [openIdx, setOpenIdx] = useState(0); // first group open by default
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [plan, openIdx]);
  const pick = (r) => (plan === "f" ? r.f : plan === "a" ? r.a : r.e);
  const toggle = (i) => setOpenIdx((o) => (o === i ? -1 : i));
  return (
    <div className="mac reveal">
      <div className="mac-tabs" role="tablist">
        {PLANS.map((p) => (
          <button
            key={p.key}
            type="button"
            className={"mac-tab tone-" + p.tone + (plan === p.key ? " active" : "")}
            onClick={() => setPlan(p.key)}
          >
            <span className="mac-tn">{p.name}</span>
            <span className="mac-tp">{p.price}/mo</span>
          </button>
        ))}
      </div>
      <div className="mac-list">
        {GROUPS.map((g, gi) => {
          const isOpen = openIdx === gi;
          return (
            <div className={"mac-grp" + (isOpen ? " open" : "")} key={g.title}>
              <button type="button" className="mac-head" onClick={() => toggle(gi)} aria-expanded={isOpen}>
                <span className="mac-hic"><Icon name={g.icon} size={15} /></span>
                <span className="mac-t">{g.title}</span>
                <span className="mac-chev"><Icon name={isOpen ? "minus" : "plus"} size={16} /></span>
              </button>
              {isOpen && (
                <div className="mac-rows">
                  {g.rows.map((r) => {
                    const v = pick(r);
                    return (
                      <div className={"mac-row" + (v === false ? " off" : "")} key={r.label}>
                        <span className="mac-rl">{r.label}</span>
                        <span className="mac-rv">
                          {v === true ? (
                            <span className="mac-yes"><Icon name="check" size={14} /></span>
                          ) : v === false ? (
                            <span className="mac-no"><Icon name="minus" size={13} /></span>
                          ) : (
                            <span className={"mac-txt" + (/^[\d.,+]+$/.test(v) ? " mono" : "")}>{v}</span>
                          )}
                        </span>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
        <div className={"mac-grp" + (openIdx === whoIdx ? " open" : "")}>
          <button type="button" className="mac-head" onClick={() => toggle(whoIdx)} aria-expanded={openIdx === whoIdx}>
            <span className="mac-hic"><Icon name="user-round-check" size={15} /></span>
            <span className="mac-t">Who Should Buy It</span>
            <span className="mac-chev"><Icon name={openIdx === whoIdx ? "minus" : "plus"} size={16} /></span>
          </button>
          {openIdx === whoIdx && (
            <div className="mac-who">
              {WHO_BUY.map((w) => (
                <div className={"mac-wc" + (w.featured ? " is-pop" : "") + (w.elite ? " is-elite" : "")} key={w.key}>
                  <div className="mac-wh">
                    <span className="mac-wn">{w.name}</span>
                    <span className="mac-wp">₹{w.price}/mo</span>
                  </div>
                  <p className="mac-wt">{w.text}</p>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

const PAYMENT_LINKS = {
  foundation: "https://rzp.io/rzp/CgZtOjE",
  advanced: "https://rzp.io/rzp/wHUVquh9",
  elite: "https://rzp.io/rzp/HP8gPkl",
};

function BatchSection({ onView }) {
  return (
    <section className="section section-pad band-white" id="batches">
      <div className="wrap">
        <div className="sec-head center reveal batches-head">
          <span className="eyebrow center">Mentorship Batches</span>
          <h2 className="section-title"><span className="desktop-copy">Compare Rudra SSC mentorship batches</span><span className="mobile-copy">Mentorship Batches</span></h2>
          <p className="lead">Three structured paths — from clear direction to a personal mentor who stays with you until selection.</p>
        </div>
        <div className="batch-grid">
          {BATCHES.map((b) => (
            <div className={"batch-card reveal" + (b.featured ? " featured" : "")} key={b.key}>
              {b.flag && <span className="batch-flag">{b.flag}</span>}
              <div className="batch-name">{b.name}</div>
              <div className="batch-price">
                {b.oldPrice && <span className="batch-was">₹{b.oldPrice}</span>}
                <span className="amt">₹{b.price}</span>
                <span className="per">/ month</span>
              </div>
              <p className="batch-tagline desktop-batch-copy">{b.tagline}</p>
              <p className="batch-tagline mobile-batch-copy">{b.mobileTagline}</p>
              <div className="batch-rule" />
              <div className="batch-points">
                {b.points.map((pt) => (
                  <div className="batch-point" key={pt}><span className="pc"><Icon name="check" size={13} /></span>{pt}</div>
                ))}
              </div>
              {b.mentor && <span className="batch-mentor-tag"><Icon name="user-round-check" size={14} /> Personal Mentor Provided</span>}
              <div className="batch-foot">
                <a className="btn btn-md btn-cta btn-block batch-enroll" href={PAYMENT_LINKS[b.key]} target="_blank" rel="noopener noreferrer">
                  <span className="desktop-copy">Pay ₹{b.price}</span><span className="mobile-copy">Pay / Enroll</span> <Icon name="arrow-right" size={15} />
                </a>
                <button className="btn btn-md btn-block batch-view btn-navy-outline" onClick={() => onView(b.key)}>
                  View Details <Icon name="arrow-up-right" size={16} />
                </button>
              </div>
            </div>
          ))}
        </div>

        <div className="cmp2 reveal">
          <div className="cmp2-overlay" aria-hidden="true">
            <div></div>
            <div></div>
            <div className="ov ov-pop"></div>
            <div className="ov ov-elite"></div>
          </div>

          <div className="cmp2-head">
            <div className="cmp2-corner">What's included</div>
            <div className="cmp2-plan">
              <span className="cmp2-pname">Foundation</span>
              <span className="cmp2-pprice">₹499 / mo</span>
            </div>
            <div className="cmp2-plan is-pop">
              <span className="cmp2-tab">Limited Offer</span>
              <span className="cmp2-pname">Advanced</span>
              <span className="cmp2-pprice"><s className="cmp2-was">₹999</s> ₹799 / mo</span>
            </div>
            <div className="cmp2-plan is-elite">
              <span className="cmp2-tab gold">Premium</span>
              <span className="cmp2-pname">Elite</span>
              <span className="cmp2-pprice">₹{ELITE_PRICE} / mo</span>
            </div>
          </div>

          {COMPARE_GROUPS.map((g, gi) => (
            <div className="cmp2-group" key={g.title}>
              <div className="cmp2-grouprow">
                <div className="cmp2-grouphead">
                  <span className="cmp2-gnum">{gi + 1}</span>
                  <Icon name={g.icon} size={16} />
                  {g.title}
                </div>
              </div>
              {g.rows.map((r) => (
                <div className="cmp2-row" key={r.label}>
                  <div className="cmp2-label">{r.label}</div>
                  <div className="cmp2-cell"><CompareCell v={r.f} /></div>
                  <div className="cmp2-cell is-pop"><CompareCell v={r.a} /></div>
                  <div className="cmp2-cell is-elite"><CompareCell v={r.e} /></div>
                </div>
              ))}
            </div>
          ))}
        </div>

        <CompareMobile />

        <div className="who-buy reveal">
          <div className="who-head">
            <span className="eyebrow center">Who should buy it</span>
            <h3 className="who-title">Find the batch built for you</h3>
          </div>
          <div className="who-grid">
            {WHO_BUY.map((w) => (
              <div className={"who-card" + (w.featured ? " is-pop" : "") + (w.elite ? " is-elite" : "")} key={w.key}>
                <span className={"who-badge" + (w.featured ? " badge-pop" : w.elite ? " badge-gold" : " badge-plain")}>{w.tier}</span>
                <div className="who-name">{w.name}<span className="who-price">₹{w.price}/mo</span></div>
                <p className="who-text">{w.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const CTA_TRUST = [
  "Free mock test to check your current level",
  "Mentor reviews your preparation need",
  "Batch guidance shared after assessment",
];
const CTA_EXAMS = ["SSC CGL", "SSC CHSL", "SSC MTS", "SSC GD", "Other"];
const CTA_BATCHES = ["Foundation", "Advanced", "Elite", "Not Sure"];
const CTA_LEVELS = ["Beginner", "Preparing", "Repeat Aspirant"];

function CtaBand({ onJoin }) {
  const [form, setForm] = useState({ name: "", phone: "", email: "", exam: "SSC CGL", batch: "Not Sure", level: "Preparing", mock: true, message: "" });
  const [submitted, setSubmitted] = useState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
  const valid = form.name.trim() && form.phone.trim().length >= 8;
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [submitted]);

  return (
    <section className="section section-pad cta2" id="join">
      <div className="wrap cta2-inner reveal">
        <div className="cta2-grid">
          {/* LEFT — explanation block */}
          <div className="cta2-left">
            <span className="eyebrow solo">Get started</span>
            <h2 className="cta2-title">Start With a Free Mock Test <span className="gold-text">+ Mentorship Assessment</span></h2>
            <p className="cta2-sub">Take a short level-based mock test and share your details so the mentor can understand your current preparation level and guide the right batch path.</p>

            <div className="cta2-explain">
              <h3 className="cta2-eh">Your First Step Before Joining</h3>
              <p className="cta2-et">Before choosing a batch, take a free mock test and request mentorship access. This helps the mentor understand your level, weak areas, consistency, and preparation needs.</p>
              <div className="cta2-trust">
                {CTA_TRUST.map((t) => (
                  <div className="cta2-trust-item" key={t}><span className="cta2-tick"><Icon name="check" size={14} /></span>{t}</div>
                ))}
              </div>
              <div className="cta2-note"><Icon name="shield-check" size={15} /> No payment required to begin.</div>
            </div>
            <div className="mob-cert">
              <span className="mob-cert-ic"><Icon name="award" size={18} /></span>
              <div className="mob-cert-body">
                <h4>Completion Certificate</h4>
                <p>Completion certificate available for consistent students.</p>
              </div>
            </div>
          </div>

          {/* RIGHT — premium form card */}
          <div className="cta2-card">
            {submitted ? (
              <div className="cta2-success">
                <span className="cta2-success-ic"><Icon name="check" size={26} /></span>
                <h3>Request received</h3>
                <p>Our team will reach out on WhatsApp with your free mock test link and your mentorship assessment. No payment required to begin.</p>
                <button className="btn btn-md btn-navy-outline" onClick={() => setSubmitted(false)}>Submit another</button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); if (valid) setSubmitted(true); }}>
                <h3 className="cta2-fh"><span className="desktop-copy">Request Mentorship Access</span><span className="mobile-copy">Apply For Mentorship Access</span></h3>
                <p className="cta2-fsub"><span className="desktop-copy">Mentorship-first — the free mock test is your assessment step.</span><span className="mobile-copy">Take a free mock test and get batch guidance.</span></p>
                <div className="cta2-fields">
                  <label className="cf"><span className="cf-l">Student Name</span>
                    <input className="cf-i" required placeholder="Anjali Verma" value={form.name} onChange={set("name")} /></label>
                  <div className="cf-row">
                    <label className="cf"><span className="cf-l">Phone / WhatsApp</span>
                      <input className="cf-i" type="tel" required placeholder="98XXXXXXXX" value={form.phone} onChange={set("phone")} /></label>
                    <label className="cf mobile-hide-field"><span className="cf-l">Email</span>
                      <input className="cf-i" type="email" placeholder="you@email.com" value={form.email} onChange={set("email")} /></label>
                  </div>
                  <div className="cf-row">
                    <label className="cf"><span className="cf-l">Target Exam</span>
                      <select className="cf-i" value={form.exam} onChange={set("exam")}>{CTA_EXAMS.map((x) => <option key={x}>{x}</option>)}</select></label>
                    <label className="cf"><span className="cf-l">Interested Batch</span>
                      <select className="cf-i" value={form.batch} onChange={set("batch")}>{CTA_BATCHES.map((x) => <option key={x}>{x}</option>)}</select></label>
                  </div>
                  <label className="cf mobile-hide-field"><span className="cf-l">Current Preparation Level</span>
                    <select className="cf-i" value={form.level} onChange={set("level")}>{CTA_LEVELS.map((x) => <option key={x}>{x}</option>)}</select></label>
                  <label className="cf cf-check mobile-hide-field">
                    <input type="checkbox" checked={form.mock} onChange={set("mock")} />
                    <span>Yes, I want to take the free mock test</span>
                  </label>
                  <label className="cf"><span className="cf-l">Message</span>
                    <textarea className="cf-i cf-ta" rows="2" placeholder="What help do you need? Tell the mentor where you're stuck…" value={form.message} onChange={set("message")} /></label>
                </div>
                <div className="cta2-actions">
                  <button type="submit" className="btn btn-lg btn-cta btn-block" disabled={!valid}>Request Access <Icon name="arrow-right" size={18} /></button>
                  <a className="btn btn-lg cta2-wa btn-block" href="https://wa.me/919818487968" target="_blank" rel="noopener noreferrer"><Icon name="message-circle" size={18} /> <span className="desktop-copy">Talk on WhatsApp</span><span className="mobile-copy">WhatsApp Mentor</span></a>
                  <a className="telegram-cta" href="https://t.me/Rudrassc_mentor" target="_blank" rel="noopener noreferrer">
                    <span className="telegram-cta-icon"><Icon name="send" size={19} /></span>
                    <span className="telegram-cta-copy">
                      <strong>Join Telegram Community</strong>
                      <small>Get mentorship updates and preparation guidance</small>
                    </span>
                    <Icon name="arrow-up-right" size={18} />
                  </a>
                </div>
                <p className="cta2-fnote">After payment, share your screenshot on WhatsApp or Telegram. Access is activated after payment verification.</p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap foot-inner">
        <a className="brand" href="#top">
          <BrandLogo />
        </a>
        <p className="foot-tag">Personal SSC mentorship until selection — daily guidance, revision discipline and accountability in one system.</p>
        <p className="foot-legal">Not affiliated with the Staff Selection Commission.</p>
      </div>
    </footer>
  );
}

/* ---- Batch detail modal -------------------------------------- */
function BatchModal({ batchKey, onClose }) {
  const b = BATCHES.find((x) => x.key === batchKey);
  const open = !!b;
  useEffect(() => { if (open && window.lucide) window.lucide.createIcons(); }, [open, batchKey]);
  if (!Dialog) return null;
  const m = b ? b.modal : null;
  return (
    <Dialog
      open={open}
      title={b ? b.name : ""}
      onClose={onClose}
      footer={b ? (
        <React.Fragment>
          <Button variant="ghost" onClick={onClose}>Close</Button>
          <a
            className="btn btn-md btn-cta"
            href={PAYMENT_LINKS[b.key]}
            target="_blank"
            rel="noopener noreferrer"
            onClick={onClose}
          >
            Join &amp; Pay
          </a>
        </React.Fragment>
      ) : null}
    >
      {b && m && (
        <div>
          <div className="modal-hero">
            <span className="modal-badge">{m.badge}</span>
            <span className="modal-price">₹{b.price}<small> / month</small></span>
          </div>
          <p style={{ marginTop: 14, fontSize: 16, color: "var(--ink-2)", lineHeight: 1.55 }}>{m.sub}</p>
          <div className="modal-section-label">What's included</div>
          <div className="modal-list">
            {m.includes.map((it) => (<div className="modal-li" key={it}><span className="mc"><Icon name="check-circle-2" size={17} /></span>{it}</div>))}
          </div>
          {m.excludes.length > 0 && (
            <React.Fragment>
              <div className="modal-section-label">Not in this batch</div>
              <div className="modal-list">
                {m.excludes.map((it) => (<div className="modal-li no" key={it}><span className="mc"><Icon name="minus-circle" size={17} /></span>{it}</div>))}
              </div>
            </React.Fragment>
          )}
          <div className="modal-section-label">Best for</div>
          <div className="modal-list one">
            <div className="modal-li"><span className="mc"><Icon name="target" size={17} /></span>{m.best}</div>
          </div>
          <div className="modal-philosophy">"{m.philosophy}"</div>
        </div>
      )}
    </Dialog>
  );
}

/* ---- Join / lead modal --------------------------------------- */
function JoinModal({ open, intent, onClose }) {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: "", phone: "", exam: "SSC CGL" });
  useEffect(() => { if (open) { setSubmitted(false); if (window.lucide) window.lucide.createIcons(); } }, [open, intent]);
  if (!Dialog) return null;
  const titles = { assessment: "Take a free test", mentor: "Talk to a mentor", whatsapp: "Connect on WhatsApp", join: "Join the mentorship program" };
  const ctas = { mentor: "Request a call", whatsapp: "Open WhatsApp", join: "Join program" };
  const title = titles[intent] || titles.join;
  const cta = ctas[intent] || ctas.join;
  const valid = form.name.trim() && form.phone.trim().length >= 8;
  return (
    <Dialog
      open={open}
      title={submitted ? "You're in the queue" : title}
      onClose={onClose}
      footer={submitted ? (
        <Button variant="primary" onClick={onClose}>Done</Button>
      ) : (
        <React.Fragment>
          <Button variant="ghost" onClick={onClose}>Cancel</Button>
          {intent === "assessment"
            ? <a className="btn btn-md btn-cta" href={FREE_TEST_URL}>Take Free Test</a>
            : <Button variant="accent" disabled={!valid} onClick={() => setSubmitted(true)}>{cta}</Button>}
        </React.Fragment>
      )}
    >
      {submitted ? (
        <div style={{ textAlign: "center", padding: "10px 0 6px" }}>
          <div style={{ width: 64, height: 64, margin: "0 auto 18px", borderRadius: "50%", display: "grid", placeItems: "center", color: "#178050", background: "var(--green-50)" }}><Icon name="check" size={30} /></div>
          <p style={{ fontSize: 17, color: "var(--navy)", fontWeight: 600 }}>Thanks, {form.name.split(" ")[0] || "aspirant"}.</p>
          <p style={{ marginTop: 8, fontSize: 15, color: "var(--ink-2)", lineHeight: 1.55 }}>Our team will reach out on {form.phone} within 24 hours to guide your next step.</p>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.55, marginTop: -2 }}>Share a few details and your mentor path begins. No payment required to start.</p>
          <label className="jf"><span className="jf-label">Full name</span>
            <input className="jf-input" placeholder="Anjali Verma" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></label>
          <label className="jf"><span className="jf-label">Mobile number</span>
            <input className="jf-input" type="tel" placeholder="98XXXXXXXX" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} /></label>
          <label className="jf"><span className="jf-label">Target exam</span>
            <select className="jf-input" value={form.exam} onChange={(e) => setForm({ ...form, exam: e.target.value })}>
              <option>SSC CGL</option><option>SSC CHSL</option><option>SSC MTS</option><option>SSC GD</option>
            </select></label>
        </div>
      )}
    </Dialog>
  );
}

/* ============================================================
   APP
   ============================================================ */
function App() {
  const [batchKey, setBatchKey] = useState(null);
  const [join, setJoin] = useState({ open: false, intent: "join" });

  useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);

  const openJoin = useCallback((intent = "join") => {
    setJoin({ open: true, intent: typeof intent === "string" ? intent : "join" });
  }, []);

  return (
    <React.Fragment>
      <Nav onJoin={openJoin} />
      <main>
        <Hero onJoin={openJoin} />
        <FeatureStrip />
        <MobileSystem />
        <JourneySection />
        <WhySection />
        <WhatSection />
        <CertificateSection />
        <BatchSection onView={setBatchKey} />
        <CtaBand onJoin={openJoin} />
      </main>
      <Footer />
      <BatchModal batchKey={batchKey} onClose={() => setBatchKey(null)} />
      <JoinModal open={join.open} intent={join.intent} onClose={() => setJoin({ ...join, open: false })} />
    </React.Fragment>
  );
}

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