// Polaris B — About page. Founder story, timeline, values.
const { Reveal: RevealA, LineDraw: LineDrawA, COLORS_B: C_A } = window;

function AboutPageB({ setContactOpen, setPage, isMobile }) {
  const timeline = [
    { year: '2011', title: 'Cut Right Landscaping is born', body: 'A teenage Brendan Lockerby starts cutting lawns around his neighborhood under the name Cut Right Landscaping. One mower, one trimmer, one kid who took the work seriously.' },
    { year: '2015', title: 'First commercial accounts', body: 'Word travels. A handful of small commercial properties sign on for full-season maintenance — the first proof that the standard scales.' },
    { year: '2018', title: 'University of Illinois', body: 'Brendan enrolls in the Landscape Architecture program at UIUC — formal training to match a decade of craft already in the field.' },
    { year: '2022', title: 'Graduation, and a relaunch', body: 'Degree in hand, Brendan returns to the business with a clearer thesis: a Chicagoland landscape firm built on architectural rigor and four-season reliability. Cut Right expands.' },
    { year: '2025', title: 'A new name: Polaris Landscape', body: 'Cut Right rebrands to Polaris Landscape — a more comprehensive name for a fully comprehensive firm. Same crews, same standard, broader scope.' },
    { year: 'Today', title: 'Across all four seasons', body: 'A fully capable landscape firm — maintenance, enhancements, snow & ice, and design-build — caring for 240+ sites across Chicagoland from our Westmont headquarters.' },
  ];

  const values = [
    { kw: 'Craft', body: 'Every property is somebody\'s front door. We cut, prune, and plant like it.' },
    { kw: 'Reliability', body: 'Crews show up on schedule, in uniform, with a plan. Snow at 3 a.m. is not optional.' },
    { kw: 'Restraint', body: 'We do less, better. A clean line beats a clever one. Native plants beat fashionable ones.' },
    { kw: 'Long view', body: 'Most of our properties have been with us for years. We invest in soil, structure, and relationships that compound.' },
  ];

  return (
    <main>
      {/* Hero */}
      <section style={{
        padding: isMobile ? '80px 20px 64px' : '140px 56px 120px',
        borderBottom: `1px solid ${C_A.line}`,
        background: C_A.bg,
      }}>
        <RevealA>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
            <LineDrawA style={{ width: 32 }} />
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C_A.accent, fontWeight: 600 }}>
              About Polaris
            </div>
          </div>
        </RevealA>
        <RevealA delay={100}>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: isMobile ? 44 : 88,
            fontWeight: 300,
            letterSpacing: '-0.03em',
            lineHeight: 1.02,
            color: C_A.ink,
            margin: 0,
            maxWidth: 1100,
          }}>
            Fifteen years of caring for Chicagoland — one property at a time.
          </h1>
        </RevealA>
        <RevealA delay={200}>
          <p style={{
            fontSize: isMobile ? 18 : 22,
            lineHeight: 1.55,
            color: C_A.inkSoft,
            maxWidth: 720,
            marginTop: 40,
          }}>
            Polaris Landscape was founded in 2011 by Brendan Lockerby. What started as one teenager push-mowing his neighborhood has grown into a full four-season landscape firm serving 240+ properties across Chicagoland — without losing the craft mentality it started with.
          </p>
        </RevealA>
      </section>

      {/* Founder story */}
      <section style={{
        padding: isMobile ? '64px 20px' : '120px 56px',
        borderBottom: `1px solid ${C_A.line}`,
        background: C_A.bgAlt,
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr', gap: isMobile ? 40 : 80, alignItems: 'start', maxWidth: 1400, margin: '0 auto' }}>
          <RevealA>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C_A.inkSoft, fontWeight: 600, marginBottom: 16 }}>
              § 01 — Founder
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: isMobile ? 28 : 40, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1, color: C_A.ink, marginBottom: 16 }}>
              Brendan Lockerby
            </div>
            <div style={{ fontSize: 14, color: C_A.inkSoft, marginBottom: 28, letterSpacing: '0.02em' }}>
              Founder &amp; Principal · B.L.A., University of Illinois Urbana–Champaign, 2022
            </div>
            <div style={{
              fontSize: isMobile ? 17 : 18,
              lineHeight: 1.7,
              color: C_A.ink,
              display: 'flex',
              flexDirection: 'column',
              gap: 20,
            }}>
              <p style={{ margin: 0 }}>
                Polaris starts in 2011, in a Chicago suburb, with a teenager, a push mower, and a few neighbors who needed their grass cut. Brendan founded the business under the name <em>Cut Right Landscaping</em>, kept showing up, and the lawns kept multiplying. By the end of high school it had become a real small operation — equipment, a truck, repeat clients, standards.
              </p>
              <p style={{ margin: 0 }}>
                In 2018 Brendan enrolled in the Landscape Architecture program at the University of Illinois at Urbana–Champaign — pairing nearly a decade of in-the-field practice with the design vocabulary, plant science, and site engineering that separate a landscape company from a landscape firm. He graduated in 2022 and the business expanded sharply: maintenance crews scaled, snow &amp; ice operations matured, design-build and enhancements joined the offering, and the Westmont headquarters opened.
              </p>
              <p style={{ margin: 0 }}>
                In 2025, Cut Right rebranded to <strong style={{ fontWeight: 500, color: C_A.ink }}>Polaris Landscape</strong> — a more comprehensive name for a fully comprehensive firm. Same crews, same standard, broader scope. Today, Polaris cares for 240+ commercial, HOA, residential, and industrial properties across Chicagoland.
              </p>
            </div>
          </RevealA>
          <RevealA delay={120}>
            <figure style={{ margin: 0 }}>
              <div style={{
                position: 'relative',
                borderRadius: 20,
                overflow: 'hidden',
                border: `1px solid ${C_A.line}`,
                aspectRatio: '3 / 4',
                background: C_A.bgAlt,
              }}>
                <img
                  src="assets/founder-cutright.jpeg"
                  alt="Brendan Lockerby in front of a Cut Right Landscaping truck and trailer, circa the early years before the 2025 rebrand to Polaris Landscape."
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
                />
              </div>
              <figcaption style={{
                marginTop: 16,
                fontSize: 13,
                lineHeight: 1.5,
                color: C_A.inkSoft,
                fontStyle: 'italic',
                maxWidth: 420,
              }}>
                Brendan with the original Cut Right Landscaping truck and trailer in 2020 — the rig that grew the company before the 2025 rebrand to Polaris Landscape.
              </figcaption>
            </figure>
          </RevealA>
        </div>
      </section>

      {/* Timeline */}
      <section style={{
        padding: isMobile ? '64px 20px' : '120px 56px',
        borderBottom: `1px solid ${C_A.line}`,
        background: C_A.bg,
      }}>
        <RevealA>
          <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C_A.inkSoft, fontWeight: 600, marginBottom: 16 }}>
            § 02 — Fifteen years, condensed
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: isMobile ? 32 : 56, fontWeight: 300, letterSpacing: '-0.02em', lineHeight: 1.05, color: C_A.ink, margin: '0 0 64px', maxWidth: 800 }}>
            From one mower to one of Chicagoland's most reliable commercial landscape firms.
          </h2>
        </RevealA>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          {timeline.map((t, i) => (
            <RevealA key={t.year} delay={i * 80}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '1fr' : '160px 1fr',
                gap: isMobile ? 12 : 48,
                padding: isMobile ? '28px 0' : '40px 0',
                borderTop: `1px solid ${C_A.line}`,
                alignItems: 'start',
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: isMobile ? 28 : 40,
                  fontWeight: 300,
                  color: C_A.accent,
                  letterSpacing: '-0.02em',
                }}>{t.year}</div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: isMobile ? 22 : 28, fontWeight: 400, letterSpacing: '-0.01em', color: C_A.ink, marginBottom: 8 }}>
                    {t.title}
                  </div>
                  <div style={{ fontSize: isMobile ? 16 : 17, lineHeight: 1.6, color: C_A.inkSoft, maxWidth: 640 }}>
                    {t.body}
                  </div>
                </div>
              </div>
            </RevealA>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{
        padding: isMobile ? '80px 20px' : '140px 56px',
        background: C_A.bg,
        borderBottom: `1px solid ${C_A.line}`,
      }}>
        <RevealA>
          <div style={{ maxWidth: 1000 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C_A.inkSoft, fontWeight: 600, marginBottom: 16 }}>
              § 03 — Work with us
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)',
              fontSize: isMobile ? 36 : 64,
              fontWeight: 300,
              letterSpacing: '-0.02em',
              lineHeight: 1.05,
              color: C_A.ink,
              margin: '0 0 32px',
            }}>
              Looking for a landscape partner you don't have to manage?
            </h2>
            <p style={{ fontSize: isMobile ? 17 : 19, lineHeight: 1.6, color: C_A.inkSoft, maxWidth: 640, marginBottom: 40 }}>
              Tell us about your property. We'll walk it, take notes, and come back with a proposal that respects your time and your budget.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
              <button onClick={() => setContactOpen(true)} style={{
                padding: '18px 32px',
                background: C_A.ink, color: C_A.bg,
                border: 'none', borderRadius: 999,
                fontSize: 15, fontWeight: 500, letterSpacing: '0.01em',
                cursor: 'pointer',
              }}>Request a Proposal →</button>
              <button onClick={() => setPage('projects')} style={{
                padding: '18px 32px',
                background: 'transparent', color: C_A.ink,
                border: `1px solid ${C_A.ink}`, borderRadius: 999,
                fontSize: 15, fontWeight: 500, letterSpacing: '0.01em',
                cursor: 'pointer',
              }}>See recent work</button>
            </div>
          </div>
        </RevealA>
      </section>
    </main>
  );
}

window.AboutPageB = AboutPageB;