/* MDP Landing — content sections */
const { useState: useS2, useEffect: useE2, useRef: useR2 } = React;

/* ---------- Pain section ---------- */
function PainSection() {
  const items = [
    {
      n: "01",
      time: "When you leave for a week",
      headline: "Everything stalls.",
      body: "Decisions pile up in WhatsApp. Your phone lights up with \"Boss, quick question…\" at midnight. Nothing moves without you signing off.",
      img: "pain-1.webp",
    },
    {
      n: "02",
      time: "In management meetings",
      headline: "Everyone talks past each other.",
      body: "Different departments, different priorities, different versions of \"the plan.\" You repeat the same direction three times — then still decide everything yourself.",
      img: "pain-2.webp",
    },
    {
      n: "03",
      time: "10+ years in business",
      headline: "Still no successor in sight.",
      body: "You've promoted your best performers into manager roles and hoped they'd figure it out. They didn't. There's no one ready to take over a department — let alone the company.",
      img: "pain-3.webp",
    },
  ];

  return (
    <section className="sec sec-pain" data-screen-label="03 Pain">
      <div className="sec-inner">
        <div className="sec-head">
          <div className="eyebrow"><span className="eyebrow-line" />The Symptom</div>
          <h2 className="sec-h2">
            Managers who <i>can't run</i> without you.
            <br />
            <span className="muted">Is this your company?</span>
          </h2>
        </div>

        <ol className="pain-list">
          {items.map(it => (
            <li className="pain-row" key={it.n}>
              <div className="pain-num mono">{it.n}</div>
              <div className="pain-img-wrap">
                <img src={"assets/" + it.img} alt="" className="pain-img" />
              </div>
              <div className="pain-body">
                <div className="pain-time mono">{it.time}</div>
                <h3 className="pain-h">→ {it.headline}</h3>
                <p>{it.body}</p>
              </div>
            </li>
          ))}
        </ol>

        <div className="pain-cta">
          <p>This webinar is built for SME owners <i>done carrying the whole company on their shoulders.</i></p>
          <a href="#register" className="btn btn-dark">Reserve my seat <span className="arrow">→</span></a>
          <span className="pain-cta-note mono">Limited seats — register in 10 seconds</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- TALE Framework ---------- */
function TaleSection() {
  const dims = [
    { k: "T", color: "blue", word: "THINK", line: "See past the next task." },
    { k: "A", color: "green", word: "ALIGN", line: "Connect the dots between departments." },
    { k: "L", color: "orange", word: "LEAD", line: "Grow people, not just direct them." },
    { k: "E", color: "violet", word: "EXECUTE", line: "Deliver results, not excuses." },
  ];

  return (
    <section className="sec sec-tale" data-screen-label="04 Framework">
      <div className="sec-inner">
        <div className="sec-head center">
          <div className="eyebrow center"><span className="eyebrow-line" />The Framework<span className="eyebrow-line" /></div>
          <h2 className="sec-h2">
            Inside the webinar:<br />
            the <span className="hl-yellow">4 dimensions</span> of a complete manager.
          </h2>
        </div>

        <div className="tale-row">
          {dims.map((d) => (
            <div key={d.k} className={"tale-pill tale-" + d.color}>
              <div className="tale-pill-letter">{d.k}</div>
              <div className="tale-pill-word">{d.word}</div>
              <div className="tale-pill-line">{d.line}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Hosts ---------- */
function HostsSection() {
  return (
    <section className="sec sec-hosts" data-screen-label="05 Hosts">
      <div className="sec-inner">
        <div className="sec-head">
          <div className="eyebrow"><span className="eyebrow-line" />Your Hosts</div>
          <h2 className="sec-h2">
            Boardroom judgment <span className="muted">+</span><br />
            ground-level development.
          </h2>
        </div>

        <div className="host-grid">
          <article className="host-card">
            <div className="host-portrait">
              <img src="assets/host-johan.webp" alt="Johan Irwan Kamarozaman" />
              <div className="host-portrait-tag mono">SPEAKER</div>
            </div>
            <div className="host-body">
              <h3 className="host-name">Johan Irwan Kamarozaman</h3>
              <p className="host-role">Founder, Leap Leadership Academy · MAPS President</p>
              <ul className="host-creds">
                <li><span className="cred-mark">🎓</span> B.Eng (Hons), Electronics Engineering — Multimedia University</li>
                <li><span className="cred-mark">🌐</span> President, Malaysian Association of Professional Speakers</li>
                <li><span className="cred-mark">🧠</span> Directive Communication™ Trainer · NLP Practitioner</li>
                <li><span className="cred-mark">🏢</span> Trained leaders at Petronas, Maybank, Dyson, and more</li>
                <li><span className="cred-mark">📺</span> Featured on Astro Awani, BFM, Bernama</li>
                <li><span className="cred-mark">🌟</span> 100 Most Inspirational LinkedIn Icons (Malaysia)</li>
              </ul>
              <blockquote className="host-pull">
                Johan turns strategic principles into practical managerial behavior your team can apply on Monday morning.
              </blockquote>
            </div>
          </article>

          <article className="host-card">
            <div className="host-portrait">
              <img src="assets/host-indra.webp" alt="Dato' Indra Gunawan Alamshah" />
              <div className="host-portrait-tag mono">SPEAKER</div>
            </div>
            <div className="host-body">
              <h3 className="host-name">Dato' Indra Gunawan Alamshah</h3>
              <p className="host-role">Founder · Vistage CEO Master Chair · 30+ years operator</p>
              <ul className="host-creds">
                <li><span className="cred-mark">🎓</span> Advanced Management Programme — INSEAD</li>
                <li><span className="cred-mark">🧩</span> Former Consultant — Alexander Proudfoot</li>
                <li><span className="cred-mark">👥</span> Vistage CEO Master Chair</li>
                <li><span className="cred-mark">🏛</span> 30+ years CEO &amp; turnaround experience</li>
                <li><span className="cred-mark">🧭</span> C-suite perspective on manager development</li>
              </ul>
              <blockquote className="host-pull">
                He's not teaching from a textbook. He's teaching from the CEO seat.
              </blockquote>
            </div>
          </article>
        </div>

        <div className="host-combine">
          <div className="combine-card">
            <div className="combine-half">
              <div className="combine-tag mono">JOHAN</div>
              <p>The behavioral science — how real humans actually change.</p>
            </div>
            <div className="combine-plus">+</div>
            <div className="combine-half">
              <div className="combine-tag mono">DATO' INDRA</div>
              <p>The boardroom pattern — what separates companies that scale from companies that stall.</p>
            </div>
          </div>
          <a href="#register" className="btn btn-primary btn-lg">Reserve my free seat <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Testimonials (written) ---------- */
function TestimonialsWritten() {
  const items = [
    {
      stars: 5,
      quote: "We have enrolled most of our managers in this program, and the results have been outstanding. Tangible improvements in their management mindset and leadership skills, enabling them to lead their teams more effectively. What sets this apart is its ability to align all managers with the same principles and strategies — fostering a unified approach. Far more impactful than sending managers to attend different courses.",
      tag: "Enrolled most of his management team.",
      name: "Jimmy Low",
      role: "CEO, Magnet Security and Automation Sdn Bhd",
      industry: "Security & Automation",
      avatar: "tm-jimmy.png",
    },
    {
      stars: 5,
      quote: "The course was well-organized and clearly the result of thorough research, combining practical insights with real-world applicability. Our managers not only left with a stronger understanding of effective management & leadership, but also with a clearer sense of direction for their career progression.",
      tag: "Managers gained direction and confidence.",
      name: "Syairah",
      role: "HR Manager, Sime Kansai Paint Sdn Bhd",
      industry: "Manufacturing / Coatings",
      avatar: null,
    },
    {
      stars: 5,
      quote: "A game-changer for me. Coming from a technical background with limited management experience, the program highlighted the gaps in my leadership skills and gave me the tools to close them effectively. It helped me grow into a confident leader, capable of guiding my team with purpose and clarity.",
      tag: "Technical expert → confident manager.",
      name: "Mohd Amri Firdaus",
      role: "COO, Reka Inisiatif Sdn Bhd",
      industry: "Engineering / Consulting",
      avatar: "tm-amri.png",
    },
    {
      stars: 5,
      quote: "Very useful. It helps me understand more about myself and my team members and how we can work well together. This awareness in our core members is very important — it reduces friction and lubricates our workflow. Happy with the value I got.",
      tag: "Reduced team friction. Smoother workflow.",
      name: "Patrick Teoh",
      role: "CEO, Bliss Commerce Sdn Bhd",
      industry: "E-commerce",
      avatar: "tm-patrick.png",
    },
    {
      stars: 5,
      quote: "Sending my Head of Marketing to the year-long program was a transformative decision. They've gained confidence in implementing data-driven strategies, inspiring their team, and aligning marketing initiatives with business goals. The insights and network they've acquired are already driving positive change across our organization.",
      tag: "Marketing head now aligns strategy + execution.",
      name: "Mohd Haziq Faris",
      role: "COO, Reka Inisiatif Sdn Bhd",
      industry: "Consulting / Marketing",
      avatar: "tm-haziq.png",
    },
    {
      stars: 5,
      quote: "Offers invaluable insights and practical knowledge that empower managers to effectively balance objectives, people, and resources. The comprehensive 12-month module is a well-designed and essential step in every manager's journey toward excellence.",
      tag: "Balanced objectives, people, and resources.",
      name: "Jason Ch'ng",
      role: "COO, Miaow Miaow Food Products Sdn Bhd",
      industry: "Food Manufacturing",
      avatar: "tm-jason.png",
    },
  ];

  return (
    <section className="sec sec-tw" data-screen-label="06 Owners">
      <div className="sec-inner">
        <div className="sec-head">
          <div className="eyebrow"><span className="eyebrow-line" />What their bosses say</div>
          <h2 className="sec-h2">
            The owners <span className="hl-yellow">who sent</span> their managers.
          </h2>
          <p className="sec-sub">Six businesses. Six industries. One pattern: managers who actually changed.</p>
        </div>

        <div className="tw-grid">
          {items.map((it, i) => (
            <article className="tw-card" key={i}>
              <div className="tw-stars">{"★".repeat(it.stars)}</div>
              <p className="tw-quote">"{it.quote}"</p>
              <div className="tw-tag">✨ {it.tag}</div>
              <div className="tw-foot">
                <div className="tw-avatar">
                  {it.avatar
                    ? <img src={"assets/" + it.avatar} alt={it.name} />
                    : <span className="tw-avatar-fallback">{it.name[0]}</span>}
                </div>
                <div>
                  <div className="tw-name">{it.name}</div>
                  <div className="tw-role">{it.role}</div>
                  <div className="tw-industry mono">{it.industry}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Testimonials (video / before-after) ---------- */
function TestimonialsVideo() {
  const items = [
    {
      name: "Tan Nyee Hoong (Patrick)",
      role: "Sales Manager (OEM)",
      company: "Sime Kansai Paints Sdn Bhd",
      video: "https://assets.cdn.filesafe.space/oyiyer5t6kjDxKmCyhLD/media/69e6ea5c3ea93d9dd2f9c030.mp4",
      before: "Is this going to be a boring class or a very attractive class?",
      after: "After the first session, I was already looking forward to the next.",
    },
    {
      name: "Tan Chin Kaeng (Kenneth Tan)",
      role: "Project Manager",
      company: "CIC Contract Sdn Bhd",
      video: "https://assets.cdn.filesafe.space/oyiyer5t6kjDxKmCyhLD/media/69e6ea5c2c135a8c83c653ce.mp4",
      before: "It has impacted me — I've been thinking about my past, my career, and my future.",
      after: "I have to go back and plan my next 10-year program. I will continue to move forward.",
    },
    {
      name: "Foong Yee Leng",
      role: "QA CI Manager",
      company: "Elta Fans Malaysia Sdn Bhd",
      video: "https://assets.cdn.filesafe.space/oyiyer5t6kjDxKmCyhLD/media/69e6ea5c5e482c379b838575.mp4",
      before: "Why? I've attended similar ones before — we can finish in one day, why waste the money?",
      after: "After all 12 modules, I'm glad you sent me here. I learnt a lot and met great people.",
    },
    {
      name: "Chan Chun Yue (CY)",
      role: "Senior Global CCC Manager",
      company: "Diamond Key International Sdn Bhd",
      video: "https://assets.cdn.filesafe.space/oyiyer5t6kjDxKmCyhLD/media/69e6ea5c5e482c379b838576.mp4",
      before: "I should trust them, delegate and coach — instead of solving the issues on my end.",
      after: "Success, I cannot achieve alone. It comes from collaboration, trust, and a shared purpose.",
    },
    {
      name: "Goh Yuan Yong (YY)",
      role: "Senior Product Specialist",
      company: "Nexus Wise Sdn Bhd",
      video: "https://assets.cdn.filesafe.space/oyiyer5t6kjDxKmCyhLD/media/69e6ea5c6da81710db1b08e5.mp4",
      before: "What I have learnt this whole year is to understand humans more.",
      after: "I now run a bi-weekly meeting with the team — everyone is updated. A big change for our team.",
    },
  ];
  const [idx, setIdx] = useS2(0);
  const [playing, setPlaying] = useS2(false);
  const videoRef = useR2(null);
  const cur = items[idx];

  // Pause + reset when switching stories
  useE2(() => {
    setPlaying(false);
    if (videoRef.current) {
      videoRef.current.pause();
      videoRef.current.currentTime = 0;
    }
  }, [idx]);

  const handlePlay = () => {
    if (!videoRef.current) return;
    videoRef.current.muted = false;
    videoRef.current.play();
    setPlaying(true);
  };

  return (
    <section className="sec sec-tv" data-screen-label="07 Managers">
      <div className="sec-inner">
        <div className="sec-head">
          <div className="eyebrow light"><span className="eyebrow-line" />And the managers themselves</div>
          <h2 className="sec-h2 light">
            Before the program <span className="muted">→</span> after.
          </h2>
          <p className="sec-sub light">Real shifts from real managers who went through Johan's 12-month program.</p>
        </div>

        <div className="tv-stage">
          <div className="tv-screen">
            <div className="tv-screen-inner">
              <video
                key={cur.video}
                ref={videoRef}
                className="tv-video"
                src={cur.video}
                preload="metadata"
                playsInline
                controls={playing}
                onEnded={() => setPlaying(false)}
                onPause={() => setPlaying(false)}
              />
              <div className={"tv-overlay" + (playing ? " is-playing" : "")}>
                <div className="tv-corners">
                  <div className="tv-c tv-c-tl" /><div className="tv-c tv-c-tr" />
                  <div className="tv-c tv-c-bl" /><div className="tv-c tv-c-br" />
                </div>
                <div className="tv-rec mono">● REC · {String(idx+1).padStart(2,'0')} / {String(items.length).padStart(2,'0')}</div>
                <div className="tv-name-block">
                  <div className="tv-name">{cur.name}</div>
                  <div className="tv-role">{cur.role}</div>
                  <div className="tv-company mono">{cur.company}</div>
                </div>
                <button className="tv-play" aria-label="Play testimonial" onClick={handlePlay}>
                  <svg viewBox="0 0 24 24" width="36" height="36"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
                </button>
                <div className="tv-cap mono">Click to play with sound</div>
              </div>
            </div>
          </div>

          <div className="tv-quotes">
            <div className="tv-q">
              <div className="tv-q-label mono">BEFORE</div>
              <blockquote>"{cur.before}"</blockquote>
            </div>
            <div className="tv-q tv-q-after">
              <div className="tv-q-label mono">AFTER</div>
              <blockquote>"{cur.after}"</blockquote>
            </div>
          </div>
        </div>

        <div className="tv-nav">
          <div className="tv-dots">
            {items.map((_, i) => (
              <button key={i} className={"tv-dot" + (i === idx ? " active" : "")} onClick={() => setIdx(i)} aria-label={"Story " + (i+1)} />
            ))}
          </div>
          <div className="tv-arrows">
            <button className="tv-arrow" onClick={() => setIdx((idx-1+items.length)%items.length)} aria-label="Previous">←</button>
            <button className="tv-arrow" onClick={() => setIdx((idx+1)%items.length)} aria-label="Next">→</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Trust strip (photo + stats + press) ---------- */
function TrustStrip() {
  return (
    <section className="sec-trust" data-screen-label="07b Track Record">
      <div className="trust-photo">
        <img src="assets/group-photo.webp" alt="MDP graduation — past cohort, Kuala Lumpur" />
        <div className="trust-cap mono">MDP graduation · past cohort, Kuala Lumpur</div>
      </div>

      <div className="sec-inner trust-body">
        <div className="trust-stats">
          <div className="trust-stat">
            <b>135+</b>
            <span>managers developed</span>
          </div>
          <div className="trust-stat">
            <b>15<i>+ hrs</i></b>
            <span>reclaimed every week</span>
          </div>
          <div className="trust-stat">
            <b>6</b>
            <span>industries · since 2019</span>
          </div>
        </div>

        <div className="trust-press">
          <div className="trust-press-label mono">As featured on</div>
          <img src="assets/featured-on.webp" alt="As featured on TV1, TV AlHijrah, Astro Awani, BFM 89.9, Bernama Radio, Nasional FM" />
        </div>
      </div>
    </section>
  );
}

/* ---------- Outcomes ---------- */
function OutcomesSection() {
  const items = [
    { n: "01", title: "Managers aligned with you", body: "Stop repeating the same direction three times. You'll see exactly why your managers miss your intent — and the communication framework that closes the gap.", img: "outcome-1.webp" },
    { n: "02", title: "Delegation that actually sticks", body: "Projects executed without your daily push. The structural reason most delegation fails in SMEs — and the accountability mechanism that fixes it.", img: "outcome-2.webp" },
    { n: "03", title: "You focus on strategy", body: "Not firefighting operational issues. How to build a management layer that absorbs operational decisions so you finally work on the business, not in it.", img: "outcome-3.webp" },
    { n: "04", title: "A management layer that holds", body: "Your company keeps running when you're away. The 4-dimension diagnostic you can run on every manager in your company after the webinar.", img: "outcome-4.webp" },
  ];

  return (
    <section className="sec sec-out" data-screen-label="08 Outcomes">
      <div className="sec-inner">
        <div className="sec-head">
          <div className="eyebrow"><span className="eyebrow-line" />The Outcome</div>
          <h2 className="sec-h2">
            What you'll walk away <i>with.</i>
          </h2>
          <p className="sec-sub">You're not leaving with motivation. You're leaving with a <b>diagnostic tool.</b></p>
        </div>

        <div className="out-grid">
          {items.map(o => (
            <article className="out-card" key={o.n}>
              <div className="out-num mono">{o.n}</div>
              <div className="out-img-wrap">
                <img src={"assets/" + o.img} alt="" />
              </div>
              <h3 className="out-title">{o.title}</h3>
              <p className="out-body">{o.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Worth-it / FAQ-ish ---------- */
function WorthItSection() {
  const items = [
    { k: "It's live — not a recording.", v: "You'll be able to ask Johan direct questions about your specific manager situation." },
    { k: "It's built for Malaysian SME owners.", v: "Not corporate MNCs. Not startups. The examples, pain points, and frameworks are calibrated for businesses like yours." },
    { k: "It's free — for now.", v: "This is the only format where you get this framework at zero cost. Future access may be through paid channels." },
  ];
  return (
    <section className="sec sec-worth" data-screen-label="09 Worth It">
      <div className="sec-inner">
        <div className="sec-head">
          <h2 className="sec-h2">
            Is this worth <span className="hl-yellow">my 2 hours?</span>
          </h2>
        </div>

        <div className="worth-list">
          {items.map((it, i) => (
            <div key={i} className="worth-row">
              <div className="worth-check">✓</div>
              <div>
                <h3>{it.k}</h3>
                <p>{it.v}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="worth-warn">
          <span className="warn-fire">🔥</span>
          <p>Limited to the <b>first 100 registrants.</b> Seats are capped so Johan can actually respond to your questions in the live Q&amp;A.</p>
          <span className="warn-fire">🔥</span>
        </div>

        <div className="worth-cta">
          <a href="#register" className="btn btn-primary btn-xl">Reserve my free seat <span className="arrow">→</span></a>
          <div className="worth-cta-meta mono">28 May · 8:00pm MYT · Zoom</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA({ tweaks }) {
  const c = (function useFinalCountdown(){
    const [now,setNow] = useS2(()=>Date.now());
    useE2(()=>{ const id=setInterval(()=>setNow(Date.now()),1000); return ()=>clearInterval(id); },[]);
    const target = new Date(tweaks.eventDate).getTime();
    const d = Math.max(0, target - now);
    return {
      days: Math.floor(d/86400000),
      hrs: Math.floor((d%86400000)/3600000),
      mins: Math.floor((d%3600000)/60000),
      secs: Math.floor((d%60000)/1000),
    };
  })();
  return (
    <section className="sec sec-final" id="final-cta" data-screen-label="10 Final CTA">
      <div className="sec-inner">
        <div className="final-card">
          <div className="final-tag mono">● LIVE · TIME IS RUNNING OUT</div>
          <h2 className="final-h2">
            Reserve your seat now.
          </h2>
          <p className="final-sub">Free · 2 hours · Live online · 28 May, 8:00 – 10:00pm MYT · Zoom</p>

          <div className="countdown">
            {[
              { n: c.days, l: "DAYS" },
              { n: c.hrs, l: "HOURS" },
              { n: c.mins, l: "MINUTES" },
              { n: c.secs, l: "SECONDS" },
            ].map((u, i) => (
              <React.Fragment key={i}>
                <div className="cd-unit">
                  <div className="cd-num">{String(u.n).padStart(2,'0')}</div>
                  <div className="cd-lbl mono">{u.l}</div>
                </div>
                {i < 3 && <div className="cd-sep">:</div>}
              </React.Fragment>
            ))}
          </div>

          <a href="#register" className="btn btn-primary btn-xl">Reserve my free seat <span className="arrow">→</span></a>
          <div className="final-spots">
            <span className="spots-dot" /> 17 free spots remaining of 100
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="foot-inner">
        <div className="foot-brand">
          <div className="brand">
            <span className="brand-mark">CMNet</span>
            <span className="brand-x">×</span>
            <span className="brand-mark muted">BDM</span>
          </div>
          <p>Hosted by CMNet · In partnership with BDM</p>
        </div>
        <div className="foot-meta">
          <p>© 2026 CMNet Sdn. Bhd. · All rights reserved.</p>
          <p className="muted">This site is not part of the Facebook website or Facebook Inc. Additionally, this site is not endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.</p>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Sticky CTA bar ---------- */
function StickyCTA({ tweaks }) {
  const [show, setShow] = useS2(false);
  useE2(() => {
    const onScroll = () => setShow(window.scrollY > 700);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  if (!tweaks.showStickyCTA) return null;
  return (
    <div className={"sticky-cta" + (show ? " show" : "")}>
      <div className="sticky-inner">
        <div className="sticky-meta">
          <span className="live-dot" />
          <div>
            <div className="sticky-title">MDP Masterclass · 28 May · 8:00pm MYT</div>
            <div className="sticky-sub mono">17 / 100 spots remain</div>
          </div>
        </div>
        <a href="#register" className="btn btn-primary">{tweaks.ctaCopy} <span className="arrow">→</span></a>
      </div>
    </div>
  );
}

Object.assign(window, {
  PainSection, TaleSection, HostsSection,
  TestimonialsWritten, TestimonialsVideo, TrustStrip,
  OutcomesSection, WorthItSection, FinalCTA, Footer, StickyCTA,
});