const { useState, useEffect, useRef } = React;

/* ── SVG Icon Library ─────────────────────────────────────── */
const Ic = ({ name, size = 22, color = '#059669', sw = 1.9 }) => {
  const d = {
    check:    <><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></>,
    zap:      <><path d="M13 2 3 14h9l-1 10 10-12h-9z"/></>,
    book:     <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></>,
    chat:     <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    refresh:  <><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></>,
    shield:   <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    gear:     <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    chart:    <><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></>,
    target:   <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    trending: <><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></>,
    file:     <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>,
    users:    <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    dollar:   <><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></>,
    award:    <><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></>,
    clock:    <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    arrow:    <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    star:     <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
    heart:    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>,
    eye:      <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
    lock:     <><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    store:    <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></>,
    profit:   <><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></>,
    percent:  <><line x1="19" y1="5" x2="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></>,
    cro:      <><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></>,
    wa:       <><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></>,
    instagram:<><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></>,
    mail:     <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      {d[name] || null}
    </svg>
  );
};

/* ── Logo ─────────────────────────────────────────────────── */
const Logo = ({ navigate, theme = 'light' }) => (
  <div onClick={() => navigate('home')} style={{ cursor: 'pointer', userSelect: 'none', display: 'flex', alignItems: 'center' }}>
    <img src="logo.png" alt="Ethereal Solutions" height={38}
      style={{ display: 'block', height: 38, width: 'auto', maxWidth: 180, filter: theme === 'dark' ? 'brightness(0) invert(1)' : 'none' }} />
  </div>
);

/* ── Button ───────────────────────────────────────────────── */
const Btn = ({ children, variant = 'primary', onClick, size = 'md', href, style: extra }) => {
  const [hov, setHov] = useState(false);
  const base = { display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer', border: 'none', fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, borderRadius: 50, transition: 'all 0.2s ease', textDecoration: 'none', lineHeight: 1 };
  const sizes = { sm: { fontSize: 13, padding: '9px 20px' }, md: { fontSize: 14, padding: '13px 28px' }, lg: { fontSize: 15, padding: '16px 36px' } };
  const vars = {
    primary:  { background: hov ? '#047857' : '#059669', color: 'white', boxShadow: hov ? '0 8px 28px rgba(5,150,105,0.45)' : '0 4px 14px rgba(5,150,105,0.3)' },
    outline:  { background: 'transparent', color: hov ? '#059669' : '#1e293b', border: `2px solid ${hov ? '#059669' : '#cbd5e1'}` },
    white:    { background: hov ? '#f0fdf4' : 'white', color: '#059669', boxShadow: hov ? '0 4px 16px rgba(0,0,0,0.12)' : '0 2px 8px rgba(0,0,0,0.08)' },
    whatsapp: { background: hov ? '#1da851' : '#25d366', color: 'white', boxShadow: hov ? '0 8px 28px rgba(37,211,102,0.4)' : '0 4px 14px rgba(37,211,102,0.25)' },
    calendly: { background: hov ? '#075985' : '#0369a1', color: 'white', boxShadow: hov ? '0 8px 28px rgba(3,105,161,0.4)' : '0 4px 14px rgba(3,105,161,0.25)' },
    dark:     { background: hov ? '#1e293b' : '#0f172a', color: 'white' },
  };
  const El = href ? 'a' : 'button';
  return <El href={href} target={href && href.startsWith('http') ? '_blank' : undefined} rel={href && href.startsWith('http') ? 'noopener noreferrer' : undefined} onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ ...base, ...sizes[size], ...vars[variant], ...extra }}>{children}</El>;
};

/* ── Shared primitives ────────────────────────────────────── */
const Badge = ({ children }) => (
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#d1fae5', color: '#065f46', fontSize: 12, fontWeight: 700, padding: '5px 13px', borderRadius: 50, letterSpacing: 0.4 }}>{children}</span>
);

const Stars = () => (
  <a href="https://nl.trustpilot.com/review/etherealsolutions.nl" target="_blank" rel="noopener noreferrer"
    style={{ color: '#f59e0b', fontSize: 16, letterSpacing: 1, textDecoration: 'none' }}>★★★★★</a>
);

