// Polaris B — Sub-pages: Services, Projects, ServiceAreas, Contact
const { Reveal, LineDraw, COLORS_B } = window;

function ServicesPageB({ setContactOpen, isMobile }) {
  return (
    <main>
      <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_B.line}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }}>
              <LineDraw style={{ width: 32 }} />
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.accent, fontWeight: 600 }}>Services</div>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h1 style={{ fontSize: isMobile ? 44 : 'clamp(48px, 6vw, 88px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1, margin: 0, maxWidth: '14ch' }}>
              What we do, and how we deliver it.
            </h1>
          </Reveal>
        </div>
      </section>
      {window.POLARIS_SERVICES.map((s, i) => (
        <section key={s.id} style={{ borderBottom: `1px solid ${COLORS_B.line}`, background: i % 2 === 1 ? COLORS_B.bgAlt : COLORS_B.bg }}>
          <div style={{
            maxWidth: 1400, margin: '0 auto',
            padding: isMobile ? '48px 20px' : '64px 56px',
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '180px 1fr 1fr',
            gap: isMobile ? 24 : 48,
          }}>
            <Reveal>
              <div>
                <div style={{ fontSize: 13, color: COLORS_B.accent, fontWeight: 700, letterSpacing: '0.1em' }}>0{i + 1} / 03</div>
                <LineDraw style={{ width: 32 }} />
                <div style={{ marginTop: 24 }}>
                  <Icon name={i === 0 ? 'leaf' : i === 1 ? 'sparkle' : 'snow'} size={28} stroke={COLORS_B.accent} strokeWidth={1.4} />
                </div>
              </div>
            </Reveal>
            <Reveal delay={100}>
              <div>
                <h2 style={{ fontSize: isMobile ? 30 : 36, fontWeight: 600, letterSpacing: '-0.025em', margin: '0 0 16px', lineHeight: 1.1 }}>{s.name}</h2>
                <p style={{ fontSize: 16, color: COLORS_B.inkSoft, margin: 0, lineHeight: 1.55 }}>{s.long}</p>
              </div>
            </Reveal>
            <Reveal delay={200}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.inkSoft, fontWeight: 600, marginBottom: 16 }}>Deliverables</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: `1px solid ${COLORS_B.line}`, borderRadius: 12, overflow: 'hidden' }}>
                  {s.deliverables.map((d, j) => (
                    <div key={d} style={{
                      padding: '16px 18px', fontSize: 14, color: COLORS_B.ink,
                      borderRight: j % 2 === 0 ? `1px solid ${COLORS_B.line}` : 'none',
                      borderBottom: j < 2 ? `1px solid ${COLORS_B.line}` : 'none',
                      display: 'flex', alignItems: 'center', gap: 10,
                    }}>
                      <Icon name="check" size={14} stroke={COLORS_B.accent} strokeWidth={2} /> {d}
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        </section>
      ))}
      <section style={{ padding: isMobile ? '48px 20px' : '80px 56px', textAlign: 'center' }}>
        <button onClick={() => setContactOpen(true)} style={{
          padding: '18px 32px', background: COLORS_B.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,
        }}>
          Request a proposal <Icon name="arrow-right" size={14} stroke="currentColor" strokeWidth={2} />
        </button>
      </section>
    </main>
  );
}

