// Polaris B — Outdoor Living section pages: PatiosPageB + PlantingsPageB
//
// These are the residential project-work pages shipped 2026-05-20. They sit
// alongside the commercial-first Services / Projects pages but speak directly
// to homeowners in the western suburbs looking for project-scope work:
// hardscapes, fireplaces, design, plantings.
//
// Architecture: same idiom as b-pages.jsx — function components consuming
// Reveal / LineDraw / COLORS_B / Icon off window. No new dependencies.
//
// URL routing: index.html App's setPageWrapped pushes the right path
// (/patios-and-hardscapes or /design-and-plantings) when these pages
// activate; vercel.json rewrites those paths back to index.html for direct
// landings.
//
// Paid-traffic LP equivalents live at /lp/patios-and-hardscapes/ and
// /lp/design-and-plantings/ (standalone HTML files, distraction-free for ads).

const { Reveal: RevealOL, LineDraw: LineDrawOL, COLORS_B: COLORS_OL } = window;

// ────────── Shared building blocks ──────────

function OutdoorLivingHero({ eyebrow, title, sub, accentWord, setContactOpen, isMobile }) {
  return (
    <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_OL.line}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <RevealOL>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }}>
            <LineDrawOL style={{ width: 32 }} />
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_OL.accent, fontWeight: 600 }}>{eyebrow}</div>
          </div>
        </RevealOL>
        <RevealOL delay={100}>
          <h1 style={{
            fontSize: isMobile ? 44 : 'clamp(48px, 6vw, 88px)',
            fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1,
            margin: 0, maxWidth: '14ch',
          }}>
            {title} <span style={{ color: COLORS_OL.accent }}>{accentWord}</span>
          </h1>
        </RevealOL>
        <RevealOL delay={200}>
          <p style={{ fontSize: 17, color: COLORS_OL.inkSoft, marginTop: 32, lineHeight: 1.55, maxWidth: 560 }}>
            {sub}
          </p>
        </RevealOL>
        <RevealOL delay={300}>
          <button onClick={() => setContactOpen(true)} style={{
            marginTop: 32, padding: isMobile ? '16px 24px' : '18px 32px',
            background: COLORS_OL.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,
          }}>
            Free on-site consultation
            <Icon name="arrow-right" size={14} stroke="currentColor" strokeWidth={2} />
          </button>
        </RevealOL>
      </div>
    </section>
  );
}

function OutdoorLivingGallery({ eyebrow, title, sub, items, isMobile }) {
  return (
    <section style={{ padding: isMobile ? '56px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_OL.line}`, background: COLORS_OL.bgAlt }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <RevealOL>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 16 }}>
            <LineDrawOL style={{ width: 32 }} />
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_OL.accent, fontWeight: 600 }}>{eyebrow}</div>
          </div>
        </RevealOL>
        <RevealOL delay={100}>
          <h2 style={{
            fontSize: isMobile ? 32 : 'clamp(36px, 4vw, 52px)',
            fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1,
            margin: '0 0 16px', maxWidth: 18 + 'ch',
          }}>{title}</h2>
        </RevealOL>
        <RevealOL delay={200}>
          <p style={{ fontSize: 17, color: COLORS_OL.inkSoft, margin: '0 0 48px', lineHeight: 1.55, maxWidth: 640 }}>
            {sub}
          </p>
        </RevealOL>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
          gap: isMobile ? 12 : 20,
        }}>
          {items.map((item, i) => (
            <RevealOL key={item.src} delay={100 + i * 60}>
              <div style={{
                position: 'relative',
                aspectRatio: '4 / 3',
                borderRadius: 12,
                overflow: 'hidden',
                background: COLORS_OL.bgDeep,
                backgroundImage: `url(assets/projects/${item.src})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                border: `1px solid ${COLORS_OL.line}`,
              }}>
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: '14px 16px',
                  background: 'linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0))',
                  color: '#fff', fontSize: 13, fontWeight: 500, letterSpacing: '0.01em',
                }}>
                  {item.caption}
                </div>
              </div>
            </RevealOL>
          ))}
        </div>
      </div>
    </section>
  );
}

function OutdoorLivingHowItWorks({ steps, isMobile }) {
  return (
    <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_OL.line}` }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <RevealOL>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 16 }}>
            <LineDrawOL style={{ width: 32 }} />
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_OL.accent, fontWeight: 600 }}>How it works</div>
          </div>
        </RevealOL>
        <RevealOL delay={100}>
          <h2 style={{
            fontSize: isMobile ? 32 : 'clamp(36px, 4vw, 52px)',
            fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1,
            margin: '0 0 48px',
          }}>Three steps. No surprises.</h2>
        </RevealOL>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 16 : 32,
        }}>
          {steps.map((s, i) => (
            <RevealOL key={s.title} delay={100 + i * 100}>
              <div style={{
                padding: 32,
                border: `1px solid ${COLORS_OL.line}`,
                borderRadius: 16,
                background: COLORS_OL.bg,
                height: '100%',
              }}>
                <div style={{ fontSize: 13, color: COLORS_OL.accent, fontWeight: 700, letterSpacing: '0.1em', fontVariantNumeric: 'tabular-nums', marginBottom: 16 }}>
                  № {String(i + 1).padStart(2, '0')}
                </div>
                <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em', margin: '0 0 12px', lineHeight: 1.2 }}>
                  {s.title}
                </h3>
                <p style={{ fontSize: 15, color: COLORS_OL.inkSoft, margin: 0, lineHeight: 1.6 }}>
                  {s.body}
                </p>
              </div>
            </RevealOL>
          ))}
        </div>
      </div>
    </section>
  );
}

