/* MDP Landing — main app */
const { useState, useEffect, useRef, useMemo } = React;

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E5402B",
  "darkHero": true,
  "showCountdown": true,
  "showStickyCTA": true,
  "ctaCopy": "Reserve My Free Seat",
  "eventDate": "2026-05-28T20:00:00+08:00"
}/*EDITMODE-END*/;

/* ---------- Utility: countdown ---------- */
function useCountdown(targetIso) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const target = new Date(targetIso).getTime();
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86400000);
  const hrs = Math.floor((diff % 86400000) / 3600000);
  const mins = Math.floor((diff % 3600000) / 60000);
  const secs = Math.floor((diff % 60000) / 1000);
  return { days, hrs, mins, secs, done: diff === 0 };
}

/* ---------- Top announcement bar ---------- */
function AnnouncementBar({ tweaks }) {
  const c = useCountdown(tweaks.eventDate);
  return (
    <div className="ann-bar">
      <div className="ann-inner">
        <span className="live-dot" />
        <span className="ann-label">LIVE MASTERCLASS</span>
        <span className="ann-sep">·</span>
        <span className="ann-text">28 May 2026 · 8:00pm MYT</span>
        {tweaks.showCountdown && (
          <>
            <span className="ann-sep">·</span>
            <span className="ann-count">
              <b>{String(c.days).padStart(2,'0')}</b>d
              <b>{String(c.hrs).padStart(2,'0')}</b>h
              <b>{String(c.mins).padStart(2,'0')}</b>m
              <b>{String(c.secs).padStart(2,'0')}</b>s
            </span>
          </>
        )}
        <span className="ann-sep">·</span>
        <a href="#register" className="ann-cta">Reserve seat →</a>
      </div>
    </div>
  );
}

/* ---------- Nav ---------- */
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="brand">
          <span className="brand-mark">CMNet</span>
          <span className="brand-x">×</span>
          <span className="brand-mark muted">BDM</span>
        </div>
        <div className="nav-meta">
          <span className="nav-meta-item">Manager Development Program</span>
          <a href="#register" className="btn btn-sm btn-primary">Reserve seat</a>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero({ tweaks }) {
  return (
    <section className="hero">
      <div className="hero-grid">
        <div className="hero-left">
          <div className="kicker">
            <span className="kicker-dot" />
            <span>Free 2-Hour Masterclass · For Malaysian SME Owners</span>
          </div>

          <h1 className="hero-h1">
            Your company can't grow if every decision still goes through{" "}
            <span className="hl">you.</span>
          </h1>

          <p className="hero-sub">
            Build a self-running management layer that <i>thinks, decides, and executes</i> — without you being the answer to every question. Join Johan Irwan and Dato' Indra Gunawan for one live session.
          </p>

          <div className="hero-meta">
            <div className="meta-item">
              <div className="meta-label">Date</div>
              <div className="meta-value">28 May · Thursday</div>
            </div>
            <div className="meta-divider" />
            <div className="meta-item">
              <div className="meta-label">Time</div>
              <div className="meta-value">8:00 – 10:00pm MYT</div>
            </div>
            <div className="meta-divider" />
            <div className="meta-item">
              <div className="meta-label">Format</div>
              <div className="meta-value">Live · Zoom</div>
            </div>
          </div>

          <div className="hero-trust">
            <div className="trust-stars">★★★★★</div>
            <div className="trust-text">
              Trusted by <b>135+ managers</b> across Malaysian SMEs since 2019.
            </div>
          </div>
        </div>

        <div className="hero-right">
          <RegisterCard tweaks={tweaks} compact />
        </div>
      </div>

      <LogoMarquee />
    </section>
  );
}