function ProjectsPageB({ isMobile }) {
  const portfolio = window.POLARIS_PORTFOLIO || [];
  return (
    <main>
      {/* Header */}
      <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_B.line}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }}>
              <LineDraw style={{ width: 32 }} />
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.accent, fontWeight: 600 }}>Portfolio · Selected Work</div>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h1 style={{ fontSize: isMobile ? 44 : 'clamp(48px, 6vw, 88px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1, margin: 0, maxWidth: '14ch' }}>
              The properties that vouch for us.
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontSize: 17, color: COLORS_B.inkSoft, marginTop: 32, lineHeight: 1.55, maxWidth: 560 }}>
              A short walk through properties Polaris has tended over the years — estates, campuses, HOAs, and mixed-use sites across Chicagoland's western suburbs. Most clients have been with us for a decade or more.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Portfolio scroll */}
      {portfolio.map((p, i) => {
        const flip = i % 2 === 1;
        return (
          <section key={p.id} style={{
            borderBottom: `1px solid ${COLORS_B.line}`,
            background: i % 2 === 0 ? COLORS_B.bg : COLORS_B.bgAlt,
          }}>
            <div style={{
              maxWidth: 1400, margin: '0 auto',
              padding: isMobile ? '56px 20px' : '96px 56px',
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
              gap: isMobile ? 32 : 80,
              alignItems: 'center',
            }}>
              {/* Image or Video */}
              <Reveal delay={isMobile ? 0 : (flip ? 120 : 0)}>
                <div style={{
                  order: isMobile ? 0 : (flip ? 2 : 0),
                  borderRadius: 20,
                  overflow: 'hidden',
                  border: `1px solid ${COLORS_B.line}`,
                  background: COLORS_B.bgAlt,
                  position: 'relative',
                  aspectRatio: p.aspect || '4 / 3',
                }}>
                  {p.video ? (
                    <video
                      src={p.video}
                      autoPlay
                      muted
                      loop
                      playsInline
                      preload="metadata"
                      controls
                      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', background: '#000' }}
                      onError={(e) => console.error('Video failed to load:', p.video, e.target.error)}
                    />
                  ) : (
                    <div
                      style={{ width: '100%', height: '100%' }}
                      dangerouslySetInnerHTML={{
                        __html: `<image-slot id="${p.id}" src="assets/projects/${p.id}.webp" shape="rect" placeholder="Drop hero photo for ${p.title}" style="width:100%;height:100%;display:block;border:none;border-radius:0;"></image-slot>`
                      }}
                    />
                  )}
                </div>
              </Reveal>

              {/* Copy */}
              <Reveal delay={isMobile ? 80 : (flip ? 0 : 120)}>
                <div style={{ order: 1 }}>
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20,
                  }}>
                    <div style={{ fontSize: 13, color: COLORS_B.accent, fontWeight: 700, letterSpacing: '0.1em', fontVariantNumeric: 'tabular-nums' }}>
                      № {String(i + 1).padStart(2, '0')} / {String(portfolio.length).padStart(2, '0')}
                    </div>
                    <div style={{ flex: 1, height: 1, background: COLORS_B.line }} />
                  </div>

                  <h2 style={{
                    fontSize: isMobile ? 32 : 'clamp(36px, 4vw, 56px)', fontWeight: 500,
                    letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 12px',
                  }}>
                    {p.title}
                  </h2>
                  <div style={{
                    fontSize: 15, color: COLORS_B.inkSoft, marginBottom: 28,
                    display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center',
                  }}>
                    <span>{p.area}</span>
                    <span style={{ opacity: 0.4 }}>·</span>
                    <span>{p.since}</span>
                  </div>

                  <p style={{
                    fontSize: 17, color: COLORS_B.ink, lineHeight: 1.6, margin: '0 0 28px',
                    maxWidth: 520,
                  }}>
                    {p.story}
                  </p>

                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    padding: '10px 16px',
                    border: `1px solid ${COLORS_B.line}`,
                    borderRadius: 999,
                    fontSize: 12, fontWeight: 600, letterSpacing: '0.05em',
                    textTransform: 'uppercase', color: COLORS_B.ink,
                    background: COLORS_B.bg,
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: COLORS_B.accent }} />
                    {p.service}
                  </div>
                </div>
              </Reveal>
            </div>
          </section>
        );
      })}

      {/* Closing band */}
      <section style={{
        padding: isMobile ? '64px 20px' : '96px 56px',
        textAlign: 'center',
      }}>
        <Reveal>
          <div style={{ maxWidth: 720, margin: '0 auto' }}>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.accent, fontWeight: 600, marginBottom: 16 }}>
              The next one could be yours.
            </div>
            <h2 style={{
              fontSize: isMobile ? 32 : 'clamp(36px, 4vw, 52px)', fontWeight: 500,
              letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0,
            }}>
              Tell us about the property.
            </h2>
          </div>
        </Reveal>
      </section>
    </main>
  );
}

