/* sections-bottom.jsx — offer, speaker, industries, faq, final cta */

function Offer({ onCta }){
  const webinarDate = window.WEBINAR_DATE || 'Saturday, May 17, 5:00 PM IST';
  const bonuses = [
    { icon: '🚀', title: 'Whitelabel SaaS Setup', desc: 'Done-for-you brand, domain, payment integration', value: '₹15,000' },
    { icon: '🎁', title: '7-Day Free MagicBolt Trial', desc: 'Full platform access. No credit card needed.', value: '₹3,000' },
    { icon: '📋', title: 'GBP Audit Report Template', desc: 'The exact deck we use to land ₹15K/mo retainers', value: '₹5,000' },
    { icon: '🤖', title: 'Lead Gen Workflow Templates', desc: '5 plug-and-play automations ready in MagicBolt', value: '₹8,000' },
    { icon: '📞', title: '1-on-1 Onboarding Call', desc: '30-min strategy session with our growth team', value: '₹6,000' },
    { icon: '👥', title: 'Private WhatsApp Community', desc: '500+ agency owners scaling with AI', value: '₹10,000' },
  ];
  return (
    <section className="section">
      <div className="offer wrap" style={{padding:'80px 56px'}}>
        <div className="offer__inner">
          <div>
            <span className="section-eyebrow">Webinar-only offer</span>
            <h2>Show up live. Walk away with <span style={{background:'var(--grad-warm)', WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent'}}>₹47,000 in bonuses.</span></h2>
            <p style={{color:'rgba(255,255,255,.75)', fontSize:17, maxWidth:480}}>
              These bonuses are only for people who attend live. They expire when the webinar ends. No replays, no refunds, no exceptions.
            </p>
            <div className="offer__price">
              <span className="offer__price__strike">₹47,000</span>
              <span className="offer__price__now">FREE</span>
            </div>
            <div className="offer__price__sub">For attendees of the {webinarDate} live session only.</div>
            <button className="btn btn--primary btn--xl" onClick={onCta} style={{marginTop:28}}>
              <Icon.Sparkle width="20" height="20" /> Join for FREE
            </button>
          </div>

          <ul className="bonus-list">
            {bonuses.map((b, i) => (
              <li className="bonus-item" key={i}>
                <span className="bonus-item__icon">{b.icon}</span>
                <div style={{flex:1, minWidth:0}}>
                  <div className="bonus-item__title">{b.title}</div>
                  <div className="bonus-item__desc">{b.desc}</div>
                </div>
                <span className="bonus-item__value">{b.value}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function Speaker(){
  return (
    <section className="section">
      <div className="wrap">
        <div className="speaker">
          <div className="speaker-photo">
            <img src="assets/vijay.jpg" alt="Vijay Anand" style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover'}} />
            <div className="speaker-photo__badge" style={{zIndex:2}}>
              <div>
                <strong>Vijay Anand</strong>
                <div><span>Founder, MagicBolt AI</span></div>
              </div>
              <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--accent-1)', fontWeight:700}}>SPEAKER</span>
            </div>
          </div>

          <div>
            <span className="section-eyebrow">Your host</span>
            <h2 className="section-title" style={{fontSize:'clamp(36px, 4.4vw, 52px)'}}>
              Built MagicBolt for the agency he wished <span className="grad-text">he had ten years ago.</span>
            </h2>
            <div className="speaker__chips">
              <span className="chip"><span className="chip__dot" /> 12+ yrs in digital marketing</span>
              <span className="chip"><span className="chip__dot" /> Scaled 3 agencies past ₹1Cr ARR</span>
              <span className="chip"><span className="chip__dot" /> 13,500+ founders trained</span>
              <span className="chip"><span className="chip__dot" /> Featured in YourStory, Inc42</span>
            </div>
            <p style={{fontSize:17, color:'var(--ink-2)', marginBottom:0}}>
              Vijay started his first agency at 24 — and quickly hit the same wall every agency owner hits: every new client meant more staff, more chaos, and shrinking margins. After three years building automation tools internally, he realized the system was the product. MagicBolt is the result: an AI platform that gives agencies the leverage of a 30-person team — without hiring a single one.
            </p>
            <blockquote>
              "Most agencies don't have a marketing problem. They have an operations problem. AI fixes operations — then growth takes care of itself."
            </blockquote>
          </div>
        </div>
      </div>
    </section>
  );
}

function Industries(){
  const items = [
    { e: '🏨', n: 'Hotels & Resorts' },
    { e: '🍽️', n: 'Restaurants & Cafés' },
    { e: '💇', n: 'Salons & Spas' },
    { e: '🛍️', n: 'Retail & Boutiques' },
    { e: '🦷', n: 'Dental & Clinics' },
    { e: '🏥', n: 'Hospitals & Pharma' },
    { e: '🎓', n: 'Coaching Institutes' },
    { e: '🚚', n: 'Logistics & Travel' },
  ];
  return (
    <section className="section" style={{background:'linear-gradient(180deg, var(--bg) 0%, #fff 100%)'}}>
      <div className="wrap">
        <span className="section-eyebrow">Who's it for</span>
        <h2 className="section-title">
          If your client is on Google, <span className="grad-text">MagicBolt works for them.</span>
        </h2>
        <p className="section-sub">
          Any local business with a Google Business Profile. We've onboarded agencies serving every category below — and a few you wouldn't expect.
        </p>

        <div className="industries-grid">
          {items.map((it, i) => (
            <div className="ind-card" key={i}>
              <div className="ind-card__emoji">{it.e}</div>
              <div className="ind-card__name">{it.n}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhoFor(){
  const forItems = [
    "You run a digital, SEO, or marketing agency serving local businesses",
    "You already manage (or want to manage) Google Business Profiles",
    "You want to scale revenue without growing your headcount",
    "You want a white-label SaaS income stream under your own brand",
    "You're frustrated by the hours your team burns on repetitive tasks",
    "You want to deliver faster client results and retain them 3× longer",
  ];
  const notForItems = [
    "Solo freelancers with no plan or desire to build a team or scale",
    "Agencies with zero interest in AI or systems-based growth",
    "People who expect overnight results with zero implementation work",
    "Large enterprise brands already managing their own GMBs in-house",
  ];
  return (
    <section className="section section--tight whofor">
      <div className="wrap">
        <span className="section-eyebrow">Right fit check</span>
        <h2 className="section-title">
          Is this webinar <span className="grad-text">right for you?</span>
        </h2>
        <p className="section-sub">
          We cap this session at 100 seats so every attendee gets real value. Take 30 seconds to see if you're the right fit.
        </p>
        <div className="whofor-grid">
          <div className="whofor-card whofor-card--yes">
            <div className="whofor-card__header">
              <span className="whofor-icon whofor-icon--yes">✓</span>
              <h3>This IS for you if…</h3>
            </div>
            <ul>
              {forItems.map((item, i) => (
                <li key={i}>
                  <span className="whofor-dot whofor-dot--yes" />
                  {item}
                </li>
              ))}
            </ul>
          </div>
          <div className="whofor-card whofor-card--no">
            <div className="whofor-card__header">
              <span className="whofor-icon whofor-icon--no">×</span>
              <h3>This is NOT for you if…</h3>
            </div>
            <ul>
              {notForItems.map((item, i) => (
                <li key={i}>
                  <span className="whofor-dot whofor-dot--no" />
                  {item}
                </li>
              ))}
            </ul>
            <div className="whofor-note">
              We'd rather have 80 right-fit attendees than 100 wrong ones. Specificity is how we respect your time.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Faq(){
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'Is this actually free? What\'s the catch?', a: 'Yes — 100% free. The catch: we know about 4–6% of attendees love MagicBolt enough to start a paid plan after the demo. That math works for us, so the training stays free.' },
    { q: 'Will there be a replay?', a: 'No. The webinar is live-only and the ₹47K bonus stack expires when we close the call. We do this on purpose — show up live or miss out.' },
    { q: 'Do I need technical skills to use MagicBolt?', a: 'If you can use WhatsApp, you can use MagicBolt. Every workflow is template-first. We also offer done-for-you onboarding for whitelabel partners.' },
    { q: 'Will AI replace my team?', a: 'No — it frees them from boring work so they can focus on growth. Most of our agencies redeploy ops staff into client success and sales.' },
    { q: 'What if my clients find out I\'m using AI?', a: 'AI is now a competitive advantage. Clients love faster, smarter service. Plus, with whitelabel they only ever see your brand.' },
    { q: 'How long does setup take?', a: 'Whitelabel setup: under 24 hours. Onboarding your first client: 6 minutes start to finish. We\'ll show this live.' },
    { q: 'I\'ve tried automation tools before — they failed.', a: 'Most tools fail because they ship software without strategy. MagicBolt comes with the agency playbook — the SOPs, the pricing, the templates. You\'re not buying a tool, you\'re buying a model.' },
    { q: 'What if I can\'t make it live?', a: 'Reschedule to the next session free of charge — but you\'ll lose the bonus stack. The bonuses are exclusively for live attendees.' },
  ];
  return (
    <section className="section">
      <div className="wrap" style={{maxWidth:880}}>
        <span className="section-eyebrow">FAQ</span>
        <h2 className="section-title">
          Ask anything. <span className="grad-text">No fluff answers.</span>
        </h2>

        <div className="faq-list">
          {items.map((f, i) => (
            <div className={`faq-item ${open === i ? 'faq-item--open' : ''}`} key={i}>
              <button className="faq-item__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-item__plus"><Icon.Plus width="16" height="16" /></span>
              </button>
              <div className="faq-item__a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCta({ onCta, target }){
  const webinarDate = window.WEBINAR_DATE || 'Saturday, May 17, 5:00 PM IST';
  return (
    <section className="final-cta">
      <div className="final-cta__bg" />
      <div className="final-cta__inner">
        <span className="section-eyebrow">Your move</span>
        <h2>
          Every day you wait is another day your <span className="grad-text">competitor gets ahead.</span>
        </h2>
        <p>
          You've seen the problem. You've seen the solution. The only bad decision left is no decision.
        </p>
        <button className="btn btn--primary btn--xl" onClick={onCta}>
          <Icon.Sparkle width="20" height="20" /> Join for FREE
        </button>
        <div className="fci-row">
          <div className="fci-chip">
            <span className="fci-live-dot" />
            <span>LIVE · {webinarDate}</span>
          </div>
          <div className="fci-chip fci-chip--fire">
            <span>🔥</span>
            <span>Only <strong>23 seats</strong> left</span>
          </div>
          <div className="fci-chip fci-chip--gift">
            <span>🎁</span>
            <span>₹47K bonus stack — live attendees only</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer className="footer">
      <div className="wrap">
        © 2026 MagicBolt AI · Built for agencies, by agencies · <a href="#" style={{color:'var(--accent-1)'}}>Privacy</a> · <a href="#" style={{color:'var(--accent-1)'}}>Terms</a>
      </div>
    </footer>
  );
}

function StickyCta({ visible, onCta, target }){
  const { d, h, m, s } = useCountdown(target);
  return (
    <div className={`sticky-cta ${visible ? 'sticky-cta--visible' : ''}`}>
      <div className="sticky-cta__inner">

        {/* Scarcity */}
        <div className="sca-left">
          <div className="sca-badge">⚡ FILLING FAST</div>
          <div className="sca-text">
            <span className="sca-seats">🔥 Only <strong>23 seats</strong> left of 100</span>
            <div className="sca-bar"><div className="sca-bar__fill" /></div>
          </div>
          <span className="sca-mobile-cd">{d}d {h}h {m}m left</span>
        </div>

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

        {/* CTA */}
        <button className="sca-btn" onClick={onCta}>
          <Icon.Sparkle width="17" height="17" />
          Claim Free Seat
          <Icon.ArrowRight width="15" height="15" />
        </button>

      </div>
    </div>
  );
}

Object.assign(window, { Offer, Speaker, Industries, Faq, FinalCta, Footer, StickyCta, WhoFor });