/* v2 — Axiom Digital Solutions corporate homepage, light SaaS theme */

// ── Hero slideshow ──────────────────────────────────────────────
const SLIDES = [
  {
    id: 'pos',
    tag: 'AxiomPOS',
    title: 'The POS that runs your whole shop.',
    subtitle: 'Tablet till, WhatsApp ordering bot, live inventory, and a manager dashboard — all from any browser.',
    price: 'from R 299',
    priceSuffix: '/ month',
    cta: 'Explore AxiomPOS',
    ctaHref: 'pos.html',
    Visual: SlidePosVisual,
  },
  {
    id: 'marketing',
    tag: 'Axiom Marketing',
    title: 'Customers find you on Instagram & Facebook.',
    subtitle: 'Paid ads, social content, and WhatsApp chatbots — managed end-to-end.',
    price: 'from R 2,500',
    priceSuffix: '/ month',
    cta: 'Explore Axiom Marketing',
    ctaHref: 'marketing.html',
    Visual: SlideMarketingVisual,
  },
  {
    id: 'websites',
    tag: 'Axiom Website Design',
    title: 'A website that earns its keep.',
    subtitle: 'Custom-designed business websites with hosting, .co.za domain, SSL, and care bundled in.',
    price: 'from R 4,500',
    priceSuffix: 'once-off + R 299 / mo',
    cta: 'Explore Axiom Website Design',
    ctaHref: 'websites.html',
    Visual: SlideWebsiteVisual,
  },
];