function ServiceAreasPageB({ isMobile, setSuburbSlug }) {
  // Slug map for areas that have dedicated SEO landing pages.
  // Adding an entry here turns the chip into a link to /service-areas/<slug>.
  const SUBURB_SLUGS = {
    'Hinsdale': 'hinsdale',
    'Downers Grove': 'downers-grove',
    'Western Springs': 'western-springs',
    'Clarendon Hills': 'clarendon-hills',
    'La Grange': 'la-grange',
    'Elmhurst': 'elmhurst',
    'Naperville': 'naperville',
    'Oak Brook': 'oak-brook',
    'Westmont': 'westmont',
    'Lemont': 'lemont',
    'Glen Ellyn': 'glen-ellyn',
  };

  // Group sites by region
  const groupedByRegion = {
    'Chicago Proper': ['Loop', 'West Loop', 'River North', 'Streeterville', 'Gold Coast', 'Lincoln Park', 'Wicker Park', 'Bucktown', 'West Town', 'South Loop', 'Hyde Park'],
    'North Shore': ['Evanston', 'Skokie', 'Glenview', 'Wilmette', 'Highland Park', 'Lake Forest', 'Lake Bluff', 'Northbrook'],
    'Northwest Suburbs': ['Schaumburg', 'Arlington Hts.', 'Mt. Prospect', 'Des Plaines', 'Park Ridge', 'Rosemont', 'O\'Hare', 'Buffalo Grove', 'Vernon Hills'],
    'West Suburbs': ['Westmont', 'Oak Brook', 'Hinsdale', 'Wheaton', 'Naperville', 'Elmhurst', 'Lombard', 'Downers Grove', 'Aurora'],
    'South Suburbs': ['Tinley Park', 'Orland Park', 'Joliet', 'Bolingbrook'],
  };
  const counts = {};
  // Prefer explicit per-area portfolio counts (sums to 240+); fall back to live pin tally.
  if (window.POLARIS_AREA_COUNTS) {
    Object.assign(counts, window.POLARIS_AREA_COUNTS);
  } else {
    window.POLARIS_SITES.forEach(s => { counts[s.area] = (counts[s.area] || 0) + 1; });
  }

  return (
    <main>
      <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_B.line}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }}>
              <LineDraw style={{ width: 32 }} />
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.accent, fontWeight: 600 }}>Service Areas</div>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h1 style={{ fontSize: isMobile ? 44 : 'clamp(48px, 6vw, 88px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1, margin: 0, maxWidth: '14ch' }}>
              The whole region. One contractor.
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontSize: 17, color: COLORS_B.inkSoft, marginTop: 32, lineHeight: 1.55, maxWidth: 560 }}>
              Polaris crews dispatch from a single Western Suburbs branch in Westmont — right off I-88, I-294, and I-355 — keeping response times tight from the lakefront to the western edge of DuPage County.
            </p>
          </Reveal>
          <Reveal delay={280}>
            <p style={{ fontSize: 13, color: COLORS_B.inkSoft, marginTop: 16, maxWidth: 560, fontStyle: 'italic' }}>
              Suburbs marked with <Icon name="arrow-right" size={11} stroke={COLORS_B.accent} strokeWidth={2} /> have a dedicated profile.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ borderBottom: `1px solid ${COLORS_B.line}` }} />

      <section style={{ padding: isMobile ? '48px 20px' : '80px 56px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          {Object.entries(groupedByRegion).map(([region, areas], regionIdx) => (
            <Reveal key={region} delay={regionIdx * 80}>
              <div style={{ borderTop: `1px solid ${COLORS_B.line}`, padding: isMobile ? '32px 0' : '48px 0' }}>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: isMobile ? '1fr' : '280px 1fr',
                  gap: isMobile ? 20 : 48,
                }}>
                  <div>
                    <div style={{ fontSize: 12, color: COLORS_B.accent, fontWeight: 700, letterSpacing: '0.1em', marginBottom: 8 }}>
                      § 0{regionIdx + 1}
                    </div>
                    <h2 style={{ fontSize: isMobile ? 24 : 28, fontWeight: 600, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.15 }}>
                      {region}
                    </h2>
                    <div style={{ fontSize: 13, color: COLORS_B.inkSoft, marginTop: 8 }}>
                      {areas.reduce((sum, a) => sum + (counts[a] || 0), 0)} active sites
                    </div>
                  </div>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
                    gap: 0, border: `1px solid ${COLORS_B.line}`,
                    borderRadius: 16, overflow: 'hidden',
                  }}>
                    {areas.map((area, i) => {
                      const slug = SUBURB_SLUGS[area];
                      const clickable = !!slug;
                      const cellStyle = {
                        padding: '16px 18px',
                        borderRight: (i + 1) % (isMobile ? 2 : 4) !== 0 ? `1px solid ${COLORS_B.line}` : 'none',
                        borderBottom: i < areas.length - (areas.length % (isMobile ? 2 : 4) || (isMobile ? 2 : 4)) ? `1px solid ${COLORS_B.line}` : 'none',
                        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8,
                        cursor: clickable ? 'pointer' : 'default',
                        textDecoration: 'none',
                        transition: 'background .15s, color .15s',
                      };
                      const inner = (
                        <React.Fragment>
                          <span style={{ fontSize: 14, color: COLORS_B.ink, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                            {area}
                            {clickable && (
                              <Icon name="arrow-right" size={11} stroke={COLORS_B.accent} strokeWidth={2} />
                            )}
                          </span>
                          {counts[area] > 0 && (
                            <span style={{ fontSize: 11, color: COLORS_B.accent, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
                              {counts[area]}
                            </span>
                          )}
                        </React.Fragment>
                      );
                      if (clickable && setSuburbSlug) {
                        return (
                          <a key={area} href={`#/service-areas/${slug}`} onClick={(e) => { e.preventDefault(); setSuburbSlug(slug); }}
                            style={cellStyle}
                            onMouseEnter={(e) => { e.currentTarget.style.background = COLORS_B.bgAlt; }}
                            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
                            {inner}
                          </a>
                        );
                      }
                      return (
                        <div key={area} style={cellStyle}>{inner}</div>
                      );
                    })}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </main>
  );
}

function ContactPageB2({ setContactOpen, isMobile }) {
  return (
    <main>
      <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_B.line}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }}>
              <LineDraw style={{ width: 32 }} />
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.accent, fontWeight: 600 }}>Contact</div>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h1 style={{ fontSize: isMobile ? 44 : 'clamp(48px, 6vw, 88px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1, margin: 0, maxWidth: '14ch' }}>
              Tell us about the property.
            </h1>
          </Reveal>
        </div>
      </section>
      <section style={{ padding: isMobile ? '48px 20px' : '64px 56px' }}>
        <div style={{
          maxWidth: 1400, margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr',
          gap: isMobile ? 32 : 64,
        }}>
          <Reveal>
            <div style={{ border: `1px solid ${COLORS_B.line}`, borderRadius: 20, padding: isMobile ? 32 : 48 }}>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.accent, fontWeight: 600, marginBottom: 16 }}>
                Seven questions, under a minute
              </div>
              <h2 style={{ fontSize: isMobile ? 26 : 32, fontWeight: 500, letterSpacing: '-0.025em', margin: '0 0 16px', lineHeight: 1.1 }}>
                The fastest path to a proposal.
              </h2>
              <p style={{ fontSize: 16, color: COLORS_B.inkSoft, margin: '0 0 32px', lineHeight: 1.55 }}>
                A senior account manager reviews every inquiry and replies within one business day — with relevant Polaris case studies, not a generic response.
              </p>
              <button onClick={() => setContactOpen(true)} style={{
                padding: '16px 28px', background: COLORS_B.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,
                width: isMobile ? '100%' : 'auto', justifyContent: 'center',
              }}>
                Begin your proposal <Icon name="arrow-right" size={14} stroke="currentColor" strokeWidth={2} />
              </button>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              {[
                ['Office', '(630) 296-4277'],
                ['Email', 'hello@polarislandscape.com'],
                ['Headquarters', '670 Vandustrial Dr.\nWestmont, IL 60559'],
              ].map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.inkSoft, fontWeight: 600, marginBottom: 8 }}>{k}</div>
                  <div style={{ fontSize: 16, color: COLORS_B.ink, lineHeight: 1.5, whiteSpace: 'pre-line' }}>{v}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

window.ServicesPageB = ServicesPageB;
window.ProjectsPageB = ProjectsPageB;
window.ServiceAreasPageB = ServiceAreasPageB;
window.ContactPageB2 = ContactPageB2;