const { useState: useAboutState, useEffect: useAboutEffect, useRef: useAboutRef } = React;

function useAboutReveal() {
  const ref = useAboutRef(null);
  useAboutEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { el.classList.add('visible'); obs.disconnect(); }
    }, { threshold: 0.08 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
}

const TEAM = [
  { name: 'Scot Cohen',     title: 'Chairman & Chief Executive Officer',  img: 'assets/team-scot-cohen.avif' },
  { name: 'Jared Novick',   title: 'President & Chief Operating Officer', img: 'assets/team-jared-novick.webp' },
  { name: 'Louis Springer', title: 'Vice President, Finance',             img: 'assets/team-louis-springer.avif' },
  { name: 'Stuart Mallory', title: 'Vice President, Sales',               img: 'assets/team-stuart-mallory.jpg' },
  { name: 'Ron Colaizzi',   title: 'Director, Operations and Facilities', img: 'assets/team-ron-colaizzi.avif' },
  { name: 'Fayez Merchant', title: 'Head of Strategy & Operations',       img: 'assets/team-fayez-merchant.jpg' },
];

function TeamMember({ member }) {
  const initials = member.name.split(' ').map(n => n[0]).join('');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
      {/* Headshot */}
      <div style={{
        aspectRatio: '1/1', borderRadius: 8, overflow: 'hidden',
        background: 'var(--bg-3)', border: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 18, position: 'relative',
      }}>
        {member.img ? (
          <img src={member.img} alt={member.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 72, height: 72, borderRadius: '50%',
              background: 'var(--accent-dim)', border: '1px solid rgba(255,181,5,0.25)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <span style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 26, color: 'var(--accent)' }}>{initials}</span>
            </div>
            <span style={{ fontFamily: 'DM Sans', fontSize: 11, color: 'var(--text-muted)', letterSpacing: '0.08em' }}>Photo coming soon</span>
          </div>
        )}
      </div>
      <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 20, color: 'var(--text)', marginBottom: 4 }}>{member.name}</div>
      <div style={{ fontSize: 13, color: 'var(--accent)', fontWeight: 500, lineHeight: 1.4 }}>{member.title}</div>
    </div>
  );
}

