const InsiderPage = ({ navigate }) => {
  const benefits = [
    { icon: 'award', title: '100% Reinstatement Rate', desc: 'Even the most complex misrepresentation suspensions. We have never failed on an Insider case.' },
    { icon: 'users', title: 'Personal Account Manager', desc: 'A dedicated specialist walks through your case end-to-end, with priority access and fast turnaround.' },
    { icon: 'shield', title: 'Full Compliance Rebuild', desc: 'Deeper than a standard recovery. We restructure product data, site architecture and trust signals.' },
    { icon: 'lock', title: 'Discretion & NDA', desc: 'For high-value stores with sensitive data, all work is handled under NDA and with full confidentiality.' },
  ];

  const cases = [
    "Multiple failed recovery attempts by other agencies or in-house teams",
    "Repeated misrepresentation suspensions on the same domain",
    "High-revenue stores where every day offline is a significant loss",
    "Niche verticals with strict Google policy scrutiny",
    "International stores with complex legal and operational setups",
  ];

  return (
    <div className="page-wrap">
      {/* Hero — dark, premium feel */}
      <section style={{ background: 'linear-gradient(155deg,#020c1b 0%,#052e16 100%)', padding: '96px 32px 80px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -120, left: '30%', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,0.07) 0%,transparent 65%)', pointerEvents: 'none' }} />
        <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <div style={{ marginBottom: 22 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(16,185,129,0.12)', color: '#10b981', fontSize: 12, fontWeight: 800, padding: '6px 16px', borderRadius: 50, letterSpacing: 0.8, border: '1px solid rgba(16,185,129,0.25)' }}>
              <Ic name="lock" size={12} color="#10b981" sw={2.3} /> EXCLUSIVE · BY INVITATION
            </span>
          </div>
          <h1 style={{ fontSize: 56, fontWeight: 900, color: 'white', lineHeight: 1.06, marginBottom: 22 }}>
            The <span style={{ color: '#10b981' }}>Insider Service</span><br />For Impossible Cases
          </h1>
          <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.7)', lineHeight: 1.72, maxWidth: 640, margin: '0 auto 40px' }}>
            A high-end, white-glove recovery service for stores with persistent misrepresentation suspensions. When everything else has failed, Insider delivers. 100% success rate. Variable pricing.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn size="lg" variant="white" onClick={() => navigate('contact')}>Request a Private Consultation</Btn>
            <Btn size="lg" variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={16} color="white" /> WhatsApp Us</Btn>
          </div>
        </div>
      </section>

      {/* Who is this for */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1050, margin: '0 auto' }}>
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <div style={{ marginBottom: 14 }}><Badge>Who is this for?</Badge></div>
              <h2 style={{ fontSize: 38, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.14, marginBottom: 20, marginTop: 14 }}>When standard recovery isn't enough</h2>
              <p style={{ fontSize: 15, color: '#475569', lineHeight: 1.82, marginBottom: 24 }}>
                The Insider Service is reserved for the hardest cases. If you've already tried reinstatement, paid other agencies, or your case keeps bouncing back, this is where we step in.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {cases.map(c => (
                  <div key={c} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                    <div style={{ marginTop: 2, flexShrink: 0 }}><Ic name="check" size={17} color="#059669" sw={2.5} /></div>
                    <span style={{ fontSize: 15, color: '#334155', lineHeight: 1.6 }}>{c}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background: 'linear-gradient(155deg,#0a0f1e,#052e16)', borderRadius: 22, padding: '44px 36px', color: 'white', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,0.18),transparent 70%)', pointerEvents: 'none' }} />
              <IcBox icon="lock" size={60} bg="rgba(16,185,129,0.15)" color="#10b981" />
              <div style={{ fontSize: 13, fontWeight: 800, color: '#10b981', marginTop: 26, letterSpacing: 1, textTransform: 'uppercase' }}>Pricing</div>
              <div style={{ fontSize: 44, fontWeight: 900, color: 'white', lineHeight: 1.05, marginTop: 10, marginBottom: 14 }}>On request.</div>
              <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7, marginBottom: 28 }}>
                Every case is different. Pricing depends on the complexity, store size and urgency. We scope the job after an initial private consultation, so you know exactly what to expect before we start.
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
                <Ic name="shield" size={18} color="#10b981" />
                <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)' }}>No cure, no pay. If we cannot reinstate your account, you pay nothing.</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section style={{ padding: '96px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionHeader badge="What you get" title="A service tier above everything else" sub="Priority access, deeper compliance work and personal attention, so your account gets reinstated and stays reinstated." />
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {benefits.map(b => <FeatureCard key={b.title} {...b} />)}
          </div>
        </div>
      </section>

      {/* Process */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 900, margin: '0 auto' }}>
          <SectionHeader badge="How it works" title="A private, four-step process" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {[
              ['01','Private Consultation','We review your case under NDA and confirm whether Insider is the right fit. No pressure, no cost.'],
              ['02','Custom Scoping','We build a tailored plan with clear deliverables, timeline and a fixed quote based on your situation.'],
              ['03','Execution','Your dedicated specialist runs the full compliance rebuild, submission and appeal work directly with Google.'],
              ['04','Reinstatement & Protection','Your account goes live and we monitor it for 60 days to ensure it stays live.'],
            ].map(([num,title,desc]) => (
              <div key={num} style={{ display: 'flex', gap: 24, alignItems: 'center', background: '#f8fafc', borderRadius: 18, padding: '24px 28px', border: '1px solid #e2e8f0' }}>
                <div style={{ width: 54, height: 54, borderRadius: '50%', background: 'linear-gradient(135deg,#059669,#10b981)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 900, fontSize: 16, flexShrink: 0, boxShadow: '0 6px 18px rgba(5,150,105,0.25)' }}>{num}</div>
                <div>
                  <div style={{ fontWeight: 800, fontSize: 17, color: '#0a0f1e', marginBottom: 4 }}>{title}</div>
                  <div style={{ fontSize: 14, color: '#64748b', lineHeight: 1.65 }}>{desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

const PreApprovedPage = ({ navigate }) => {
  const benefits = [
    { icon: 'zap', title: 'Live Within 2 Days', desc: 'Skip the approval waiting game. Your store is transferred and ready to advertise in 48 hours.' },
    { icon: 'shield', title: 'Initial Misrep Cleared', desc: 'The store has already passed the initial misrepresentation check, the hardest GMC hurdle.' },
    { icon: 'check', title: 'No Hassle Transfer', desc: 'We handle the full ownership transfer. You receive login credentials, domain and approved GMC.' },
    { icon: 'gear', title: 'Customisation on Request', desc: "Want a specific niche, branding or product range? We can build one to your spec, still pre-approved." },
  ];

  const stores = [
    { country: 'Australia', flag: '🇦🇺', price: '€2.500', tier: 'premium' },
    { country: 'United Kingdom', flag: '🇬🇧', price: '€2.500', tier: 'premium' },
    { country: 'United States', flag: '🇺🇸', price: '€2.500', tier: 'premium' },
    { country: 'Canada', flag: '🇨🇦', price: '€2.500', tier: 'premium' },
    { country: 'New Zealand', flag: '🇳🇿', price: '€2.500', tier: 'premium' },
    { country: 'All Other Countries', flag: '🌍', price: '€2.000', tier: 'standard' },
  ];

  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: -80, right: -80, width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,0.09) 0%,transparent 70%)', pointerEvents: 'none' }} />
        <div className="hero-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center', position: 'relative' }}>
          <div>
            <div style={{ marginBottom: 22 }}><Badge>Pre-Approved GMC Stores</Badge></div>
            <h1 style={{ fontSize: 54, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.06, marginBottom: 22 }}>
              Skip the Wait.<br /><span style={{ color: '#10b981' }}>Start Advertising</span><br />in 48 Hours.
            </h1>
            <p style={{ fontSize: 17, color: '#64748b', lineHeight: 1.72, marginBottom: 36, maxWidth: 500 }}>
              Buy a ready-made, pre-approved Google Merchant Center webshop. Transferred to your name within 2 days, initial misrepresentation already cleared, no approval hassle.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 44 }}>
              <Btn size="lg" onClick={() => navigate('contact')}>View Available Stores</Btn>
              <Btn size="lg" variant="calendly" href="https://calendly.com/etherealsolutions/30min"><Ic name="calendar" size={16} color="white" /> Book a Call</Btn>
            </div>
            <div style={{ display: 'flex', borderTop: '1px solid #e2e8f0', paddingTop: 24 }}>
              {[['48h','To Go Live'],['€2.000+','Starting Price'],['100%','Approved on Transfer']].map(([v,l], i) => (
                <div key={l} style={{ flex: 1, paddingRight: i < 2 ? 20 : 0, borderRight: i < 2 ? '1px solid #e2e8f0' : 'none', paddingLeft: i > 0 ? 20 : 0 }}>
                  <div style={{ fontSize: 24, fontWeight: 900, color: '#10b981', lineHeight: 1 }}>{v}</div>
                  <div style={{ fontSize: 12, color: '#94a3b8', marginTop: 5 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          {/* Preview card */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{ background: 'white', borderRadius: 22, padding: 28, boxShadow: '0 28px 72px rgba(0,0,0,0.13)', width: 320, border: '1px solid #f1f5f9' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20, paddingBottom: 18, borderBottom: '1px solid #f1f5f9' }}>
                <IcBox icon="store" size={44} />
                <div>
                  <div style={{ fontSize: 11, fontWeight: 700, color: '#94a3b8', letterSpacing: 0.5, textTransform: 'uppercase' }}>GMC Store</div>
                  <div style={{ fontWeight: 800, fontSize: 15, color: '#0a0f1e' }}>yourbrand.com</div>
                </div>
              </div>
              {[['GMC Status','Approved','#10b981'],['Misrepresentation','Cleared','#10b981'],['Transfer Time','< 48 hours','#0a0f1e'],['Products','Pre-loaded','#0a0f1e']].map(([k,v,c]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid #f8fafc', fontSize: 13 }}>
                  <span style={{ color: '#64748b' }}>{k}</span>
                  <span style={{ color: c, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
                    {c === '#10b981' && <Ic name="check" size={13} color="#10b981" sw={2.8} />}
                    {v}
                  </span>
                </div>
              ))}
              <div style={{ marginTop: 20, padding: '14px 16px', background: '#f0fdf4', borderRadius: 12, border: '1px solid #a7f3d0', display: 'flex', alignItems: 'center', gap: 10 }}>
                <Ic name="zap" size={16} color="#059669" />
                <span style={{ fontSize: 13, fontWeight: 700, color: '#065f46' }}>Ready to advertise</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Why */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionHeader badge="Why Pre-Approved?" title="The fastest way to a working GMC" sub="For entrepreneurs who want to skip the approval process and start scaling immediately." />
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {benefits.map(b => <FeatureCard key={b.title} {...b} />)}
          </div>
        </div>
      </section>

      {/* Available stores — by country */}
      <section style={{ padding: '96px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionHeader badge="Available Stores" title="Choose by approved country" sub="Pricing depends on the country the store is approved for. Two tiers, no surprises." />

          {/* Pricing tiers summary */}
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 36 }}>
            <div style={{ background: 'linear-gradient(155deg,#0a0f1e,#052e16)', borderRadius: 22, padding: '36px 32px', color: 'white', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,0.18),transparent 70%)', pointerEvents: 'none' }} />
              <div style={{ fontSize: 11, fontWeight: 800, color: '#10b981', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 10 }}>Tier 1 · Premium markets</div>
              <div style={{ fontSize: 48, fontWeight: 900, color: 'white', lineHeight: 1, marginBottom: 10 }}>€2.500</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', marginBottom: 22 }}>For stores approved in high-competition English-speaking markets.</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {['Australia','United Kingdom','United States','Canada','New Zealand'].map(c => (
                  <span key={c} style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)', color: 'white', fontSize: 12, fontWeight: 600, padding: '6px 12px', borderRadius: 50 }}>{c}</span>
                ))}
              </div>
            </div>
            <div style={{ background: 'white', borderRadius: 22, padding: '36px 32px', border: '1px solid #e2e8f0', boxShadow: '0 4px 20px rgba(0,0,0,0.05)' }}>
              <div style={{ fontSize: 11, fontWeight: 800, color: '#059669', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 10 }}>Tier 2 · All other countries</div>
              <div style={{ fontSize: 48, fontWeight: 900, color: '#10b981', lineHeight: 1, marginBottom: 10 }}>€2.000</div>
              <div style={{ fontSize: 13, color: '#64748b', marginBottom: 22 }}>For any other country not listed in Tier 1. Same transfer process, same guarantees.</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: '#f0fdf4', borderRadius: 12, border: '1px solid #a7f3d0' }}>
                <Ic name="check" size={16} color="#059669" sw={2.5} />
                <span style={{ fontSize: 13, fontWeight: 700, color: '#065f46' }}>Most countries available on request</span>
              </div>
            </div>
          </div>

          {/* Custom build */}
          <div style={{ background: 'white', borderRadius: 22, padding: '32px 36px', border: '1px solid #e2e8f0', boxShadow: '0 4px 20px rgba(0,0,0,0.04)', display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
            <IcBox icon="gear" size={56} />
            <div style={{ flex: 1, minWidth: 260 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                <span style={{ fontWeight: 800, fontSize: 17, color: '#0a0f1e' }}>Custom Build</span>
                <span style={{ background: 'linear-gradient(135deg,#059669,#10b981)', color: 'white', fontSize: 10, fontWeight: 800, padding: '3px 10px', borderRadius: 50, letterSpacing: 0.4 }}>ON REQUEST</span>
              </div>
              <div style={{ fontSize: 14, color: '#64748b', lineHeight: 1.65 }}>Have a specific wish? Tell us the country, niche, branding or product type and we'll build a pre-approved store to your exact spec.</div>
            </div>
            <Btn variant="outline" onClick={() => navigate('contact')}>Request Custom Build →</Btn>
          </div>

          <p style={{ textAlign: 'center', fontSize: 13, color: '#94a3b8', marginTop: 28 }}>Inventory changes frequently. Contact us for the current list of available approved stores.</p>
        </div>
      </section>

      {/* Important notice */}
      <section style={{ padding: '56px 32px', background: '#ecfdf5', borderTop: '1px solid #a7f3d0' }}>
        <div style={{ maxWidth: 780, margin: '0 auto', display: 'flex', alignItems: 'flex-start', gap: 22 }}>
          <IcBox icon="shield" size={54} style={{ flexShrink: 0 }} />
          <div>
            <div style={{ fontWeight: 800, fontSize: 17, color: '#0a0f1e', marginBottom: 8 }}>Important to know</div>
            <p style={{ fontSize: 14, color: '#475569', lineHeight: 1.72 }}>
              Every pre-approved store has already passed Google's initial misrepresentation check, the single hardest hurdle in getting a GMC account live. That means you take over an account that has already proven it can advertise without being suspended on day one.
            </p>
          </div>
        </div>
      </section>

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

Object.assign(window, { InsiderPage, PreApprovedPage });