const IcBox = ({ icon, size = 50, bg, color = '#059669' }) => (
  <div style={{ width: size, height: size, borderRadius: Math.round(size * 0.28), background: bg || 'linear-gradient(135deg,#d1fae5,#a7f3d0)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
    <Ic name={icon} size={Math.round(size * 0.46)} color={color} />
  </div>
);

const SectionHeader = ({ badge, title, sub, center = true, dark }) => (
  <div style={{ textAlign: center ? 'center' : 'left', marginBottom: 52 }}>
    {badge && <div style={{ marginBottom: 14 }}><Badge>{badge}</Badge></div>}
    <h2 style={{ fontSize: 40, fontWeight: 900, color: dark ? 'white' : '#0a0f1e', lineHeight: 1.12, marginBottom: 16, textWrap: 'pretty' }}>{title}</h2>
    {sub && <p style={{ fontSize: 17, color: dark ? 'rgba(255,255,255,0.68)' : '#64748b', maxWidth: 600, margin: center ? '0 auto' : 0, lineHeight: 1.7 }}>{sub}</p>}
  </div>
);

/* ── Marquee ticker ───────────────────────────────────────── */
const Marquee = ({ items }) => (
  <div style={{ overflow: 'hidden', background: '#ecfdf5', borderTop: '1px solid #a7f3d0', borderBottom: '1px solid #a7f3d0', padding: '13px 0' }}>
    <div style={{ display: 'flex', animation: 'marquee 28s linear infinite', width: 'max-content' }}>
      {[...items, ...items].map((item, i) => (
        <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '0 36px', whiteSpace: 'nowrap', color: '#065f46', fontSize: 13, fontWeight: 700 }}>
          <span style={{ color: '#10b981', fontSize: 10 }}>◆</span> {item}
        </span>
      ))}
    </div>
  </div>
);

/* ── FeatureCard ──────────────────────────────────────────── */
const FeatureCard = ({ icon, title, desc, dark, wide, tall }) => {
  const [hov, setHov] = useState(false);
  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ background: dark ? (hov ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.04)') : 'white', borderRadius: 20, padding: wide ? '32px 36px' : tall ? '36px 28px' : '28px 24px', boxShadow: hov && !dark ? '0 12px 40px rgba(0,0,0,0.09)' : dark ? 'none' : '0 2px 16px rgba(0,0,0,0.05)', border: `1px solid ${dark ? 'rgba(255,255,255,0.09)' : hov ? '#a7f3d0' : '#f1f5f9'}`, transition: 'all 0.25s', transform: hov ? 'translateY(-2px)' : 'none', display: wide ? 'flex' : 'block', gap: wide ? 28 : 0, alignItems: wide ? 'center' : 'flex-start', height: '100%' }}>
      <IcBox icon={icon} size={wide ? 56 : 48} bg={dark ? 'rgba(16,185,129,0.15)' : undefined} color={dark ? '#10b981' : '#059669'} />
      <div style={{ marginTop: wide ? 0 : 18 }}>
        <div style={{ fontWeight: 800, fontSize: 16, marginBottom: 9, color: dark ? 'white' : '#0a0f1e' }}>{title}</div>
        <div style={{ color: dark ? 'rgba(255,255,255,0.62)' : '#64748b', fontSize: 14, lineHeight: 1.68 }}>{desc}</div>
      </div>
    </div>
  );
};

