/* ============================================================
   Tectus — Location detail pages (city CMS).
   Route: location/<slug>  (slug = security-services-in-<city>-<st>)
   ============================================================ */
const { Button: LocButton } = window.TectusDesignSystem_c42b34;

const LOC_SERVICES = [
  { icon: 'user-round-check', t: 'Executive & VIP Protection', slug: 'executive-protection' },
  { icon: 'ticket', t: 'Event Security', slug: 'event-security' },
  { icon: 'route', t: 'Mobile Patrol', slug: 'mobile-patrol' },
  { icon: 'store', t: 'Retail Security', slug: 'retail-security' },
  { icon: 'bell-ring', t: 'Alarm Response', slug: 'alarm-response' },
  { icon: 'building', t: 'Corporate Security', slug: 'corporate-security' },
  { icon: 'flame', t: 'Fire Watch', slug: 'fire-watch' },
];

function LocationPage({ slug }) {
  const loc = (window.LOCATION_PAGES || []).find((l) => l.slug === slug);
  useEffect(() => {
    if (loc) document.title = `Security services in ${loc.city}, ${loc.state} | Tectus`;
    return () => { document.title = 'Tectus — Physical security, delivered faster. When it matters most.'; };
  }, [slug]);
  if (!loc) return <NotFound />;
  const place = `${loc.city}, ${loc.state}`;

  return (
    <div>
      {/* hero */}
      <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--color-border)' }}>
        <div aria-hidden="true" style={{ position: 'absolute', top: -180, right: -120, width: 560, height: 520, background: 'radial-gradient(circle, rgba(212,175,55,0.08), transparent 64%)', pointerEvents: 'none' }} />
        <div className="wrap tt-pagehero" style={{ display: 'grid', gridTemplateColumns: '1.04fr 0.96fr', gap: 56, alignItems: 'center', padding: '52px 40px 64px', position: 'relative' }}>
          <Reveal>
            <a href="#/coverage" className="tt-arrow-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: 22 }}><Icon name="arrow-left" size={15} />All coverage</a>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-primary-light)' }}><Icon name="map-pin" size={14} />{place}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 24, padding: '0 10px', borderRadius: 'var(--radius-pill)', background: 'var(--color-success-soft)', color: 'var(--color-success-fg)', fontSize: 11, fontWeight: 600 }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--color-success)' }} />Available</span>
            </div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(32px, 4.2vw, 52px)', lineHeight: 1.06, letterSpacing: '-0.032em', margin: '0 0 18px', maxWidth: 620, textWrap: 'balance' }}>Security services in {loc.city}</h1>
            <p style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--color-text-muted)', maxWidth: 540, margin: 0, textWrap: 'pretty' }}>Request licensed, vetted security coverage in {place} — coordinated by time, location, and requirement through one structured workflow.</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
              <a href="#/get-quote"><LocButton variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>Get a quote</LocButton></a>
              <a href="#/book-now"><LocButton variant="secondary" size="lg">Book now</LocButton></a>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <img src={loc.hero} alt={`${place}`} loading="lazy" style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', borderRadius: 'var(--radius-xl)', border: '1px solid var(--color-border)', display: 'block', boxShadow: 'var(--shadow-lg)' }} />
          </Reveal>
        </div>
      </section>

      {/* intro */}
      <section className="wrap" style={{ padding: '64px 40px 24px', maxWidth: 760 }}>
        <Reveal>
          <SectionLabel center={false}>Coverage in {loc.city}</SectionLabel>
          <div className="tt-prose" style={{ fontSize: 18, lineHeight: 1.7 }}>
            <p>Tectus connects businesses and organizations in {place} with licensed, insured security vendors. Whether you need coverage for an event, executive protection, patrol, or ongoing on-site security, requests are matched to vetted vendors and tracked from assignment to completion.</p>
            <p>Coverage is subject to availability and confirmed prior to deployment. Share your requirements and a Tectus coordinator will follow up with details and pricing.</p>
          </div>
        </Reveal>
      </section>

      {/* services available */}
      <section style={{ background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
        <div className="wrap" style={{ padding: '80px 40px' }}>
          <Reveal><CenterHead label="Services" title={`Security services available in ${loc.city}`} sub="Every service is fulfilled by licensed, vetted vendors coordinated through the Tectus platform." /></Reveal>
          <div className="tt-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {LOC_SERVICES.map((s, i) => (
              <Reveal key={s.slug} delay={(i % 4) * 60}>
                <a href={`#/services/${s.slug}`} className="tt-track-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: 24, background: 'var(--color-bg)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                  <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><Icon name={s.icon} size={21} /></span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: '0 0 10px', lineHeight: 1.28 }}>{s.t}</h3>
                  <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'var(--color-primary-light)' }}>Learn more <Icon name="arrow-right" size={13} /></span>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* trust */}
      <section className="wrap" style={{ padding: '80px 40px' }}>
        <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { icon: 'badge-check', t: 'Licensed & insured', d: 'Coverage provided by licensed and insured vendors.' },
            { icon: 'user-check', t: 'Vetted professionals', d: 'Personnel background-checked and professionally trained by their licensed vendor companies.' },
            { icon: 'clipboard-check', t: 'Compliant operations', d: 'Services delivered in accordance with regulations.' },
          ].map((b) => (
            <Reveal key={b.t}>
              <div style={{ padding: 26, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', height: '100%' }}>
                <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><Icon name={b.icon} size={20} /></span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600, margin: '0 0 7px' }}>{b.t}</h3>
                <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: 0 }}>{b.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <CTABandCenter label="Get started" title={`Request security coverage in ${loc.city}`} sub={`Tell us what you need in ${place} and we'll coordinate licensed, vetted vendors.`} primary="Get Quote" secondary="Book a Demo" />
    </div>
  );
}

window.LocationPage = LocationPage;