function AboutPage({ navigate }) {
  const missionRef  = useAboutReveal();
  const teamRef     = useAboutReveal();
  const locRef      = useAboutReveal();
  const careersRef  = useAboutReveal();

  return (
    <main style={{ paddingTop: 72 }}>

      {/* HERO */}
      <section style={{
        background: 'var(--bg)', padding: '100px 48px 0',
        position: 'relative', overflow: 'hidden',
        borderBottom: '1px solid var(--border)',
      }}>
        {/* bg video */}
        <video
          autoPlay muted loop playsInline
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', opacity: 0.22, pointerEvents: 'none',
          }}
        >
          <source src="assets/about-hero.mp4" type="video/mp4" />
        </video>
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'linear-gradient(to bottom, rgba(6,12,28,0.6) 0%, var(--bg) 90%)',
        }} />

        <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 2 }}>
          <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 20 }}>About Us</div>
          <h1 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(56px, 9vw, 120px)', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 0.9, marginBottom: 32 }}>
            We Believe in a<br /><span style={{ color: 'var(--accent)' }}>Safe, More<br />Connected World.</span>
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--text-sub)', maxWidth: 560, marginBottom: 80 }}>
            Founded to address the complex challenges of modern policing, WRAP was built on the idea that innovation and empathy can create transformative change.
          </p>
        </div>
      </section>

      {/* MISSION STATEMENT */}
      <section ref={missionRef} className="reveal" style={{ background: 'var(--bg-2)', padding: '100px 48px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <p style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 'clamp(24px, 3.5vw, 42px)', lineHeight: 1.25, color: 'var(--text)', textAlign: 'center', maxWidth: 900, margin: '0 auto 72px' }}>
            At WRAP, we're driven by the belief that innovation can transform not just the tools we use, but the trust we build.{' '}
            <span style={{ color: 'var(--accent)' }}>Our mission is about more than technology — it's about creating safer, stronger communities.</span>
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
            <div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, padding: '36px 40px' }}>
              <p style={{ fontSize: 15, lineHeight: 1.8, color: 'var(--text-sub)' }}>
                At WRAP, we believe that science is at the core of everything we do. We're not just building tools — we're pioneering evidence-based solutions that transform how law enforcement approaches conflict resolution. By leveraging innovation, data, and real-world feedback from over 1,000 agencies worldwide, we're creating technology that builds trust between officers and communities.
              </p>
            </div>
            <div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, padding: '36px 40px' }}>
              <p style={{ fontSize: 15, lineHeight: 1.8, color: 'var(--text-sub)', marginBottom: 28 }}>
                This is what drives us: the pursuit of solutions that save lives, reduce injuries, and preserve careers. We understand that every interaction matters. That's why our non-lethal technology is designed not to hurt, but to help — creating safer outcomes for everyone involved. From our flagship BolaWrap 150 to our comprehensive WRAP Tactics training, every innovation serves our commitment to building a safer, more connected world.
              </p>
              <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
                <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: 18, color: 'var(--text)' }}>Scot Cohen</div>
                <div style={{ fontSize: 13, color: 'var(--accent)' }}>Chairman & CEO</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* STATS */}
      <section style={{ background: 'var(--bg)', padding: '0 48px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2 }}>
          {[
            { val: '55%',    label: 'Reduction in injuries' },
            { val: 'ZERO',   label: 'Reported fatalities' },
            { val: '1,000+', label: 'Agencies deployed' },
            { val: '62',     label: 'Countries worldwide' },
          ].map((s, i) => (
            <div key={i} style={{ background: 'var(--card-bg)', padding: '36px 32px', borderTop: '3px solid var(--accent)' }}>
              <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 52, color: 'var(--accent)', lineHeight: 1, marginBottom: 8 }}>{s.val}</div>
              <div style={{ fontSize: 13, color: 'var(--text-sub)' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* LEADERSHIP TEAM */}
      <section ref={teamRef} id="team-section" className="reveal" style={{ background: 'var(--bg)', padding: '100px 48px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ marginBottom: 56 }}>
            <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 16 }}>Leadership</div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(40px, 5vw, 68px)', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1 }}>
              The Team Behind WRAP®
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, maxWidth: 800, margin: '0 auto' }}>
            {TEAM.map((member, i) => (
              <TeamMember key={i} member={member} />
            ))}
          </div>
        </div>
      </section>

      {/* LOCATIONS */}
      <section ref={locRef} className="reveal" style={{ background: 'var(--bg-2)', padding: '100px 48px', borderTop: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ marginBottom: 56 }}>
            <div style={{ fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 16 }}>Our Locations</div>
            <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(40px, 5vw, 68px)', textTransform: 'uppercase', color: 'var(--text)', lineHeight: 1 }}>
              Where We Operate
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {[
              {
                label: 'Corporate Headquarters',
                city: 'Miami, FL',
                img: 'assets/hq-miami.avif',
                desc: 'WRAP Technologies is headquartered in Miami, FL, serving as the central hub for strategic planning, corporate operations and executive leadership. We also have a connected nationwide network of experienced BolaWrap®, WrapVision®, WrapReality®, and WrapTactics® instructors available.',
                addrLabel: 'Address',
                addr: '3350 Virginia Street\nMiami, FL 33133',
              },
              {
                label: 'World Manufacturing Hub',
                city: 'Wise County, Virginia',
                img: 'assets/hq-norton.avif',
                desc: 'Our state-of-the-art facility in Norton, Virginia serves as WRAP\'s U.S. manufacturing and distribution center. Located in the Project Intersection Industrial Park, this 20,000-square-foot site is where the BolaWrap® 150 and other public safety technologies come to life.',
                addrLabel: 'Location',
                addr: '182 Progress Way NE\nNorton, VA 24273',
              },
            ].map((loc, i) => (
              <div key={i} style={{ background: 'var(--card-bg)', borderRadius: 8, overflow: 'hidden', border: '1px solid var(--border)' }}>
                <div style={{ aspectRatio: '16/9', overflow: 'hidden' }}>
                  <img src={loc.img} alt={loc.city} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div style={{ padding: '32px 32px 36px' }}>
                  <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 8 }}>{loc.label}</div>
                  <div style={{ fontFamily: 'Barlow Condensed', fontWeight: 800, fontSize: 32, color: 'var(--text)', marginBottom: 16 }}>{loc.city}</div>
                  <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--text-sub)', marginBottom: 28 }}>{loc.desc}</p>
                  <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
                    <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 10 }}>■ {loc.addrLabel}</div>
                    <div style={{ fontSize: 14, color: 'var(--text-sub)', lineHeight: 1.7, whiteSpace: 'pre-line' }}>{loc.addr}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CAREERS CTA */}
      <section ref={careersRef} className="reveal" style={{ background: 'var(--bg)', padding: '100px 48px', borderTop: '1px solid var(--border)', textAlign: 'center' }}>
        <div style={{ maxWidth: 680, margin: '0 auto' }}>
          <h2 style={{ fontFamily: 'Barlow Condensed', fontWeight: 900, fontSize: 'clamp(48px, 7vw, 88px)', lineHeight: 0.92, textTransform: 'uppercase', color: 'var(--text)', marginBottom: 16 }}>
            Want to Work with WRAP?
          </h2>
          <p style={{ fontSize: 20, color: 'var(--text-sub)', marginBottom: 44, lineHeight: 1.6 }}>Check out our open positions.</p>
          <a
            href="https://wraptechnologies.applytojob.com/"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              fontFamily: 'DM Sans', fontWeight: 600, fontSize: 16,
              color: 'var(--text)', textDecoration: 'none',
              borderBottom: '1px solid var(--border-strong)', paddingBottom: 4,
              transition: 'color 0.2s, border-color 0.2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.color = 'var(--accent)'; e.currentTarget.style.borderColor = 'var(--accent)'; }}
            onMouseLeave={e => { e.currentTarget.style.color = 'var(--text)'; e.currentTarget.style.borderColor = 'var(--border-strong)'; }}
          >
            ↳ View Open Positions
          </a>
        </div>
      </section>

      <Footer navigate={navigate} />
    </main>
  );
}

Object.assign(window, { AboutPage });