/* ============================================================
   Tectus — Platform overview (bespoke redesign).
   Kept dark-first per the binding design system; structure
   follows the reference (mock hero, stats, two apps, workflow).
   ============================================================ */
const { Button: PlButton, Badge: PlBadge } = window.TectusDesignSystem_c42b34;

const PL_STATS = [{ v: '98%', l: 'Coverage fill rate' }, { v: '7', l: 'Service categories' }, { v: '100%', l: 'Verified vendors' }, { v: '24h', l: 'Review time' }];

const PL_WORKFLOW = [
  { n: '01', t: 'Submit', d: 'Add location, timing, service type, and staffing needs.' },
  { n: '02', t: 'Match', d: 'Tectus connects the request with a vetted vendor.' },
  { n: '03', t: 'Coordinate', d: 'Align on details and status inside one workflow.' },
  { n: '04', t: 'Track', d: 'Follow status live and keep a clean, documented record.' },
];

function PlatformPage() {
  const videoRef = useRef(null);
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) v.play().catch(() => {});
      else v.pause();
    }, { threshold: 0.4 });
    obs.observe(v);
    return () => obs.disconnect();
  }, []);
  return (
    <div>
      {/* hero */}
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden="true" style={{ position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)', width: 860, height: 520, background: 'radial-gradient(ellipse, rgba(212,175,55,0.10), transparent 64%)', pointerEvents: 'none' }} />
        <div className="wrap" style={{ padding: '72px 40px 8px', textAlign: 'center', position: 'relative' }}>
          <Reveal>
            <div style={{ marginBottom: 22 }}><PillEyebrow center>Platform overview</PillEyebrow></div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(38px, 5.2vw, 64px)', lineHeight: 1.04, letterSpacing: '-0.035em', margin: '0 auto 20px', maxWidth: 820, textWrap: 'balance' }}>The <GoldAccent>operating layer</GoldAccent> for physical security.</h1>
            <p style={{ fontSize: 18.5, lineHeight: 1.6, color: 'var(--color-text-muted)', maxWidth: 600, margin: '0 auto 30px', textWrap: 'pretty' }}>A simpler overview of how Tectus helps teams request coverage, match with licensed vendors, and track every job in one place.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 52 }}>
              <a href="#/demo"><PlButton variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>Book a Demo</PlButton></a>
              <a href="#video"><PlButton variant="secondary" size="lg" iconLeft={<Icon name="play" size={15} />}>Watch overview</PlButton></a>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ maxWidth: 960, margin: '0 auto' }}>
              <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)', overflow: 'hidden' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', borderBottom: '1px solid var(--color-divider)', background: 'var(--color-chrome)' }}>
                  <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#ef4444' }} />
                  <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#f59e0b' }} />
                  <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#22c55e' }} />
                  <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)' }}>app.tectus.com</span>
                </div>
                <div style={{ padding: 18 }}><HeroMock /></div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* stats */}
      <section className="wrap" style={{ padding: '56px 40px 8px' }}>
        <div className="tt-statpanel" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
          {PL_STATS.map((s, i) => (
            <Reveal key={s.l} delay={i * 60}>
              <div style={{ padding: '14px 24px', borderLeft: i ? '1px solid var(--color-divider)' : 'none', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(28px, 3vw, 40px)', fontWeight: 700, color: i % 2 === 0 ? 'var(--color-primary-light)' : 'var(--color-text)', lineHeight: 1 }}>{s.v}</div>
                <div style={{ fontSize: 13.5, color: 'var(--color-text-faint)', marginTop: 10 }}>{s.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* two apps */}
      <section className="wrap" style={{ padding: '96px 40px' }}>
        <Reveal><CenterHead label="Overview" title="Two apps. One operating layer." sub="Tectus handles the request side. Tectus GO supports the vendor side. Together they keep each job clear and documented." /></Reveal>
        <div className="tt-split-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {[
            { tag: 'For businesses', icon: 'building-2', name: 'Tectus', desc: 'Submit requests, track jobs, and keep communication in one place.', pts: ['Structured requests', 'Live status tracking', 'Audit-ready records'], visual: 'mock', href: '#/tectus' },
            { tag: 'For vendors', icon: 'smartphone', name: 'Tectus GO', desc: 'Receive jobs, assign teams, and update status from the field.', pts: ['Fast job acceptance', 'Team dispatch', 'Live field updates'], visual: 'go', href: '#/tectus-go' },
          ].map((c, i) => (
            <Reveal key={c.name} delay={i * 100}>
              <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div style={{ padding: 24, background: 'var(--color-bg)', borderBottom: '1px solid var(--color-divider)', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 280 }}>
                  {c.visual === 'mock'
                    ? <div style={{ transform: 'scale(0.92)', width: '100%' }}><HeroMock /></div>
                    : <GoPhone />}
                </div>
                <div style={{ padding: 30, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 9 }}>
                    <span style={{ width: 36, height: 36, borderRadius: 'var(--radius-md)', background: 'var(--color-surface-3)', border: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--color-primary)' }}><Icon name={c.icon} size={18} /></span>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 21, fontWeight: 700 }}>{c.name}</span>
                    <PlBadge tone="neutral">{c.tag}</PlBadge>
                  </div>
                  <p style={{ fontSize: 14.5, color: 'var(--color-text-muted)', margin: '0 0 18px', lineHeight: 1.55 }}>{c.desc}</p>
                  <ul style={{ listStyle: 'none', margin: '0 0 22px', padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {c.pts.map((p) => <li key={p} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'var(--color-text)' }}><Icon name="check" size={15} color="var(--color-primary)" />{p}</li>)}
                  </ul>
                  <a href={c.href} style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 14, fontWeight: 600, color: 'var(--color-primary-light)' }} className="tt-arrow-link">Learn more <Icon name="arrow-right" size={14} /></a>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* workflow — dark */}
      <section style={{ background: 'var(--color-deep)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
        <div className="wrap" style={{ padding: '96px 40px' }}>
          <Reveal><CenterHead label="How it works" title="A structured workflow, end to end" sub="The process is simple: request, match, coordinate, and track completion." /></Reveal>
          <div className="tt-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {PL_WORKFLOW.map((s, i) => (
              <Reveal key={s.n} delay={i * 70}>
                <div style={{ padding: 26, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', height: '100%' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary-light)', fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700, marginBottom: 18 }}>{s.n}</span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, margin: '0 0 8px' }}>{s.t}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: 0 }}>{s.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* video */}
      <section id="video" className="wrap" style={{ padding: '96px 40px' }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 40px' }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}><PillEyebrow center>Watch</PillEyebrow></div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(29px, 3.6vw, 44px)', letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 14px', textWrap: 'balance' }}>See Tectus in action</h2>
            <p style={{ fontSize: 17.5, lineHeight: 1.6, color: 'var(--color-text-muted)', margin: 0 }}>A short overview of how coverage gets requested, matched, and tracked — start to finish.</p>
          </div>
          <div style={{ borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--color-border)', boxShadow: 'var(--shadow-lg)', aspectRatio: '16 / 9', background: '#000' }}>
            <video ref={videoRef} src="https://pub-e7380c1d8c954ad99281ca20ff4a1273.r2.dev/tectus-promo.mp4" controls muted playsInline preload="metadata" loop style={{ width: '100%', height: '100%', display: 'block' }} />
          </div>
        </Reveal>
      </section>

      <CTABandCenter label="Get started" title="Ready to coordinate physical security the right way?" sub="Book a demo to see the platform in a simpler, clearer workflow." primary="Book a Demo" secondary="Get Quote" />
    </div>
  );
}

window.CUSTOM_PAGES = window.CUSTOM_PAGES || {};
window.CUSTOM_PAGES['platform'] = PlatformPage;