/* sections-mid.jsx — solution, learn, wins, revenue */

function Solution(){
  const features = [
    { icon: '⭐', title: 'Magic QR & AI Reviews', desc: 'Auto-collect 5★ reviews via QR. AI replies to every review in your brand voice — 24/7.' },
    { icon: '✍️', title: 'AI Content Engine', desc: 'Weekly Google Posts, captions, blog drafts written and scheduled automatically.' },
    { icon: '📸', title: 'Image & Creative Gen', desc: 'On-brand visuals for posts, offers, and seasonal campaigns — generated in seconds.' },
    { icon: '💬', title: 'Smart Scheduling', desc: 'AI books appointments, sends reminders on WhatsApp, handles reschedules without humans.' },
    { icon: '📊', title: 'Keyword Rank Tracker', desc: 'Live local-SEO ranking dashboard. Know exactly which keywords moved which clients up.' },
    { icon: '🔍', title: 'Audit & Optimize', desc: 'One-click GBP audit reveals every gap. Prioritized fix list ready to send to your client.' },
  ];
  return (
    <section className="section">
      <div className="solution wrap" style={{padding:'80px 56px'}}>
        <div style={{maxWidth: 720, margin: '0 auto 40px', textAlign: 'center'}}>
          <span className="section-eyebrow">Meet MagicBolt AI</span>
          <h2 className="section-title solution__title">
            <span className="solution__headline">One dashboard.</span>
            <span className="solution__headline">
              Every client. <span style={{color:'#fbbf24'}}>Every automation.</span>
            </span>
          </h2>
          <p className="section-sub">
            MagicBolt is the AI engine purpose-built for agencies running Google Business Profiles. Connect a client in 4 minutes — then let AI handle the rest, while you focus on selling and scaling.
          </p>
        </div>
        <div className="solution-grid">
          {features.map((f, i) => (
            <div className="feature" key={i}>
              <div className="feature__icon">{f.icon}</div>
              <h3>{f.title}</h3>
              <p>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Learn(){
  const items = [
    { tag: 'Module 01', title: 'The AI-agency playbook', desc: 'Why "more staff" is the wrong answer in 2026 — and the 5-layer automation stack replacing them.' },
    { tag: 'Module 02', title: 'Live MagicBolt walkthrough', desc: 'Watch us onboard a real GMB client end-to-end in 6 minutes. Every click, every prompt.' },
    { tag: 'Module 03', title: 'The whitelabel revenue model', desc: 'Exact pricing math: pay ₹4K, charge ₹15K, scale to ₹1L+/month recurring profit.' },
    { tag: 'Module 04', title: 'Lead gen on autopilot', desc: 'How to scrape under-optimized GBPs in your city and turn them into paid clients in 14 days.' },
    { tag: 'Module 05', title: 'Your 90-day rollout plan', desc: 'Audit → automate → scale. The exact 3-phase timeline our top whitelabel partners follow.' },
    { tag: 'Live Q&A', title: 'Ask Vijay anything', desc: '30 minutes of unfiltered Q&A. No marketing fluff — bring your hardest question.' },
  ];
  return (
    <section className="section" id="learn">
      <div className="wrap">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:24, marginBottom:8}}>
          <div style={{maxWidth:680}}>
            <span className="section-eyebrow">What you'll learn</span>
            <h2 className="section-title">
              5 modules. 1 live demo. <span className="grad-text">Zero fluff.</span>
            </h2>
            <p className="section-sub">
              We don't read slides. You'll see real screens, real client accounts, real numbers — and leave with a working playbook.
            </p>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap:20, marginTop:48}}>
          {items.map((m, i) => (
            <div className="card" key={i}>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em', color:'var(--accent-1)', fontWeight:700, marginBottom:14}}>
                {m.tag.toUpperCase()}
              </div>
              <h3>{m.title}</h3>
              <p>{m.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Takeaways(){
  const items = [
    { title: 'A cleaner agency workflow', desc: 'See how to move repetitive work into a single AI-powered system instead of juggling tools.' },
    { title: 'A live onboarding model', desc: 'Understand how a client can be connected fast, then managed from one dashboard.' },
    { title: 'A simple revenue path', desc: 'Learn how to position whitelabel AI as a premium service inside your agency.' },
  ];
  return (
    <section className="section section--tight">
      <div className="wrap">
        <span className="section-eyebrow">What you’ll leave with</span>
        <h2 className="section-title">
          Three things you can <span className="grad-text">use immediately.</span>
        </h2>
        <p className="section-sub">
          This workshop is designed to leave you with a practical framework, not just inspiration.
        </p>

        <div className="takeaways-grid">
          {items.map((item, i) => (
            <div className="takeaway-card" key={i}>
              <div className="takeaway-card__num">0{i + 1}</div>
              <h3>{item.title}</h3>
              <p>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Wins(){
  return (
    <section className="section" style={{background:'linear-gradient(180deg, #fff 0%, var(--bg) 100%)'}}>
      <div className="wrap">
        <span className="section-eyebrow">The 3 big wins</span>
        <h2 className="section-title">
          What changes in your agency, <span className="grad-text">in 30 days.</span>
        </h2>

        <div className="wins-grid">
          <div className="win">
            <div className="win__num">01</div>
            <h3>Revenue growth 📈</h3>
            <ul>
              <li>Automated lead generation running 24/7</li>
              <li>Faster lead response = higher conversion</li>
              <li>Upsell sequences on autopilot</li>
              <li>New revenue line: sell automation as a service</li>
            </ul>
          </div>
          <div className="win">
            <div className="win__num">02</div>
            <h3>Cost & time savings ⏱</h3>
            <ul>
              <li>1 person does the work of 3–4 staff</li>
              <li>Cut salary cost by 40–60% on ops</li>
              <li>Save 40–60 hours / month per account manager</li>
              <li>Tools pay for themselves in 30 days</li>
            </ul>
          </div>
          <div className="win">
            <div className="win__num">03</div>
            <h3>Better client results 🏆</h3>
            <ul>
              <li>GBP rankings move in week 2</li>
              <li>Automated reports build trust automatically</li>
              <li>Professional comms — every client, every time</li>
              <li>Happy clients stay 3× longer</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Revenue(){
  const rows = [
    { pkg: 'Starter', pay: '₹2,000', charge: '₹8,000', profit: '₹6,000' },
    { pkg: 'Growth', pay: '₹4,000', charge: '₹15,000', profit: '₹11,000' },
    { pkg: 'Enterprise', pay: '₹8,000', charge: '₹30,000', profit: '₹22,000' },
  ];
  return (
    <section className="section revenue">
      <div className="wrap">
        <span className="section-eyebrow">Whitelabel math</span>
        <h2 className="section-title">
          Turn MagicBolt into <span className="grad-text">your own SaaS</span>.
        </h2>
        <p className="section-sub">
          Rebrand with your logo, your domain, your pricing. Clients see your brand — never ours. Here's exactly what the unit economics look like:
        </p>

        <div className="rev-card">
          <table className="rev-table">
            <thead>
              <tr>
                <th>Package</th>
                <th>You pay</th>
                <th>You charge</th>
                <th>Your profit / mo</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td className="pkg-name">{r.pkg}</td>
                  <td style={{fontFamily:'var(--font-mono)', color:'var(--ink-3)'}}>{r.pay}</td>
                  <td style={{fontFamily:'var(--font-mono)'}}>{r.charge}</td>
                  <td className="profit">{r.profit}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="rev-summary">
            <div>
              <div style={{fontSize:12, fontFamily:'var(--font-mono)', opacity:.6, letterSpacing:'.12em', marginBottom:4}}>10 GROWTH CLIENTS =</div>
              <div className="rev-summary__num">
                <span>₹1,10,000 / month</span> recurring profit
              </div>
            </div>
            <div style={{fontSize:13, color:'rgba(255,255,255,.7)', maxWidth:280}}>
              💡 One whitelabel client paying ₹10K/mo covers your entire tool cost. Everything after is pure margin.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ShortsSection(){
  const [active, setActive] = React.useState(null);

  /* ── Edit video IDs & titles below ── */
  const videos = [
    { id:  1, ytId: '', title: 'Why Most Agencies Hit a Growth Wall at 20 Clients',        dur: '2:14' },
    { id:  2, ytId: '', title: 'How I Onboard a GMB Client in 6 Minutes Flat',             dur: '3:01' },
    { id:  3, ytId: '', title: 'The Whitelabel Math That Changed My Agency',                dur: '1:58' },
    { id:  4, ytId: '', title: 'One Review Strategy That 7× Our Client\'s Clicks',         dur: '2:32' },
    { id:  5, ytId: '', title: 'How to Scrape 200 Local Business Leads in 10 Minutes',     dur: '2:47' },
    { id:  6, ytId: '', title: 'Why Your Team\'s Biggest Cost Is Repetitive Tasks',        dur: '1:44' },
    { id:  7, ytId: '', title: 'The AI Posting System That Kills Manual Content Work',     dur: '2:19' },
    { id:  8, ytId: '', title: 'Automated Reports That Retain Clients 3× Longer',          dur: '2:55' },
    { id:  9, ytId: '', title: 'Pricing Your AI Service at ₹15K–₹30K/Month',              dur: '3:10' },
    { id: 10, ytId: '', title: 'How to Close Your First Whitelabel Client in 14 Days',     dur: '2:38' },
    { id: 11, ytId: '', title: 'The GBP Audit Deck That Lands ₹15K Retainers',            dur: '1:52' },
    { id: 12, ytId: '', title: 'What Happens to Agency Revenue After AI',                  dur: '2:06' },
  ];

  const gradients = [
    'linear-gradient(135deg,#6d28d9,#c026d3)',
    'linear-gradient(135deg,#d946ef,#f97316)',
    'linear-gradient(135deg,#0ea5e9,#6d28d9)',
    'linear-gradient(135deg,#f97316,#fbbf24)',
    'linear-gradient(135deg,#10b981,#0ea5e9)',
    'linear-gradient(135deg,#6d28d9,#0ea5e9)',
    'linear-gradient(135deg,#c026d3,#f97316)',
    'linear-gradient(135deg,#f59e0b,#f97316)',
    'linear-gradient(135deg,#8b5cf6,#d946ef)',
    'linear-gradient(135deg,#0ea5e9,#10b981)',
    'linear-gradient(135deg,#f97316,#dc2626)',
    'linear-gradient(135deg,#6d28d9,#f59e0b)',
  ];

  const open  = (v) => setActive(v);
  const close = () => setActive(null);

  const thumb = (v) =>
    v.ytId
      ? `https://img.youtube.com/vi/${v.ytId}/mqdefault.jpg`
      : null;

  return (
    <section className="section shorts-section">
      <div className="wrap">
        <span className="section-eyebrow">Watch before you decide</span>
        <h2 className="section-title">
          12 short lessons. <span className="grad-text">Zero fluff.</span>
        </h2>
        <p className="section-sub">
          Each clip is under 3 minutes — pulled straight from Vijay's live sessions. Watch a few and you'll know instantly if the webinar is for you.
        </p>

        <div className="shorts-grid">
          {videos.map((v, i) => (
            <button className="short-card" key={v.id} onClick={() => open(v)} aria-label={`Play: ${v.title}`}>
              <div className="short-card__thumb" style={{background: thumb(v) ? undefined : gradients[i]}}>
                {thumb(v)
                  ? <img src={thumb(v)} alt={v.title} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}} />
                  : <span className="short-card__num">0{v.id < 10 ? '' : ''}{v.id}</span>
                }
                <div className="short-card__play-wrap">
                  <span className="short-card__play"><Icon.Play /></span>
                </div>
                <span className="short-card__dur">{v.dur}</span>
              </div>
              <div className="short-card__body">
                <p className="short-card__title">{v.title}</p>
              </div>
            </button>
          ))}
        </div>
      </div>

      {active && (
        <div className="modal-overlay" onClick={close}>
          <div className="shorts-modal" onClick={(e) => e.stopPropagation()}>
            <button className="modal__close" onClick={close} aria-label="Close"><Icon.X width="16" height="16" /></button>
            <p className="shorts-modal__title">{active.title}</p>
            <div className="shorts-modal__player">
              {active.ytId
                ? <iframe
                    src={`https://www.youtube.com/embed/${active.ytId}?autoplay=1`}
                    title={active.title}
                    allow="autoplay; encrypted-media"
                    allowFullScreen
                    style={{position:'absolute',inset:0,width:'100%',height:'100%',border:0}}
                  />
                : <div style={{position:'absolute',inset:0,display:'grid',placeItems:'center',background:'#1a1326',color:'rgba(255,255,255,.5)',fontFamily:'var(--font-mono)',fontSize:13}}>
                    Video coming soon — add your YouTube ID to ShortsSection in sections-mid.jsx
                  </div>
              }
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

function Agenda(){
  const slots = [
    { time: '0:00', label: '15 min', title: 'The Agency Growth Problem', desc: 'Why most agencies plateau — and the one mindset shift that unlocks everything in 2026.', badge: 'Opener', color: '#6d28d9' },
    { time: '0:15', label: '20 min', title: 'MagicBolt Live Demo', desc: 'Watch us onboard a real GMB client end-to-end. Every click, every automation, every result — live on screen.', badge: 'Must See', color: '#d946ef' },
    { time: '0:35', label: '15 min', title: 'The Whitelabel Revenue Blueprint', desc: 'Exact margin math, pricing tiers, and how to position AI as a premium, high-ticket service.', badge: 'Revenue', color: '#f97316' },
    { time: '0:50', label: '15 min', title: 'Lead Gen & Client Acquisition', desc: 'The local GMB scraping strategy that converts cold prospects into paying clients within 14 days.', badge: 'Growth', color: '#10b981' },
    { time: '1:05', label: '15 min', title: 'Your 90-Day Rollout Plan', desc: 'Audit → automate → scale. The exact 3-phase timeline our top whitelabel partners follow after joining.', badge: 'Action Plan', color: '#0ea5e9' },
    { time: '1:20', label: '30 min', title: 'Live Q&A with Vijay', desc: 'Unfiltered Q&A. No pre-screened questions. Ask about pricing, clients, objections, or scaling — anything.', badge: 'Live Q&A', color: '#f59e0b' },
  ];
  return (
    <section className="section section--tight agenda">
      <div className="wrap">
        <span className="section-eyebrow">90-minute agenda</span>
        <h2 className="section-title">
          Exactly what happens, <span className="grad-text">minute by minute.</span>
        </h2>
        <p className="section-sub">
          No vague "we'll cover everything." Here's the precise breakdown — so you know exactly what you're signing up for.
        </p>
        <div className="agenda-list">
          {slots.map((slot, i) => (
            <div className="agenda-item" key={i}>
              <div className="agenda-time">
                <span className="agenda-time__val">{slot.time}</span>
                <span className="agenda-time__dur">{slot.label}</span>
              </div>
              <div className="agenda-line">
                <div className="agenda-dot" style={{background: slot.color, boxShadow: `0 0 0 4px ${slot.color}22`}} />
                {i < slots.length - 1 && <div className="agenda-connector" />}
              </div>
              <div className="agenda-content">
                <div style={{display:'flex', alignItems:'center', gap:10, flexWrap:'wrap', marginBottom:6}}>
                  <h3 className="agenda-content__title">{slot.title}</h3>
                  <span className="agenda-badge" style={{background:`${slot.color}18`, color:slot.color, border:`1px solid ${slot.color}38`}}>{slot.badge}</span>
                </div>
                <p className="agenda-content__desc">{slot.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials(){
  const items = [
    {
      name: 'Rohan Mehta',
      role: 'Digital Agency Owner, Pune',
      initials: 'RM',
      color: '#6d28d9',
      text: 'Attended Vijay\'s webinar skeptically. Within 2 weeks of implementing MagicBolt, I onboarded 3 restaurant clients at ₹12K/mo each. The live demo alone convinced me.',
      result: '+₹36K MRR in 2 weeks',
    },
    {
      name: 'Priya Nair',
      role: 'SEO Consultant, Bangalore',
      initials: 'PN',
      color: '#d946ef',
      text: 'The whitelabel revenue math was eye-opening. I was charging ₹7K per client. After restructuring with MagicBolt, I charge ₹18K — and deliver far better results.',
      result: 'Scaled from 8 → 22 clients',
    },
    {
      name: 'Karan Sharma',
      role: 'Marketing Agency, Delhi',
      initials: 'KS',
      color: '#f97316',
      text: 'My team was burning 3 hours daily on manual review replies and post scheduling. MagicBolt automated everything. We cut ops cost by ₹30K/month and rankings improved.',
      result: '₹30K/mo cost savings',
    },
    {
      name: 'Anita Desai',
      role: 'Local SEO Agency, Ahmedabad',
      initials: 'AD',
      color: '#0ea5e9',
      text: 'The whitelabel setup is flawless. My clients only see "Desai Digital" everywhere. I\'m charging premium rates and clients think I built this technology myself.',
      result: 'Revenue up 3× per client',
    },
    {
      name: 'Suresh Kumar',
      role: 'Agency Owner, Chennai',
      initials: 'SK',
      color: '#10b981',
      text: 'I was managing 15 GMB clients manually and burning out. Implemented the AI workflow from the webinar, added 8 more clients — without a single new hire.',
      result: '8 new clients, 0 new hires',
    },
    {
      name: 'Deepika Patel',
      role: 'Performance Marketing, Mumbai',
      initials: 'DP',
      color: '#f59e0b',
      text: 'Vijay\'s lead gen strategy alone was worth the entire 90 minutes. I scraped 200 under-optimized GMBs in my city and converted 6 into paying clients in 3 weeks.',
      result: '6 new clients in 3 weeks',
    },
  ];
  return (
    <section className="section testimonials">
      <div className="wrap">
        <span className="section-eyebrow">Real agency owners</span>
        <h2 className="section-title">
          They attended. <span className="grad-text">Here's what happened.</span>
        </h2>
        <p className="section-sub">
          From the last 3 webinar cohorts. Real names, real cities, real numbers — not fabricated marketing copy.
        </p>
        <div className="testi-grid">
          {items.map((t, i) => (
            <div className="testi-card" key={i}>
              <div className="testi-stars">★★★★★</div>
              <p className="testi-quote">"{t.text}"</p>
              <div className="testi-result">{t.result}</div>
              <div className="testi-author">
                <div className="testi-avatar" style={{background:t.color}}>{t.initials}</div>
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Solution, Learn, Takeaways, Wins, Revenue, Agenda, Testimonials, ShortsSection });