/* sections-top.jsx — urgency bar, nav, hero, problem */
const { useState: useStateTop, useEffect: useEffectTop } = React;

function UrgencyBar({ target, onCta }){
  const { d, h, m, s } = useCountdown(target);
  const webinarDate = window.WEBINAR_DATE || 'Saturday, May 17, 5:00 PM IST';
  return (
    <div className="urgency-bar">
      <div className="urgency-bar__shimmer" />
      <div className="urgency-bar__inner">

        {/* Live + date */}
        <div className="ub-live">
          <span className="ub-live__dot" />
          <span className="ub-live__tag">LIVE</span>
          <span className="ub-live__date">{webinarDate}</span>
          <span className="ub-free-tag">FREE</span>
        </div>

        {/* Countdown */}
        <div className="ub-center">
          <span className="ub-starts">STARTS IN</span>
          <div className="ub-cd">
            <div className="ub-cd__unit"><span className="ub-cd__n">{d}</span><span className="ub-cd__l">DAYS</span></div>
            <span className="ub-cd__sep">:</span>
            <div className="ub-cd__unit"><span className="ub-cd__n">{h}</span><span className="ub-cd__l">HRS</span></div>
            <span className="ub-cd__sep">:</span>
            <div className="ub-cd__unit"><span className="ub-cd__n">{m}</span><span className="ub-cd__l">MIN</span></div>
            <span className="ub-cd__sep">:</span>
            <div className="ub-cd__unit"><span className="ub-cd__n">{s}</span><span className="ub-cd__l">SEC</span></div>
          </div>
        </div>

        {/* Scarcity + CTA */}
        <div className="ub-right">
          <div className="ub-scarcity">
            <div className="ub-scarcity__label"><span>🔥</span><span>Only <strong>23 seats</strong> left</span></div>
            <div className="ub-scarcity__bar"><div className="ub-scarcity__fill" /></div>
          </div>
          <button className="ub-cta" onClick={onCta}>
            Secure Seat <Icon.ArrowRight width="13" height="13" />
          </button>
        </div>

      </div>
    </div>
  );
}

function Nav({ onCta }){
  return (
    <header className="nav">
      <div className="nav__inner">
        <a href="#" className="brand" aria-label="MagicBolt AI">
          <img src="assets/logo.png" alt="MagicBolt AI" style={{height:34, width:'auto'}} />
        </a>
        <button className="nav__cta" onClick={onCta}>
          <Icon.Sparkle width="14" height="14" /> Join for FREE
        </button>
      </div>
    </header>
  );
}

/* ─── 3 hero hook variants ─── */
const HERO_VARIANTS = [
  {
    key: "competitor",
    chipLabel: "🚨 WAKE-UP CALL",
    chipStyle: { background: "linear-gradient(90deg,#dc2626 0%,#f97316 100%)" },
    pillText: "The AI agency gap is widening — every week.",
    h1Pre:  "Your Competitors Are Already ",
    h1Grad: "Running on AI.",
    h1Post: " You're Still Doing It Manually.",
    lede: "The smart agency in your city automated reviews, reports, and client ops. They charge 3× more and work half as much. This free 90-min live session shows you exactly how to catch up — fast.",
    bullets: [
      "One dashboard runs 50+ GMB clients — zero manual ops",
      "They charge ₹30K/mo. You charge ₹7K. Same work.",
      "Your next prospect already got a pitch from them",
      "Whitelabel AI under your brand — clients never know",
    ],
    ctaLabel: "Claim My Seat Before It's Too Late",
    urgencyNote: "⚠️ 77 agencies in your city already registered.",
  },
  {
    key: "burnout",
    chipLabel: "⚡ AGENCY OWNERS",
    chipStyle: {},
    pillText: "Your business should work for you — not the other way.",
    h1Pre:  "You Didn't Start an Agency to ",
    h1Grad: "Work 60-Hour Weeks",
    h1Post: " and Still Feel Stuck.",
    lede: "Manual reviews. Reports from scratch. Follow-ups that slip. You don't have a marketing problem — you have an ops problem. Fix it in 90 minutes, free, live with Vijay Anand.",
    bullets: [
      "Cut 60+ hrs/month of repetitive ops — this week",
      "1 person handles what currently needs a team of 4",
      "Client results visible in week 2, not month 3",
      "Earn more, stress less — build a business, not a job",
    ],
    ctaLabel: "Yes — I Want My Time Back",
    urgencyNote: "🔥 23 seats left for the May 9 live session.",
  },
  {
    key: "opportunity",
    chipLabel: "💰 FREE MASTERCLASS",
    chipStyle: { background: "linear-gradient(90deg,#f59e0b 0%,#f97316 100%)" },
    pillText: "The ₹1L/month model 97% of agencies haven't found yet.",
    h1Pre:  "One Dashboard. 10 Clients. ",
    h1Grad: "₹1,10,000",
    h1Post: " Recurring Every Month.",
    lede: "Pay a wholesale rate, charge a premium, keep the margin — per client, per month. Vijay walks you through the exact whitelabel AI model live, free, in 90 minutes. Real numbers. Real screens.",
    bullets: [
      "Whitelabel AI SaaS — your logo, your domain, your price",
      "Onboard any local business client in 6 minutes flat",
      "AI handles reviews, posts, audits, reports — 24/7",
      "30-day ROI window. Zero tech background needed.",
    ],
    ctaLabel: "Show Me the Model — Join Free",
    urgencyNote: "🎁 ₹47,000 bonus stack for live attendees only.",
  },
];