function HomeHeroSlideshow() {
  const [active, setActive] = React.useState(0);
  const ADVANCE_MS = 10000;
  React.useEffect(() => {
    const id = setInterval(() => setActive((i) => (i + 1) % SLIDES.length), ADVANCE_MS);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="top" className="relative overflow-hidden" style={{ minHeight: 'min(80vh, 720px)' }} aria-roledescription="carousel">
      {SLIDES.map((s, i) => (
        <Slide key={s.id} slide={s} isActive={i === active} />
      ))}

      {/* Dots */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-2.5 z-10">
        {SLIDES.map((s, i) => (
          <button key={s.id} onClick={() => setActive(i)} aria-label={`Show slide ${i + 1}: ${s.tag}`} className="group inline-flex items-center justify-center h-4 px-1">
            <span
              className={"block rounded-full transition-all duration-300 " + (i === active ? 'w-12 h-3' : 'w-3 h-3 group-hover:w-6')}
              style={{
                background: i === active ? '#1E3A8A' : 'rgba(15,23,42,0.20)',
                boxShadow: i === active ? '0 0 12px rgba(30,58,138,0.40)' : 'none',
              }}
            />
          </button>
        ))}
      </div>
    </section>
  );
}

function Slide({ slide, isActive }) {
  const { Visual } = slide;
  return (
    <div
      className="absolute inset-0 transition-opacity duration-[900ms]"
      style={{ opacity: isActive ? 1 : 0, pointerEvents: isActive ? 'auto' : 'none' }}
      aria-hidden={!isActive}
    >
      <div className="max-w-7xl mx-auto px-5 sm:px-8 h-full grid lg:grid-cols-12 gap-10 lg:gap-12 items-center py-16">
        <div className="lg:col-span-6">
          <div className={"inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[12px] font-medium text-[color:var(--ink-700)] " + (isActive ? 'slide-in-up' : '')} style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
            <Ax.Sparkle className="w-3.5 h-3.5" style={{ color: 'var(--brand)' }} strokeWidth={2.2} />
            <span>{slide.tag}</span>
          </div>

          <h1 className={"mt-5 text-[36px] sm:text-[48px] lg:text-[60px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-[color:var(--ink)] " + (isActive ? 'slide-in-up' : '')} style={{ animationDelay: '80ms' }}>
            {slide.title.split(/(Instagram|Facebook|whole shop|earns its keep)/).map((part, idx) => {
              if (['Instagram', 'Facebook', 'whole shop', 'earns its keep'].includes(part)) {
                return <span key={idx} className="shiny-text">{part}</span>;
              }
              return <span key={idx}>{part}</span>;
            })}
          </h1>

          <p className={"mt-5 text-[16px] sm:text-[18px] text-[color:var(--ink-700)] leading-[1.55] max-w-[560px] " + (isActive ? 'slide-in-up' : '')} style={{ animationDelay: '160ms' }}>
            {slide.subtitle}
          </p>

          <div className={"mt-7 flex flex-wrap items-baseline gap-x-3 gap-y-1 " + (isActive ? 'slide-in-up' : '')} style={{ animationDelay: '240ms' }}>
            <span className="text-[12px] uppercase tracking-wider text-[color:var(--ink-500)] font-semibold">Starting</span>
            <span className="font-mono text-[28px] sm:text-[32px] font-semibold text-[color:var(--ink)] leading-none">{slide.price}</span>
            <span className="text-[14px] text-[color:var(--ink-500)]">{slide.priceSuffix}</span>
          </div>

          <div className={"mt-7 flex flex-wrap items-center gap-3 " + (isActive ? 'slide-in-up' : '')} style={{ animationDelay: '320ms' }}>
            <a href={slide.ctaHref} className="btn-primary inline-flex items-center justify-center gap-1.5 rounded-full text-[15px] font-semibold px-5 py-3">
              {slide.cta}
              <Ax.ArrowRight className="w-4 h-4" />
            </a>
            <a href="#demo" className="btn-ghost inline-flex items-center justify-center gap-1.5 rounded-full text-[15px] font-semibold px-5 py-3">
              Book a consultation
            </a>
          </div>
        </div>

        <div className="lg:col-span-6 hidden lg:block">
          <div className={isActive ? 'slide-in-right' : ''} style={{ animationDelay: '120ms' }}>
            <Visual isActive={isActive} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Slide visuals ───────────────────────────────────────────────
function useSlideVideo(isActive) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const v = ref.current;
    if (!v) return;
    v.muted = true; v.defaultMuted = true; v.volume = 0;
    if (isActive) {
      try { v.currentTime = 0; } catch (_) {}
      const p = v.play(); if (p && p.catch) p.catch(() => {});
    } else {
      v.pause();
      try { v.currentTime = 0; } catch (_) {}
    }
  }, [isActive]);
  return ref;
}

function SlidePosVisual({ isActive }) {
  const videoRef = useSlideVideo(isActive);
  return (
    <div className="relative w-full max-w-[600px] mx-auto tablet-wrap">
      <div className="tablet">
        <div className="tablet-screen">
          <div className="absolute top-0 inset-x-0 h-10 px-3 flex items-center justify-between z-10 bg-gradient-to-b from-black/45 to-transparent text-white">
            <div className="flex items-center gap-2">
              <span className="w-6 h-6 rounded-md inline-flex items-center justify-center text-white text-[10px] font-semibold" style={{ background: 'var(--brand)' }} aria-hidden="true">M</span>
              <div className="leading-tight">
                <div className="text-[11px] font-semibold tracking-tight">My Kota Place</div>
                <div className="text-[9px] text-white/70">Pretoria · Hatfield</div>
              </div>
            </div>
            <div className="flex items-center gap-2 text-[10px] text-white/80">
              <span className="inline-flex items-center gap-1">
                <span className="relative inline-flex w-1.5 h-1.5">
                  <span className="absolute inset-0 rounded-full bg-emerald-400" />
                  <span className="absolute inset-0 rounded-full bg-emerald-400 pulse-dot" />
                </span>
                Live
              </span>
              <span className="font-mono">14:32</span>
            </div>
          </div>
          <video ref={videoRef} src="/media/hero-ambient.mp4" loop muted playsInline disableRemotePlayback preload="metadata" aria-hidden="true" className="absolute inset-0 w-full h-full object-contain" />
        </div>
      </div>
    </div>
  );
}

function SlideMarketingVisual({ isActive }) {
  const videoRef = useSlideVideo(isActive);
  return (
    <div className="relative w-full max-w-[280px] mx-auto">
      <div className="rounded-[36px] p-3 shadow-lg" style={{ background: 'linear-gradient(180deg, #1c1917, #0c0a09)' }}>
        <div className="rounded-[26px] overflow-hidden bg-black aspect-[9/16] relative">
          <video ref={videoRef} src="/media/marketing-story.mp4" loop muted playsInline disableRemotePlayback preload="metadata" aria-hidden="true" className="absolute inset-0 w-full h-full object-cover" />
        </div>
      </div>
    </div>
  );
}

function SlideWebsiteVisual({ isActive }) {
  const videoRef = useSlideVideo(isActive);
  return (
    <div className="relative w-full mx-auto">
      <video ref={videoRef} 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>
  );
}

// ── Services grid ───────────────────────────────────────────────
function ServicesGrid() {
  const services = [
    {
      eyebrow: 'Flagship',
      title: 'AxiomPOS',
      body: 'A cloud point-of-sale for tablets and phones. Take orders, manage stock, accept payments, and let customers order on WhatsApp — 24/7.',
      bullets: ['Touch-friendly till for any browser', 'WhatsApp ordering bot included on Plus', 'Live inventory, recipes, and margins'],
      href: 'pos.html', cta: 'Explore AxiomPOS', icon: '🏪', featured: true,
    },
    {
      title: 'Axiom Marketing',
      body: 'We run your Instagram and Facebook ads, produce content, and set up WhatsApp chatbots that handle orders and FAQs — end-to-end.',
      bullets: ['Paid ad campaigns + audience targeting', 'Short reels, carousels & captions', 'WhatsApp chatbot for orders & support'],
      href: 'marketing.html', cta: 'Explore Axiom Marketing', icon: '📈',
    },
    {
      title: 'Axiom Website Design',
      body: 'Custom-designed business websites with hosting, a .co.za domain, SSL, and ongoing care bundled in. No DIY templates.',
      bullets: ['Landing page, business site, or e-commerce', 'Domain + hosting + SSL included', 'Monthly content updates & backups'],
      href: 'websites.html', cta: 'Explore Axiom Website Design', icon: '🌐',
    },
  ];

  return (
    <section id="services" 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 we do</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-[color:var(--ink)]">
            Three services that work together.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed max-w-xl">
            Buy one. Buy all three. Or bundle into AxiomOne and save. Every service is month-to-month with free onboarding.
          </p>
        </Reveal>

        <div className="mt-12 grid md:grid-cols-3 gap-5 items-stretch">
          {services.map((s, i) => (
            <Reveal key={s.title} variant="up" delay={i * 110} className="h-full">
              <ServiceCard {...s} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ eyebrow, title, body, bullets, href, cta, icon, featured }) {
  return (
    <a href={href} className={"relative p-7 sm:p-8 flex flex-col h-full card-hover " + (featured ? "card-dark" : "card")}>
      {eyebrow && (
        <span className="absolute -top-3 left-7 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} />
          {eyebrow}
        </span>
      )}
      <div className="w-12 h-12 rounded-xl inline-flex items-center justify-center text-2xl" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
        {icon}
      </div>
      <h3 className="mt-5 text-[22px] font-semibold tracking-tight text-[color:var(--ink)]">{title}</h3>
      <p className="mt-3 text-[14px] leading-relaxed text-[color:var(--ink-700)]">{body}</p>
      <ul className="mt-5 space-y-2.5">
        {bullets.map((b, i) => (
          <li key={i} className="flex items-start gap-2.5 text-[13px] leading-relaxed text-[color:var(--ink-700)]">
            <Ax.Check className="w-4 h-4 mt-0.5 shrink-0" style={{ color: 'var(--brand)' }} strokeWidth={2.5} />
            <span>{b}</span>
          </li>
        ))}
      </ul>
      <span className="mt-auto pt-6 inline-flex items-center gap-1.5 text-[14px] font-semibold" style={{ color: 'var(--brand-hover)' }}>
        {cta}
        <Ax.ArrowRight className="w-4 h-4" />
      </span>
    </a>
  );
}

function WhyAxiom() {
  const items = [
    { icon: Ax.MapPin,   label: 'Built for South African shops' },
    { icon: Ax.Rand,     label: 'Month-to-month, ZAR pricing' },
    { icon: Ax.Sparkle,  label: 'Free onboarding & support' },
    { icon: Ax.Shield,   label: 'One partner, one invoice' },
  ];
  return (
    <section className="py-12 sm:py-16">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {items.map((it, i) => (
            <Reveal key={i} variant="up" delay={i * 70}>
              <div className="flex items-center gap-3 card p-4 card-hover">
                <span className="inline-flex items-center justify-center w-10 h-10 rounded-lg shrink-0" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)', color: 'var(--brand-hover)' }}>
                  <it.icon className="w-4 h-4" strokeWidth={2} />
                </span>
                <div className="text-[13px] sm:text-[14px] font-medium text-[color:var(--ink)] leading-snug">{it.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutBlock() {
  return (
    <section id="about" className="py-20 sm:py-24" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-6xl mx-auto px-5 sm:px-8 grid lg:grid-cols-12 gap-10 items-start">
        <Reveal variant="up" className="lg:col-span-5">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>About Axiom</div>
          <h2 className="mt-3 text-[28px] sm:text-[36px] font-semibold tracking-[-0.02em] leading-[1.1] text-[color:var(--ink)]">
            Built in South Africa, for South African shops.
          </h2>
        </Reveal>

        <Reveal variant="up" delay={120} className="lg:col-span-7">
          <p className="text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed">
            We started Axiom Digital Solutions because small shops were stuck with a choice between three things that didn't talk to each other — a till, a marketing person, and a website nobody updated. Our answer is to build all three ourselves and back them with one team that picks up the phone.
          </p>
          <div className="mt-8 grid sm:grid-cols-3 gap-5">
            {[
              { t: 'Local first',      d: 'Built for ZAR, WhatsApp culture, and South African business reality.' },
              { t: 'Fair pricing',     d: 'Month-to-month, transparent, no surprise fees, no lock-in.' },
              { t: 'Always reachable', d: 'A real person on WhatsApp, not a ticket queue.' },
            ].map((v) => (
              <div key={v.t} className="card p-5 card-hover">
                <div className="text-[15px] font-semibold text-[color:var(--ink)]">{v.t}</div>
                <p className="mt-2 text-[13px] text-[color:var(--ink-700)] leading-relaxed">{v.d}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomeCta() {
  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">
            Not sure where to start?
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-white/85 leading-relaxed max-w-md">
            Tell us about your shop and we'll recommend the right service — POS, marketing, websites, or the AxiomOne bundle. Free 20-minute call, no obligation.
          </p>
          <ContactDetails dark />
        </Reveal>

        <Reveal variant="right" delay={120} className="lg:col-span-7">
          <div className="card p-6 sm:p-8">
            <ContactForm
              source="home"
              submitLabel="Book a consultation"
              showMessage={false}
              extraField={{
                key: 'interest',
                label: 'What are you most interested in?',
                type: 'select',
                defaultValue: 'Not sure yet',
                options: [
                  'Not sure yet',
                  'AxiomPOS — POS system',
                  'Axiom Marketing — ads, content, chatbots',
                  'Axiom Website Design — websites & hosting',
                  'AxiomOne — the full bundle',
                ],
              }}
              successBody={() => `We'll be in touch within one business day to set up a 20-minute call.`}
            />
          </div>
        </Reveal>
        </div>
       </div>
      </div>
    </section>
  );
}

// ── App ─────────────────────────────────────────────────────────
function App() {
  return (
    <>
      <PageBackground />
      <div>
        <Navbar wordmarkSuffix=" Digital Solutions" ctaLabel="Book a consultation" />
        <main>
          <HomeHeroSlideshow />
          <ServicesGrid />
          <WhyAxiom />
          <AxiomOneCallout />
          <AboutBlock />
          <HomeCta />
        </main>
        <Footer />
      </div>
    </>
  );
}

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