// home.jsx — Home page

function Hero({ onContactClick }) {
  const { navigate } = useRouter();
  const slides = [
    {
      eyebrow: 'Smart. Secure. Scalable.',
      h1: ['Smarter IT for', 'Gibraltar businesses'],
      body: 'We are the calm, capable IT partner small and mid-sized businesses lean on for cloud, cybersecurity, networks and day-to-day support.',
      img: 'assets/hero-network.jpg',
    },
    {
      eyebrow: 'Managed IT, done properly',
      h1: ['Technology that', 'gets out of your way'],
      body: 'Named engineers, sub-12-minute response, and a roadmap that ties every pound of IT spend to a business outcome.',
      img: 'assets/hero-server.jpg',
    },
    {
      eyebrow: 'Future-ready',
      h1: ['Cloud, security,', 'and a plan that fits'],
      body: 'We migrate, harden and run the platforms your business depends on \u2014 Microsoft 365, Azure, SentinelOne, Veeam and more.',
      img: 'assets/hero-cloud.jpg',
    },
  ];
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI(x => (x + 1) % slides.length), 7000);
    return () => clearInterval(t);
  }, [paused]);
  const s = slides[i];

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(180deg, #fff 0%, var(--cw-paper) 100%)',
    }}
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      {/* decorative orbs */}
      <div className="hero-orb" style={{ width: 460, height: 460, background: 'var(--cw-sky-300)', top: -120, right: -100, animation: 'drift 18s ease-in-out infinite' }}></div>
      <div className="hero-orb" style={{ width: 320, height: 320, background: 'var(--cw-sky-200)', bottom: -100, left: -80, animation: 'drift 22s ease-in-out infinite reverse' }}></div>

      <div className="container" style={{
        padding: 'clamp(56px, 8vw, 112px) var(--container-pad) clamp(64px, 8vw, 96px)',
        display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center',
        position: 'relative',
      }}>
        <div key={i} className="page-enter">
          <div className="eyebrow" style={{ marginBottom: 18 }}>{s.eyebrow}</div>
          <h1 style={{ marginBottom: 24, fontSize: 'clamp(2.5rem, 5.2vw, 4.25rem)' }}>
            {s.h1[0]}<br/>
            <span style={{
              background: 'linear-gradient(120deg, var(--cw-sky-500), var(--cw-sky-700))',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>{s.h1[1]}</span>
          </h1>
          <p className="cw-lead" style={{ marginBottom: 36, maxWidth: 540, fontSize: 18 }}>{s.body}</p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="btn btn-primary lg" onClick={onContactClick}>
              Get a free quote <Icon.arrow />
            </button>
            <Link to="/services" className="btn btn-outline lg">Browse services</Link>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 44 }}>
            {slides.map((_, ix) => (
              <button key={ix} onClick={() => setI(ix)} aria-label={'Slide ' + (ix + 1)} style={{
                width: ix === i ? 36 : 10, height: 6, padding: 0,
                borderRadius: 999, border: 'none',
                background: ix === i ? 'var(--cw-sky-500)' : 'var(--cw-stone)',
                cursor: 'pointer', transition: 'all 240ms',
              }} />
            ))}
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div key={'img-' + i} style={{
            position: 'relative', borderRadius: 'var(--radius-2xl)',
            overflow: 'hidden', aspectRatio: '4/3',
            boxShadow: 'var(--shadow-xl)',
            animation: 'pageIn 600ms var(--ease-out)',
          }}>
            <img src={s.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(135deg, rgba(31,182,255,0.12) 0%, transparent 60%)',
            }}></div>
          </div>
          {/* floating badges */}
          <div className="hero-badge-left" style={{
            position: 'absolute', top: 24, left: -24,
            background: '#fff', borderRadius: 16, padding: '12px 16px',
            boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 10,
            animation: 'float 4s ease-in-out infinite',
          }}>
            <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--cw-success)', boxShadow: '0 0 0 4px rgba(31,191,122,0.18)' }}></div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Status</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--cw-navy-700)' }}>All systems healthy</div>
            </div>
          </div>
          <div className="hero-badge-right" style={{
            position: 'absolute', bottom: 24, right: -24,
            background: '#fff', borderRadius: 16, padding: '14px 16px',
            boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 12,
            animation: 'float 5s ease-in-out infinite 0.7s',
          }}>
            <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--cw-navy-700)', letterSpacing: '-0.02em', lineHeight: 1 }}>11<span style={{ color: 'var(--cw-sky-500)' }}>m</span></div>
            <div style={{ fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.3 }}>Avg first<br/>response time</div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          section > .container { grid-template-columns: 1fr !important; }
          .hero-badge-left { left: 8px !important; }
          .hero-badge-right { right: 8px !important; }
        }
      `}</style>
    </section>
  );
}

function StatBand() {
  const stats = [
    { num: '12+', label: 'Years serving Gibraltar' },
    { num: '60+', label: 'Active business clients' },
    { num: '99.9%', label: 'Service uptime' },
    { num: '<12m', label: 'Avg first response' },
  ];
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal section-sm" style={{ background: 'var(--cw-paper)' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
        }} className="stats-grid">
          {stats.map(s => (
            <div key={s.label} style={{ textAlign: 'center' }}>
              <div className="stat-num">{s.num}</div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </section>
  );
}

function ServicesShowcase({ onContactClick }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal section">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>What we do</div>
            <h2 style={{ marginBottom: 16 }}>Six services. One trusted team.</h2>
            <p className="cw-lead">From the strategy on the whiteboard to the engineer on the helpdesk, we cover the full IT lifecycle for your business.</p>
          </div>
          <Link to="/services" className="btn btn-outline">All services <Icon.arrow /></Link>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="services-grid">
          {SERVICES.map((svc, i) => (
            <Link key={svc.slug} to={'/services/' + svc.slug} className="service-mega">
              <div style={{
                width: 56, height: 56, borderRadius: 14,
                background: 'var(--cw-sky-50)', display: 'grid', placeItems: 'center', marginBottom: 22,
              }}>
                <img src={svc.icon} alt="" style={{ width: 36, height: 36, objectFit: 'contain' }} />
              </div>
              <h3 style={{ marginBottom: 10, fontSize: 21 }}>{svc.title}</h3>
              <p style={{ color: 'var(--fg-3)', marginBottom: 12, fontSize: 15 }}>{svc.blurb}</p>
              <ul className="reveal-list" style={{ listStyle: 'none', padding: 0, margin: '0 0 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                {svc.bullets.slice(0, 3).map(b => (
                  <li key={b[0]} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--fg-2)' }}>
                    <Icon.check style={{ color: 'var(--cw-sky-500)', width: 14, height: 14 }} />
                    {b[0]}
                  </li>
                ))}
              </ul>
              <span style={{ marginTop: 'auto', color: 'var(--cw-sky-600)', fontWeight: 600, fontSize: 14, display: 'flex', alignItems: 'center', gap: 6 }}>
                Learn more <Icon.arrow />
              </span>
            </Link>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .services-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 640px) { .services-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function PartnerStrip() {
  const { partners } = useCms();
  const list = [...partners, ...partners]; // for marquee
  return (
    <section style={{ background: 'var(--cw-paper)', padding: '56px 0', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div className="container" style={{ marginBottom: 32 }}>
        <div style={{ textAlign: 'center', fontSize: 15, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-4)' }}>
          Trusted technology partners
        </div>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {list.map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', height: 64 }}>
              {p.src ? (
                <img src={p.src} alt={p.alt} style={{ height: 52, opacity: 0.8, filter: 'grayscale(0.2)' }} />
              ) : (
                <span style={{ fontWeight: 800, fontSize: 32, letterSpacing: '0.02em', color: 'var(--cw-navy-600)', opacity: 0.8 }}>{p.text}</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyBand() {
  const items = [
    { icon: Icon.spark, title: 'A real partner, not a ticket queue', body: 'Named engineers who learn your environment. We pick up the phone \u2014 fast.' },
    { icon: Icon.shield, title: 'Security baked in', body: 'EDR, identity hardening, immutable backups. We assume the bad day, then prepare for it.' },
    { icon: Icon.bolt, title: 'On-time, on-budget delivery', body: 'Plain-English plans, milestones you can actually track, no scope-creep surprises.' },
  ];
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal section" style={{ background: 'var(--cw-navy-900)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.6 }}></div>
      <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(31,182,255,0.18), transparent 70%)', top: -200, right: -150 }}></div>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 16, color: 'var(--cw-sky-300)' }}>Why CloudWise</div>
          <h2 style={{ color: '#fff', marginBottom: 16 }}>The boring stuff, done brilliantly.</h2>
          <p className="cw-lead" style={{ color: 'var(--cw-navy-100)', maxWidth: 600 }}>
            We are not in love with shiny tech for its own sake. We are obsessed with the unglamorous fundamentals &mdash; patches applied, backups tested, MFA enforced, tickets answered &mdash; that quietly keep good businesses running.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="why-grid">
          {items.map(it => (
            <div key={it.title} style={{
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 'var(--radius-xl)', padding: 28,
              transition: 'all 240ms',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(31,182,255,0.08)'; e.currentTarget.style.borderColor = 'rgba(31,182,255,0.32)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)'; }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: 'rgba(31,182,255,0.12)', color: 'var(--cw-sky-400)',
                display: 'grid', placeItems: 'center', marginBottom: 18,
              }}>
                <it.icon />
              </div>
              <h3 style={{ color: '#fff', marginBottom: 10, fontSize: 19 }}>{it.title}</h3>
              <p style={{ color: 'var(--cw-navy-100)', fontSize: 15, lineHeight: 1.6 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function TestimonialBlock() {
  const ref = useReveal();
  const { testimonials } = useCms();
  const t = testimonials[0];
  if (!t) return null;
  return (
    <section ref={ref} className="reveal section">
      <div className="container" style={{ textAlign: 'center' }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>Client story</div>
        <h2 style={{ marginBottom: 56, maxWidth: 700, margin: '0 auto 56px' }}>Words from the people we work with.</h2>
        <div style={{
          maxWidth: 780, margin: '0 auto',
          background: 'linear-gradient(180deg, #fff 0%, var(--cw-paper) 100%)',
          border: '1px solid var(--border-subtle)',
          borderRadius: 'var(--radius-2xl)', padding: '48px 52px',
          boxShadow: 'var(--shadow-md)', position: 'relative',
          textAlign: 'left',
        }}>
          <div style={{
            fontSize: 96, lineHeight: 0.6, color: 'var(--cw-sky-400)', fontWeight: 700,
            position: 'absolute', top: 24, right: 40, opacity: 0.4,
          }}>&ldquo;</div>
          <p style={{ fontSize: 22, lineHeight: 1.55, color: 'var(--cw-navy-700)', marginBottom: 32, fontWeight: 500, letterSpacing: '-0.005em' }}>
            &ldquo;{t.quote}&rdquo;
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            {t.img && <img src={t.img} alt="" style={{ width: 56, height: 56, borderRadius: '50%', objectFit: 'cover', border: '2px solid #fff', boxShadow: 'var(--shadow-sm)' }} />}
            <div>
              <div style={{ fontWeight: 700, color: 'var(--cw-navy-700)', fontSize: 16 }}>{t.name}</div>
              <div style={{ fontSize: 14, color: 'var(--fg-3)' }}>{t.role}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeCTA({ onContactClick }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal section-sm">
      <div className="container">
        <div style={{
          background: 'linear-gradient(135deg, var(--cw-navy-700) 0%, var(--cw-navy-900) 100%)',
          borderRadius: 'var(--radius-2xl)',
          padding: 'clamp(48px, 6vw, 80px)',
          color: '#fff', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(31,182,255,0.32), transparent 70%)', bottom: -150, right: -100 }}></div>
          <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.4 }}></div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'center' }} className="cta-grid">
            <div>
              <h2 style={{ color: '#fff', marginBottom: 16 }}>Let's make technology work for you.</h2>
              <p style={{ color: 'var(--cw-navy-100)', fontSize: 18, lineHeight: 1.6, maxWidth: 560 }}>
                A 30-minute, no-obligation conversation to understand your business and where IT could be doing more &mdash; or less.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <button className="btn btn-primary lg" onClick={onContactClick}>Book a discovery call <Icon.arrow /></button>
              <a href="tel:+35022502143" className="btn btn-light" style={{ background: 'rgba(255,255,255,0.08)', color: '#fff', border: '1px solid rgba(255,255,255,0.18)' }}>
                <Icon.phone /> +350 225 02143
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) { .cta-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function HomePage({ onContactClick }) {
  useSEO('Smart, Secure, Scalable IT for Gibraltar', 'Managed IT, cloud, cybersecurity and support for Gibraltar businesses. Smart. Secure. Scalable.');
  return (
    <div className="page-enter">
      <Hero onContactClick={onContactClick} />
      <PartnerStrip />
      <ServicesShowcase onContactClick={onContactClick} />
      <StatBand />
      <WhyBand />
      <TestimonialBlock />
      <HomeCTA onContactClick={onContactClick} />
    </div>
  );
}

window.HomePage = HomePage;