const AboutPage = ({ navigate }) => {
  const values = [
    { icon: 'lock', title: 'Radical Transparency', desc: "No hidden fees, no confusing reports, no sugarcoating results. We always tell you what is working and what is not, even when it is uncomfortable." },
    { icon: 'zap', title: 'Speed & Responsiveness', desc: "E-commerce moves fast. Suspensions happen on weekends. That is why we are available 24/7. Not tomorrow, now." },
    { icon: 'gear', title: 'Built On Our Own Stores', desc: 'The processes we run for clients are the exact ones we built for ourselves. Every policy fix, every feed optimisation and every Performance Max strategy was tested on our own revenue first, before it was ever sold.' },
  ];

  return (
    <div className="page-wrap">
      {/* Hero, white background, brand emerald accents */}
      {/* Hero, white background, brand emerald accents */}
      <section style={{ background: 'white', padding: '110px 32px 90px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -150, right: -100, width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,0.08) 0%,transparent 65%)', pointerEvents: 'none' }} />

        <div className="about-hero-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.15fr 0.95fr', gap: 64, alignItems: 'center', position: 'relative' }}>
          {/* Left: title, story, CTAs */}
          <div>
            <div style={{ marginBottom: 22 }}><Badge>Why We Exist</Badge></div>
            <h1 style={{ fontSize: 54, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.06, marginBottom: 28, letterSpacing: -0.5 }}>
              We started Ethereal because <span style={{ color: '#10b981' }}>we needed it for our own stores first.</span>
            </h1>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 32 }}>
              <p style={{ fontSize: 16, color: '#475569', lineHeight: 1.78 }}>
                Before Ethereal, we were the clients. We were running our own dropshipping stores in the Netherlands, doing real volume, and we hired agencies to handle our Google Merchant Center approvals. After the first call with the owner, we were quietly handed off to a junior. Long wait times, missing knowledge, no real results. We were paying senior fees to watch someone learn on our account.
              </p>
              <p style={{ fontSize: 16, color: '#475569', lineHeight: 1.78 }}>
                So we stopped outsourcing it. We dove in ourselves, rebuilt our stores from compliance up, got every account approved, recovered every suspension, and wrote down what actually worked. Friends started asking for help. Then their friends. Then agencies started sending us their hardest cases.
              </p>
              <p style={{ fontSize: 16, color: '#475569', lineHeight: 1.78 }}>
                Five years and 110+ stores later, the rule is the same: every client is helped by us, not a junior. Every account is treated like one of our own. That is the agency we wished we could have hired, so we built it.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn size="lg" onClick={() => navigate('contact')}>Work With Us</Btn>
              <Btn size="lg" variant="calendly" href="https://calendly.com/etherealsolutions/30min"><Ic name="calendar" size={16} color="white" /> Book a Free Call</Btn>
            </div>
          </div>

          {/* Right: team photo */}
          <div className="about-hero-photo" style={{ position: 'relative', alignSelf: 'stretch', minHeight: 560 }}>
            {/* Decorative emerald block behind photo */}
            <div style={{ position: 'absolute', top: 28, right: -18, bottom: 28, left: 36, background: 'linear-gradient(155deg,#10b981,#059669)', borderRadius: 28, opacity: 0.95 }} />
            {/* Photo */}
            <div style={{ position: 'absolute', top: 0, right: 18, bottom: 0, left: 0, borderRadius: 28, overflow: 'hidden', boxShadow: '0 24px 60px rgba(2,12,27,0.18)', border: '1px solid #e2e8f0' }}>
              <img src="team-photo.png" alt="Kamal & Mick at the Ethereal office" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', display: 'block' }} />
              {/* Floating credential card bottom-left */}
              <div style={{ position: 'absolute', left: 22, bottom: 22, background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(8px)', borderRadius: 16, padding: '14px 18px', boxShadow: '0 8px 24px rgba(0,0,0,0.18)', display: 'flex', alignItems: 'center', gap: 12, maxWidth: 260 }}>
                <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'linear-gradient(135deg,#059669,#10b981)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Ic name="users" size={18} color="white" sw={2.4} />
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 800, color: '#0a0f1e', lineHeight: 1.2 }}>Kamal & Mick</div>
                  <div style={{ fontSize: 11, color: '#64748b', fontWeight: 600, marginTop: 2 }}>Co-founders · Hands on every account</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Stats row */}
        <div style={{ maxWidth: 1100, margin: '72px auto 0', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, position: 'relative', borderTop: '1px solid #e2e8f0', paddingTop: 36 }} className="hero-stats-row">
          {[
            ['5+', 'Years running e-commerce'],
            ['110+', 'Stores scaled & approved'],
            ['€2.4M+', 'Spend & revenue managed'],
            ['100%', 'GMC success rate'],
          ].map(([v, l], i) => (
            <div key={l} style={{ textAlign: 'center', padding: '0 20px', borderRight: i < 3 ? '1px solid #e2e8f0' : 'none' }}>
              <div style={{ fontSize: 36, fontWeight: 900, color: '#10b981', lineHeight: 1, marginBottom: 8 }}>{v}</div>
              <div style={{ fontSize: 12, fontWeight: 600, color: '#94a3b8', letterSpacing: 1, textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Team, original section style restored, with first-person bios */}
      <section style={{ padding: '96px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 980, margin: '0 auto' }}>
          <SectionHeader badge="The Founders" title="Meet the team. All two of us." sub="No junior account managers, no outsourcing. Just the two of us, on every account, every day." />
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            {[
              {
                name: 'Kamal',
                role: 'Co-Founder',
                photo: 'kamal.jpg',
                pos: 'center 28%',
                paras: [
                  "I got into e-commerce at 19, building dropshipping stores out of my bedroom. The first big store I scaled was suspended for misrepresentation three weeks after it started printing money. I spent the next four months learning Google's policy framework end to end, got it reinstated myself, and never looked back.",
                  "Today I handle every approval and recovery case at Ethereal personally. If your account is suspended, I am the one rebuilding your trust signals, restructuring your product data and writing your appeal. That is also why we have a 100% success rate. Every case goes through one pair of hands, mine.",
                ],
              },
              {
                name: 'Mick',
                role: 'Co-Founder',
                photo: 'mick.webp',
                pos: 'center 25%',
                paras: [
                  "I come from the paid-media side. I started running Meta ads for my own dropshipping stores at 20, doing solid volume. But a few things kept frustrating me: the endless cycle of testing new products and building new campaigns, plus the inconsistency of Meta ads themselves.",
                  "Then Kamal introduced me to Google Ads. The consistency was on another level, and after launching my first Google-driven store, I never looked back. Google Ads became an obsession. Getting GMCs approved, scaling accounts, optimizing campaigns.",
                  "Now with the agency, we treat every store like it's our own. Helping others succeed is what we love doing. Let's scale yours next.",
                ],
              },
            ].map(p => (
              <div key={p.name} style={{ background: 'white', borderRadius: 22, padding: '36px 28px', boxShadow: '0 4px 24px rgba(0,0,0,0.06)', border: '1px solid #f1f5f9', textAlign: 'center' }}>
                <div style={{ width: 128, height: 128, borderRadius: '50%', overflow: 'hidden', margin: '0 auto 20px', boxShadow: '0 6px 24px rgba(16,185,129,0.22)', border: '3px solid #d1fae5' }}>
                  <img src={p.photo} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: p.pos, display: 'block' }} />
                </div>
                <div style={{ fontWeight: 900, fontSize: 22, color: '#0a0f1e', marginBottom: 4 }}>{p.name}</div>
                <div style={{ fontSize: 12, color: '#10b981', fontWeight: 700, marginBottom: 18, letterSpacing: 1, textTransform: 'uppercase' }}>{p.role}</div>
                {p.paras.map((para, i) => (
                  <p key={i} style={{ fontSize: 14, color: '#64748b', lineHeight: 1.78, marginBottom: 12, textAlign: 'left' }}>{para}</p>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values, lead with no-juniors USP */}
      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'stretch' }}>
            {/* Left: bigger story */}
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ marginBottom: 18 }}><Badge>What We Stand For</Badge></div>
              <h2 style={{ fontSize: 44, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.1, letterSpacing: -0.5, marginBottom: 24 }}>
                Built to <span style={{ color: '#10b981' }}>stay senior.</span>
              </h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <p style={{ fontSize: 16.5, color: '#475569', lineHeight: 1.78 }}>
                  We could have hired ten junior managers and tripled our roster. We did not. We cap our client list so every account gets owner-level attention, every week.
                </p>
                <p style={{ fontSize: 16.5, color: '#475569', lineHeight: 1.78 }}>
                  That is the agency we wished we could have hired ourselves. Senior eyes on every appeal, every campaign and every weekly report. No second-tier support, no "I will check with my manager", no waiting three days for a reply.
                </p>
                <p style={{ fontSize: 16.5, color: '#475569', lineHeight: 1.78 }}>
                  When you work with Ethereal, you work with Kamal and Mick directly. The same two people who built and scaled their own e-commerce stores, who handle every policy case personally, and who treat your account like it is paying their own rent.
                </p>
              </div>

              {/* Mini stats strip to fill bottom and add weight */}
              <div style={{ marginTop: 'auto', paddingTop: 36, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, borderTop: '1px solid #e2e8f0' }}>
                {[['2','Senior owners on every account'],['5+','Years of Google experience'],['24/7','Direct WhatsApp access']].map(([v, l], i) => (
                  <div key={l} style={{ paddingRight: i < 2 ? 16 : 0, paddingLeft: i > 0 ? 16 : 0, borderRight: i < 2 ? '1px solid #e2e8f0' : 'none' }}>
                    <div style={{ fontSize: 28, fontWeight: 900, color: '#10b981', lineHeight: 1, marginBottom: 6 }}>{v}</div>
                    <div style={{ fontSize: 12, fontWeight: 600, color: '#64748b', lineHeight: 1.4 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right: stacked cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {values.map(v => <FeatureCard key={v.title} {...v} />)}
            </div>
          </div>
        </div>
      </section>

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

const ContactPage = ({ navigate }) => {
  return (
    <div className="page-wrap">
      <section style={{ background: 'linear-gradient(160deg,#f0fdf4 0%,white 50%)', padding: '96px 32px 48px' }}>
        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ marginBottom: 20 }}><Badge>Get In Touch</Badge></div>
          <h1 style={{ fontSize: 50, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.1, marginBottom: 16 }}>Let's Get Your Store <span style={{ color: '#10b981' }}>Approved & Scaling</span></h1>
          <p style={{ fontSize: 16, color: '#64748b', lineHeight: 1.7 }}>Reach out via WhatsApp for the fastest response, or book a free 30-min strategy call. No forms, no waiting, just real humans giving real answers.</p>
        </div>
      </section>

      <section style={{ padding: '20px 32px 96px', background: 'white' }}>
        <div style={{ maxWidth: 960, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }} className="two-col">
          <a href="https://wa.me/31615232684" target="_blank" rel="noopener noreferrer"
            style={{ display: 'flex', flexDirection: 'column', gap: 18, background: '#f0fdf4', border: '2px solid #10b981', borderRadius: 22, padding: '36px 32px', textDecoration: 'none', transition: 'transform 0.2s, box-shadow 0.2s' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 40px rgba(16,185,129,0.22)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
            <div style={{ width: 60, height: 60, borderRadius: '50%', background: '#25d366', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Ic name="wa" size={28} color="white" />
            </div>
            <div>
              <div style={{ fontWeight: 800, fontSize: 20, color: '#0a0f1e', marginBottom: 6 }}>WhatsApp us directly</div>
              <div style={{ fontSize: 14, color: '#475569', lineHeight: 1.6, marginBottom: 14 }}>Fastest response, usually within minutes, even on weekends. Best for quick questions or if you want to get started today.</div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 700, color: '#059669' }}>+31 6 15232684 <Ic name="arrow" size={14} color="#059669" sw={2.5} /></div>
            </div>
          </a>
          <a href="https://calendly.com/etherealsolutions/30min" target="_blank" rel="noopener noreferrer"
            style={{ display: 'flex', flexDirection: 'column', gap: 18, background: '#eef2ff', border: '2px solid #4f46e5', borderRadius: 22, padding: '36px 32px', textDecoration: 'none', transition: 'transform 0.2s, box-shadow 0.2s' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 40px rgba(79,70,229,0.22)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
            <div style={{ width: 60, height: 60, borderRadius: '50%', background: '#4f46e5', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Ic name="calendar" size={28} color="white" />
            </div>
            <div>
              <div style={{ fontWeight: 800, fontSize: 20, color: '#0a0f1e', marginBottom: 6 }}>Book a free 30-min call</div>
              <div style={{ fontSize: 14, color: '#475569', lineHeight: 1.6, marginBottom: 14 }}>Walk through your situation with one of our specialists. We'll review your GMC/ads setup live and send a plan after.</div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 700, color: '#4338ca' }}>Pick a time <Ic name="arrow" size={14} color="#4338ca" sw={2.5} /></div>
            </div>
          </a>
        </div>

        <div style={{ maxWidth: 960, margin: '40px auto 0', background: '#f8fafc', borderRadius: 20, padding: '28px 32px', border: '1px solid #e2e8f0', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }} className="three-col">
          {[
            ['Step 1','We review your GMC/ads situation within the hour'],
            ['Step 2','You get a clear plan with transparent pricing'],
            ['Step 3','On approval we start, with most work live within 48h']
          ].map(([t, d]) => (
            <div key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{ width: 30, height: 30, borderRadius: '50%', background: 'linear-gradient(135deg,#059669,#10b981)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 800, color: 'white', flexShrink: 0 }}>{t.slice(-1)}</div>
              <div style={{ fontSize: 14, color: '#475569', lineHeight: 1.55, paddingTop: 4 }}>{d}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { AboutPage, ContactPage });
