/* sections-suite.jsx — All-in-One WhiteLabel Business Suite */

/* deterministic QR-like dot pattern (7×7) */
const QR_PAT = [
  1,1,1,0,1,1,1,
  1,0,1,0,1,0,1,
  1,1,1,1,1,1,1,
  0,0,1,0,0,0,0,
  1,1,1,0,0,1,0,
  0,1,0,0,1,0,1,
  1,0,0,0,1,1,1,
];

function SuiteMockup({ cardKey, accent }){

  if(cardKey === 'gbp') return (
    <div className="smock smock-gbp">
      <div className="smock-topbar">
        <div className="smock-g" style={{background:accent}}>G</div>
        <div>
          <div className="smock-topbar__name">Business Profile</div>
          <div className="smock-topbar__status" style={{color:accent}}>● Verified · Active</div>
        </div>
      </div>
      <div className="smock-stats">
        {[['1.2K','Views'],['48','Calls'],['23','Routes']].map(([v,l],i)=>(
          <div className="smock-stat" key={i}>
            <div className="smock-stat__v" style={{color:accent}}>{v}</div>
            <div className="smock-stat__l">{l}</div>
          </div>
        ))}
      </div>
      <div className="smock-chart">
        {[45,68,52,80,60,90,72].map((h,i)=>(
          <div key={i} className="smock-bar" style={{height:h+'%',background:accent,opacity:.6+i*.05}} />
        ))}
      </div>
      <div className="smock-row">
        <span style={{color:'#f59e0b',fontSize:11}}>★★★★★</span>
        <span style={{color:accent,fontWeight:700,fontSize:11}}>4.8</span>
        <span style={{fontSize:10,color:'#7a6c89'}}>142 reviews</span>
      </div>
      <div className="smock-tag" style={{background:accent+'22',color:accent,border:`1px solid ${accent}44`}}>
        ✓ Auto Post Scheduled Today
      </div>
    </div>
  );

  if(cardKey === 'qr') return (
    <div className="smock smock-qr">
      <div className="smock-qr__left">
        <div className="smock-qr__grid">
          {QR_PAT.map((on,i)=>(
            <div key={i} className="smock-qr__dot" style={{background:on?accent:'transparent'}} />
          ))}
        </div>
        <div style={{fontSize:8,fontWeight:700,color:accent,textAlign:'center',marginTop:4}}>magicbolt.ai</div>
      </div>
      <div className="smock-qr__right">
        <div style={{fontSize:11,fontWeight:700,color:'#1a1326'}}>Scan to Review</div>
        <div style={{color:'#f59e0b',fontSize:15,letterSpacing:1}}>★★★★★</div>
        <div className="smock-ai-pill" style={{background:accent+'22',color:accent}}>
          <span className="smock-ai-dot" style={{background:accent}} />AI Writing...
        </div>
        <div className="smock-progress">
          <div className="smock-progress__fill" style={{background:accent}} />
        </div>
        <div className="smock-tag" style={{background:accent+'22',color:accent,border:`1px solid ${accent}44`}}>
          +12 Reviews This Week
        </div>
      </div>
    </div>
  );

  if(cardKey === 'card') return (
    <div className="smock smock-vcard">
      <div className="smock-vc__banner" style={{background:`linear-gradient(135deg,${accent}55,${accent}20)`}}>
        <div className="smock-vc__avatar" style={{background:accent}}>VA</div>
      </div>
      <div className="smock-vc__info">
        <div style={{fontSize:12,fontWeight:800,color:'#1a1326'}}>Vijay Anand</div>
        <div style={{fontSize:9,color:'#7a6c89',marginTop:1}}>Founder · MagicBolt AI</div>
      </div>
      <div className="smock-vc__actions">
        <div className="smock-vc__btn" style={{background:'#25d366'}}>WA</div>
        <div className="smock-vc__btn" style={{background:accent}}>📞</div>
        <div className="smock-vc__btn" style={{background:'rgba(0,0,0,.08)',color:'#4a3a5a'}}>✉</div>
      </div>
      <div className="smock-vc__save" style={{background:accent}}>+ Save Contact</div>
      <div className="smock-vc__socials">
        {['in','tw','ig','yt'].map(s=>(
          <div key={s} className="smock-social" style={{background:accent+'28',color:accent}}>{s}</div>
        ))}
      </div>
    </div>
  );

  if(cardKey === 'web') return (
    <div className="smock smock-web">
      <div className="smock-web__bar">
        <div className="smock-web__dots">
          <span style={{background:'#ef4444'}} />
          <span style={{background:'#fbbf24'}} />
          <span style={{background:'#22c55e'}} />
        </div>
        <div className="smock-web__url">magicbolt.ai/site</div>
      </div>
      <div className="smock-web__hero" style={{background:`linear-gradient(135deg,${accent}28,${accent}0e)`}}>
        <div className="smock-web__line" style={{background:accent+'cc',width:'55%'}} />
        <div className="smock-web__line" style={{background:'rgba(0,0,0,.12)',width:'35%',marginTop:4}} />
        <div className="smock-web__cta" style={{background:accent}}>Get Started</div>
      </div>
      <div className="smock-web__blocks">
        {[[80,'30'],[55,'18'],[70,'28'],[45,'18']].map(([w,op],i)=>(
          <div key={i} className="smock-web__block" style={{width:w+'%',background:accent+op}} />
        ))}
      </div>
      <div className="smock-web__tags">
        {['SEO ✓','Mobile ✓','Fast ✓'].map((t,i)=>(
          <span key={i} className="smock-web__tag" style={{background:accent+'20',color:accent,border:`1px solid ${accent}35`}}>{t}</span>
        ))}
      </div>
    </div>
  );

  return null;
}