/* ── Testimonial ──────────────────────────────────────────── */
const TestimonialCard = ({ name, date, country, text, title, large }) => (
  <div style={{ background: 'white', borderRadius: large ? 22 : 18, padding: large ? '36px 32px' : '28px 26px', boxShadow: '0 4px 24px rgba(0,0,0,0.06)', border: '1px solid #f1f5f9', height: '100%', display: 'flex', flexDirection: 'column' }}>
    {large && <div style={{ fontSize: 48, lineHeight: 1, color: '#d1fae5', fontFamily: 'Georgia, serif', marginBottom: 12 }}>"</div>}
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
      <div style={{ width: large ? 48 : 40, height: large ? 48 : 40, borderRadius: '50%', background: 'linear-gradient(135deg,#059669,#10b981)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 800, fontSize: large ? 18 : 15 }}>{name[0]}</div>
      <div>
        <div style={{ fontWeight: 700, fontSize: large ? 16 : 15, color: '#0a0f1e' }}>{name}</div>
        <div style={{ fontSize: 12, color: '#94a3b8' }}>{date} · {country}</div>
      </div>
    </div>
    <Stars />
    {title && <div style={{ fontWeight: 700, fontSize: large ? 16 : 14, color: '#0a0f1e', marginTop: 12, marginBottom: 8 }}>{title}</div>}
    <p style={{ fontSize: large ? 15 : 14, color: '#475569', lineHeight: 1.7, marginTop: title ? 0 : 10, flex: 1 }}>{text}</p>
  </div>
);

/* ── GMC Status Widget ────────────────────────────────────── */
const GMCWidget = () => (
  <div className="float-a" style={{ background: 'white', borderRadius: 22, padding: 28, boxShadow: '0 28px 72px rgba(0,0,0,0.13)', width: 300, 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)' }}>✓ Approved in 7 days</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
      <IcBox icon="store" size={46} /><div>
        <div style={{ fontWeight: 800, fontSize: 16, color: '#0a0f1e' }}>GMC Status</div>
        <div style={{ color: '#10b981', fontSize: 13, fontWeight: 600 }}>Approved ✓</div>
      </div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 20 }}>
      {[['2,847','Products Listed'],['€18.2K','Monthly Revenue']].map(([v,l]) => (
        <div key={l}><div style={{ fontSize: 26, fontWeight: 900, color: '#0a0f1e' }}>{v}</div><div style={{ fontSize: 12, color: '#64748b', marginTop: 2 }}>{l}</div></div>
      ))}
    </div>
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 7 }}>
        <span style={{ fontSize: 12, color: '#64748b' }}>Compliance Score</span>
        <span style={{ fontSize: 12, fontWeight: 700, color: '#059669' }}>85%</span>
      </div>
      <div style={{ height: 7, background: '#f1f5f9', borderRadius: 4 }}>
        <div style={{ height: '100%', width: '85%', background: 'linear-gradient(90deg,#10b981,#059669)', borderRadius: 4 }} />
      </div>
    </div>
  </div>
);

/* ── Shopping Widget ──────────────────────────────────────── */
const ShoppingWidget = () => (
  <div className="float-b" style={{ background: 'rgba(255,255,255,0.07)', backdropFilter: 'blur(20px)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 22, padding: 28, width: 300, 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 }}>▲ +24% MoM</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
      <IcBox icon="trending" size={46} bg="rgba(16,185,129,0.2)" color="#10b981" />
      <div><div style={{ fontWeight: 800, fontSize: 15, color: 'white' }}>Google Shopping</div><div style={{ color: '#10b981', fontSize: 13, fontWeight: 600 }}>Campaigns Active</div></div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 20 }}>
      {[['4.2×','ROAS'],['€142K','Monthly Revenue']].map(([v,l]) => (
        <div key={l}><div style={{ fontSize: 26, fontWeight: 900, color: 'white' }}>{v}</div><div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{l}</div></div>
      ))}
    </div>
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 7 }}>
        <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>Ad Efficiency</span>
        <span style={{ fontSize: 12, fontWeight: 700, color: '#10b981' }}>92%</span>
      </div>
      <div style={{ height: 7, background: 'rgba(255,255,255,0.1)', borderRadius: 4 }}>
        <div style={{ height: '100%', width: '92%', background: 'linear-gradient(90deg,#10b981,#22c55e)', borderRadius: 4 }} />
      </div>
    </div>
  </div>
);

/* ── CTA Banner ───────────────────────────────────────────── */
const CTABanner = ({ navigate }) => (
  <section style={{ background: 'linear-gradient(135deg,#059669 0%,#10b981 100%)', padding: '88px 32px' }}>
    <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
      <h2 style={{ fontSize: 42, fontWeight: 900, color: 'white', marginBottom: 14, lineHeight: 1.12 }}>Ready to Start Selling on Google Shopping?</h2>
      <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.82)', marginBottom: 40, lineHeight: 1.65 }}>Join 110+ successful e-commerce businesses. No cure, no pay guarantee on every GMC service.</p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <Btn size="lg" variant="white" 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 a Free Call
        </Btn>
        <Btn size="lg" variant="whatsapp" href="https://wa.me/31615232684">
          <Ic name="wa" size={16} color="white" /> WhatsApp
        </Btn>
      </div>
    </div>
  </section>
);

