/* v2 — Websites service page, light SaaS theme */

function WebsitesHero() {
  return (
    <section id="top" className="relative pt-16 sm:pt-24 pb-24 overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 sm:px-8 grid lg:grid-cols-12 gap-10 items-center">
        <div className="lg:col-span-6">
          <Reveal variant="up">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[12px] font-medium text-[color:var(--ink-700)]" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
              <Ax.Cloud className="w-3.5 h-3.5" style={{ color: 'var(--brand)' }} strokeWidth={2.2} />
              <span>Design · Hosting · Domain · Care</span>
            </div>
          </Reveal>
          <Reveal variant="up" delay={80}>
            <h1 className="mt-5 text-[40px] sm:text-[52px] lg:text-[64px] font-semibold tracking-[-0.02em] leading-[1.02] text-balance text-[color:var(--ink)]">
              A website that <span className="shiny-text">earns</span> its keep.
            </h1>
          </Reveal>
          <Reveal variant="up" delay={160}>
            <p className="mt-6 text-[17px] sm:text-[18px] text-[color:var(--ink-700)] leading-[1.55] max-w-[560px] text-pretty">
              We design, build, host, and look after business websites — domain and all. No DIY templates, no "drag-and-drop" software you'll never touch again. Just a real website that brings in customers.
            </p>
          </Reveal>
          <Reveal variant="up" delay={240}>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <a href="#demo" className="btn-primary inline-flex items-center justify-center gap-1.5 rounded-full text-[15px] font-semibold px-5 py-3">
                Book a consultation
                <Ax.ArrowRight className="w-4 h-4" />
              </a>
              <a href="#pricing" className="btn-ghost inline-flex items-center justify-center gap-1.5 rounded-full text-[15px] font-semibold px-5 py-3">
                See pricing
              </a>
            </div>
          </Reveal>
          <Reveal variant="up" delay={320}>
            <div className="mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-[13px] text-[color:var(--ink-700)]">
              <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5} />.co.za domain included</span>
              <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5} />Hosting + SSL</span>
              <span className="inline-flex items-center gap-1.5"><Ax.Check className="w-4 h-4" style={{ color: 'var(--brand)' }} strokeWidth={2.5} />Live in 1-2 weeks</span>
            </div>
          </Reveal>
        </div>
        <Reveal variant="scale" delay={180} className="lg:col-span-6">
          <WebsitesHeroMock />
        </Reveal>
      </div>
    </section>
  );
}

function WebsitesHeroMock() {
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true; v.defaultMuted = true; v.volume = 0;
    const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); };
    tryPlay();
    v.addEventListener('canplay', tryPlay);
    return () => v.removeEventListener('canplay', tryPlay);
  }, []);
  return (
    <div className="relative w-full mx-auto">
      <video ref={videoRef} autoPlay loop muted playsInline disableRemotePlayback preload="metadata" aria-hidden="true" className="w-full h-auto block" style={{ background: 'transparent' }}>
        <source src="/media/websites-hero.webm" type="video/webm" />
        <source src="/media/websites-hero.mp4"  type="video/mp4" />
      </video>
      <div className="hidden sm:flex absolute right-0 bottom-6 card-plain p-3 flex-col gap-1 w-[170px]">
        <div className="text-[10px] uppercase tracking-wider text-[color:var(--ink-500)] font-semibold">Domain · status</div>
        <div className="flex items-center gap-2 text-[13px] font-semibold text-[color:var(--ink)]">
          <span className="relative inline-flex w-2 h-2">
            <span className="absolute inset-0 rounded-full bg-emerald-500" />
            <span className="absolute inset-0 rounded-full bg-emerald-500 pulse-dot" />
          </span>
          .co.za active
        </div>
        <div className="text-[10px] text-[color:var(--ink-500)]">SSL · Auto-renew · 99.9% uptime</div>
      </div>
    </div>
  );
}