function Hero({ onCta, target }){
  const webinarDate = window.WEBINAR_DATE || 'Saturday, May 17, 5:00 PM IST';

  /* Always show a DIFFERENT variant than the last visit */
  const [v] = useStateTop(() => {
    const last = localStorage.getItem('hv_last');
    const pool = last ? HERO_VARIANTS.filter(x => x.key !== last) : HERO_VARIANTS;
    const pick = pool[Math.floor(Math.random() * pool.length)];
    localStorage.setItem('hv_last', pick.key);
    return pick;
  });

  return (
    <section className={`hero hero--${v.key}`}>
      <div className="hero__bg" />
      <div className="hero__bg-grid" />
      <div className="wrap hero__inner">
        <div>
          <span className="hero__pill">
            <span className="hero__pill__chip" style={v.chipStyle}>{v.chipLabel}</span>
            {v.pillText}
          </span>

          <h1>
            {v.h1Pre}<span className="grad-text">{v.h1Grad}</span>{v.h1Post}
          </h1>

          <p className="hero__lede">{v.lede}</p>

          <ul className="hero__bullets">
            {v.bullets.map((b, i) => (
              <li key={i}>
                <span className="check"><Icon.Check width="14" height="14" /></span>
                {b}
              </li>
            ))}
          </ul>

          <div className="hero__cta-row">
            <button className="btn btn--primary btn--lg" onClick={onCta}>
              <Icon.Sparkle width="20" height="20" />
              {v.ctaLabel}
            </button>
            <button className="btn btn--ghost btn--lg" onClick={() => document.getElementById('learn')?.scrollIntoView({behavior:'smooth', block:'start'})}>
              See what's inside
            </button>
          </div>

          <div className="hero__urgency-note">{v.urgencyNote}</div>

          <div className="hero__meta">
            <span>📅 <strong>{webinarDate}</strong></span>
            <span>⏱ <strong>90 minutes</strong></span>
            <span>🎁 <strong>Bonus stack worth ₹47,000</strong></span>
            <span>🔒 <strong>Only 100 seats</strong></span>
          </div>
        </div>

        <div className="hero-card">
          <div className="hero-card__media">
            <img src="assets/vijay.jpg" alt="Vijay Anand, Founder of MagicBolt AI" style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover'}} />
            <div className="hero-card__play">
              <button className="hero-card__play__btn" onClick={onCta} aria-label="Play preview">
                <Icon.Play />
              </button>
            </div>
          </div>
          <div className="hero-card__caption">
            <div>
              <div className="hero-card__caption__name">Vijay Anand</div>
              <div className="hero-card__caption__role">Founder · MagicBolt AI</div>
            </div>
            <span className="hero-card__caption__live">LIVE</span>
          </div>
          <div className="hero-card-floats">
            <div className="float-badge float-badge--1">
              <span className="float-badge__icon" style={{background:'rgba(249,115,22,.15)', color:'#c2410c'}}>📈</span>
              <div>
                <div style={{fontWeight:700, fontSize:13}}>+₹1.1L/mo</div>
                <div style={{fontSize:11, color:'var(--ink-3)'}}>10 whitelabel clients</div>
              </div>
            </div>
            <div className="float-badge float-badge--2">
              <span className="float-badge__icon" style={{background:'rgba(22,163,74,.15)', color:'var(--good)'}}>⚡</span>
              <div>
                <div style={{fontWeight:700, fontSize:13}}>60+ hrs saved</div>
                <div style={{fontSize:11, color:'var(--ink-3)'}}>Per agency / month</div>
              </div>
            </div>
            <div className="float-badge float-badge--3">
              <span className="float-badge__icon" style={{background:'rgba(217,70,239,.15)', color:'#a21caf'}}>⭐</span>
              <div>
                <div style={{fontWeight:700, fontSize:13}}>7× more clicks</div>
                <div style={{fontSize:11, color:'var(--ink-3)'}}>Active GBPs vs idle</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="wrap">
        <div className="trust">
          <div className="trust__stat">
            <strong>13,500+</strong>
            <span>Agency owners trained</span>
          </div>
          <div className="trust__sep" />
          <div className="trust__stat">
            <strong>₹47,000</strong>
            <span>Free bonus stack</span>
          </div>
          <div className="trust__sep" />
          <div className="trust__stat">
            <strong>30 days</strong>
            <span>Avg. ROI window</span>
          </div>
          <div className="trust__sep" />
          <div className="trust__stat">
            <strong>4.9 / 5</strong>
            <span>From 1,200 reviews</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Problem(){
  const items = [
    "Hours wasted on repetitive admin tasks daily",
    "₹20K–50K/mo spent on staff doing low-value work",
    "Cannot scale without hiring more humans",
    "Messy, disconnected client communication",
    "Everything depends on one or two key people",
    "Clients churn because results take too long to show",
  ];
  return (
    <section className="section problem">
      <div className="wrap">
        <span className="section-eyebrow">The real problem</span>
        <h2 className="section-title">
          Your agency is <span className="grad-text">drowning in manual work</span> — and it's killing growth.
        </h2>
        <p className="section-sub">
          Every hour your team spends sending follow-ups, replying to reviews, or building reports is an hour they aren't winning new clients. Sound familiar?
        </p>

        <div className="problem-grid">
          {items.map((t, i) => (
            <div className="problem-card" key={i}>
              <span className="problem-card__x">×</span>
              <p>{t}</p>
            </div>
          ))}
        </div>

        <div className="problem-stats">
          <div className="stat-tile">
            <div className="stat-tile__deco" />
            <div className="stat-tile__num">60+ hrs</div>
            <div className="stat-tile__label">wasted monthly per agency on tasks AI can do in seconds</div>
          </div>
          <div className="stat-tile">
            <div className="stat-tile__deco" />
            <div className="stat-tile__num">₹50K</div>
            <div className="stat-tile__label">average monthly staff cost for work AI does at 10% of the price</div>
          </div>
          <div className="stat-tile stat-tile--grad">
            <div className="stat-tile__deco" />
            <div className="stat-tile__num">3×</div>
            <div className="stat-tile__label">faster client results when AI runs the workflow underneath</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Relate(){
  const items = [
    "Your team keeps repeating the same client tasks every day",
    "You want more revenue, but not another pile of manual ops",
    "Client results feel slow because the workflow is still human-heavy",
    "You know AI could help, but the stack feels too scattered",
    "You need a whitelabel system, not another random tool",
    "You want your brand to look premium while the backend does the heavy lifting",
  ];
  return (
    <section className="section section--tight relate">
      <div className="wrap">
        <div className="relate__panel">
          <span className="section-eyebrow">Do you relate to any of these?</span>
          <h2 className="section-title">
            Built for agencies that want <span className="grad-text">systems, speed, and scale.</span>
          </h2>
          <p className="section-sub">
            This workshop is for agency owners who want to replace repetitive work with a clean AI workflow and turn one dashboard into a real revenue engine.
          </p>

          <div className="relate-grid">
            {items.map((t, i) => (
              <div className="relate-card" key={i}>
                <span className="relate-card__dot" />
                <p>{t}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Comparison(){
  const rows = [
    { feat: 'Client onboarding time', before: '2–4 hours per client', after: '6 minutes per client' },
    { feat: 'Review management', before: 'Manual — hours every week', after: 'AI replies 24/7, instantly' },
    { feat: 'Google Posts & content', before: 'Team writes manually, ~3 hrs/week', after: 'Auto-generated & scheduled' },
    { feat: 'GBP ranking visibility', before: 'Checked monthly (if at all)', after: 'Live keyword rank dashboard' },
    { feat: 'Client reporting', before: 'Manual decks — 8 hrs/month', after: 'Auto-generated in one click' },
    { feat: 'Scalability ceiling', before: 'Must hire for every 5 clients', after: '1 person manages 50+ clients' },
    { feat: 'Revenue per client/mo', before: '₹5,000 – ₹8,000', after: '₹12,000 – ₹30,000 (AI premium)' },
    { feat: 'Brand presentation', before: 'Mixed tools visible to clients', after: '100% white-label, your brand' },
  ];
  return (
    <section className="section comparison">
      <div className="wrap">
        <span className="section-eyebrow">The transformation</span>
        <h2 className="section-title">
          What changes when you <span className="grad-text">plug in AI.</span>
        </h2>
        <p className="section-sub">
          Agencies from our last 3 cohorts report these shifts within 30 days of implementing the system they learn in this webinar.
        </p>
        <div className="comp-table-wrap">
          <table className="comp-table">
            <thead>
              <tr>
                <th className="comp-feat-head"></th>
                <th className="comp-head comp-head--before">❌ Manual Agency</th>
                <th className="comp-head comp-head--after">✅ AI-Powered Agency</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td className="comp-feat">{r.feat}</td>
                  <td className="comp-before-cell">{r.before}</td>
                  <td className="comp-after-cell">{r.after}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="comp-footnote">Learn how to make this shift — live — in 90 minutes.</p>
      </div>
    </section>
  );
}

Object.assign(window, { UrgencyBar, Nav, Hero, Problem, Relate, Comparison });