// Polaris B — Hero, Stats, Services preview, Map, Clients, CTA, Footer
// Home page composition. Uses b-core.jsx primitives.

const { Reveal, LineDraw, AnimatedStat, COLORS_B } = window;

function HeroB({ setPage, setContactOpen, isMobile }) {
  if (isMobile) {
    return (
      <section style={{ borderBottom: `1px solid ${COLORS_B.line}` }}>
        <div style={{ padding: '40px 20px 32px' }}>
          <Reveal delay={80}>
            <h1 style={{
              fontSize: 'clamp(40px, 11vw, 56px)', fontWeight: 500, letterSpacing: '-0.035em',
              lineHeight: 0.98, margin: 0, color: COLORS_B.ink,
            }}>
              Stewarded<br />landscapes,<br />
              <span style={{ color: COLORS_B.accent }}>year after year.</span>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{ fontSize: 16, color: COLORS_B.inkSoft, marginTop: 24, lineHeight: 1.55 }}>
              Polaris is the contractor of record for 240+ properties across Chicagoland — the buildings, campuses, and neighborhoods that won't accept anything less than excellent.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <button onClick={() => setContactOpen(true)} style={{
              marginTop: 28, padding: '16px 24px', width: '100%',
              background: COLORS_B.accent, color: '#fff',
              border: 'none', borderRadius: 999, cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 13, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            }}>
              Request a proposal <Icon name="arrow-right" size={14} stroke="currentColor" strokeWidth={2} />
            </button>
          </Reveal>
        </div>
        <HeroImage isMobile={true} />
      </section>
    );
  }

  return (
    <section style={{ borderBottom: `1px solid ${COLORS_B.line}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', minHeight: 680 }}>
        <div style={{ padding: '88px 56px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', borderRight: `1px solid ${COLORS_B.line}`, position: 'relative' }}>
          <div>
            <Reveal delay={120}>
              <h1 style={{
                fontSize: 'clamp(56px, 6.5vw, 96px)', fontWeight: 500, letterSpacing: '-0.035em',
                lineHeight: 0.96, margin: 0, color: COLORS_B.ink,
              }}>
                Stewarded<br />landscapes,<br />
                <span style={{ color: COLORS_B.accent }}>year after year.</span>
              </h1>
            </Reveal>
            <Reveal delay={240}>
              <p style={{ fontSize: 17, color: COLORS_B.inkSoft, marginTop: 32, lineHeight: 1.55, maxWidth: 460 }}>
                Polaris is the contractor of record for 240+ properties across Chicagoland — the buildings, campuses, and neighborhoods that won't accept anything less than excellent.
              </p>
            </Reveal>
          </div>
          <Reveal delay={360}>
            <div style={{ display: 'flex', gap: 12, marginTop: 48 }}>
              <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: 'flex', alignItems: 'center', gap: 8,
              }}>
                Request a proposal <Icon name="arrow-right" size={14} stroke="currentColor" strokeWidth={2} />
              </button>
              <button onClick={() => setPage('services')} style={{
                padding: '16px 28px', background: 'transparent', color: COLORS_B.ink,
                border: `1px solid ${COLORS_B.ink}`, borderRadius: 999, cursor: 'pointer',
                fontFamily: 'inherit', fontSize: 13, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
              }}>
                Our services
              </button>
            </div>
          </Reveal>
        </div>
        <HeroImage isMobile={false} />
      </div>
    </section>
  );
}

function HeroImage({ isMobile }) {
  return (
    <div style={{
      position: 'relative',
      minHeight: isMobile ? 320 : 680,
      overflow: 'hidden',
      background: '#1a1f1c',
      borderRadius: isMobile ? 0 : 0,
    }}>
      <img
        src="assets/hero-truck.webp"
        alt="Manicured commercial property landscape with curving stone path, mature trees, and immaculate lawn beside a glass tower."
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'right center',
          display: 'block',
        }}
      />
    </div>
  );
}

function StatsB({ isMobile }) {
  return (
    <section style={{ borderBottom: `1px solid ${COLORS_B.line}` }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
        background: COLORS_B.line,
        gap: 1,
      }}>
        {window.POLARIS_STATS.map((s, i) => (
          <Reveal key={i} delay={i * 80} style={{ height: '100%' }}>
            <div style={{
              padding: isMobile ? '32px 20px' : '48px 32px',
              background: COLORS_B.bg,
              height: '100%',
              boxSizing: 'border-box',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div style={{
                fontSize: isMobile ? 'clamp(36px, 11vw, 48px)' : 'clamp(40px, 4vw, 56px)',
                fontWeight: 500,
                letterSpacing: '-0.025em', lineHeight: 1, color: COLORS_B.accent,
                fontVariantNumeric: 'tabular-nums',
              }}>
                <AnimatedStat raw={s.value} />
              </div>
              <div style={{ fontSize: 13, color: COLORS_B.inkSoft, lineHeight: 1.4 }}>
                {s.label}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function ServicesPreviewB({ setPage, isMobile }) {
  return (
    <section className="b-grain" style={{ background: COLORS_B.bgAlt, padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_B.line}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 24 : 64, marginBottom: isMobile ? 40 : 64, alignItems: 'end',
        }}>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }}>
              <div style={{ fontSize: 12, color: COLORS_B.accent, fontWeight: 600 }}>§ 01</div>
              <LineDraw style={{ width: 32 }} />
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.accent, fontWeight: 600 }}>
                Capabilities
              </div>
            </div>
            <h2 style={{ fontSize: isMobile ? 36 : 'clamp(40px, 4.5vw, 56px)', fontWeight: 500, letterSpacing: '-0.03em', margin: 0, lineHeight: 1.05 }}>
              Three disciplines, one accountable team.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontSize: 16, color: COLORS_B.inkSoft, margin: 0, lineHeight: 1.55 }}>
              We don't subcontract the work that matters. Maintenance, enhancements, and snow & ice are all delivered by Polaris crews under one account manager.
            </p>
          </Reveal>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 0, border: `1px solid ${COLORS_B.line}`, background: COLORS_B.bg,
          borderRadius: 20, overflow: 'hidden',
        }}>
          {window.POLARIS_SERVICES.map((s, i) => (
            <Reveal key={s.id} delay={i * 100}>
              <article style={{
                padding: '40px 32px',
                borderRight: !isMobile && i < 2 ? `1px solid ${COLORS_B.line}` : 'none',
                borderBottom: isMobile && i < 2 ? `1px solid ${COLORS_B.line}` : 'none',
                display: 'flex', flexDirection: 'column', gap: 16, minHeight: 360,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div style={{ fontSize: 11, color: COLORS_B.inkSoft, letterSpacing: '0.15em', fontWeight: 600 }}>
                    SVC · 0{i + 1}
                  </div>
                  <Icon name={i === 0 ? 'leaf' : i === 1 ? 'sparkle' : 'snow'} size={22} stroke={COLORS_B.accent} strokeWidth={1.5} />
                </div>
                <h3 style={{ fontSize: 22, fontWeight: 600, margin: '8px 0 0', letterSpacing: '-0.015em', color: COLORS_B.ink, lineHeight: 1.2 }}>
                  {s.name}
                </h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: COLORS_B.inkSoft, margin: 0, flex: 1 }}>
                  {s.long}
                </p>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, borderTop: `1px solid ${COLORS_B.line}`, paddingTop: 16 }}>
                  {s.deliverables.slice(0, 3).map(d => (
                    <li key={d} style={{ fontSize: 13, color: COLORS_B.ink, display: 'flex', alignItems: 'baseline', gap: 8 }}>
                      <span style={{ color: COLORS_B.accent, fontSize: 10 }}>◆</span> {d}
                    </li>
                  ))}
                </ul>
                <button onClick={() => setPage('services')} style={{
                  marginTop: 8, padding: '12px 0', background: 'transparent',
                  border: 'none', borderTop: `1px solid ${COLORS_B.lineSoft}`,
                  fontFamily: 'inherit', fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
                  color: COLORS_B.accent, cursor: 'pointer', textAlign: 'left',
                  display: 'flex', alignItems: 'center', gap: 8,
                }}>
                  Read more <Icon name="arrow-right" size={12} stroke="currentColor" strokeWidth={2} />
                </button>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function MapSectionB({ setPage, isMobile }) {
  // Pull live data
  const sites = window.POLARIS_SITES || [];
  const counts = {};
  if (window.POLARIS_AREA_COUNTS) {
    Object.assign(counts, window.POLARIS_AREA_COUNTS);
  } else {
    sites.forEach(s => { counts[s.area] = (counts[s.area] || 0) + 1; });
  }
  const allAreas = Object.keys(counts);
  // Top areas by count, then alpha for the rest — feature top 18 on home
  const featured = allAreas
    .sort((a, b) => counts[b] - counts[a] || a.localeCompare(b))
    .slice(0, 18);
  const remaining = Math.max(0, allAreas.length - featured.length);

  const regionalYards = [
    { city: 'Westmont', sub: 'Western Suburbs branch · serving all of Chicagoland' },
  ];

  return (
    <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_B.line}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 24 : 64, marginBottom: isMobile ? 40 : 64, alignItems: 'end',
        }}>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }}>
              <div style={{ fontSize: 12, color: COLORS_B.accent, fontWeight: 600 }}>§ 02</div>
              <LineDraw style={{ width: 32 }} />
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.accent, fontWeight: 600 }}>
                Coverage
              </div>
            </div>
            <h2 style={{ fontSize: isMobile ? 36 : 'clamp(40px, 4.5vw, 56px)', fontWeight: 500, letterSpacing: '-0.03em', margin: 0, lineHeight: 1.05 }}>
              The whole region.<br />One contractor.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontSize: 16, color: COLORS_B.inkSoft, margin: 0, lineHeight: 1.55 }}>
              From the Loop to Lake Forest, from Oak Brook campuses to Naperville civic — our Western Suburbs branch keeps response times tight across {allAreas.length}+ Chicagoland communities.
            </p>
          </Reveal>
        </div>

        {/* Branch strip — credibility band */}
        <Reveal delay={160}>
          <div style={{
            border: `1px solid ${COLORS_B.line}`,
            background: COLORS_B.bgAlt || '#F4F1E8',
            marginBottom: isMobile ? 32 : 48,
            padding: isMobile ? '24px 22px' : '32px 36px',
            display: 'flex', alignItems: 'center', gap: 20,
            borderRadius: 16,
          }}>
            <div style={{
              width: 10, height: 10, borderRadius: '50%',
              background: COLORS_B.accent,
              boxShadow: `0 0 0 5px ${COLORS_B.accent}22`,
              flexShrink: 0,
            }} />
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: COLORS_B.inkSoft, fontWeight: 600, marginBottom: 4 }}>
                Branch
              </div>
              <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 600, color: COLORS_B.ink, letterSpacing: '-0.01em', lineHeight: 1.15 }}>
                {regionalYards[0].city} — Western Suburbs
              </div>
              <div style={{ fontSize: 13, color: COLORS_B.inkSoft, marginTop: 4 }}>
                Serving all of Chicagoland from a single dispatch hub.
              </div>
            </div>
          </div>
        </Reveal>

        {/* Communities — index / credits style grid */}
        <Reveal delay={220}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(6, 1fr)',
            border: `1px solid ${COLORS_B.line}`,
            borderBottom: `1px solid ${COLORS_B.line}`,
            borderRadius: 16, overflow: 'hidden',
          }}>
            {featured.map((area, i) => {
              const cols = isMobile ? 2 : 6;
              return (
                <div key={area} style={{
                  padding: isMobile ? '16px 18px' : '20px 22px',
                  borderRight: (i + 1) % cols !== 0 ? `1px solid ${COLORS_B.line}` : 'none',
                  borderBottom: `1px solid ${COLORS_B.line}`,
                  display: 'flex', flexDirection: 'column', gap: 4,
                  background: COLORS_B.bg,
                }}>
                  <div style={{ fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: COLORS_B.accent, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
                    {String(counts[area]).padStart(2, '0')} sites
                  </div>
                  <div style={{ fontSize: isMobile ? 14 : 15, color: COLORS_B.ink, fontWeight: 500, letterSpacing: '-0.005em' }}>
                    {area}
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>

        <Reveal delay={280}>
          <div style={{
            marginTop: 24, display: 'flex',
            justifyContent: 'space-between', alignItems: 'center', gap: 16,
            flexWrap: 'wrap',
          }}>
            <div style={{ fontSize: 13, color: COLORS_B.inkSoft }}>
              {remaining > 0 && <>Plus {remaining} more communities across the region.</>}
            </div>
            <button onClick={() => setPage('areas')} style={{
              background: 'transparent', border: 'none', borderRadius: 999, cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
              color: COLORS_B.accent, display: 'inline-flex', alignItems: 'center', gap: 8, padding: 8,
            }}>
              All service areas <Icon name="arrow-right" size={12} stroke="currentColor" strokeWidth={2} />
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ClientsB({ isMobile }) {
  return (
    <section style={{ padding: isMobile ? '48px 20px' : '80px 56px', borderBottom: `1px solid ${COLORS_B.line}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <Reveal>
          <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.inkSoft, fontWeight: 600, marginBottom: 32, textAlign: 'center' }}>
            Owners, operators & developers we serve
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(8, 1fr)',
            borderTop: `1px solid ${COLORS_B.line}`, borderLeft: `1px solid ${COLORS_B.line}`,
            borderRadius: 16, overflow: 'hidden',
          }}>
            {window.POLARIS_CLIENTS.map((c, i) => (
              <div key={i} style={{
                padding: isMobile ? '24px 12px' : '32px 12px',
                borderRight: `1px solid ${COLORS_B.line}`, borderBottom: `1px solid ${COLORS_B.line}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: isMobile ? 14 : 15, fontWeight: 500, color: COLORS_B.inkSoft,
                textAlign: 'center', minHeight: 48,
              }}>
                {c}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CTAB({ setContactOpen, isMobile }) {
  return (
    <section className="b-grain" style={{ background: COLORS_B.accent, color: '#fff' }}>
      <div style={{
        maxWidth: 1400, margin: '0 auto',
        padding: isMobile ? '64px 20px' : '96px 56px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr',
        gap: isMobile ? 32 : 48, alignItems: 'center',
      }}>
        <Reveal>
          <h2 style={{
            fontSize: isMobile ? 36 : 'clamp(36px, 4vw, 56px)', fontWeight: 500, letterSpacing: '-0.025em',
            lineHeight: 1.05, margin: 0, maxWidth: '18ch',
          }}>
            Seven questions. Under a minute. We'll handle the rest.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: 'flex', justifyContent: isMobile ? 'flex-start' : 'flex-end' }}>
            <button onClick={() => setContactOpen(true)} style={{
              padding: '18px 32px', background: '#fff', color: COLORS_B.accent,
              border: 'none', borderRadius: 999, cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 13, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
              display: '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>
      </div>
    </section>
  );
}

function FooterB2({ setPage, isMobile }) {
  return (
    <footer style={{ background: COLORS_B.bg, color: COLORS_B.ink, padding: isMobile ? '48px 20px 24px' : '64px 56px 32px', borderTop: `1px solid ${COLORS_B.line}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr 1fr 1fr',
          gap: isMobile ? 32 : 48, marginBottom: 48, paddingBottom: 32, borderBottom: `1px solid ${COLORS_B.line}`,
        }}>
          <div>
            <PolarisLogo size={28} />
            <p style={{ fontSize: 14, color: COLORS_B.inkSoft, lineHeight: 1.5, marginTop: 24, maxWidth: 360 }}>
              The standard for Chicagoland landscapes. Property maintenance, design &amp; build, site enhancements, and snow &amp; ice management since 2011.
            </p>
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.inkSoft, marginBottom: 16, fontWeight: 600 }}>Site</div>
            {[['home', 'Home'], ['services', 'Services'], ['projects', 'Projects'], ['areas', 'Service Areas'], ['contact', 'Contact']].map(([id, label]) => (
              <div key={id} onClick={() => setPage(id)} style={{ fontSize: 13, marginBottom: 8, color: COLORS_B.ink, cursor: 'pointer' }}>{label}</div>
            ))}
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.inkSoft, marginBottom: 16, fontWeight: 600 }}>Services</div>
            {window.POLARIS_SERVICES.map(s => (
              <div key={s.id} style={{ fontSize: 13, marginBottom: 8, color: COLORS_B.ink }}>{s.name}</div>
            ))}
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_B.inkSoft, marginBottom: 16, fontWeight: 600 }}>Contact</div>
            <div style={{ fontSize: 13, marginBottom: 8, color: COLORS_B.ink }}>(630) 296-4277</div>
            <div style={{ fontSize: 13, marginBottom: 8, color: COLORS_B.ink }}>hello@polarislandscape.com</div>
            <div style={{ fontSize: 13, marginBottom: 8, color: COLORS_B.ink, lineHeight: 1.5 }}>670 Vandustrial Dr.<br />Westmont, IL</div>
          </div>
        </div>
        <div style={{
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          gap: 12,
          justifyContent: 'space-between', fontSize: 12, color: COLORS_B.inkSoft,
        }}>
          <div>© 2026 Polaris Landscape</div>
          <div>Headquartered in Westmont · Serving all of Chicagoland</div>
        </div>
      </div>
    </footer>
  );
}

window.HeroB = HeroB;
window.StatsB = StatsB;
window.ServicesPreviewB = ServicesPreviewB;
window.MapSectionB = MapSectionB;
window.ClientsB = ClientsB;
window.CTAB = CTAB;
window.FooterB2 = FooterB2;