function WebsitesIncluded() {
  const items = [
    { icon: '🎨', title: 'Custom design',    body: 'Bespoke to your brand. No templates, no "Wix vibes". Designed by humans, reviewed by you.' },
    { icon: '🌐', title: 'Hosting + domain', body: '.co.za domain, reliable hosting, SSL, and backups all bundled. We handle the technical bits.' },
    { icon: '📱', title: 'Mobile-first',     body: 'Built to look great on phones (where 80% of your customers will see it) before anything else.' },
    { icon: '🛠️', title: 'Ongoing care',    body: 'Content updates, security patches, monthly backups, and uptime monitoring — all included.' },
  ];
  return (
    <section id="features" className="py-24 sm:py-32" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="max-w-2xl">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>What's included</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-[color:var(--ink)]">
            Everything in the package. <br className="hidden sm:block"/>One monthly invoice.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed max-w-xl">
            We bundle design, hosting, domain, and care into one product so you never get a "your hosting renewal failed" email from a third party again.
          </p>
        </Reveal>
        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {items.map((it, i) => (
            <Reveal key={it.title} variant="up" delay={(i % 4) * 80}>
              <div className="card p-6 card-hover h-full">
                <div className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
                  {it.icon}
                </div>
                <h3 className="mt-5 text-[17px] font-semibold tracking-tight text-[color:var(--ink)]">{it.title}</h3>
                <p className="mt-2 text-[14px] leading-relaxed text-[color:var(--ink-700)]">{it.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function WebsitesProcess() {
  const steps = [
    { n: '01', title: 'Brief',  body: '30-minute call to capture your brand, content, and goal. No long forms.', meta: 'Day 1' },
    { n: '02', title: 'Design', body: 'First preview within a week. You give us feedback in plain language; we iterate.', meta: 'Week 1' },
    { n: '03', title: 'Build',  body: 'Once design is approved, we build, host, and connect the domain. 1-2 weeks.', meta: 'Week 2-3' },
    { n: '04', title: 'Care',   body: 'Site is live. We monitor uptime, ship monthly updates, patch security, and back up nightly.', meta: 'Ongoing' },
  ];
  return (
    <section id="how" className="py-24 sm:py-32">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="max-w-2xl">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>Process</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-[color:var(--ink)]">
            From brief to live site <br className="hidden sm:block"/>in two weeks.
          </h2>
        </Reveal>
        <div className="mt-12 grid md:grid-cols-4 gap-5">
          {steps.map((s, i) => (
            <Reveal key={s.n} variant="up" delay={i * 100} className="relative card p-6 card-hover">
              <div className="flex items-center gap-3">
                <span className="inline-flex items-center justify-center w-9 h-9 rounded-full text-white text-[13px] font-semibold font-mono" style={{ background: 'var(--brand)' }}>{s.n}</span>
                <span className="text-[11px] font-semibold uppercase tracking-wider text-[color:var(--ink-500)]">{s.meta}</span>
              </div>
              <h3 className="mt-5 text-[18px] font-semibold tracking-tight text-[color:var(--ink)]">{s.title}</h3>
              <p className="mt-2 text-[13px] text-[color:var(--ink-700)] leading-relaxed">{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function WebsitesPricing() {
  const tiers = [
    { tier: 'Landing page', price: 'R 4,500', suffix: 'once-off + R 299 / mo',
      desc: 'One focused page. For a campaign, a launch, or a small business with a single offer.',
      cta: 'Book a consultation',
      features: [
        { text: 'Custom single-page design' },
        { text: '.co.za domain + hosting + SSL' },
        { text: 'Contact form + WhatsApp button' },
        { text: 'Mobile-first, fast load' },
        { text: 'Basic SEO setup' },
      ],
    },
    { tier: 'Business site', price: 'R 8,500', suffix: 'once-off + R 399 / mo',
      desc: 'Most popular — a proper multi-page business website. Home, about, services, contact.',
      cta: 'Book a consultation', popular: true,
      features: [
        { bold: 'Everything in Landing page, plus:', text: '' },
        { text: 'Up to 5 pages (Home, About, Services, Menu, Contact)' },
        { text: 'Custom photography touch-ups' },
        { text: 'Google Business Profile setup' },
        { text: 'Monthly content updates (up to 2 hrs)' },
        { text: 'Priority support' },
      ],
    },
    { tier: 'E-commerce', price: 'R 15,000', suffix: 'once-off + R 599 / mo',
      desc: 'Online store with payments. For shops that want to sell beyond the counter.',
      cta: 'Talk to sales',
      features: [
        { bold: 'Everything in Business site, plus:', text: '' },
        { text: 'Online store with payments (Yoco, PayFast, Peach)' },
        { text: 'Up to 50 products at launch' },
        { text: 'Order notifications via email + WhatsApp' },
        { text: 'Monthly product updates (up to 5 hrs)' },
      ],
    },
  ];
  return (
    <section id="pricing" className="py-24 sm:py-32" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="text-center max-w-2xl mx-auto">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>Pricing</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-[color:var(--ink)]">
            Once-off build + monthly care.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed">
            No hidden hosting bills. No surprise renewal. The monthly fee covers hosting, domain, SSL, backups, and ongoing care.
          </p>
          <p className="mt-3 text-[12px]" style={{ color: 'var(--brand)' }}>
            Placeholder pricing — final tiers confirmed during your consultation.
          </p>
        </Reveal>
        <div className="mt-14 grid md:grid-cols-3 gap-5 items-stretch">
          {tiers.map((t, i) => (
            <Reveal key={t.tier} variant="up" delay={i * 120} className="h-full">
              <WebPriceCard {...t} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function WebPriceCard({ tier, price, suffix, desc, features, popular, cta }) {
  return (
    <div className={"relative p-7 sm:p-8 flex flex-col h-full card-hover " + (popular ? "card-dark" : "card")}>
      {popular && (
        <span className="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider text-white" style={{ background: 'var(--brand)' }}>
          <Ax.Star className="w-3 h-3" strokeWidth={2.4} />
          Most popular
        </span>
      )}
      <div className="text-[13px] font-semibold uppercase tracking-wider" style={{ color: popular ? 'var(--brand)' : 'var(--ink-500)' }}>{tier}</div>
      <div className="mt-3 flex items-baseline gap-1.5">
        <span className="text-[36px] sm:text-[44px] font-semibold tracking-tight leading-none font-mono text-[color:var(--ink)]">{price}</span>
      </div>
      <div className="text-[12px] text-[color:var(--ink-500)] mt-1 font-mono">{suffix}</div>
      <p className="mt-3 text-[14px] leading-relaxed min-h-[3em] text-[color:var(--ink-700)]">{desc}</p>
      <a href="#demo" className={"mt-6 inline-flex items-center justify-center gap-1.5 rounded-full font-semibold text-[14px] px-5 py-3 " + (popular ? "btn-primary" : "btn-ghost")}>
        {cta}
        <Ax.ArrowRight className="w-4 h-4" />
      </a>
      <div className="mt-auto pt-7 border-t border-[color:var(--line)]">
        <ul className="space-y-3">
          {features.map((f, i) => (
            <li key={i} className="flex items-start gap-2.5 text-[14px] leading-relaxed">
              <span className="inline-flex items-center justify-center w-5 h-5 rounded-full shrink-0 mt-0.5" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
                <Ax.Check className="w-3 h-3" strokeWidth={3} style={{ color: 'var(--brand-hover)' }}/>
              </span>
              <span className="text-[color:var(--ink-700)]">
                {f.bold && <strong className="font-semibold text-[color:var(--ink)]">{f.bold} </strong>}
                {f.text}
              </span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

// ─── Demo section ─────────────────────────────────────────────────────────────
// src: set to null while the demo site isn't built yet → shows a branded placeholder.
// Swap null for a real URL (e.g. GitHub Pages) when the demo is ready.
const WEBSITE_DEMOS = [
  {
    id: 'ecommerce',
    title: 'Fashion Store',
    type: 'E-commerce',
    desc: 'Products, cart, and checkout — fully interactive.',
    accent: '#7c3aed',
    gradient: 'linear-gradient(135deg,#2e1065 0%,#7c3aed 60%,#c4b5fd 100%)',
    icon: '🛍️',
    src: null,
  },
  {
    id: 'saas',
    title: 'SaaS Dashboard',
    type: 'Software / SaaS',
    desc: 'Metrics, charts, user tables, and a dark UI.',
    accent: '#0284c7',
    gradient: 'linear-gradient(135deg,#082f49 0%,#0284c7 60%,#38bdf8 100%)',
    icon: '📊',
    src: null,
  },
  {
    id: 'leads',
    title: 'Legal Practice',
    type: 'Lead Generation',
    desc: 'Services, team, and a lead-capture form.',
    accent: '#1d4ed8',
    gradient: 'linear-gradient(135deg,#0f172a 0%,#1d4ed8 60%,#60a5fa 100%)',
    icon: '⚖️',
    src: null,
  },
  {
    id: 'restaurant',
    title: 'Restaurant',
    type: 'Food & Dining',
    desc: 'Full menu, table reservations, and gallery.',
    accent: '#b45309',
    gradient: 'linear-gradient(135deg,#1c1001 0%,#b45309 60%,#fde68a 100%)',
    icon: '🍽️',
    src: null,
  },
  {
    id: 'realestate',
    title: 'Property Agency',
    type: 'Real Estate',
    desc: 'Listings, search filters, and agent profiles.',
    accent: '#059669',
    gradient: 'linear-gradient(135deg,#052e16 0%,#059669 60%,#6ee7b7 100%)',
    icon: '🏠',
    src: null,
  },
  {
    id: 'gym',
    title: 'Gym & Fitness',
    type: 'Health & Fitness',
    desc: 'Membership plans and a class schedule.',
    accent: '#dc2626',
    gradient: 'linear-gradient(135deg,#1c0202 0%,#dc2626 60%,#fca5a5 100%)',
    icon: '💪',
    src: null,
  },
];

function makePlaceholderSrcdoc(demo) {
  return '<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><style>'
    + '*{margin:0;padding:0;box-sizing:border-box;}'
    + 'body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;}'
    + '.card{background:#fff;border-radius:20px;padding:52px 44px;max-width:400px;text-align:center;box-shadow:0 4px 32px rgba(0,0,0,0.09);}'
    + '.icon{font-size:60px;line-height:1;margin-bottom:20px;}'
    + '.badge{display:inline-block;background:' + demo.accent + '18;color:' + demo.accent + ';font-size:11px;font-weight:700;padding:4px 14px;border-radius:999px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:18px;}'
    + 'h1{font-size:24px;font-weight:700;color:#0f172a;margin-bottom:12px;letter-spacing:-0.01em;}'
    + 'p{font-size:14px;color:#64748b;line-height:1.65;margin-bottom:28px;}'
    + '.pill{display:inline-flex;align-items:center;gap:10px;background:' + demo.accent + ';color:#fff;padding:11px 26px;border-radius:999px;font-size:13px;font-weight:700;}'
    + '.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.75);animation:p 1.4s ease-in-out infinite;}'
    + '@keyframes p{0%,100%{opacity:1}50%{opacity:0.3}}'
    + '.axiom{margin-top:32px;font-size:12px;color:#94a3b8;}'
    + '.axiom a{color:' + demo.accent + ';text-decoration:none;font-weight:600;}'
    + '</style></head><body>'
    + '<div class="card">'
    + '<div class="icon">' + demo.icon + '</div>'
    + '<div class="badge">' + demo.type + '</div>'
    + '<h1>' + demo.title + ' demo</h1>'
    + '<p>This interactive demo is being built. Once it\'s live you\'ll be able to fully browse and interact with it right here.</p>'
    + '<div class="pill"><span class="dot"></span>Coming soon</div>'
    + '<p class="axiom">Built by <a href="/">Axiom Digital Solutions</a></p>'
    + '</div></body></html>';
}

function DemoPreviewCard({ demo, onOpen }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <button
      onClick={() => onOpen(demo)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="group w-full text-left rounded-2xl overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
      style={{
        border: '1px solid ' + (hovered ? demo.accent + '55' : 'var(--border, #e5e7eb)'),
        boxShadow: hovered ? '0 12px 40px -8px rgba(0,0,0,0.15), 0 0 0 1px ' + demo.accent + '22' : '0 2px 8px rgba(0,0,0,0.05)',
        transform: hovered ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'all 0.25s',
        background: 'var(--surface, #fff)',
        '--tw-ring-color': demo.accent,
      }}
    >
      {/* Fake browser chrome */}
      <div style={{ background: '#f1f5f9', borderBottom: '1px solid #e2e8f0', padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ display: 'flex', gap: 5, flexShrink: 0 }}>
          <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#ff5f57' }} />
          <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#febc2e' }} />
          <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#28c840' }} />
        </div>
        <div style={{ flex: 1, height: 18, borderRadius: 6, background: '#fff', border: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', padding: '0 8px', gap: 5 }}>
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          <span style={{ fontSize: 9, color: '#94a3b8', overflow: 'hidden', whiteSpace: 'nowrap' }}>demo.axiomdigitalsolutions.co.za/{demo.id}</span>
        </div>
      </div>

      {/* Gradient preview */}
      <div style={{ position: 'relative', height: 160, background: demo.gradient, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {/* Abstract UI skeleton */}
        <div style={{ position: 'absolute', inset: 0, opacity: 0.18 }}>
          <div style={{ position: 'absolute', top: '12%', left: '8%', right: '8%', height: 6, borderRadius: 4, background: '#fff' }} />
          <div style={{ position: 'absolute', top: '28%', left: '8%', width: '50%', height: 4, borderRadius: 4, background: '#fff' }} />
          <div style={{ position: 'absolute', top: '42%', left: '8%', right: '8%', height: 40, borderRadius: 8, background: '#fff' }} />
          <div style={{ position: 'absolute', top: '68%', left: '8%', width: '30%', height: 20, borderRadius: 6, background: '#fff' }} />
          <div style={{ position: 'absolute', top: '68%', left: '42%', width: '30%', height: 20, borderRadius: 6, background: '#fff' }} />
        </div>
        <span style={{ fontSize: 40, position: 'relative', zIndex: 1 }}>{demo.icon}</span>
        {/* Hover overlay */}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: hovered ? 1 : 0, transition: 'opacity 0.2s' }}>
          <div style={{ background: 'rgba(255,255,255,0.95)', borderRadius: 999, padding: '8px 20px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 700, color: demo.accent, boxShadow: '0 4px 16px rgba(0,0,0,0.2)' }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
            View demo
          </div>
        </div>
      </div>

      {/* Card footer */}
      <div style={{ padding: '14px 16px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
          <div>
            <p style={{ fontWeight: 700, fontSize: 14, color: 'var(--ink, #111)', lineHeight: 1.3 }}>{demo.title}</p>
            <p style={{ fontSize: 12, marginTop: 2, color: demo.accent, fontWeight: 600 }}>{demo.type}</p>
          </div>
          {!demo.src && (
            <span style={{ fontSize: 10, fontWeight: 700, padding: '3px 8px', borderRadius: 999, background: '#f1f5f9', color: '#94a3b8', whiteSpace: 'nowrap', marginTop: 2 }}>
              Coming soon
            </span>
          )}
        </div>
        <p style={{ fontSize: 13, marginTop: 8, lineHeight: 1.55, color: 'var(--ink-500, #6b7280)' }}>{demo.desc}</p>
      </div>
    </button>
  );
}

const VIEWER_DEVICES = {
  desktop: { label: 'Desktop', width: '100%'  },
  tablet:  { label: 'Tablet',  width: '768px' },
  mobile:  { label: 'Mobile',  width: '390px' },
};

function DemoViewer({ demo, onClose }) {
  const [device, setDevice] = React.useState('desktop');
  const [loaded, setLoaded]  = React.useState(false);
  const cfg = VIEWER_DEVICES[device];
  const placeholder = makePlaceholderSrcdoc(demo);

  // Scroll lock
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, []);

  // Escape key
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  // History — Back button closes the viewer
  React.useEffect(() => {
    window.history.pushState({ demoOpen: true }, '');
    const h = (e) => { if (!e.state || !e.state.demoOpen) onClose(); };
    window.addEventListener('popstate', h);
    return () => window.removeEventListener('popstate', h);
  }, [onClose]);

  React.useEffect(() => { setLoaded(false); }, [device]);

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 9999, display: 'flex', flexDirection: 'column', background: '#0f172a' }}>

      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 12px', height: 52, flexShrink: 0, background: '#0f172a', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>

        {/* Close */}
        <button onClick={onClose} aria-label="Close"
          style={{ width: 32, height: 32, borderRadius: '50%', border: 'none', cursor: 'pointer', background: 'rgba(255,255,255,0.08)', color: '#94a3b8', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
          onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.15)'}
          onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>

        {/* Name + type */}
        <div className="hidden sm:flex items-center gap-2 shrink-0">
          <span style={{ fontWeight: 700, fontSize: 13, color: '#f1f5f9' }}>{demo.title}</span>
          <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 999, background: demo.accent + '25', color: demo.accent }}>{demo.type}</span>
        </div>

        {/* Fake URL bar */}
        <div style={{ flex: 1, height: 28, borderRadius: 8, display: 'flex', alignItems: 'center', gap: 6, padding: '0 10px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)' }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#64748b" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          <span style={{ fontSize: 11, color: '#64748b', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>demo.axiomdigitalsolutions.co.za/{demo.id}</span>
        </div>

        {/* Device toggle */}
        <div style={{ display: 'flex', gap: 2, background: 'rgba(255,255,255,0.06)', borderRadius: 8, padding: 3, flexShrink: 0 }}>
          {Object.entries(VIEWER_DEVICES).map(([key, d]) => {
            const active = device === key;
            const icons = {
              desktop: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>,
              tablet:  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>,
              mobile:  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>,
            };
            return (
              <button key={key} onClick={() => setDevice(key)} title={d.label}
                style={{ width: 30, height: 26, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 6, border: 'none', cursor: 'pointer', background: active ? 'rgba(255,255,255,0.14)' : 'transparent', color: active ? '#f1f5f9' : '#64748b' }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.color = '#94a3b8'; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.color = '#64748b'; }}
              >
                {icons[key]}
              </button>
            );
          })}
        </div>

        {/* CTA */}
        <a href="#demo" onClick={onClose}
          className="hidden sm:flex items-center gap-1.5"
          style={{ background: demo.accent, color: '#fff', borderRadius: 8, padding: '6px 14px', fontSize: 12, fontWeight: 700, textDecoration: 'none', whiteSpace: 'nowrap', flexShrink: 0 }}
        >
          Get a site like this
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
      </div>

      {/* Iframe stage */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'stretch', justifyContent: 'center', background: device === 'desktop' ? '#0f172a' : '#1e293b', padding: device === 'desktop' ? 0 : '14px 8px', overflow: 'hidden' }}>
        <div style={{ width: cfg.width, height: '100%', position: 'relative', flexShrink: 0, borderRadius: device === 'desktop' ? 0 : 14, overflow: 'hidden', boxShadow: device === 'desktop' ? 'none' : '0 0 0 1px rgba(255,255,255,0.08), 0 20px 60px rgba(0,0,0,0.5)' }}>
          {!loaded && (
            <div style={{ position: 'absolute', inset: 0, zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: '#0f172a', gap: 14 }}>
              <div style={{ width: 34, height: 34, borderRadius: '50%', border: '3px solid rgba(255,255,255,0.08)', borderTopColor: demo.accent, animation: 'spin 0.7s linear infinite' }} />
              <p style={{ fontSize: 12, color: '#64748b' }}>Loading demo…</p>
            </div>
          )}
          <iframe
            key={device}
            title={demo.title + ' demo'}
            src={demo.src || undefined}
            srcDoc={demo.src ? undefined : placeholder}
            onLoad={() => setLoaded(true)}
            style={{ width: '100%', height: '100%', border: 'none', display: 'block', background: '#fff' }}
            allow="forms"
          />
        </div>
      </div>

      {/* Mobile bottom CTA */}
      <div className="sm:hidden" style={{ background: '#0f172a', borderTop: '1px solid rgba(255,255,255,0.07)', padding: '10px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
        <div>
          <p style={{ fontSize: 12, fontWeight: 700, color: '#f1f5f9' }}>{demo.title}</p>
          <p style={{ fontSize: 11, color: demo.accent }}>{demo.type}</p>
        </div>
        <a href="#demo" onClick={onClose} style={{ background: demo.accent, color: '#fff', borderRadius: 8, padding: '8px 18px', fontSize: 12, fontWeight: 700, textDecoration: 'none' }}>Get this site</a>
      </div>

      <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
    </div>
  );
}

function WebsitesDemos() {
  const [active, setActive] = React.useState(null);
  const handleClose = React.useCallback(() => setActive(null), []);

  return (
    <section id="demos" className="py-24 sm:py-32">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="max-w-2xl">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>Live demos</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-[color:var(--ink)]">
            Click a card. Browse a real&nbsp;website.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed">
            Each card opens an interactive demo — fully browsable, right here on this page. No redirects, no new tabs.
          </p>
        </Reveal>

        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {WEBSITE_DEMOS.map(demo => (
            <Reveal key={demo.id} variant="up">
              <DemoPreviewCard demo={demo} onOpen={setActive} />
            </Reveal>
          ))}
        </div>

        <Reveal variant="up" delay={100}>
          <p className="mt-8 text-center text-[13px]" style={{ color: 'var(--ink-500)' }}>
            More demos launching soon. <a href="#demo" className="underline" style={{ color: 'var(--brand)' }}>Book a consultation</a> to see a custom mockup for your business.
          </p>
        </Reveal>
      </div>

      {active && <DemoViewer demo={active} onClose={handleClose} />}
    </section>
  );
}

function WebsitesFAQ() {
  const faqs = [
    { q: 'Who owns the website and domain?', a: "You do. The domain is registered in your name, and the design files belong to you. If you ever leave, we hand everything over — no hostage situation.", defaultOpen: true },
    { q: 'Can I edit content myself?', a: "On Business and E-commerce tiers, yes — we set you up with a simple editor for things like prices, menu, and contact info. For bigger changes (new pages, layout tweaks), monthly care hours cover that." },
    { q: 'What if I already have a domain?', a: "We'll point your existing domain at the new site. No need to buy a new one. Same applies if you already have a Google account, social pages, etc." },
    { q: 'What is included in monthly hosting?', a: "Hosting + .co.za renewal + SSL + nightly backups + uptime monitoring + a small bucket of monthly care hours (depends on tier) for updates. No metered traffic, no surprise overages." },
    { q: 'How is this different from Wix/WordPress?', a: "Those are tools you operate yourself. We're a service: we design, build, host, AND maintain it. You don't have to learn any software, deal with plugins, or stress about updates. You just message us." },
    { q: 'Do you build the same site I see for AxiomPOS shops?', a: "Yes — Axiom One bundle includes a managed website built by the same team, designed to integrate with the POS (menu, orders, hours all stay in sync). Or you can buy the website standalone here." },
  ];
  return (
    <section id="faq" className="py-24 sm:py-32">
      <div className="max-w-3xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="text-center">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>FAQ</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-[color:var(--ink)]">Websites, no nonsense.</h2>
        </Reveal>
        <Reveal variant="up" delay={100} className="mt-12 border-t border-[color:var(--line)]">
          {faqs.map((f, i) => <FaqItem key={i} {...f} />)}
        </Reveal>
      </div>
    </section>
  );
}

function WebsitesCta() {
  return (
    <section id="demo" className="py-20 sm:py-28">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
       <div className="relative rounded-3xl p-8 sm:p-12 overflow-hidden" style={{ background: 'linear-gradient(135deg, #D97706 0%, #B45309 100%)', boxShadow: '0 24px 60px rgba(217,119,6,0.30)' }}>
        <div className="absolute inset-0 pointer-events-none" aria-hidden="true" style={{ background: 'radial-gradient(60% 60% at 100% 0%, rgba(255,255,255,0.20), transparent 60%), radial-gradient(50% 50% at 0% 100%, rgba(0,0,0,0.18), transparent 60%)' }} />
        <div className="relative grid lg:grid-cols-12 gap-12 items-start">
        <Reveal variant="left" className="lg:col-span-5">
          <div className="text-[12px] font-semibold uppercase tracking-widest text-white/80">Get started</div>
          <h2 className="mt-3 text-[34px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-white">
            Let's build your site.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-white/85 leading-relaxed max-w-md">
            Tell us about your shop and what you'd like the site to do. We'll come back with a design direction and a realistic timeline within one business day.
          </p>
          <ContactDetails dark />
        </Reveal>
        <Reveal variant="right" delay={120} className="lg:col-span-7">
          <div className="card p-6 sm:p-8">
            <ContactForm
              source="websites"
              submitLabel="Book a consultation"
              showMessage={false}
              extraField={{
                key: 'vision',
                label: 'What should the website do?',
                type: 'textarea',
                placeholder: 'Show our menu and prices. Let customers order on WhatsApp. Have a gallery of our food.',
              }}
              successBody={() => `We'll be in touch within one business day with a design direction and timeline.`}
            />
          </div>
        </Reveal>
        </div>
       </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <PageBackground />
      <div>
        <Navbar wordmarkSuffix=" Website Design" ctaLabel="Book a consultation" />
        <main>
          <WebsitesHero />
          <WebsitesIncluded />
          <WebsitesProcess />
          <WebsitesDemos />
          <WebsitesPricing />
          <WebsitesFAQ />
          <AxiomOneCallout />
          <WebsitesCta />
        </main>
        <Footer />
      </div>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);