// Per-suburb landing page template. Renders one of the entries from
// window.POLARIS_SUBURBS. Editorial tone, matches the rest of the site.
//
// Sections (in order):
//  1. Hero: city + headline + supporting line + CTA + breadcrumb
//  2. Quick facts strip (drive time, ZIPs, properties under management)
//  3. Property types we serve in this suburb
//  4. Local context paragraph + neighborhoods list
//  5. Services available in this suburb (cross-link to /services)
//  6. Cross-links to other nearby suburbs
//  7. Bottom CTA: get a proposal
//
// Renders dynamic JSON-LD for the per-suburb LocalBusiness as an inline
// <script type="application/ld+json"> via dangerouslySetInnerHTML so AI/SEO
// crawlers see the right structured data for each page.

const { Reveal: SR_Reveal, LineDraw: SR_LineDraw, COLORS_B: SR_COLORS_B, Icon: SR_Icon } = window;

function SuburbPageB({ suburb, setPage, setSuburbSlug, setContactOpen, isMobile }) {
  if (!suburb) return null;
  const C = SR_COLORS_B;

  // Build the per-suburb JSON-LD payload.
  const localBusinessLD = {
    "@context": "https://schema.org",
    "@type": ["LocalBusiness", "LandscapingBusiness"],
    "@id": `https://polarislandscape.com/service-areas/${suburb.slug}#business`,
    "name": `Polaris Landscape — ${suburb.name}, ${suburb.state}`,
    "description": `Commercial landscape maintenance, construction, design, site enhancements, and snow & ice management for properties in ${suburb.name}, ${suburb.state}. ${suburb.activeProperties} active properties under management.`,
    "url": `https://polarislandscape.com/service-areas/${suburb.slug}`,
    "telephone": "+1-630-296-4277",
    "email": "hello@polarislandscape.com",
    "image": "https://polarislandscape.com/assets/og-cover.jpg",
    "logo": "https://polarislandscape.com/assets/polaris-logo.png",
    "priceRange": "$$$",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "670 Vandustrial Drive",
      "addressLocality": "Westmont",
      "addressRegion": "IL",
      "postalCode": "60559",
      "addressCountry": "US"
    },
    "areaServed": {
      "@type": "City",
      "name": suburb.name,
      "containedInPlace": { "@type": "AdministrativeArea", "name": suburb.county }
    },
    "hasOfferCatalog": {
      "@type": "OfferCatalog",
      "name": `Commercial Landscape Services in ${suburb.name}`,
      "itemListElement": suburb.services.map(s => ({
        "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": s, "areaServed": suburb.name }
      }))
    }
  };

  // Other suburbs to cross-link (4 random others, but stable per page).
  const others = window.POLARIS_SUBURBS.filter(s => s.slug !== suburb.slug);
  // Stable shuffle: rotate based on slug character codes
  const rotation = suburb.slug.charCodeAt(0) % others.length;
  const linked = [...others.slice(rotation), ...others.slice(0, rotation)].slice(0, 4);

  return (
    <main>
      {/* JSON-LD specific to this suburb */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(localBusinessLD) }} />

      {/* HERO */}
      <section className="b-grain" style={{
        padding: isMobile ? '56px 20px 64px' : '88px 56px 96px',
        borderBottom: `1px solid ${C.line}`,
        background: C.bg,
      }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          {/* Breadcrumb */}
          <Reveal>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 12, letterSpacing: '0.04em', color: C.inkSoft, marginBottom: 28 }}>
              <a onClick={() => setPage('home')} style={{ cursor: 'pointer', color: C.inkSoft, textDecoration: 'none' }}>Home</a>
              <span style={{ opacity: 0.5 }}>/</span>
              <a onClick={() => { setSuburbSlug(null); setPage('areas'); }} style={{ cursor: 'pointer', color: C.inkSoft, textDecoration: 'none' }}>Service Areas</a>
              <span style={{ opacity: 0.5 }}>/</span>
              <span style={{ color: C.ink, fontWeight: 500 }}>{suburb.name}</span>
            </div>
          </Reveal>

          <Reveal delay={50}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }}>
              <LineDraw style={{ width: 32 }} />
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.accent, fontWeight: 600 }}>
                Service Area · {suburb.county}
              </div>
            </div>
          </Reveal>

          <Reveal delay={100}>
            <div style={{ fontSize: isMobile ? 14 : 16, color: C.inkSoft, marginBottom: 16, fontWeight: 500, letterSpacing: '0.01em' }}>
              Commercial landscaping in
            </div>
            <h1 style={{
              fontSize: isMobile ? 48 : 'clamp(56px, 7vw, 96px)',
              fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 0.95,
              margin: '0 0 32px', maxWidth: '14ch',
            }}>
              {suburb.name}, {suburb.state}
            </h1>
          </Reveal>

          <Reveal delay={180}>
            <p style={{
              fontSize: isMobile ? 19 : 24, color: C.ink, lineHeight: 1.35,
              margin: '0 0 16px', maxWidth: '28ch', fontWeight: 500, letterSpacing: '-0.01em',
            }}>
              {suburb.headline}
            </p>
          </Reveal>

          <Reveal delay={250}>
            <p style={{
              fontSize: isMobile ? 16 : 17, color: C.inkSoft, lineHeight: 1.6,
              margin: '0 0 40px', maxWidth: 620,
            }}>
              {suburb.sub}
            </p>
          </Reveal>

          <Reveal delay={320}>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button onClick={() => setContactOpen(true)} style={{
                padding: '16px 28px', background: C.accent, color: '#fff',
                border: 'none', borderRadius: 999, cursor: 'pointer',
                fontFamily: 'inherit', fontSize: 13, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
                display: 'inline-flex', alignItems: 'center', gap: 10,
              }}>
                Get a {suburb.name} proposal <Icon name="arrow-right" size={14} stroke="currentColor" strokeWidth={2} />
              </button>
              <button onClick={() => setPage('services')} style={{
                padding: '16px 28px', background: 'transparent', color: C.ink,
                border: `1px solid ${C.ink}`, borderRadius: 999, cursor: 'pointer',
                fontFamily: 'inherit', fontSize: 13, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
              }}>
                Our services
              </button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* QUICK FACTS STRIP */}
      <section style={{ borderBottom: `1px solid ${C.line}`, background: C.bgAlt }}>
        <div style={{
          maxWidth: 1400, margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
        }}>
          {[
            ['From HQ', suburb.driveMinutes === 0 ? 'On-site' : `${suburb.driveMinutes} min drive`],
            ['Distance', suburb.distanceMiles === 0 ? 'Headquartered here' : `${suburb.distanceMiles} miles`],
            ['Active properties', suburb.activeProperties.toString()],
            ['ZIP codes', suburb.zips.join(', ')],
          ].map(([k, v], i) => (
            <Reveal key={k} delay={i * 60}>
              <div style={{
                padding: isMobile ? '24px 20px' : '36px 32px',
                borderRight: !isMobile && i < 3 ? `1px solid ${C.line}` : 'none',
                borderBottom: isMobile && i < 2 ? `1px solid ${C.line}` : 'none',
                borderRightWidth: isMobile && i % 2 === 0 ? 1 : (isMobile ? 0 : (i < 3 ? 1 : 0)),
                borderRightStyle: 'solid',
                borderRightColor: C.line,
              }}>
                <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.inkSoft, fontWeight: 600, marginBottom: 8 }}>{k}</div>
                <div style={{ fontSize: isMobile ? 22 : 28, fontWeight: 500, letterSpacing: '-0.02em', color: C.ink, lineHeight: 1.1, fontVariantNumeric: 'tabular-nums' }}>{v}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* PROPERTY TYPES */}
      <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${C.line}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 32 : 80 }}>
          <Reveal>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.accent, fontWeight: 700, marginBottom: 12 }}>§ 01 · Properties</div>
              <h2 style={{ fontSize: isMobile ? 28 : 36, fontWeight: 500, letterSpacing: '-0.025em', margin: 0, lineHeight: 1.1 }}>
                What we tend in {suburb.name}.
              </h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0, border: `1px solid ${C.line}`, borderRadius: 16, overflow: 'hidden' }}>
                {suburb.propertyMix.map((p, i) => (
                  <div key={p.label} style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                    padding: isMobile ? '20px 20px' : '24px 28px',
                    borderBottom: i < suburb.propertyMix.length - 1 ? `1px solid ${C.line}` : 'none',
                  }}>
                    <span style={{ fontSize: isMobile ? 15 : 17, color: C.ink, fontWeight: 500, letterSpacing: '-0.005em' }}>
                      {p.label}
                    </span>
                    <span style={{ fontSize: 11, color: C.accent, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
                      {p.share}
                    </span>
                  </div>
                ))}
              </div>
              <p style={{ fontSize: 14, color: C.inkSoft, marginTop: 20, lineHeight: 1.55 }}>
                Polaris does not service single-family residential. Our {suburb.name} work is exclusively commercial, association, institutional, and municipal.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* LOCAL CONTEXT + NEIGHBORHOODS */}
      <section className="b-grain" style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${C.line}`, background: C.bgAlt }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 32 : 80 }}>
          <Reveal>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.accent, fontWeight: 700, marginBottom: 12 }}>§ 02 · The town</div>
              <h2 style={{ fontSize: isMobile ? 28 : 36, fontWeight: 500, letterSpacing: '-0.025em', margin: 0, lineHeight: 1.1 }}>
                A {suburb.name} crew, not a generic one.
              </h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div>
              <p style={{ fontSize: isMobile ? 16 : 18, color: C.ink, lineHeight: 1.65, margin: '0 0 32px', maxWidth: 720 }}>
                {suburb.localContext}
              </p>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.inkSoft, fontWeight: 600, marginBottom: 16 }}>
                Where you'll see our trucks
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {suburb.neighborhoods.map(n => (
                  <span key={n} style={{
                    padding: '8px 14px', border: `1px solid ${C.line}`, borderRadius: 999,
                    fontSize: 13, color: C.ink, background: C.bg, fontWeight: 500,
                  }}>{n}</span>
                ))}
              </div>
              <p style={{ fontSize: 14, color: C.inkSoft, marginTop: 28, lineHeight: 1.55, fontStyle: 'italic' }}>
                {suburb.proximityNote}
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* SERVICES IN THIS SUBURB */}
      <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${C.line}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 32 : 80 }}>
          <Reveal>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.accent, fontWeight: 700, marginBottom: 12 }}>§ 03 · Services</div>
              <h2 style={{ fontSize: isMobile ? 28 : 36, fontWeight: 500, letterSpacing: '-0.025em', margin: 0, lineHeight: 1.1 }}>
                Available in {suburb.name}.
              </h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 16 }}>
              {suburb.services.map(s => (
                <a key={s} onClick={() => setPage('services')} style={{
                  display: 'block', padding: isMobile ? '20px 22px' : '24px 28px',
                  border: `1px solid ${C.line}`, borderRadius: 12,
                  cursor: 'pointer', textDecoration: 'none', color: C.ink,
                  background: C.bg,
                  transition: 'border-color .18s, transform .18s',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = C.accent; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = C.line; e.currentTarget.style.transform = 'translateY(0)'; }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
                    <span style={{ fontSize: isMobile ? 15 : 16, fontWeight: 600, letterSpacing: '-0.005em' }}>
                      {s}
                    </span>
                    <Icon name="arrow-right" size={14} stroke={C.accent} strokeWidth={2} />
                  </div>
                  <div style={{ fontSize: 12, color: C.inkSoft, marginTop: 6 }}>
                    Explore the full {s.toLowerCase()} scope →
                  </div>
                </a>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* CROSS-LINKS to nearby suburbs */}
      <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${C.line}`, background: C.bgAlt }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <Reveal>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.accent, fontWeight: 700, marginBottom: 12 }}>§ 04 · Nearby</div>
            <h2 style={{ fontSize: isMobile ? 28 : 36, fontWeight: 500, letterSpacing: '-0.025em', margin: '0 0 32px', lineHeight: 1.1 }}>
              We also serve…
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 12 }}>
            {linked.map((s, i) => (
              <Reveal key={s.slug} delay={i * 60}>
                <a onClick={() => setSuburbSlug(s.slug)} style={{
                  display: 'block', padding: isMobile ? '18px 18px' : '22px 24px',
                  border: `1px solid ${C.line}`, borderRadius: 12, background: C.bg,
                  cursor: 'pointer', textDecoration: 'none', color: C.ink,
                  transition: 'border-color .18s, transform .18s',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = C.accent; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = C.line; e.currentTarget.style.transform = 'translateY(0)'; }}>
                  <div style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: C.inkSoft, fontWeight: 600, marginBottom: 6 }}>
                    {s.county.split('/')[0].trim()}
                  </div>
                  <div style={{ fontSize: isMobile ? 17 : 19, fontWeight: 600, letterSpacing: '-0.01em', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    {s.name}
                    <Icon name="arrow-right" size={13} stroke={C.accent} strokeWidth={2} />
                  </div>
                  <div style={{ fontSize: 12, color: C.inkSoft, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
                    {s.activeProperties} active properties
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* BOTTOM CTA */}
      <section style={{ padding: isMobile ? '80px 20px' : '128px 56px', background: C.bg }}>
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <Reveal>
            <h2 style={{ fontSize: isMobile ? 36 : 'clamp(48px, 5.5vw, 72px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.05, margin: '0 0 24px' }}>
              A proposal for your {suburb.name} property.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontSize: 17, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 40px', maxWidth: 540, marginLeft: 'auto', marginRight: 'auto' }}>
              Seven questions, under a minute. A senior account manager will reply within one business day with relevant {suburb.name} case studies.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <button onClick={() => setContactOpen(true)} style={{
              padding: '20px 36px', background: C.accent, color: '#fff',
              border: 'none', borderRadius: 999, cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 14, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
              display: 'inline-flex', alignItems: 'center', gap: 12,
            }}>
              Begin your proposal <Icon name="arrow-right" size={14} stroke="currentColor" strokeWidth={2} />
            </button>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

window.SuburbPageB = SuburbPageB;