/* ── FAQ Accordion ────────────────────────────────────────── */
const FAQ = ({ items }) => {
  const [open, setOpen] = useState(null);
  return (
    <div style={{ maxWidth: 760, margin: '0 auto' }}>
      {items.map((item, i) => (
        <div key={i} onClick={() => setOpen(open === i ? null : i)}
          style={{ border: '1px solid #e2e8f0', borderRadius: 14, marginBottom: 10, overflow: 'hidden', cursor: 'pointer' }}>
          <div style={{ padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: open === i ? '#f8fafc' : 'white' }}>
            <span style={{ fontWeight: 700, fontSize: 15, color: '#0a0f1e', paddingRight: 16 }}>{item.q}</span>
            <span style={{ fontSize: 20, color: '#10b981', fontWeight: 700, flexShrink: 0, transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform 0.2s', display: 'block' }}>+</span>
          </div>
          {open === i && <div style={{ padding: '0 24px 20px', background: '#f8fafc', fontSize: 14, color: '#475569', lineHeight: 1.72 }}>{item.a}</div>}
        </div>
      ))}
    </div>
  );
};

const TESTIMONIALS = [
  { name: 'K.', date: '19 Aug 2025', country: 'NL', title: 'Aan de slag gegaan met Kamal en Mick...', text: 'Recent aan de slag gegaan met Kamal en Mick en ben heel tevreden. Zodra ik een vraag heb of ergens extra hulp bij nodig heb, zitten ze er direct op. Top service!' },
  { name: 'Dion', date: '1 Aug 2025', country: 'NL', title: 'Ik werk nu al een tijdje met Ethereal..', text: 'Ze reageren altijd mega snel. Als er iets misgaat wordt het direct opgepakt en opgelost. Alles loopt soepel en professioneel, met een persoonlijke touch.' },
  { name: 'Sam Van Es', date: '23 Jul 2025', country: 'FR', title: 'Topservice en zichtbare resultaten!', text: 'Geen stress of gedoe, en het mooiste: zichtbaar resultaat in campagnes. Snelle reacties en 100% vertrouwen.' },
];

/* ── Nav ──────────────────────────────────────────────────── */
const Nav = ({ currentPage, navigate }) => {
  const [mobile, setMobile] = useState(false);
  const [servOpen, setServOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  useEffect(() => { window.scrollTo(0, 0); }, [currentPage]);

  const links = [
    { label: 'Home', page: 'home' },
    { label: 'Services', dropdown: [{ label: 'GMC Services', page: 'gmc', desc: 'Approval, recovery & monitoring' }, { label: 'Google Shopping Ads', page: 'shopping', desc: 'Profit-first media buying & scaling' }, { label: 'Insider Service', page: 'insider', desc: 'Exclusive high-end recovery' }, { label: 'Pre-Approved GMC Store', page: 'preapproved', desc: 'Ready-made stores, live in 2 days' }] },
    { label: 'Results', page: 'cases' },
    { label: 'Pricing', page: 'pricing' },
    { label: 'About', page: 'about' },
    { label: 'Partner', page: 'partner' },
  ];
  const lStyle = (active) => ({ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 14, color: active ? '#059669' : '#334155', padding: '8px 12px', borderRadius: 8, transition: 'color 0.15s', display: 'block' });

  return (
    <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000, background: scrolled ? 'rgba(255,255,255,0.96)' : 'white', backdropFilter: scrolled ? 'blur(16px)' : 'none', boxShadow: scrolled ? '0 2px 20px rgba(0,0,0,0.07)' : '0 1px 0 #e2e8f0', transition: 'all 0.3s' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px', height: 72, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Logo navigate={navigate} />
        <div className="hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          {links.map(l => l.dropdown ? (
            <div key="svc" style={{ position: 'relative' }} onMouseEnter={() => setServOpen(true)} onMouseLeave={() => setServOpen(false)}>
              <button style={{ ...lStyle(['gmc','shopping'].includes(currentPage)), display: 'flex', alignItems: 'center', gap: 5 }}>
                {l.label} <span style={{ fontSize: 10, transform: servOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', display: 'inline-block' }}>▼</span>
              </button>
              {servOpen && (
                <div style={{ position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)', paddingTop: 8 }}>
                  <div style={{ background: 'white', borderRadius: 16, padding: 10, boxShadow: '0 20px 60px rgba(0,0,0,0.13)', border: '1px solid #f1f5f9', width: 270 }}>
                    {l.dropdown.map(d => (
                      <div key={d.page} onClick={() => { navigate(d.page); setServOpen(false); }} style={{ padding: '12px 14px', borderRadius: 10, cursor: 'pointer' }}
                        onMouseEnter={e => e.currentTarget.style.background = '#f8fafc'} onMouseLeave={e => e.currentTarget.style.background = 'none'}>
                        <div style={{ fontWeight: 700, fontSize: 14, color: '#0a0f1e' }}>{d.label}</div>
                        <div style={{ fontSize: 12, color: '#94a3b8', marginTop: 2 }}>{d.desc}</div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ) : (
            <button key={l.page} onClick={() => navigate(l.page)} style={lStyle(currentPage === l.page)}>{l.label}</button>
          ))}
        </div>
        <div className="hide-mobile" style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <Btn size="sm" variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={14} color="white" /> WhatsApp</Btn>
          <Btn size="sm" onClick={() => navigate('contact')}>Get Started</Btn>
        </div>
        <button className="hide-desktop" onClick={() => setMobile(!mobile)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 22, color: '#0a0f1e', padding: 8 }}>{mobile ? '✕' : '☰'}</button>
      </div>
      {mobile && (
        <div className="hide-desktop" style={{ background: 'white', borderTop: '1px solid #e2e8f0', padding: '16px 28px 24px' }}>
          {links.map(l => l.dropdown ? l.dropdown.map(d => (
            <button key={d.page} onClick={() => { navigate(d.page); setMobile(false); }} style={{ ...lStyle(currentPage === d.page), width: '100%', textAlign: 'left', padding: '12px 0' }}>{d.label}</button>
          )) : (
            <button key={l.page} onClick={() => { navigate(l.page); setMobile(false); }} style={{ ...lStyle(currentPage === l.page), width: '100%', textAlign: 'left', padding: '12px 0' }}>{l.label}</button>
          ))}
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Btn variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={15} color="white" /> WhatsApp Us</Btn>
            <Btn onClick={() => { navigate('contact'); setMobile(false); }}>Get Started</Btn>
          </div>
        </div>
      )}
    </nav>
  );
};

/* ── Footer ───────────────────────────────────────────────── */
const Footer = ({ navigate }) => (
  <footer style={{ background: '#0a0f1e', color: 'white', padding: '72px 32px 36px' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 48, marginBottom: 56 }}>
        <div>
          <Logo navigate={navigate} theme="dark" />
          <p style={{ color: '#94a3b8', fontSize: 14, lineHeight: 1.75, marginTop: 18, maxWidth: 270 }}>Your trusted partner for guaranteed GMC approval and Google Shopping success. No cure, no pay.</p>
          <a href="mailto:info@etherealsolutions.nl" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#cbd5e1', fontSize: 14, fontWeight: 600, marginTop: 14, textDecoration: 'none', transition: 'color 0.15s' }}
            onMouseEnter={e => e.currentTarget.style.color = '#10b981'} onMouseLeave={e => e.currentTarget.style.color = '#cbd5e1'}>
            <Ic name="mail" size={14} color="currentColor" /> info@etherealsolutions.nl
          </a>
          <div style={{ display: 'flex', gap: 10, marginTop: 22, flexWrap: 'wrap' }}>
            <Btn size="sm" variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={14} color="white" /> WhatsApp</Btn>
            <Btn size="sm" variant="calendly" href="https://calendly.com/etherealsolutions/30min"><Ic name="calendar" size={14} color="white" /> Free Call</Btn>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
            <a href="https://www.instagram.com/etherealsolutions.agency/" target="_blank" rel="noopener noreferrer" aria-label="Follow us on Instagram"
              style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.background = 'linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)'; e.currentTarget.style.borderColor = 'transparent'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; }}>
              <Ic name="instagram" size={18} color="white" sw={2} />
            </a>
            <a href="https://nl.trustpilot.com/review/etherealsolutions.nl" target="_blank" rel="noopener noreferrer" aria-label="Trustpilot reviews"
              style={{ width: 40, height: 40, borderRadius: 10, background: '#00b67a', border: '1px solid #00b67a', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.filter = 'brightness(1.1)'; }}
              onMouseLeave={e => { e.currentTarget.style.filter = 'none'; }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white" aria-hidden="true">
                <path d="M12 1.5l2.9 7.6H23l-6.6 4.7 2.6 7.7L12 16.9l-7 4.6 2.6-7.7L1 9.1h8.1L12 1.5z"/>
              </svg>
            </a>
          </div>
        </div>
        {[
          { title: 'Services', links: [['GMC Approval','gmc'],['Google Shopping Ads','shopping'],['Insider Service','insider'],['Pre-Approved Store','preapproved']] },
          { title: 'Company', links: [['About Us','about'],['Case Studies','cases'],['Pricing','pricing'],['Blog','blog'],['Become a Partner','partner'],['Contact','contact']] },
          { title: 'Connect', links: [['Instagram','__instagram'],['WhatsApp','__whatsapp'],['Book a Call','__calendly'],['Trustpilot','__trustpilot']] },
          { title: 'Legal', links: [['Privacy Policy','contact'],['Terms of Service','contact'],['Cookie Policy','contact']] },
        ].map(col => (
          <div key={col.title}>
            <div style={{ fontWeight: 700, fontSize: 11, marginBottom: 20, color: 'rgba(255,255,255,0.4)', letterSpacing: 1.5, textTransform: 'uppercase' }}>{col.title}</div>
            {col.links.map(([label, page]) => {
              const externalMap = {
                __instagram: 'https://www.instagram.com/etherealsolutions.agency/',
                __whatsapp: 'https://wa.me/31615232684',
                __calendly: 'https://calendly.com/etherealsolutions/30min',
                __trustpilot: 'https://nl.trustpilot.com/review/etherealsolutions.nl',
              };
              if (externalMap[page]) {
                return (
                  <a key={label} href={externalMap[page]} target="_blank" rel="noopener noreferrer"
                    style={{ color: '#94a3b8', fontSize: 14, marginBottom: 11, display: 'block', textDecoration: 'none', transition: 'color 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#10b981'} onMouseLeave={e => e.currentTarget.style.color = '#94a3b8'}>{label}</a>
                );
              }
              return (
                <div key={label} onClick={() => navigate(page)} style={{ color: '#94a3b8', fontSize: 14, marginBottom: 11, cursor: 'pointer', transition: 'color 0.15s' }}
                  onMouseEnter={e => e.currentTarget.style.color = '#10b981'} onMouseLeave={e => e.currentTarget.style.color = '#94a3b8'}>{label}</div>
              );
            })}
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid #1e293b', paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
        <div style={{ color: '#475569', fontSize: 13 }}>© 2026 Ethereal Solutions. All rights reserved.</div>
        <a href="https://nl.trustpilot.com/review/etherealsolutions.nl" target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none' }}>
          <span style={{ color: '#f59e0b', fontSize: 15, letterSpacing: 1 }}>★★★★★</span>
          <span style={{ color: '#475569', fontSize: 13 }}>4.6/5 · 21 reviews on <span style={{ color: '#00b67a', fontWeight: 700 }}>Trustpilot</span></span>
        </a>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Ic, IcBox, Logo, Btn, Badge, Stars, SectionHeader, Marquee, FeatureCard, TestimonialCard, GMCWidget, ShoppingWidget, CTABanner, FAQ, Nav, Footer, TESTIMONIALS });
