const GMCPage = ({ navigate }) => {
  const process = [
    { step: '01', icon: 'eye', title: 'Free Audit', desc: 'We review your website and GMC account, identify all compliance issues and build a full action plan.' },
    { step: '02', icon: 'gear', title: 'Full Optimisation', desc: 'We fix every policy violation, from product data to website requirements, ensuring complete Google compliance.' },
    { step: '03', icon: 'file', title: 'Submission', desc: 'We submit through the correct channels with supporting documentation to maximise approval speed.' },
    { step: '04', icon: 'award', title: 'Approval & Handover', desc: 'You receive a fully approved GMC with a compliance report and recommendations to stay approved long-term.' },
  ];

  const features = [
    { icon: 'award', title: '100% Success Rate', desc: "We've never failed to get a GMC approved. Backed by our no cure, no pay guarantee. Always." },
    { icon: 'zap', title: '5-10 Day Approval', desc: 'Most clients are approved within 5-10 business days through our streamlined, proven process.' },
    { icon: 'book', title: 'Policy Experts', desc: "Deep knowledge of Google's ever-changing policies ensures you stay compliant long-term." },
    { icon: 'chat', title: '24/7 WhatsApp Support', desc: 'Direct access to our team around the clock. No ticket queues, no waiting.' },
    { icon: 'refresh', title: 'Suspension Specialists', desc: 'Even the trickiest misrepresentation suspensions resolved. Suspended Thursday, live Friday.' },
    { icon: 'shield', title: 'Complete Compliance', desc: 'Feed setup, website policy pages, submission and post-approval monitoring. End-to-end.' },
  ];

  const faqItems = [
    { q: 'What is your success rate for GMC approvals?', a: '100%. We have never failed to get a Google Merchant Center account approved. Our thorough process addresses every compliance requirement before submission, which is why we can offer our no cure, no pay guarantee.' },
    { q: 'How long does the GMC approval process take?', a: 'Most clients receive approval within 5-10 business days. Complex cases may take slightly longer, but we keep you updated throughout. Our fastest approval was same-day.' },
    { q: 'What if my GMC has been suspended for misrepresentation?', a: 'Misrepresentation is one of the hardest suspensions to resolve, but we specialise in it. One of our recent clients was suspended on a Thursday and live again by Friday. We have a 100% reinstatement rate.' },
    { q: 'Do you offer a no cure, no pay guarantee?', a: 'Yes. If we cannot get your GMC approved or reinstated, you pay nothing. This guarantee applies to all our services.' },
    { q: "What's included in the GMC approval service?", a: 'Everything: initial audit, full policy compliance fixes, product feed setup and optimisation, website compliance review, submission support, and a post-approval monitoring period.' },
    { q: 'Can you work with existing or new GMC accounts?', a: 'Both. We work with brand new setups, accounts that have been rejected, and fully suspended accounts. Whatever your situation, we have the track record to get you approved.' },
  ];

  const pricing = [
    { icon: 'check', name: 'GMC Approval', price: '€949', period: 'one-time', desc: 'Complete setup and guaranteed approval in 5-10 business days. No cure, no pay.', features: ['Full compliance audit','Policy violation fixes','Product feed setup','Website compliance review','Submission & follow-up','30-day post-approval monitoring'], highlight: false },
    { icon: 'eye', name: 'Monitoring & Maintenance', price: '€250', period: '/month', desc: '24/7 proactive monitoring to keep your GMC compliant and prevent costly suspensions.', features: ['Daily compliance checks','Feed quality monitoring','Policy update alerts','Instant issue resolution','WhatsApp support','Monthly compliance report'], highlight: true, badge: 'Most Popular' },
    { icon: 'refresh', name: 'Suspension Recovery', price: '€1,250', period: 'one-time', desc: 'Full reinstatement for any suspension. No cure, no pay guarantee.', features: ['Suspension cause analysis','Full compliance overhaul','Appeal preparation','Google liaison support','Reinstatement tracking','30-day post-recovery monitoring'], highlight: false },
  ];

  return (
    <div className="page-wrap">
      {/* Hero */}
      <section style={{ background: 'linear-gradient(160deg,#f0fdf4 0%,white 55%)', padding: '96px 32px 80px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -60, right: -60, width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,0.09) 0%,transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <div style={{ marginBottom: 20 }}><Badge>Google Merchant Center Services</Badge></div>
          <h1 style={{ fontSize: 56, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.08, marginBottom: 10 }}>Guaranteed GMC Approval,<br /><span style={{ color: '#10b981' }}>Every Single Time</span></h1>
          <p style={{ fontSize: 18, color: '#64748b', lineHeight: 1.7, marginBottom: 40, maxWidth: 580, margin: '18px auto 40px' }}>The only GMC approval service with a 100% success rate across 75+ accounts. No cure, no pay. No excuses.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn size="lg" onClick={() => navigate('contact')}>Get GMC Approved, €949</Btn>
            <Btn size="lg" variant="calendly" href="https://calendly.com/etherealsolutions/30min"><Ic name="calendar" size={16} color="white" /> Book Free Strategy Call</Btn>
            <Btn size="lg" variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={16} color="white" /> Ask a Question</Btn>
          </div>
          <div className="hero-stats-row" style={{ display: 'flex', gap: 0, justifyContent: 'center', marginTop: 56 }}>
            {[['75+','GMCs Approved'],['100%','Success Rate'],['5–10 days','Avg. Turnaround'],['21','Trustpilot Reviews']].map(([v,l], i) => (
              <div key={l} className="hero-stat-item" style={{ textAlign: 'center', padding: '0 28px', borderRight: i < 3 ? '1px solid #e2e8f0' : 'none' }}>
                <div style={{ fontSize: 28, fontWeight: 900, color: '#10b981' }}>{v}</div>
                <div style={{ fontSize: 12, color: '#94a3b8', marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionHeader badge="Our Process" title="From Rejected to Approved in 4 Steps" sub="A clear, proven process that removes guesswork and delivers results every time." />
          <div className="four-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18, position: 'relative' }}>
            <div style={{ position: 'absolute', top: 40, left: '12.5%', right: '12.5%', height: 2, background: 'linear-gradient(90deg,#10b981,#059669)', zIndex: 0, opacity: 0.4 }} />
            {process.map((p, i) => (
              <div key={p.step} style={{ background: i % 2 === 0 ? '#f8fafc' : 'white', borderRadius: 20, padding: '32px 24px', border: '1px solid #e2e8f0', position: 'relative', zIndex: 1, textAlign: 'center' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'linear-gradient(135deg,#059669,#10b981)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px', boxShadow: '0 8px 24px rgba(5,150,105,0.3)' }}>
                  <span style={{ color: 'white', fontWeight: 900, fontSize: 17 }}>{p.step}</span>
                </div>
                <IcBox icon={p.icon} size={40} />
                <div style={{ fontWeight: 800, fontSize: 16, color: '#0a0f1e', marginTop: 14, marginBottom: 9 }}>{p.title}</div>
                <div style={{ fontSize: 13, color: '#64748b', lineHeight: 1.65 }}>{p.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section style={{ padding: '96px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionHeader badge="What You Get" title="Everything You Need to Get Approved" />
          <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
            {features.map(f => <FeatureCard key={f.title} {...f} />)}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1050, margin: '0 auto' }}>
          <SectionHeader badge="Pricing" title="Simple, Transparent Pricing" sub="No hidden fees. No retainers. Pay only when we deliver." />
          <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
            {pricing.map(p => (
              <div key={p.name} style={{ borderRadius: 22, padding: '36px 28px', background: p.highlight ? 'linear-gradient(155deg,#0a0f1e,#052e16)' : 'white', boxShadow: p.highlight ? '0 24px 60px rgba(0,0,0,0.18)' : '0 4px 20px rgba(0,0,0,0.06)', border: p.highlight ? 'none' : '1px solid #e2e8f0', position: 'relative', transform: p.highlight ? 'scale(1.04)' : 'none' }}>
                {p.badge && <div style={{ position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)' }}><span style={{ background: 'linear-gradient(135deg,#059669,#10b981)', color: 'white', fontSize: 11, fontWeight: 800, padding: '5px 16px', borderRadius: 50 }}>{p.badge}</span></div>}
                <IcBox icon={p.icon} size={50} bg={p.highlight ? 'rgba(16,185,129,0.15)' : undefined} color={p.highlight ? '#10b981' : '#059669'} />
                <div style={{ fontWeight: 800, fontSize: 19, color: p.highlight ? 'white' : '#0a0f1e', marginTop: 18, marginBottom: 10 }}>{p.name}</div>
                <div style={{ fontSize: 13, color: p.highlight ? 'rgba(255,255,255,0.6)' : '#64748b', lineHeight: 1.65, marginBottom: 20 }}>{p.desc}</div>
                <div style={{ marginBottom: 24 }}><span style={{ fontSize: 40, fontWeight: 900, color: '#10b981' }}>{p.price}</span><span style={{ fontSize: 13, color: p.highlight ? 'rgba(255,255,255,0.4)' : '#94a3b8', marginLeft: 4 }}>{p.period}</span></div>
                <div style={{ marginBottom: 28 }}>
                  {p.features.map(f => (
                    <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                      <Ic name="check" size={15} color="#10b981" sw={2.5} />
                      <span style={{ fontSize: 13, color: p.highlight ? 'rgba(255,255,255,0.75)' : '#475569' }}>{f}</span>
                    </div>
                  ))}
                </div>
                <Btn variant={p.highlight ? 'primary' : 'outline'} onClick={() => navigate('contact')} style={{ width: '100%', justifyContent: 'center' }}>Get Started →</Btn>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 32 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: '#ecfdf5', borderRadius: 50, padding: '12px 24px', border: '1px solid #a7f3d0' }}>
              <Ic name="shield" size={16} color="#059669" />
              <span style={{ fontWeight: 700, color: '#065f46', fontSize: 14 }}>No Cure, No Pay. If we don't deliver, you don't pay. Period.</span>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: '96px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionHeader badge="FAQ" title="Frequently Asked Questions" sub="Everything you need to know about our GMC approval process." />
          <FAQ items={faqItems} />
        </div>
      </section>

      <CTABanner navigate={navigate} />
    </div>
  );
};

Object.assign(window, { GMCPage });