function AllInOneSuite({ onCta }){
  const cards = [
    {
      key: 'gbp', accent: '#10b981', glow: 'rgba(16,185,129,.4)',
      title: 'Google Business Profile Automation',
      desc: 'Automate your Google Business Profile growth with smart posting, review management, and business insights.',
      features: ['Auto Posts','Review Automation','Profile Insights','Reputation Growth'],
    },
    {
      key: 'qr', accent: '#f97316', glow: 'rgba(249,115,22,.4)',
      title: 'Magic QR + AI Reviews',
      desc: 'Generate more customer reviews and engagement using smart QR technology and AI-powered feedback tools.',
      features: ['Smart QR Codes','AI Review System','Review Collection','Customer Engagement'],
    },
    {
      key: 'card', accent: '#a78bfa', glow: 'rgba(167,139,250,.4)',
      title: 'Digital Business Card',
      desc: 'Share professional digital business cards instantly with one-click contact saving and social integration.',
      features: ['Smart VCard','One-Tap Save','WhatsApp Integration','Social Sharing'],
    },
    {
      key: 'web', accent: '#38bdf8', glow: 'rgba(56,189,248,.4)',
      title: 'Instant Website Builder',
      desc: 'Launch stunning business websites instantly with responsive design and SEO-ready templates.',
      features: ['Mobile Responsive','SEO Ready','Fast Loading','Instant Setup'],
    },
  ];

  return (
    <section className="suite">
      <div className="suite-orb suite-orb--1" />
      <div className="suite-orb suite-orb--2" />
      <div className="suite-orb suite-orb--3" />

      <div className="wrap suite__inner">

        {/* Header */}
        <div className="suite-hdr">
          <div className="suite-badge">
            <span className="suite-badge__dot" />
            ONE SUBSCRIPTION · ALL FEATURES INCLUDED
          </div>
          <h2 className="suite-heading">
            ALL-IN-ONE <span className="suite-grad">WHITE-LABEL</span><br />BUSINESS SUITE
          </h2>
          <p className="suite-sub">Get 4 Powerful Business Tools In One Subscription</p>
        </div>

        {/* Feature Cards */}
        <div className="suite-grid">
          {cards.map(c => (
            <div className="suite-card" key={c.key} style={{'--ca':c.accent,'--cg':c.glow}}>
              <div className="suite-card__mock">
                <SuiteMockup cardKey={c.key} accent={c.accent} />
              </div>
              <div className="suite-card__body">
                <h3 className="suite-card__title" style={{color:c.accent}}>{c.title}</h3>
                <p className="suite-card__desc">{c.desc}</p>
                <ul className="suite-card__feats">
                  {c.features.map((f,i) => (
                    <li key={i}><span style={{color:c.accent}}>✔</span> {f}</li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom CTA Banner */}
        <div className="suite-banner">
          <div className="suite-banner__orb-l" />
          <div className="suite-banner__orb-r" />
          <div className="suite-banner__inner">
            <div className="suite-banner__label">ALL FEATURES INCLUDED IN ONE PLAN</div>
            <p className="suite-banner__sub">No Need To Buy Multiple Tools Separately</p>
            <button className="suite-banner__btn" onClick={onCta}>
              START YOUR WHITE-LABEL BUSINESS →
            </button>
            <p className="suite-banner__note">Perfect For Agencies, Freelancers &amp; Resellers</p>
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { AllInOneSuite });