const PartnerPage = ({ navigate }) => {
  const CALENDLY = 'https://calendly.com/etherealsolutions/30min?month=2026-05';

  const benefits = [
    { icon: 'percent', title: '20% Recurring Commission', desc: "On every referred client, every month, for as long as they stay. Not a one off bounty but a real revenue share that compounds." },
    { icon: 'eye',     title: 'Full Transparency',         desc: "We share monthly reports of your referred accounts: ad spend, status, retention. You see exactly what you are earning and why." },
    { icon: 'shield',  title: 'No Cure, No Pay Promise',   desc: "We only get paid when our work delivers, and so do you. If a referred client does not land, neither of us loses anything." },
    { icon: 'zap',     title: 'Fast Payouts',              desc: "Commission paid out monthly via bank transfer or invoice. No 90 day wait, no minimum threshold, no nonsense." },
  ];

  const idealFor = [
    'E-commerce consultants and freelancers',
    'Web design and development agencies',
    'Shopify and WooCommerce experts',
    'Influencers and content creators in DTC',
    'Existing clients who want to refer peers',
    'Anyone with a network of online store owners',
  ];

  return (
    <div className="page-wrap">
      {/* -- Hero ------------------------------------------- */}
      <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: '20%', width: 720, height: 720, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,0.09) 0%,transparent 65%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', bottom: -200, right: -150, width: 540, height: 540, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,0.06) 0%,transparent 70%)', pointerEvents: 'none' }} />

        <div className="hero-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'center', position: 'relative' }}>
          <div>
            <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="users" size={12} color="#10b981" sw={2.3} /> AFFILIATE PROGRAM
              </span>
            </div>
            <h1 style={{ fontSize: 56, fontWeight: 900, color: 'white', lineHeight: 1.05, marginBottom: 22, textWrap: 'pretty' }}>
              Turn Your Network<br />Into <span style={{ color: '#10b981' }}>Recurring Revenue.</span>
            </h1>
            <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, marginBottom: 28, maxWidth: 540 }}>
              Refer an e-commerce store to Ethereal Solutions. If they sign up, you earn <strong style={{ color: 'white' }}>20% of our monthly revenue</strong> from that client, for as long as they stay with us. No caps, no expiry.
            </p>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.55)', lineHeight: 1.7, marginBottom: 32, maxWidth: 540 }}>
              Send us a WhatsApp message or book a quick call to get set up.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 44 }}>
              <Btn size="lg" variant="white" href={CALENDLY}><Ic name="calendar" size={16} color="#059669" /> Book a Call</Btn>
              <Btn size="lg" variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={16} color="white" /> WhatsApp Us</Btn>
            </div>

            {/* Hero stats */}
            <div className="hero-stats-row hero-stats-dark" style={{ display: 'flex', borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 24 }}>
              {[['20%','Recurring monthly'],['110+','Stores onboarded'],['4.6*','Trustpilot - 21 reviews']].map(([v,l], i) => (
                <div key={l} className="hero-stat-item" style={{ flex: 1, paddingRight: i < 2 ? 20 : 0, borderRight: i < 2 ? '1px solid rgba(255,255,255,0.1)' : 'none', paddingLeft: i > 0 ? 20 : 0 }}>
                  <div style={{ fontSize: 28, fontWeight: 900, color: '#10b981', lineHeight: 1 }}>{v}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Commission widget */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div className="float-a" style={{ background: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(20px)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 22, padding: 28, width: 320, position: 'relative' }}>
              <div style={{ position: 'absolute', top: -14, right: 18 }}>
                <span style={{ background: 'linear-gradient(135deg,#059669,#10b981)', color: 'white', fontSize: 12, padding: '6px 14px', borderRadius: 20, fontWeight: 700, boxShadow: '0 4px 14px rgba(5,150,105,0.35)' }}> Paid Monthly</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
                <IcBox icon="dollar" size={46} bg="rgba(16,185,129,0.18)" color="#10b981" />
                <div>
                  <div style={{ fontWeight: 800, fontSize: 16, color: 'white' }}>Your Commission</div>
                  <div style={{ color: '#10b981', fontSize: 13, fontWeight: 600 }}>This month - est.</div>
                </div>
              </div>

              <div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: '18px 18px 14px', marginBottom: 16, border: '1px solid rgba(255,255,255,0.06)' }}>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 6 }}>Referred client - Spend</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                  <span style={{ fontSize: 22, fontWeight: 900, color: 'white' }}>EUR 32,000</span>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>ad spend</span>
                </div>
                <div style={{ height: 1, background: 'rgba(255,255,255,0.08)', margin: '12px 0' }} />
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>Our fee (10%)</span>
                  <span style={{ fontSize: 14, fontWeight: 700, color: 'white' }}>EUR 3,200</span>
                </div>
              </div>

              <div style={{ background: 'linear-gradient(135deg,rgba(5,150,105,0.18),rgba(16,185,129,0.12))', border: '1px solid rgba(16,185,129,0.3)', borderRadius: 14, padding: '16px 18px' }}>
                <div style={{ fontSize: 11, color: '#10b981', fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 4 }}>Your share - 20%</div>
                <div style={{ fontSize: 32, fontWeight: 900, color: 'white', lineHeight: 1 }}>EUR 640<span style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}> /month</span></div>
              </div>

              <div style={{ marginTop: 14, fontSize: 11, color: 'rgba(255,255,255,0.4)', textAlign: 'center', lineHeight: 1.5 }}>
                Illustrative example. You earn this every month the client stays.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* -- Why Partner ------------------------------------ */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionHeader badge="Why Partner With Us" title="A program built around recurring value" sub="Most affiliate programs pay a one off bounty and forget you. Ours rewards the long term retention you helped create." />
          <div className="four-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
            {benefits.map(b => <FeatureCard key={b.title} {...b} tall />)}
          </div>
        </div>
      </section>

      {/* -- How It Works ----------------------------------- */}
      <section style={{ padding: '96px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionHeader badge="How It Works" title="From intro to commission in three steps" sub="No dashboards, no complicated tracking pixels. Just a clean human handover and a monthly payout." />
          <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
            {[
              { n: '01', icon: 'chat',    title: 'Introduce a Lead',     desc: "Send us a warm intro by WhatsApp or email with the store name, owner, and what they need. We take it from there." },
              { n: '02', icon: 'check',   title: 'We Close & Onboard',   desc: "We handle the discovery call, scoping and onboarding. If they do not sign, you owe nothing and neither do they." },
              { n: '03', icon: 'dollar',  title: 'You Get Paid Monthly', desc: "Once they are a paying client, you receive 20% of our monthly revenue from that account, every month." },
            ].map(s => (
              <div key={s.n} style={{ background: 'white', borderRadius: 22, padding: '36px 30px', border: '1px solid #e2e8f0', boxShadow: '0 4px 20px rgba(0,0,0,0.04)', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: 22, right: 26, fontSize: 56, fontWeight: 900, color: '#ecfdf5', lineHeight: 1, letterSpacing: -2, fontFamily: 'Plus Jakarta Sans, sans-serif' }}>{s.n}</div>
                <IcBox icon={s.icon} size={56} />
                <div style={{ fontWeight: 800, fontSize: 19, color: '#0a0f1e', marginTop: 22, marginBottom: 10, position: 'relative' }}>{s.title}</div>
                <div style={{ color: '#64748b', fontSize: 14, lineHeight: 1.7, position: 'relative' }}>{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* -- Commission breakdown --------------------------- */}
      <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>Commission Breakdown</Badge></div>
              <h2 style={{ fontSize: 38, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.14, marginBottom: 20, marginTop: 14 }}>20% of every euro we earn from your referrals.</h2>
              <p style={{ fontSize: 15, color: '#475569', lineHeight: 1.82, marginBottom: 28 }}>
                We are transparent about which services qualify and how the math works. No fine print, no carve outs hidden behind a sales call.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  ['GMC Approval', 'EUR 949 flat', 'You earn EUR 189.80 per approval'],
                  ['Shopping Ads Mgmt', '10% of ad spend', 'You earn 20% of that, every month'],
                  ['Pre-Approved Stores', 'EUR 250 fixed affiliate fee', 'You earn EUR 250 per store sold'],
                ].map(([service, fee, you]) => (
                  <div key={service} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px', background: '#f8fafc', borderRadius: 12, border: '1px solid #f1f5f9' }}>
                    <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#10b981', flexShrink: 0 }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
                        <span style={{ fontWeight: 800, fontSize: 14, color: '#0a0f1e' }}>{service}</span>
                        <span style={{ fontSize: 12, color: '#94a3b8' }}>- {fee}</span>
                      </div>
                      <div style={{ fontSize: 13, color: '#059669', fontWeight: 600, marginTop: 2 }}>{you}</div>
                    </div>
                  </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' }} />
              <div style={{ fontSize: 13, fontWeight: 800, color: '#10b981', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 12, position: 'relative' }}>Sample year - 5 referrals</div>
              <div style={{ position: 'relative' }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 24 }}>
                  {[
                    ['3x GMC approvals',     'EUR 569'],
                    ['2x Shopping Ads (EUR 20K avg /mo)', 'EUR 800 /mo'],
                    ['1x Pre-Approved store', 'EUR 250'],
                  ].map(([label, val]) => (
                    <div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 12, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
                      <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>{label}</span>
                      <span style={{ fontSize: 15, fontWeight: 700, color: 'white' }}>{val}</span>
                    </div>
                  ))}
                </div>
                <div style={{ paddingTop: 18, borderTop: '2px solid rgba(16,185,129,0.3)' }}>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginBottom: 6, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Year 1 estimate</div>
                  <div style={{ fontSize: 48, fontWeight: 900, color: '#10b981', lineHeight: 1 }}>EUR 10,419<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}> +</span></div>
                  <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', marginTop: 8, lineHeight: 1.6 }}>And then the Shopping Ads commission <em>continues</em> every month they stay.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* -- Who is this for -------------------------------- */}
      <section style={{ padding: '96px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 980, margin: '0 auto' }}>
          <SectionHeader badge="Who Should Apply" title="Built for people who already talk to store owners" sub="If you sit in front of e-commerce founders day in, day out, this program turns those conversations into a side revenue stream." />
          <div className="three-col-mobile" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {idealFor.map(item => (
              <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '18px 22px', background: 'white', borderRadius: 14, border: '1px solid #f1f5f9', boxShadow: '0 2px 10px rgba(0,0,0,0.03)' }}>
                <Ic name="check" size={18} color="#059669" sw={2.5} />
                <span style={{ fontSize: 15, color: '#334155', fontWeight: 600 }}>{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* -- FAQ -------------------------------------------- */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 900, margin: '0 auto' }}>
          <SectionHeader badge="FAQ" title="The fine print, without the fine print" />
          <FAQ items={[
            { q: 'How long do I keep earning commission per referral?',
              a: 'For as long as the client stays with us. There is no hard cap and no expiry. If they renew Shopping Ads management for three years, you get paid for three years.' },
            { q: 'When do payouts happen?',
              a: 'Every month, by bank transfer or against your invoice (your choice). We pay out around the 5th of the following month, once we have collected from the client.' },
            { q: 'Do referrals need to be Dutch or European?',
              a: 'No. We work with stores worldwide. As long as the introduction leads to a paying client, the geography does not matter for your commission.' },
            { q: 'What if my referral does not convert?',
              a: 'Then nothing happens. You do not pay us and we do not pay you. There is zero risk to you for sending an introduction our way.' },
            { q: 'Can existing Ethereal clients refer too?',
              a: 'Absolutely. A lot of our best partners are existing clients who refer their network. We treat every introduction the same.' },
            { q: 'Is there a referral link or dashboard?',
              a: 'No software, no dashboard. We use a simple intro by email or WhatsApp model and tag the lead to you on our side. You receive a monthly report with the numbers.' },
          ]} />
        </div>
      </section>

      {/* -- Closing CTA ------------------------------------ */}
      <section style={{ padding: '88px 32px', background: 'linear-gradient(135deg,#059669 0%,#10b981 100%)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -120, right: -80, width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle,rgba(255,255,255,0.12),transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <h2 style={{ fontSize: 42, fontWeight: 900, color: 'white', marginBottom: 14, lineHeight: 1.12 }}>Ready to turn intros into income?</h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.9)', marginBottom: 16, lineHeight: 1.65 }}>Send us a quick message and we will set you up as a partner today. No paperwork, no minimums.</p>
          <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.78)', marginBottom: 36, lineHeight: 1.65 }}>Drop us a WhatsApp or schedule a call directly with Kamal.</p>
          <div className="stack-mobile" style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn size="lg" variant="white" href={CALENDLY}><Ic name="calendar" size={16} color="#059669" /> Apply as a Partner</Btn>
            <Btn size="lg" variant="whatsapp" href="https://wa.me/31615232684">
              <Ic name="wa" size={16} color="white" /> WhatsApp Us
            </Btn>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { PartnerPage });