function OutdoorLivingServiceArea({ isMobile }) {
  const towns = [
    'Hinsdale', 'Clarendon Hills', 'Downers Grove', 'Burr Ridge', 'Willowbrook',
    'Elmhurst', 'Oak Brook', 'Western Springs', 'La Grange', 'Lemont',
  ];
  return (
    <section style={{ padding: isMobile ? '56px 20px' : '96px 56px', borderBottom: `1px solid ${COLORS_OL.line}`, background: COLORS_OL.bgAlt }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <RevealOL>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 16 }}>
            <LineDrawOL style={{ width: 32 }} />
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_OL.accent, fontWeight: 600 }}>Service area</div>
          </div>
        </RevealOL>
        <RevealOL delay={100}>
          <h2 style={{
            fontSize: isMobile ? 32 : 'clamp(36px, 4vw, 52px)',
            fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1,
            margin: '0 0 16px',
          }}>Serving the western suburbs of Chicago.</h2>
        </RevealOL>
        <RevealOL delay={200}>
          <p style={{ fontSize: 17, color: COLORS_OL.inkSoft, margin: '0 0 32px', lineHeight: 1.55, maxWidth: 640 }}>
            We build in the towns we know best. If you're in or near one of these, we'd love to come out.
          </p>
        </RevealOL>
        <RevealOL delay={300}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {towns.map(t => (
              <span key={t} style={{
                padding: '10px 18px',
                background: COLORS_OL.bg,
                border: `1px solid ${COLORS_OL.line}`,
                borderRadius: 999,
                fontSize: 14, fontWeight: 500, color: COLORS_OL.ink,
              }}>{t}</span>
            ))}
          </div>
        </RevealOL>
      </div>
    </section>
  );
}

function OutdoorLivingClosingCTA({ title, setContactOpen, isMobile }) {
  return (
    <section style={{ padding: isMobile ? '64px 20px' : '96px 56px', textAlign: 'center' }}>
      <RevealOL>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: COLORS_OL.accent, fontWeight: 600, marginBottom: 16 }}>
            Free on-site consultation
          </div>
          <h2 style={{
            fontSize: isMobile ? 32 : 'clamp(36px, 4vw, 52px)',
            fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1,
            margin: '0 0 32px',
          }}>{title}</h2>
          <button onClick={() => setContactOpen(true)} style={{
            padding: '18px 32px', background: COLORS_OL.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,
          }}>
            Tell us about your project
            <Icon name="arrow-right" size={14} stroke="currentColor" strokeWidth={2} />
          </button>
        </div>
      </RevealOL>
    </section>
  );
}

