// SkyTabCallout.jsx — Homepage callout for the dedicated SkyTab page
const SkyTabCallout = () => {
  const [ref, inView] = window.useInView(0.1);

  const features = [
    'All-in-one POS with built-in payments',
    'Online ordering, reservations, loyalty',
    'Industry-low processing rates',
    'Free hardware on qualifying setups',
  ];

  return (
    <section style={{ background: '#F5F4F2', padding: '88px 32px', position: 'relative', overflow: 'hidden' }} id="skytab">

      <div ref={ref} style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>

        {/* Left — Story */}
        <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'translateX(0)' : 'translateX(-28px)', transition: 'opacity 0.7s ease, transform 0.7s ease' }}>
          {/* Partner badge */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', background: '#0E0C0B', borderRadius: 2, marginBottom: 22 }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="#E8B422"><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"/></svg>
            <span style={{ fontFamily: "'Raleway',sans-serif", fontSize: 10.5, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#E8B422' }}>Official SkyTab Partner</span>
          </div>

          <h2 style={{ fontFamily: "'Raleway',sans-serif", fontSize: 'clamp(34px, 4.4vw, 54px)', fontWeight: 800, textTransform: 'uppercase', color: '#0E0C0B', lineHeight: 0.95, margin: '0 0 22px', letterSpacing: '-0.01em' }}>
            Run a Smarter<br/>Restaurant.<br/>
            <span style={{ color: '#8B1020' }}>Powered by SkyTab.</span>
          </h2>

          <p style={{ fontFamily: "'Raleway',sans-serif", fontSize: 16, color: '#3C3432', lineHeight: 1.7, margin: '0 0 28px', maxWidth: 540 }}>
            Tap Estate is certified to resell, install, and support <strong style={{ color: '#0E0C0B' }}>SkyTab POS</strong> — Canada's fastest-growing point-of-sale system. As an Official Partner, Tap Estate handles everything: setup, training, hardware, and ongoing support.
          </p>

          {/* Feature checks */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px', marginBottom: 36 }}>
            {features.map(f => (
              <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <div style={{ width: 20, height: 20, borderRadius: '50%', background: '#FDF0F1', border: '1.5px solid #F0A8B0', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#8B1020" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <span style={{ fontFamily: "'Raleway',sans-serif", fontSize: 14, color: '#3C3432', fontWeight: 500, lineHeight: 1.45 }}>{f}</span>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="skytab.html" style={{ background: '#8B1020', color: '#fff', border: 'none', padding: '14px 26px', fontFamily: "'Raleway',sans-serif", fontSize: 12, fontWeight: 800, letterSpacing: '0.10em', textTransform: 'uppercase', cursor: 'pointer', borderRadius: 3, display: 'inline-flex', alignItems: 'center', gap: 9, textDecoration: 'none', transition: 'background 0.2s, transform 0.15s' }}
              onMouseEnter={e => { e.currentTarget.style.background = '#6B0C18'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#8B1020'; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              Explore SkyTab POS
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
            <a href="tel:5192812337" style={{ background: 'transparent', color: '#0E0C0B', border: '1.5px solid #DCDAD7', padding: '14px 26px', fontFamily: "'Raleway',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase', borderRadius: 3, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 9, transition: 'border-color 0.2s, color 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = '#0E0C0B'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = '#DCDAD7'; }}
            >Talk to a Specialist</a>
          </div>
        </div>

        {/* Right — Visual */}
        <div style={{ position: 'relative', opacity: inView ? 1 : 0, transform: inView ? 'translateX(0)' : 'translateX(28px)', transition: 'opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s' }}>

          {/* Card */}
          <div style={{ background: '#0E0C0B', borderRadius: 6, padding: '40px 36px', position: 'relative', overflow: 'hidden', boxShadow: '0 24px 50px rgba(14,12,11,0.22)' }}>
            {/* Gold accent corner */}
            <div style={{ position: 'absolute', top: 0, left: 0, width: 100, height: 100, background: 'radial-gradient(circle at top left, rgba(232,180,34,0.18) 0%, transparent 70%)', pointerEvents: 'none' }}></div>

            {/* SkyTab logo */}
            <div style={{ marginBottom: 28, display: 'flex', justifyContent: 'center', height: 56, alignItems: 'center' }}>
              <img
                src="https://images.squarespace-cdn.com/content/v1/678c05e20131da6702456415/9709e7bd-fac7-43f0-8b24-65f7a6ce783a/SkyTabPartnerLogo_Reverse.png"
                alt="SkyTab"
                style={{ maxHeight: 52, maxWidth: 220, objectFit: 'contain' }}
                onError={e => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'block'; }}
              />
              <div style={{ display: 'none', fontFamily: "'Raleway',sans-serif", fontSize: 32, fontWeight: 800, color: '#fff', letterSpacing: '0.04em', textTransform: 'uppercase' }}>SkyTab</div>
            </div>

            {/* Stats */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.10)', borderRadius: 4, overflow: 'hidden', marginBottom: 24 }}>
              {[
                { num: '#1', label: 'Fastest-growing\nPOS in Canada' },
                { num: '24/7', label: 'Live customer\nsupport' },
                { num: '$0', label: 'Setup with\nqualifying plans' },
              ].map(s => (
                <div key={s.label} style={{ background: '#0E0C0B', padding: '20px 14px', textAlign: 'center' }}>
                  <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 26, fontWeight: 800, color: '#E8B422', lineHeight: 1, marginBottom: 6 }}>{s.num}</div>
                  <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 11, color: 'rgba(255,255,255,0.6)', lineHeight: 1.35, whiteSpace: 'pre-line', letterSpacing: '0.02em' }}>{s.label}</div>
                </div>
              ))}
            </div>

            {/* Hardware preview chips */}
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {['Terminal', 'Handheld', 'Kitchen Display', 'Online Ordering', 'Loyalty', 'Reporting'].map(c => (
                <div key={c} style={{ padding: '7px 12px', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.10)', borderRadius: 3, fontFamily: "'Raleway',sans-serif", fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.80)', letterSpacing: '0.04em' }}>{c}</div>
              ))}
            </div>
          </div>

          {/* Floating "Official Partner" tag */}
          <div style={{
            position: 'absolute', top: -14, right: -14,
            background: '#E8B422', color: '#1A1210',
            padding: '10px 18px', borderRadius: 3,
            fontFamily: "'Raleway',sans-serif", fontSize: 10, fontWeight: 800,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            boxShadow: '0 8px 20px rgba(232,180,34,0.28)',
            transform: 'rotate(3deg)',
          }}>
            Official Partner
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { SkyTabCallout });