// Coast Green Plumbing — Home page
const { useEffect, useState, useRef } = React;

function Hero() {
  return (
    <section className="cg-hero" data-screen-label="Hero">
      <video autoPlay muted loop playsInline poster="assets/hero-tankless-install.webp">
        <source src="assets/hero-loop.mp4" type="video/mp4" />
      </video>
      <img className="poster-fallback" src="assets/hero-tankless-install.webp" alt="" aria-hidden="true" />
      <div className="grad" />
      <div className="inner">
        <span className="eyebrow eyebrow-light">Tankless Specialists<span className="dot" />North Shore BC</span>
        <h1>
          Hot water that doesn't quit.<br/>
          <span className="line2">Plumbing that doesn't waste it.</span>
        </h1>
        <p>Tankless water heater specialists. Full-service plumbing across the Lower Mainland. Fully licensed and insured.</p>
        <div className="ctas">
          <a href="about.html#book" className="btn btn-on-photo">Book a free quote</a>
          <a href="tankless.html" className="pricing-link">See tankless pricing<Icon name="arrow-right" size={16} color="#fff" /></a>
        </div>
      </div>
      <div className="meta">
        <span>Est. 2014 · North Vancouver</span>
        <span className="right">Fully licensed &amp; insured · WCB-covered</span>
      </div>
    </section>
  );
}