// ────────── PatiosPageB ──────────
function PatiosPageB({ setContactOpen, isMobile }) {
  const galleryItems = [
    { src: 'proj-1.webp', caption: 'Hinsdale paver patio with fireplace' },
    { src: 'proj-2.webp', caption: 'Outdoor kitchen & dining patio' },
    { src: 'proj-3.webp', caption: 'Custom seating wall & fire feature' },
    { src: 'proj-4.webp', caption: 'Multi-level paver terrace' },
    { src: 'proj-5.webp', caption: 'Flagstone walkway & entry steps' },
    { src: 'proj-6.webp', caption: 'Boulder retaining wall' },
  ];

  const steps = [
    { title: 'Site visit & design', body: 'We walk the property, listen to how you want to use the space, take measurements, and sketch a real plan.' },
    { title: 'Approve scope & timeline', body: 'You get a clear written scope, fixed pricing, material selections, and a build schedule before anyone breaks ground.' },
    { title: 'We build it', body: 'Our crews handle the build start to finish. You get progress updates, a clean job site, and a space ready to live in.' },
  ];

  return (
    <main>
      <OutdoorLivingHero
        eyebrow="Patios & Hardscapes"
        title="Custom paver patios and outdoor spaces"
        accentWord="built to last."
        sub="Polaris designs and builds custom patios, outdoor fireplaces, seating walls, and full hardscape installs for homes in Hinsdale, Oak Brook, Burr Ridge, Western Springs and the western suburbs."
        setContactOpen={setContactOpen}
        isMobile={isMobile}
      />
      <OutdoorLivingGallery
        eyebrow="Recent projects"
        title="Hardscapes designed for how you actually live."
        sub="Every project starts with how you'll use the space, not what to put in it. Then we design it, source the materials, and build it."
        items={galleryItems}
        isMobile={isMobile}
      />
      <OutdoorLivingHowItWorks steps={steps} isMobile={isMobile} />
      <OutdoorLivingServiceArea isMobile={isMobile} />
      <OutdoorLivingClosingCTA
        title="Tell us about your project."
        setContactOpen={setContactOpen}
        isMobile={isMobile}
      />
    </main>
  );
}

// ────────── PlantingsPageB ──────────
function PlantingsPageB({ setContactOpen, isMobile }) {
  const galleryItems = [
    { src: 'proj-5.webp', caption: 'Front-yard planting redesign' },
    { src: 'proj-7.webp', caption: 'Mixed perennial beds' },
    { src: 'proj-3.webp', caption: 'Boulder & planting integration' },
    { src: 'proj-6.webp', caption: 'Naturalized garden border' },
    { src: 'proj-2.webp', caption: 'Architectural plantings & lighting' },
    { src: 'proj-4.webp', caption: 'Full residential refresh' },
  ];

  const steps = [
    { title: 'Site visit & design', body: 'We walk the property, ask about how you live in the space, take measurements, and put together a real design — not a generic plant list.' },
    { title: 'Approve scope & timeline', body: 'You get a clear written scope, fixed pricing, plant selections, and a schedule before any plant goes in the ground.' },
    { title: 'We install it', body: 'Our crews handle the install start to finish. You get progress updates, a clean job site, and a landscape ready to live with.' },
  ];

  return (
    <main>
      <OutdoorLivingHero
        eyebrow="Landscape Design & Plantings"
        title="Landscape design and plantings"
        accentWord="that grow into yours."
        sub="Polaris designs and installs custom gardens, planting plans, and full landscape layouts for homes in Hinsdale, Oak Brook, Burr Ridge, Western Springs and the western suburbs."
        setContactOpen={setContactOpen}
        isMobile={isMobile}
      />
      <OutdoorLivingGallery
        eyebrow="Recent projects"
        title="Plant plans that age beautifully."
        sub="A landscape that looks good in May should still look good in October — and again in May the year after. We design for the years, not the photoshoot."
        items={galleryItems}
        isMobile={isMobile}
      />
      <OutdoorLivingHowItWorks steps={steps} isMobile={isMobile} />
      <OutdoorLivingServiceArea isMobile={isMobile} />
      <OutdoorLivingClosingCTA
        title="Tell us about your landscape."
        setContactOpen={setContactOpen}
        isMobile={isMobile}
      />
    </main>
  );
}