/* ---------- Register form ---------- */
function RegisterCard({ tweaks, compact }) {
  const [submitted, setSubmitted] = useState(false);
  const [data, setData] = useState({
    name: "", phone: "", email: "", company: "", industry: "", size: "", challenge: ""
  });
  const valid = data.email && data.phone && data.name;

  const onSubmit = (e) => {
    e.preventDefault();
    if (!valid) return;
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className={"reg-card success" + (compact ? " compact" : "")}>
        <div className="success-mark">✓</div>
        <h3>You're in.</h3>
        <p>We've sent your Zoom link to <b>{data.email}</b>. Add 28 May, 8:00pm MYT to your calendar — and bring one specific manager problem you want to solve.</p>
        <div className="success-meta">
          <div><span className="mono">01</span> Calendar invite — sent</div>
          <div><span className="mono">02</span> WhatsApp reminder — 1 hour before</div>
          <div><span className="mono">03</span> Pre-session worksheet — tomorrow</div>
        </div>
      </div>
    );
  }

  return (
    <form className={"reg-card" + (compact ? " compact" : "")} id="register" onSubmit={onSubmit}>
      <div className="reg-head">
        <div className="reg-tag">RESERVE YOUR FREE SEAT</div>
        <div className="reg-spots">
          <span className="spots-dot" />
          17 of 100 spots remain
        </div>
      </div>

      <div className="reg-row">
        <Field label="Full name" required value={data.name} onChange={v=>setData({...data,name:v})} />
      </div>
      <div className="reg-row two">
        <Field label="Phone (WhatsApp)" required value={data.phone} onChange={v=>setData({...data,phone:v})} placeholder="+60 12 345 6789" />
        <Field label="Email" required type="email" value={data.email} onChange={v=>setData({...data,email:v})} />
      </div>
      <div className="reg-row two">
        <Field label="Company" value={data.company} onChange={v=>setData({...data,company:v})} />
        <Select label="Company size" value={data.size} onChange={v=>setData({...data,size:v})}
          options={["1–10", "11–50", "51–200", "201–500", "500+"]} />
      </div>
      <div className="reg-row">
        <Select label="Industry" value={data.industry} onChange={v=>setData({...data,industry:v})}
          options={["Manufacturing", "Services", "Retail / E-commerce", "Construction / Engineering", "F&B", "Tech", "Other"]} />
      </div>
      <div className="reg-row">
        <Field label="Biggest management challenge right now" value={data.challenge} onChange={v=>setData({...data,challenge:v})} placeholder="e.g. My ops manager can't run the team without me" textarea />
      </div>

      <button type="submit" className={"btn btn-primary btn-lg btn-full" + (valid ? "" : " disabled")}>
        {tweaks.ctaCopy} <span className="arrow">→</span>
      </button>

      <div className="reg-foot">
        <span>🔒 No spam.</span>
        <span>🎟 100 seats only.</span>
        <span>📺 Zoom link via email + WhatsApp.</span>
      </div>
    </form>
  );
}

function Field({ label, required, value, onChange, type="text", placeholder, textarea }) {
  return (
    <label className="field">
      <span className="field-label">{label}{required && <em>*</em>}</span>
      {textarea
        ? <textarea rows={2} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} />
        : <input type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} />}
    </label>
  );
}
function Select({ label, value, onChange, options }) {
  return (
    <label className="field">
      <span className="field-label">{label}</span>
      <select value={value} onChange={e=>onChange(e.target.value)}>
        <option value="">Select…</option>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    </label>
  );
}

/* ---------- Logo marquee ---------- */
function LogoMarquee() {
  const logos = ["logo-1.webp","logo-2.webp","logo-3.webp","logo-4.webp","logo-5.webp","logo-6.webp"];
  const repeated = [...logos, ...logos, ...logos, ...logos];
  return (
    <div className="marquee">
      <div className="marquee-label">Trusted by Malaysian SMEs across industries</div>
      <div className="marquee-track-wrap">
        <div className="marquee-track">
          {repeated.map((l, i) => (
            <img key={i} src={"assets/" + l} alt="" className="marquee-logo" />
          ))}
        </div>
      </div>
    </div>
  );
}

window.MDP = { Hero, Nav, AnnouncementBar, RegisterCard };