function Stats() {
  const stats = [
    { icon: 'flame', figure: '30', unit: '%', label: 'Lower BC Hydro bill', note: 'Tracked savings on a Sample North Vancouver tankless install (Mar 2026).' },
    { icon: 'droplet', figure: '∞', unit: '', label: 'Endless hot water on demand', note: "Two showers, dishwasher, laundry — no waiting, no tank to drain." },
    { icon: 'gauge', figure: '60', unit: '%', label: 'Less wall space than a tank', note: 'Wall-mount unit frees up the utility room. Cleaner, quieter, smaller.' },
  ];
  return (
    <section style={{ background: '#fff', borderBottom: '1px solid var(--cg-border)' }}>
      <div className="cg-container">
        <div className="cg-stats">
          {stats.map((s, i) => (
            <div key={i} className="cg-stat cg-reveal" data-delay={i * 80}>
              <div className="icon"><Icon name={s.icon} size={28} color="var(--cg-sage)" /></div>
              <div className="figure">{s.figure}{s.unit && <span className="unit">{s.unit}</span>}</div>
              <div className="label">{s.label}</div>
              <div className="note">{s.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesStrip() {
  const items = [
    { num: '01', icon: 'flame', title: 'Tankless install', body: 'Navien and Rinnai condensing units. Endless hot water, lower bills.' },
    { num: '02', icon: 'droplet', title: 'Hot water tanks', body: 'Standard 40 to 75-gallon swaps. Same-day install on most jobs.' },
    { num: '03', icon: 'wrench', title: 'Drain cleaning', body: 'Augered, jetted, scoped. We find the cause, not just the clog.' },
    { num: '04', icon: 'gauge', title: 'Repipe', body: 'PEX-A whole-home repipes without taking the wall apart.' },
  ];
  return (
    <section className="section" data-screen-label="Services strip">
      <div className="cg-container">
        <div className="cg-section-head cg-reveal">
          <span className="eyebrow">What we do<span className="dot" />Four core services</span>
          <h2>The work we do every week, done right the first time.</h2>
          <p className="lead">Tankless is our specialty. The rest of the list is the work our crew is genuinely good at — not a marketing dump of every plumbing service ever invented.</p>
        </div>
        <div className="cg-service-grid cg-reveal">
          {items.map((it, i) => (
            <a key={i} href="services.html" className="cg-service-card">
              <div className="num">{it.num}</div>
              <div className="icon"><Icon name={it.icon} size={36} color="var(--cg-sage)" stroke={1.5} /></div>
              <div className="title">{it.title}</div>
              <div className="body">{it.body}</div>
              <div className="arrow">See details <Icon name="arrow-right" size={14} color="var(--cg-sage)" /></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// Full-bleed photo band — North Shore context
function NorthShoreBand() {
  return (
    <section className="cg-photo-band" data-screen-label="North Shore band">
      <img src="assets/window-mountains.webp" alt="View from a North Shore home — snow-capped peaks and the Fraser valley" />
      <div className="cg-photo-band-grad" />
      <div className="cg-container cg-photo-band-inner">
        <div className="copy">
          <span className="eyebrow eyebrow-light">From the North Shore<span className="dot" />Built for these houses</span>
          <h2>We work where the mountains meet the inlet.</h2>
          <p>Lynn Valley craftsmans. Edgemont split-levels. West Vancouver moderns. The crew has been under enough North Shore floors to know which neighbourhoods came with galvanized lines, where the rock comes up close to the foundation, and which strata need permits filed a week out.</p>
          <a href="services.html" className="btn btn-on-photo">See what we do</a>
        </div>
      </div>
    </section>
  );
}

// "How we work" — tools photography + 4-step crew principles
function HowWeWork() {
  const principles = [
    { icon: 'clipboard-check', title: "We'll quote it before we touch it.", body: 'Written, line-itemed, sent within 48 hours. No surprise charges, no scope creep, no high-pressure upsell.' },
    { icon: 'sparkles', title: 'We work clean.', body: 'Drop cloths, shoe covers, vacuum on the way out. The utility room is tidier than when we arrived.' },
    { icon: 'shield-check', title: 'WCB-covered crew.', body: 'Fully licensed and insured. Same two or three faces every visit — not a rotating subcontractor cast.' },
    { icon: 'wrench', title: 'Fixed right the first time.', body: 'Twelve-year workmanship warranty on installs. If we did it and it leaks, we come back and make it right.' },
  ];
  return (
    <section className="section section-stone" data-screen-label="How we work">
      <div className="cg-container">
        <div className="cg-howwework">
          <div className="cg-howwework-img cg-reveal">
            <img src="assets/tools-roll.webp" alt="Coast Green tool roll — pipe wrench, channel locks, copper cutter and notepad" />
            <div className="cg-howwework-img-tag">
              <span className="k">In the van today</span>
              <span className="v">1/2" copper · 3 ft<br/>P-trap · 1 1/2"</span>
            </div>
          </div>
          <div className="cg-howwework-copy cg-reveal" data-delay="80">
            <span className="eyebrow">How we work<span className="dot" />Four ground rules</span>
            <h2>Quote it. Do it. Hand it back clean.</h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--cg-ink)', marginBottom: 32, maxWidth: 520 }}>
              We're a small crew. There's no dispatcher, no upsell-driven sales rep, no rotating subcontractor cast. The same hands that quote your job are the ones that turn up Thursday morning and finish it.
            </p>
            <ul className="cg-principles">
              {principles.map((p, i) => (
                <li key={i}>
                  <span className="icon"><Icon name={p.icon} size={20} color="var(--cg-sage)" /></span>
                  <div>
                    <div className="t">{p.title}</div>
                    <div className="b">{p.body}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// Bathroom band — beyond tankless, the rest of the work
function BathroomBand() {
  return (
    <section className="cg-bathroom-band" data-screen-label="Bathroom band">
      <div className="cg-container cg-bathroom-inner">
        <div className="copy cg-reveal">
          <span className="eyebrow">Beyond tankless<span className="dot" />Full-service plumbing</span>
          <h2>Bathrooms, kitchens, and the unglamorous bits.</h2>
          <p>Wall-mount vanities. Exposed-pipe ensuites. The instant-hot tap your kitchen reno called for. We rough-in for renovations and we install fixtures cleanly — soldered when it should be soldered, press-fit when that's the right call.</p>
          <ul className="cg-bathroom-list">
            <li><Icon name="check" size={16} color="var(--cg-sage)" /> Bathroom rough-ins and fixture swaps</li>
            <li><Icon name="check" size={16} color="var(--cg-sage)" /> Kitchen sink, faucet, and dishwasher tie-ins</li>
            <li><Icon name="check" size={16} color="var(--cg-sage)" /> Pressure-balance shower valves</li>
            <li><Icon name="check" size={16} color="var(--cg-sage)" /> Exposed P-traps for wall-mount vanities</li>
          </ul>
          <a href="services.html" className="btn btn-secondary" style={{ marginTop: 12 }}>See full service list <Icon name="arrow-right" size={14} color="var(--cg-sage)" /></a>
        </div>
        <div className="image cg-reveal" data-delay="80">
          <img src="assets/bathroom-sink.webp" alt="Wall-mount oak vanity with exposed chrome P-trap — North Vancouver bathroom" />
          <div className="image-cap">Sample install · Edgemont · February 2026</div>
        </div>
      </div>
    </section>
  );
}

function FeaturedProject() {
  return (
    <section className="section-tight" style={{ padding: 0 }} data-screen-label="Featured project">
      <div className="cg-feature">
        <div className="image">
          <img src="assets/tankless-navien.webp" alt="Finished Navien tankless install — North Vancouver" />
          <span className="tag">Featured install</span>
        </div>
        <div className="copy">
          <span className="sample-tag">Sample project · concept site</span>
          <span className="eyebrow">Lynn Valley · Tankless install</span>
          <h3>One day on site. 38% off the BC Hydro bill.</h3>
          <p>A 1990s craftsman in Lynn Valley. The 50-gallon tank was on its last legs and the homeowner was tired of running out of hot water on Sunday mornings. We swapped in a Navien NPE-240A2 condensing tankless, re-routed the gas line, and added a recirc loop on the master ensuite.</p>
          <p>Quoted on a Tuesday. Installed on a Thursday. Walked through the controller before we left, and the utility room was cleaner than when we got there. Three months in, the homeowner's tracked savings of 38% on this Sample install.</p>
          <div className="specs">
            <div>
              <div className="k">Unit</div>
              <div className="v">NPE-240A2</div>
            </div>
            <div>
              <div className="k">Output</div>
              <div className="v">199,000 BTU</div>
            </div>
            <div>
              <div className="k">On site</div>
              <div className="v">1 day</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Trust() {
  const items = [
    { icon: 'badge-check', label: 'BC Plumber Certificate', number: '#LP-44128' },
    { icon: 'shield-check', label: 'WCB Covered', number: 'Account #5208-441' },
    { icon: 'umbrella', label: '$5M Liability', number: 'Policy #BC-22481' },
    { icon: 'wrench', label: '12-Year Warranty', number: 'Workmanship + parts' },
    { icon: 'building-2', label: 'Mechanical Contractors Assoc.', number: 'Member #MCA-1129' },
  ];
  return (
    <section style={{ padding: '8px 0' }} data-screen-label="Trust strip">
      <div className="cg-container">
        <div className="cg-trust">
          {items.map((it, i) => (
            <div key={i} className="cg-trust-item">
              <div className="icon"><Icon name={it.icon} size={26} color="var(--cg-sage)" /></div>
              <div className="label">{it.label}</div>
              <div className="number"><span className="sample">Sample</span>{it.number}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceMap() {
  // Illustrated North Shore + Vancouver pin map
  const pins = [
    { name: 'North Vancouver', x: 250, y: 90, primary: true },
    { name: 'West Vancouver', x: 130, y: 100 },
    { name: 'Lynn Valley', x: 295, y: 80 },
    { name: 'Deep Cove', x: 380, y: 95 },
    { name: 'Vancouver', x: 230, y: 230 },
    { name: 'Burnaby', x: 380, y: 250 },
    { name: 'Kitsilano', x: 165, y: 240 },
  ];
  return (
    <section className="section section-stone" data-screen-label="Service area map">
      <div className="cg-container">
        <div className="cg-map-wrap">
          <div>
            <span className="eyebrow">Where we work<span className="dot" />Lower Mainland</span>
            <h2 style={{ fontFamily: 'var(--cg-font-display)', fontWeight: 700, fontSize: 'clamp(34px, 4.2vw, 52px)', letterSpacing: '-0.018em', lineHeight: 1.06, color: 'var(--cg-coast-blue)', margin: '0 0 20px', textWrap: 'balance' }}>
              North Shore-based. Greater Vancouver-served.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--cg-ink)', margin: '0 0 24px', maxWidth: 460 }}>
              The van is parked at our shop in North Vancouver, not at a dispatcher two cities away. Same two or three faces every visit.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, fontSize: 14, color: 'var(--cg-ink)' }}>
              {['North Vancouver', 'West Vancouver', 'Lynn Valley', 'Deep Cove', 'Vancouver', 'Burnaby', 'Kitsilano', 'Lions Bay (call to confirm)'].map((c, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name="map-pin" size={14} color="var(--cg-sage)" /> {c}
                </li>
              ))}
            </ul>
          </div>
          <div className="cg-map">
            <svg viewBox="0 0 500 360" xmlns="http://www.w3.org/2000/svg">
              {/* Water — Burrard Inlet + ocean */}
              <rect x="0" y="0" width="500" height="360" fill="#E7ECF0" />
              <path d="M0,160 C80,150 160,165 240,158 C320,150 400,162 500,158 L500,180 C400,178 320,175 240,180 C160,184 80,178 0,180 Z" fill="#CBD3DA" opacity="0.6" />
              {/* North Shore landmass */}
              <path d="M0,0 L500,0 L500,150 C420,148 340,140 260,142 C180,144 100,145 0,142 Z" fill="#fff" stroke="#CBD3DA" strokeWidth="1" />
              {/* Mountains decorative */}
              <path d="M40,140 L80,90 L110,130 L140,80 L170,140 Z" fill="#E7ECF0" opacity="0.7" />
              <path d="M200,140 L240,85 L270,130 L310,75 L340,140 Z" fill="#E7ECF0" opacity="0.7" />
              <path d="M360,140 L390,95 L420,135 L450,85 L480,140 Z" fill="#E7ECF0" opacity="0.7" />
              {/* Vancouver landmass */}
              <path d="M0,180 L500,180 L500,360 L0,360 Z" fill="#fff" stroke="#CBD3DA" strokeWidth="1" />
              {/* Stanley park bump */}
              <path d="M150,180 C160,160 200,158 220,180 Z" fill="#fff" stroke="#CBD3DA" strokeWidth="1" />
              {/* Region label */}
              <text x="60" y="40" fontFamily="Space Grotesk" fontSize="11" fontWeight="500" letterSpacing="2" fill="#5A6A75">NORTH SHORE</text>
              <text x="60" y="220" fontFamily="Space Grotesk" fontSize="11" fontWeight="500" letterSpacing="2" fill="#5A6A75">VANCOUVER</text>
              <text x="370" y="320" fontFamily="Space Grotesk" fontSize="11" fontWeight="500" letterSpacing="2" fill="#5A6A75">BURNABY</text>
              <text x="20" y="170" fontFamily="Space Grotesk" fontSize="10" fontWeight="500" letterSpacing="1" fill="#5A6A75" fontStyle="italic">Burrard Inlet</text>
              {/* Pins */}
              {pins.map((p, i) => (
                <g key={i}>
                  <circle cx={p.x} cy={p.y} r={p.primary ? 18 : 8} fill={p.primary ? '#4A7C59' : '#0F3C5C'} opacity={p.primary ? 0.18 : 0} />
                  <circle cx={p.x} cy={p.y} r={p.primary ? 7 : 5} fill={p.primary ? '#4A7C59' : '#0F3C5C'} />
                  <circle cx={p.x} cy={p.y} r={p.primary ? 3 : 2} fill="#fff" />
                  <text x={p.x + 12} y={p.y + 4} fontFamily="Inter" fontSize="11" fontWeight={p.primary ? 600 : 500} fill={p.primary ? '#0F3C5C' : '#0A1A24'}>{p.name}{p.primary ? ' · Shop' : ''}</text>
                </g>
              ))}
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

function Reviews() {
  const reviews = [
    { stars: 5, body: "Quoted on Tuesday, installed Thursday morning, walked us through the unit before they left. The utility room is cleaner than when they arrived.", name: 'M. Yamamoto', meta: 'Lynn Valley · Tankless install · Mar 2026' },
    { stars: 5, body: "Old tank failed at 6am. They were on the schedule for the next morning, gave us an honest read on tankless vs tank, and didn't push the upsell.", name: 'D. Chen', meta: 'Kitsilano · Hot water tank · Feb 2026' },
    { stars: 5, body: "Repiped the upstairs bathroom without cutting more than two access holes. Patched, sanded, and painted. We barely knew they were here.", name: 'S. Thibodeau', meta: 'West Vancouver · Repipe · Jan 2026' },
  ];
  return (
    <section className="section" data-screen-label="Reviews">
      <div className="cg-container">
        <div className="cg-section-head cg-reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', maxWidth: '100%', flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 720 }}>
            <span className="eyebrow">From recent jobs<span className="dot" />Concept site</span>
            <h2>What North Shore homeowners have said.</h2>
          </div>
          <div style={{ fontSize: 13, color: 'var(--cg-mute)', fontFamily: 'var(--cg-font-display)', letterSpacing: '0.04em', maxWidth: 320 }}>
            Sample reviews — concept site, not real testimonials.
          </div>
        </div>
        <div className="cg-reviews">
          <div className="cg-review-track">
            {reviews.map((r, i) => (
              <div key={i} className="cg-review-card">
                <div className="stars">
                  {Array.from({ length: r.stars }).map((_, j) => (
                    <Icon key={j} name="star" size={16} color="var(--cg-sage)" />
                  ))}
                </div>
                <blockquote>"{r.body}"</blockquote>
                <div className="meta">
                  <div className="name">{r.name}</div>
                  <div>{r.meta}</div>
                  <span className="sample-flag">Sample review · concept site</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  useReveal();
  return (
    <React.Fragment>
      <Nav current="home" />
      <Hero />
      <Stats />
      <ServicesStrip />
      <NorthShoreBand />
      <HowWeWork />
      <FeaturedProject />
      <BathroomBand />
      <Trust />
      <Reviews />
      <FinalCTA />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);