const ShoppingPage = ({ navigate }) => {
  const included = [
    { icon: 'gear', title: 'Full Campaign Setup', desc: 'Standard Shopping & Performance Max built from the ground up, structured for maximum profitability from day one.' },
    { icon: 'chart', title: 'Feed Optimisation', desc: 'Your product feed refined continuously for higher impressions, better CTR and stronger conversion signals.' },
    { icon: 'target', title: 'Bid Strategy & Scaling', desc: 'Data-driven bidding that prioritises margin over revenue. We scale only when the numbers are right.' },
    { icon: 'cro', title: 'CRO Consultancy', desc: 'Landing page and product page improvements from real e-commerce experience, included at no extra cost.' },
    { icon: 'file', title: 'Weekly Reporting', desc: 'Clear, honest weekly reports on ROAS, spend, revenue and margin. No vanity metrics, just what matters.' },
    { icon: 'chat', title: 'Direct WhatsApp Access', desc: "Direct line to your account manager. We keep it personal and responsive." },
  ];

  const faqItems = [
    { q: 'How does your 10% fee model work?', a: 'We charge 10% of your monthly Google Ads spend, nothing more. If you spend €10,000 on ads, our fee is €1,000. No setup fees, no performance kickers, no hidden charges. The ad budget goes directly to your Google Ads account, which you own.' },
    { q: 'Is there a minimum ad spend?', a: 'We recommend a minimum of €3,000/month ad spend to make campaigns viable. Below that, the data signals are too thin to optimise properly and results will be inconsistent.' },
    { q: 'Do I need an approved GMC account first?', a: "Google Shopping Ads require an approved Google Merchant Center account. If you don't have one yet, we can get you approved through our GMC service first." },
    { q: 'What types of campaigns do you run?', a: "We run Standard Shopping and Performance Max campaigns, choosing the right mix based on your product catalogue, margins and scaling stage. We always choose what delivers the best ROI for you." },
    { q: 'How long before I see results?', a: 'Most clients see meaningful data within 2–4 weeks as campaigns gather conversion signals. Significant scaling typically happens between weeks 4–8. We set realistic expectations from day one.' },
  ];

  // Comparison table rows
  const compareRows = [
    { attr: 'Setup fee', them: 'Often €1,000+ upfront', us: 'No setup fee' },
    { attr: 'Monthly retainer', them: 'Fixed high monthly fee', us: 'No retainer, no fixed fees' },
    { attr: 'Performance fee', them: 'Extra % on top of ad spend', us: 'Just 10% of ad spend. Full stop.' },
    { attr: 'Their incentive', them: 'Maximise your budget spend', us: 'Maximise your profit' },
    { attr: 'CRO support', them: 'Charged separately', us: 'Included, always' },
    { attr: 'Reporting', them: 'Vanity metrics (ROAS, clicks)', us: 'Real P&L, margin first' },
    { attr: 'Experience', them: 'Agency theory', us: 'We built our own stores' },
  ];

  return (
    <div className="page-wrap">
      {/* ── Hero — dark ─────────────────────────────────── */}
      <section style={{ background: 'linear-gradient(145deg,#020c1b 0%,#052e16 100%)', padding: '96px 32px 80px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -100, left: '35%', width: 700, height: 700, 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 Media Buying</Badge></div>
            <h1 style={{ fontSize: 50, fontWeight: 900, color: 'white', lineHeight: 1.07, marginBottom: 22 }}>
              Scale Your Revenue with <span style={{ color: '#10b981' }}>Profit-First</span> Google Shopping
            </h1>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.72, marginBottom: 36, maxWidth: 480 }}>
              We manage your campaigns the way we'd manage our own, with profit as the only metric that matters. Only 10% of ad spend. No retainers. No lock-in.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 44 }}>
              <Btn size="lg" onClick={() => navigate('contact')}>Start Scaling →</Btn>
              <Btn size="lg" variant="calendly" href="https://calendly.com/etherealsolutions/30min"><Ic name="calendar" size={16} color="white" /> Book Strategy Call</Btn>
            </div>
            <div style={{ display: 'flex', gap: 0 }}>
              {[['10%','of Ad Spend Only'],['4.2×','Average ROAS'],['€2.4M+','Revenue Generated']].map(([v,l],i) => (
                <div key={l} style={{ paddingRight: i < 2 ? 24 : 0, borderRight: i < 2 ? '1px solid rgba(255,255,255,0.1)' : 'none', paddingLeft: i > 0 ? 24 : 0 }}>
                  <div style={{ fontSize: 24, fontWeight: 900, color: '#10b981' }}>{v}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)', marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}><ShoppingWidget /></div>
        </div>
      </section>

      {/* ── Comparison table ─────────────────────────────── */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 900, margin: '0 auto' }}>
          <SectionHeader badge="Why We're Different" title="We're Not Your Average Agency" sub="Most agencies are incentivised to spend as much of your budget as possible. We're not." />
          <div style={{ borderRadius: 22, overflow: 'hidden', boxShadow: '0 8px 40px rgba(0,0,0,0.08)', border: '1px solid #e2e8f0' }} className="compare-table">
            {/* Desktop table */}
            <div className="compare-desktop">
              <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', background: '#0a0f1e' }}>
                <div style={{ padding: '18px 24px', fontSize: 13, fontWeight: 700, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: 0.8 }}>Dimension</div>
                <div style={{ padding: '18px 24px', fontSize: 13, fontWeight: 700, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: 0.8, borderLeft: '1px solid rgba(255,255,255,0.07)' }}>Traditional Agency</div>
                <div style={{ padding: '18px 24px', fontSize: 13, fontWeight: 800, color: '#10b981', textTransform: 'uppercase', letterSpacing: 0.8, borderLeft: '1px solid rgba(255,255,255,0.07)', display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
                  <img src="logo.png" height={22} style={{ height: 22, width: 'auto', maxWidth: 140, filter: 'brightness(0) invert(1)' }} alt="Ethereal Solutions" />
                </div>
              </div>
              {compareRows.map((r, i) => (
                <div key={r.attr} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', background: i % 2 === 0 ? 'white' : '#f8fafc', borderTop: '1px solid #e2e8f0' }}>
                  <div style={{ padding: '16px 24px', fontSize: 14, fontWeight: 700, color: '#0a0f1e' }}>{r.attr}</div>
                  <div style={{ padding: '16px 24px', fontSize: 14, color: '#94a3b8', borderLeft: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ color: '#f87171', fontWeight: 700 }}>✕</span> {r.them}
                  </div>
                  <div style={{ padding: '16px 24px', fontSize: 14, color: '#065f46', fontWeight: 600, borderLeft: '1px solid #e2e8f0', background: i % 2 === 0 ? '#f0fdf4' : '#ecfdf5', display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Ic name="check" size={15} color="#059669" sw={2.5} /> {r.us}
                  </div>
                </div>
              ))}
            </div>

            {/* Mobile cards */}
            <div className="compare-mobile">
              {compareRows.map((r, i) => (
                <div key={r.attr} style={{ borderTop: i === 0 ? 'none' : '1px solid #e2e8f0', background: 'white' }}>
                  <div style={{ background: '#0a0f1e', color: 'white', padding: '14px 20px', fontSize: 12, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase' }}>{r.attr}</div>
                  <div style={{ padding: '16px 20px', borderBottom: '1px solid #f1f5f9' }}>
                    <div style={{ fontSize: 10, fontWeight: 800, color: '#94a3b8', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>Traditional Agency</div>
                    <div style={{ fontSize: 14, color: '#64748b', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                      <span style={{ color: '#f87171', fontWeight: 700, flexShrink: 0 }}>✕</span>
                      <span>{r.them}</span>
                    </div>
                  </div>
                  <div style={{ padding: '16px 20px', background: '#f0fdf4' }}>
                    <div style={{ fontSize: 10, fontWeight: 800, color: '#059669', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>Ethereal Solutions</div>
                    <div style={{ fontSize: 14, color: '#065f46', fontWeight: 600, display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                      <span style={{ flexShrink: 0, marginTop: 2 }}><Ic name="check" size={14} color="#059669" sw={2.5} /></span>
                      <span>{r.us}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── Pricing block ────────────────────────────────── */}
      <section style={{ padding: '80px 32px', background: 'linear-gradient(135deg,#052e16,#0a0f1e)' }}>
        <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{ fontSize: 44, fontWeight: 900, color: 'white', marginBottom: 12, lineHeight: 1.1 }}>Simple Pricing. No Surprises.</h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.58)', marginBottom: 48 }}>One transparent fee, fully aligned with your success.</p>
          <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.09)', borderRadius: 24, padding: '48px 40px', backdropFilter: 'blur(10px)' }}>
            <div style={{ fontSize: 84, fontWeight: 900, color: '#10b981', lineHeight: 1 }}>10%</div>
            <div style={{ fontSize: 20, fontWeight: 700, color: 'white', marginTop: 10, marginBottom: 8 }}>of Monthly Ad Spend</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.45)', marginBottom: 44 }}>Example: €10K ad spend → €1,000/mo fee</div>
            <div className="three-col-mobile" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12, marginBottom: 40, textAlign: 'left' }}>
              {[['Full campaign setup','Feed optimisation','Bid management'],['Performance Max','Standard Shopping','Weekly reports'],['CRO consultancy','WhatsApp access','No lock-in']].map((col,i) => (
                <div key={i}>{col.map(item => (
                  <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 12 }}>
                    <Ic name="check" size={14} color="#10b981" sw={2.5} />
                    <span style={{ color: 'rgba(255,255,255,0.75)', fontSize: 13 }}>{item}</span>
                  </div>
                ))}</div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <Btn size="lg" onClick={() => navigate('contact')}>Start Your Campaign →</Btn>
              <Btn size="lg" variant="calendly" href="https://calendly.com/etherealsolutions/30min"><Ic name="calendar" size={16} color="white" /> Book a Strategy Call</Btn>
            </div>
          </div>
          <p style={{ color: 'rgba(255,255,255,0.3)', fontSize: 13, marginTop: 20 }}>Minimum recommended ad spend: €3,000/month · No lock-in contracts</p>
        </div>
      </section>

      {/* ── What's included ───────────────────────────────── */}
      <section style={{ padding: '96px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionHeader badge="What's Included" title="Everything in One Service" sub="A full-stack Google Shopping service. No upsells, no bolt-ons." />
          <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
            {included.map(f => <FeatureCard key={f.title} {...f} />)}
          </div>
        </div>
      </section>

      {/* ── Need GMC first? ──────────────────────────────── */}
      <section style={{ padding: '56px 32px', background: '#ecfdf5', borderTop: '1px solid #a7f3d0' }}>
        <div style={{ maxWidth: 700, margin: '0 auto', textAlign: 'center' }}>
          <IcBox icon="store" size={52} style={{ margin: '0 auto 20px' }} />
          <h3 style={{ fontWeight: 800, fontSize: 24, color: '#0a0f1e', marginTop: 16, marginBottom: 12 }}>Don't have a GMC yet?</h3>
          <p style={{ fontSize: 15, color: '#64748b', marginBottom: 28 }}>Google Shopping requires an approved Merchant Center. We can get yours approved in 5-10 days and plug straight into Shopping Ads.</p>
          <Btn onClick={() => navigate('gmc')}>Get Your GMC Approved First →</Btn>
        </div>
      </section>

      {/* ── FAQ ─────────────────────────────────────────── */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionHeader badge="FAQ" title="Google Shopping Ads FAQ" />
          <FAQ items={faqItems} />
        </div>
      </section>

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

Object.assign(window, { ShoppingPage });