const HomePage = ({ navigate }) => {
  const marqueeItems = ['75+ GMC Approvals', '100% Success Rate', '4.6/5 on Trustpilot', '€2.4M+ Revenue Generated', '21 Five-Star Reviews', '5-10 Day Approval', 'No Cure, No Pay Guarantee', '24/7 WhatsApp Support'];

  // Core services (mirrors Pricing page order and copy)
  const gmcPlans = [
    { icon: 'eye', name: 'Monthly Upkeep', price: '€250', period: '/month', desc: 'Full peace of mind. Your GMC and webshop stay compliant, without you having to lift a finger.', features: ['Preventive policy risk checks','Immediate action on suspension threats','Realtime support & weekly reports','Future-proof optimisation advice','No approval fee on a misrep','Free new merchant if permanently suspended'], cta: 'Start Monthly Upkeep', highlight: false },
    { 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'], cta: 'Get Approved', highlight: true, badge: 'Most Popular' },
    { icon: 'refresh', name: 'Suspension Recovery', price: '€1,250', period: 'one-time', desc: 'Full reinstatement for any suspension type. No cure, no pay guarantee.', features: ['Suspension cause analysis','Full compliance overhaul','Appeal preparation','Google liaison support','Reinstatement tracking','30-day post-recovery monitoring'], cta: 'Recover My GMC', highlight: false },
  ];

  const exclusivePlans = [
    { icon: 'lock', name: 'Insider Service', price: 'On request', desc: 'Exclusive high-end service for persistent misrepresentation cases. For stores where everything else has failed. 100% success rate, variable pricing.', features: ['For complex misrep cases','100% reinstatement record','Fully bespoke approach','Personal account manager'], page: 'insider', badge: 'Exclusive' },
    { icon: 'store', name: 'Pre-Approved GMC Store', price: 'From €2,000', desc: 'Buy a ready-made, pre-approved GMC webshop. Transferred to your name within 2 days, initial misrep already cleared, start advertising immediately.', features: ['Live within 2 days','Transferred to your name','Initial misrep already cleared','Custom builds on request'], page: 'preapproved', badge: 'New' },
  ];

  return (
    <div className="page-wrap">

      {/* Hero */}
      <section className="home-hero" style={{ background: 'white', padding: '100px 32px 80px', overflow: 'hidden', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle, #d1fae5 1px, transparent 1px)', backgroundSize: '32px 32px', opacity: 0.45, pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 70% 60% at 65% 40%, rgba(255,255,255,0) 0%, white 75%)', pointerEvents: 'none' }} />
        <div className="hero-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', position: 'relative' }}>
          <div>
            <div style={{ marginBottom: 22 }}><Badge>100% Success Rate, Guaranteed</Badge></div>
            <h1 style={{ fontSize: 56, fontWeight: 900, lineHeight: 1.06, color: '#0a0f1e', marginBottom: 22, textWrap: 'pretty' }}>
              Guaranteed<br /><span style={{ color: '#10b981' }}>Google Merchant</span><br />Center Approval
            </h1>
            <p style={{ fontSize: 18, color: '#64748b', lineHeight: 1.72, marginBottom: 36, maxWidth: 460 }}>
              Get your e-commerce store approved with our proven process. No cure, no pay guarantee. The only GMC service with a 100% success rate.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 48 }}>
              <Btn size="lg" onClick={() => navigate('contact')}>Get GMC Approved</Btn>
              <Btn size="lg" variant="calendly" href="https://calendly.com/etherealsolutions/30min">
                <Ic name="calendar" size={16} color="white" /> Book Free Call
              </Btn>
            </div>
            <div style={{ display: 'flex', borderTop: '1px solid #f1f5f9', paddingTop: 28 }}>
              {[['75+','GMCs Approved'],['100%','Success Rate'],['€2.4M+','Revenue Generated']].map(([v,l], i) => (
                <div key={l} style={{ flex: 1, paddingRight: i < 2 ? 24 : 0, borderRight: i < 2 ? '1px solid #f1f5f9' : 'none', paddingLeft: i > 0 ? 24 : 0 }}>
                  <div style={{ fontSize: 28, fontWeight: 900, color: '#10b981', lineHeight: 1 }}>{v}</div>
                  <div style={{ fontSize: 12, color: '#94a3b8', marginTop: 5, fontWeight: 500 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
            <GMCWidget />
            <div className="float-b" style={{ position: 'absolute', bottom: -20, left: -10, background: 'white', borderRadius: 14, padding: '12px 16px', boxShadow: '0 8px 32px rgba(0,0,0,0.10)', border: '1px solid #f1f5f9' }}>
              <a href="https://nl.trustpilot.com/review/etherealsolutions.nl" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ color: '#f59e0b', fontSize: 13, letterSpacing: 1 }}>★★★★★</span>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 12, color: '#0a0f1e' }}>21 Reviews</div>
                  <div style={{ fontSize: 11, color: '#00b67a', fontWeight: 600 }}>Trustpilot</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>

      <Marquee items={marqueeItems} />

      {/* Why Choose Us - bento */}
      <section style={{ padding: '100px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionHeader badge="Why Choose Us" title="The Only GMC Service That Guarantees Results" sub="100% success rate across every account we've ever taken on. Backed by our no cure, no pay promise." />

          <div className="bento-why" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            <div className="bento-why-hero" style={{ gridColumn: 'span 2', background: 'linear-gradient(155deg,#0a0f1e 0%,#052e16 100%)', borderRadius: 22, padding: '36px 32px', border: '1px solid rgba(255,255,255,0.06)', display: 'flex', gap: 32, alignItems: 'center' }}>
              <div style={{ flex: 1 }}>
                <IcBox icon="award" size={52} bg="rgba(16,185,129,0.15)" color="#10b981" />
                <div style={{ fontWeight: 800, fontSize: 20, color: 'white', marginTop: 20, marginBottom: 12 }}>100% Success Rate</div>
                <div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14, lineHeight: 1.72 }}>We have never failed to get a Google Merchant Center approved. Every single account. Our process leaves nothing to chance.</div>
              </div>
              <div className="bento-why-stat" style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: '24px 28px', border: '1px solid rgba(16,185,129,0.2)', textAlign: 'center', flexShrink: 0 }}>
                <div style={{ fontSize: 48, fontWeight: 900, color: '#10b981', lineHeight: 1 }}>75+</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', marginTop: 8 }}>GMCs approved, zero failures</div>
              </div>
            </div>

            <div style={{ background: '#f8fafc', borderRadius: 20, padding: '28px 24px', border: '1px solid #e2e8f0' }}>
              <IcBox icon="zap" size={46} />
              <div style={{ fontWeight: 800, fontSize: 16, color: '#0a0f1e', marginTop: 18, marginBottom: 8 }}>5-10 Day Approval</div>
              <div style={{ color: '#64748b', fontSize: 14, lineHeight: 1.65 }}>Fast-track your GMC with our streamlined process. Most clients approved within 5-10 business days.</div>
            </div>

            <div style={{ background: '#f8fafc', borderRadius: 20, padding: '28px 24px', border: '1px solid #e2e8f0' }}>
              <IcBox icon="book" size={46} />
              <div style={{ fontWeight: 800, fontSize: 16, color: '#0a0f1e', marginTop: 18, marginBottom: 8 }}>Expert Knowledge</div>
              <div style={{ color: '#64748b', fontSize: 14, lineHeight: 1.65 }}>Deep knowledge of Google's policies, built from years of handling every type of account and violation.</div>
            </div>

            <div style={{ background: '#f8fafc', borderRadius: 20, padding: '28px 24px', border: '1px solid #e2e8f0' }}>
              <IcBox icon="chat" size={46} />
              <div style={{ fontWeight: 800, fontSize: 16, color: '#0a0f1e', marginTop: 18, marginBottom: 8 }}>24/7 WhatsApp Support</div>
              <div style={{ color: '#64748b', fontSize: 14, lineHeight: 1.65 }}>Direct access around the clock. No tickets, no queues, just fast answers when you need them.</div>
            </div>

            <div style={{ background: 'linear-gradient(135deg,#ecfdf5,#d1fae5)', borderRadius: 20, padding: '28px 24px', border: '1px solid #a7f3d0' }}>
              <IcBox icon="refresh" size={46} bg="rgba(5,150,105,0.12)" color="#059669" />
              <div style={{ fontWeight: 800, fontSize: 16, color: '#0a0f1e', marginTop: 18, marginBottom: 8 }}>Suspension Recovery</div>
              <div style={{ color: '#374151', fontSize: 14, lineHeight: 1.65 }}>Even misrepresentation. One client suspended Thursday, live Friday. 100% reinstatement rate.</div>
            </div>

            <div className="bento-why-wide" style={{ gridColumn: 'span 3', background: 'white', borderRadius: 20, padding: '28px 32px', border: '1px solid #f1f5f9', boxShadow: '0 2px 16px rgba(0,0,0,0.05)', display: 'flex', alignItems: 'center', gap: 28 }}>
              <IcBox icon="shield" size={52} />
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 17, color: '#0a0f1e', marginBottom: 6 }}>Complete End-to-End Service</div>
                <div style={{ color: '#64748b', fontSize: 14 }}>From initial audit to approval to ongoing monitoring. Feed setup, website compliance, policy pages, submission and post-approval checks. Nothing left to chance.</div>
              </div>
              <Btn size="sm" onClick={() => navigate('gmc')}>View Full Service</Btn>
            </div>
          </div>
        </div>
      </section>

      {/* Core GMC Services — identical structure to pricing page */}
      <section style={{ padding: '100px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionHeader badge="GMC Services" title="Google Merchant Center" sub="Three core services for every stage: from initial approval to ongoing monitoring and recovery." />
          <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22, alignItems: 'stretch' }}>
            {gmcPlans.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.03)' : 'none', display: 'flex', flexDirection: 'column' }}>
                {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, minHeight: 66 }}>{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, flexGrow: 1 }}>
                  {p.features.map(f => (
                    <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                      <div style={{ marginTop: 2, flexShrink: 0 }}><Ic name="check" size={14} color="#10b981" sw={2.5} /></div>
                      <span style={{ fontSize: 13, color: p.highlight ? 'rgba(255,255,255,0.75)' : '#475569', lineHeight: 1.55 }}>{f}</span>
                    </div>
                  ))}
                </div>
                <Btn variant={p.highlight ? 'primary' : 'outline'} onClick={() => navigate('contact')} style={{ width: '100%', justifyContent: 'center' }}>{p.cta} →</Btn>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 28 }}>
            <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 on all GMC services. Not approved? No cost.</span>
            </div>
          </div>
        </div>
      </section>

      {/* Exclusive services */}
      <section style={{ padding: '60px 32px 100px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto' }}>
          <SectionHeader badge="Exclusive Services" title="For Complex Cases & Fast Starters" sub="Two specialist services for entrepreneurs who need to go beyond the standard path." />
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, alignItems: 'stretch' }}>
            {exclusivePlans.map(p => (
              <div key={p.name} style={{ borderRadius: 22, padding: '36px 28px', background: 'white', boxShadow: '0 4px 20px rgba(0,0,0,0.06)', border: '1px solid #e2e8f0', position: 'relative', display: 'flex', flexDirection: 'column' }}>
                {p.badge && <div style={{ position: 'absolute', top: -13, left: 28 }}><span style={{ background: 'linear-gradient(135deg,#059669,#10b981)', color: 'white', fontSize: 11, fontWeight: 800, padding: '5px 14px', borderRadius: 50 }}>{p.badge}</span></div>}
                <IcBox icon={p.icon} size={50} />
                <div style={{ fontWeight: 800, fontSize: 19, color: '#0a0f1e', marginTop: 18, marginBottom: 10 }}>{p.name}</div>
                <div style={{ fontSize: 13, color: '#64748b', lineHeight: 1.65, marginBottom: 20 }}>{p.desc}</div>
                <div style={{ marginBottom: 24 }}><span style={{ fontSize: 28, fontWeight: 900, color: '#10b981' }}>{p.price}</span></div>
                <div style={{ marginBottom: 28, flexGrow: 1 }}>
                  {p.features.map(f => (
                    <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                      <div style={{ marginTop: 2, flexShrink: 0 }}><Ic name="check" size={14} color="#10b981" sw={2.5} /></div>
                      <span style={{ fontSize: 13, color: '#475569', lineHeight: 1.55 }}>{f}</span>
                    </div>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <Btn variant="outline" onClick={() => navigate(p.page)} style={{ flex: 1, justifyContent: 'center' }}>Learn More →</Btn>
                  <Btn variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={15} color="white" /></Btn>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Google Shopping dark teaser */}
      <section style={{ background: 'linear-gradient(145deg,#020c1b 0%,#052e16 100%)', padding: '100px 32px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -100, right: -60, width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,0.07) 0%,transparent 65%)', pointerEvents: 'none' }} />
        <div className="hero-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', position: 'relative' }}>
          <div>
            <div style={{ marginBottom: 22 }}><Badge>Google Shopping Ads</Badge></div>
            <h2 style={{ fontSize: 44, fontWeight: 900, color: 'white', lineHeight: 1.08, marginBottom: 20 }}>
              Scale further with <span style={{ color: '#10b981' }}>profit-first</span> Google Shopping
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.72, marginBottom: 32 }}>
              Already approved? Take it to the next level. We run your Shopping campaigns with one rule: only scale when it's profitable. <strong style={{ color: 'white' }}>Just 10% of your ad spend.</strong>
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11, marginBottom: 36 }}>
              {['Profit-first model, we only win when you win','10% of ad spend, fully transparent','Full campaign setup including CRO consultancy','Built on real dropshipping and e-commerce experience'].map(item => (
                <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'rgba(255,255,255,0.82)', fontSize: 15 }}>
                  <Ic name="check" size={17} color="#10b981" /> {item}
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn size="lg" onClick={() => navigate('shopping')}>View Google Shopping</Btn>
              <Btn size="lg" variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={16} color="white" /> WhatsApp</Btn>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}><ShoppingWidget /></div>
        </div>
      </section>

      {/* Testimonials */}
      <section style={{ padding: '100px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="testimonial-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 52, flexWrap: 'wrap', gap: 20 }}>
            <div className="testimonial-title-block">
              <div style={{ marginBottom: 14 }}><Badge>Client Reviews</Badge></div>
              <h2 style={{ fontSize: 38, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.12 }}>What our clients say</h2>
            </div>
            <a href="https://nl.trustpilot.com/review/etherealsolutions.nl" target="_blank" rel="noopener noreferrer"
              style={{ display: 'flex', alignItems: 'center', gap: 14, background: '#f8fafc', borderRadius: 16, padding: '14px 20px', border: '1px solid #e2e8f0', textDecoration: 'none', flexShrink: 0 }}>
              <span style={{ color: '#f59e0b', fontSize: 20, letterSpacing: 2 }}>★★★★★</span>
              <div>
                <div style={{ fontWeight: 800, fontSize: 14, color: '#00b67a' }}>Trustpilot</div>
                <div style={{ fontSize: 12, color: '#64748b' }}>21 reviews · 4.6/5</div>
              </div>
            </a>
          </div>
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 18, alignItems: 'start' }}>
            <TestimonialCard {...TESTIMONIALS[0]} large />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <TestimonialCard {...TESTIMONIALS[1]} />
              <TestimonialCard {...TESTIMONIALS[2]} />
            </div>
          </div>
          <div style={{ textAlign: 'center', marginTop: 36 }}>
            <Btn variant="outline" onClick={() => navigate('cases')}>View all results</Btn>
          </div>
        </div>
      </section>

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

Object.assign(window, { HomePage });