/* BlueBear Home Comfort — site logic */
const { useState, useEffect, useMemo, useRef } = React;

// ---------- Icons ----------
const Icon = ({ name, ...props }) => {
  const paths = {
    leaf: <path d="M11 20A7 7 0 0 1 4 13V8a6 6 0 0 1 6-6h8v6a8 8 0 0 1-7 7Zm0 0v-4M5 19s2-4 6-6"/>,
    wind: <><path d="M9.6 4.6A2 2 0 1 1 11 8H2"/><path d="M12.6 19.4A2 2 0 1 0 14 16H2"/><path d="M17.6 8a2.5 2.5 0 1 1 1.8 4.2H2"/></>,
    drop: <path d="M12 2.5s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11Z"/>,
    sparkle: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></>,
    handshake: <><path d="m11 17 2-2"/><path d="M14 14 9 9l-3 3 3 3a2 2 0 0 0 3 0Z"/><path d="m17 11 4-4-4-4-2 2"/><path d="m7 13-4 4 4 4 2-2"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    home: <><path d="m3 11 9-8 9 8"/><path d="M5 9.5V21h14V9.5"/></>,
    snow: <><path d="M12 2v20M4.2 6.5l15.6 11M4.2 17.5l15.6-11"/><path d="m12 5-2 2M12 5l2 2M12 19l-2-2M12 19l2-2"/></>,
    check: <polyline points="20 6 9 17 4 12"/>,
    chevron: <polyline points="6 9 12 15 18 9"/>,
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92Z"/>,
    nose: <><circle cx="10" cy="13" r="1"/><circle cx="14" cy="13" r="1"/><circle cx="12" cy="10" r="2"/></>,
    spray: <><path d="M9 11h6v9a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z"/><path d="M11 11V5h4a3 3 0 0 0-3-3h-1z"/><path d="M16 6h2M16 9h2M19 4v7"/></>,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    badge: <><circle cx="12" cy="8" r="6"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></>
  };
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      {paths[name]}
    </svg>
  );
};

// ---------- Header ----------
function Header({ onBook }){
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`header ${scrolled ? 'scrolled' : ''}`}>
      <div className="container header-inner">
        <a className="logo" href="#top" aria-label="BlueBear Home Comfort">
          <img src="assets/logo-cut.png" alt="BlueBear Home Comfort"/>
        </a>
        <nav className="nav">
          <a href="#service">Cleaning</a>
          <a href="#pricing">Pricing</a>
          <a href="#area">Service Area</a>
          <a href="#tips">Tips</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a className="phone-link" href="tel:9025550127">
            <Icon name="phone"/> (902) 555-0127
          </a>
          <button className="btn btn-primary btn-sm" onClick={onBook}>Book a cleaning</button>
        </div>
      </div>
    </header>
  );
}

// ---------- Hero ----------
function Hero({ onBook }){
  return (
    <section id="top" className="hero">
      {/* Full-bleed background photo with ken burns zoom */}
      <div className="hero-bg" aria-hidden="true">
        <img src="assets/photo-hero.png" alt=""/>
      </div>

      {/* Gradient overlay — dark on the right for text, light on the left for the photo's bear */}
      <div className="hero-overlay"/>

      {/* Content layer */}
      <div className="container hero-inner">
        <div className="hero-content">
          <div className="eyebrow"><span className="dot"/> Heat Pump Cleaning · Nova Scotia</div>
          <h1>
            Heat pump cleaning <span className="accent"><em>made simple.</em></span>
          </h1>
          <p className="lead">
            Friendly ductless heat pump cleaning for Nova Scotia homes. Clearer airflow, fewer odours, and honest guidance — no markups, no kickbacks.
          </p>
          <div className="hero-actions">
            <button className="btn btn-primary btn-lg btn-arrow" onClick={onBook}>
              Book a cleaning <Icon name="arrow"/>
            </button>
            <a className="btn btn-lg" href="#service"
               style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,.3)' }}>
              See what's included
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Honest ribbon (we clean, we don't upsell) ----------
function HonestRibbon(){
  return (
    <section className="honest-ribbon" style={{ padding: 0 }}>
      <div className="container">
        <div className="row">
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <span className="pill"><Icon name="handshake"/> Our promise</span>
            <span className="copy">
              <strong>We clean. We line up repairs.</strong> If it's more than a clean, a licensed HVAC partner handles the fix. One call, done.
            </span>
          </div>
          <div className="trusts">
            <span className="t"><Icon name="shield"/> $2M insured</span>
            <span className="t"><Icon name="badge"/> WCB covered</span>
            <span className="t"><Icon name="check"/> Background-checked crew</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Marquee ----------
function Marquee(){
  const items = [
    'Halifax', 'Dartmouth', 'Bedford', 'Sackville',
    'Cole Harbour', 'Fall River', 'Eastern Passage'
  ];
  const block = (
    <span style={{ display: 'inline-flex', gap: 56 }}>
      {items.map((t, i) => (
        <span key={i}>{t}<span className="sep" style={{ marginLeft: 56 }}>◆</span></span>
      ))}
    </span>
  );
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {block}{block}{block}
      </div>
    </div>
  );
}

// ---------- Problem ----------
function Problem(){
  const items = [
    { icon: 'wind', t: 'Weak or uneven airflow', d: 'Air that used to move freely feels weaker, especially on the bedroom head.' },
    { icon: 'drop', t: 'Musty or stale smell', d: 'A damp, sock-drawer smell when the unit kicks on. Usually a sign of buildup.' },
    { icon: 'sparkle', t: 'Moisture and mold buildup', d: 'Heat pumps collect moisture. Left alone, it can grow mold. That musty smell means it\'s moving through your home.' },
    { icon: 'leaf', t: 'Pollen and pet hair', d: 'Living with pets or allergies? The indoor unit collects a lot over a season.' }
  ];
  return (
    <section id="problem" className="problem">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"/> The problem</div>
          <h2>Your heat pump works hard. We help keep it clean.</h2>
          <p>Heat pumps run year-round in Nova Scotia homes. Over time, dust, grime, and odours can collect inside the indoor unit. Most owners notice one of these first.</p>
        </div>
        <div className="problem-layout">
          <div className="problem-photo">
            <img src="assets/photo-macro.png" alt="Close-up of a heat pump blower wheel, half dirty and half clean after BlueBear cleaning"/>
            <div className="pp-tag">
              Before &amp; after
              <small>Blower wheel, mid-clean</small>
            </div>
          </div>
          <div className="problem-grid">
            {items.map((it, i) => (
              <div className="problem-card" key={i}>
                <div className="icon"><Icon name={it.icon}/></div>
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Service / What's Included ----------
function Service({ onBook }){
  const included = [
    'Indoor unit cover and filter cleaning',
    'Coil cleaning',
    'Blower wheel cleaning (when accessible)',
    'Drain pan cleaning',
    'Safe runoff collection during the wash',
    'Visual check for obvious issues',
    'Before/after photos when useful',
    'Cleanup of the work area'
  ];
  return (
    <section id="service" className="service">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"/> What's included</div>
          <h2>A careful, no-pressure cleaning from start to finish.</h2>
          <p>A typical BlueBear visit takes 60–90 minutes per indoor head. Here's what a standard cleaning looks like.</p>
        </div>
        <div className="service-content">
          <ul className="included-list">
            {included.map((it, i) => (
              <li key={i}>
                <span className="check"><Icon name="check" style={{ width: 12, height: 12 }}/></span>
                {it}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 20, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-primary btn-arrow" onClick={onBook}>
              Book your cleaning <Icon name="arrow"/>
            </button>
            <a className="btn btn-ghost" href="#pricing" style={{ color: '#fff' }}>See pricing</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- How it works ----------
function HowItWorks(){
  const steps = [
    { n: 1, t: 'Book online', d: 'Pick a time that works. Clear pricing, no phone tag, instant confirmation.' },
    { n: 2, t: 'We arrive prepared', d: 'Drop sheets, vacuum, washable bibs. We protect floors and walls before we start.' },
    { n: 3, t: 'Careful cleaning', d: 'Filters, coil, blower wheel, and drain pan. Washed with safe runoff collection.' },
    { n: 4, t: 'Walk-through', d: 'We show you the before and after, share any honest observations, and clean up.' }
  ];
  return (
    <section id="how">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"/> How it works</div>
          <h2>Simple booking. Careful work. Honest guidance.</h2>
          <p>No confusing service packages. No repair scare tactics. Just a clean unit and clear next steps.</p>
        </div>
        <div className="how-grid">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="step-num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Pricing ----------
function Pricing({ onBook }){
  const plans = [
    {
      name: 'Single Head',
      desc: 'One indoor unit. Most apartments and condos.',
      price: 179,
      features: [
        'Filter, coil & vane cleaning',
        'Drain pan cleaning',
        'Visual check & before/after photos',
        'Approx. 60–90 minutes on site'
      ],
      cta: 'Book single head'
    },
    {
      name: 'Two Heads',
      desc: 'Two indoor units, same address. Our most-booked visit.',
      price: 299,
      featured: true,
      badge: 'Most booked',
      features: [
        'Everything in Single Head, x2',
        'Blower wheel deep clean (when accessible)',
        'Filter wash for both units',
        'Approx. 2–3 hours on site',
        'Save $59 vs. two single visits'
      ],
      cta: 'Book two heads'
    },
    {
      name: 'Whole Home',
      desc: 'Three or more heads. We quote based on access and condition.',
      price: 'From 419',
      features: [
        'Everything in Two Heads, plus',
        'Per-head deep clean for all units',
        'Filter wash for all units',
        'Honest report on any unit needing licensed work'
      ],
      cta: 'Request a quote'
    }
  ];
  return (
    <section id="pricing" className="pricing">
      <div className="container">
        <div className="section-head center">
          <div className="eyebrow"><span className="dot"/> Pricing</div>
          <h2>Clear prices. No surprises at the door.</h2>
          <p>Prices are for indoor unit cleaning in residential homes. Outdoor unit, electrical, and refrigerant work belongs with a licensed HVAC technician. We'll point you in the right direction if you need it.</p>
        </div>
        <div className="pricing-grid">
          {plans.map((p, i) => (
            <div className={`price-card ${p.featured ? 'featured' : ''}`} key={i}>
              {p.badge && <div className="badge">{p.badge}</div>}
              <h3>{p.name}</h3>
              <div className="desc">{p.desc}</div>
              <div className="price">
                {typeof p.price === 'number' ? <>${p.price}<small>per visit</small></> : <>{p.price}<small> per visit</small></>}
              </div>
              <ul className="features">
                {p.features.map((f, j) => (
                  <li key={j}><span className="check"><Icon name="check" style={{ width: 11, height: 11 }}/></span>{f}</li>
                ))}
              </ul>
              <button
                className={`btn ${p.featured ? 'btn-primary' : 'btn-secondary'}`}
                style={p.featured ? { background: '#fff', color: '#1F4E79' } : {}}
                onClick={onBook}
              >
                {p.cta}
              </button>
            </div>
          ))}
        </div>
        <p className="price-fineprint">Pets welcome. We're used to working around them.</p>
      </div>
    </section>
  );
}

// ---------- Service area ----------
function ServiceArea(){
  // 7-town focus around HRM
  const pins = [
    { id: 'hfx',  x: 38, y: 56, label: 'Halifax', primary: true },
    { id: 'dart', x: 48, y: 50, label: 'Dartmouth' },
    { id: 'bed',  x: 30, y: 38, label: 'Bedford' },
    { id: 'sack', x: 24, y: 26, label: 'Sackville' },
    { id: 'cole', x: 58, y: 56, label: 'Cole Harbour' },
    { id: 'fall', x: 38, y: 22, label: 'Fall River' },
    { id: 'east', x: 62, y: 68, label: 'Eastern Passage' }
  ];
  const towns = ['Halifax','Dartmouth','Bedford','Sackville','Cole Harbour','Fall River','Eastern Passage'];
  const [active, setActive] = useState('hfx');
  return (
    <section id="area" className="area">
      <div className="container area-grid">
        <div>
          <div className="eyebrow"><span className="dot"/> Service area</div>
          <h2 style={{ marginTop: 18 }}>Focused on Halifax Regional Municipality.</h2>
          <p className="lead">We launched with a tight service area so every visit is quick to schedule and quick to reach. Inside HRM, we usually book within the week.</p>
          <ul className="area-towns">
            {towns.map(t => (
              <li key={t}>{t}</li>
            ))}
          </ul>
          <p style={{ marginTop: 22, color: 'var(--muted)', fontSize: 14 }}>
            Just outside our zone? <a href="#contact">Send us your postal code</a>. We add neighbouring areas as our route fills.
          </p>
        </div>
        <div className="area-map" aria-label="BlueBear service area map">
          <svg viewBox="0 0 100 100" preserveAspectRatio="none">
            {/* HRM-ish coastline */}
            <path d="M 0,18 C 12,12 22,16 32,12 C 44,8 56,4 70,10 C 82,14 92,14 100,22 L 100,90 C 92,84 80,82 70,84 C 58,88 50,96 40,94 C 30,92 20,88 10,92 L 0,90 Z"
              fill="rgba(255,255,255,.6)" stroke="rgba(31,78,121,.25)" strokeWidth=".25"/>
            {/* Harbour */}
            <path d="M 40,48 C 44,46 48,52 50,58 C 52,66 50,76 46,82 C 42,86 36,80 38,72 C 39,64 36,52 40,48 Z"
              fill="rgba(31,78,121,.10)" stroke="rgba(31,78,121,.22)" strokeWidth=".2"/>
            {/* roads */}
            <path d="M 22,28 C 28,34 34,42 40,52" fill="none" stroke="rgba(31,78,121,.22)" strokeWidth=".2" strokeDasharray=".6 .6"/>
            <path d="M 38,22 C 40,32 42,42 42,52" fill="none" stroke="rgba(31,78,121,.22)" strokeWidth=".2" strokeDasharray=".6 .6"/>
            <path d="M 48,52 C 54,54 60,60 62,68" fill="none" stroke="rgba(31,78,121,.22)" strokeWidth=".2" strokeDasharray=".6 .6"/>
          </svg>
          {pins.map(p => (
            <button
              key={p.id}
              className={`pin ${active === p.id ? 'active' : ''}`}
              style={{ left: `${p.x}%`, top: `${p.y}%`, width: p.primary ? 16 : 12, height: p.primary ? 16 : 12 }}
              onMouseEnter={() => setActive(p.id)}
              onFocus={() => setActive(p.id)}
              aria-label={p.label}
            >
              <span className="pin-label">{p.label}</span>
            </button>
          ))}
          <div style={{
            position: 'absolute', left: 16, bottom: 16,
            background: '#fff', borderRadius: 10, padding: '8px 12px',
            boxShadow: '0 1px 2px rgba(30,42,50,.06), 0 4px 12px rgba(30,42,50,.06)',
            fontSize: 13, color: 'var(--ink)', fontWeight: 600
          }}>
            <span style={{ color: 'var(--muted)', fontWeight: 500, fontSize: 12 }}>Focused on</span><br/>
            {pins.find(p => p.id === active)?.label || 'Halifax'}, NS
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- About ----------
function About(){
  return (
    <section id="about" className="about">
      <div className="container about-grid">
        <div>
          <div className="eyebrow"><span className="dot"/> About BlueBear</div>
          <h2 style={{ marginTop: 18 }}>Friendly enough to invite in. Strong enough to trust.</h2>
          <p className="lead">
            BlueBear Home Comfort exists to make heat pump maintenance easier for
            Nova Scotia homeowners. We focus on careful cleaning, clear
            communication, and honest guidance. We're building toward a
            broader home comfort company people can trust.
          </p>
          <div className="about-cards">
            <div className="about-card">
              <div className="num">60–90<span style={{ fontSize: 18 }}>min</span></div>
              <div className="lbl">Typical cleaning per indoor head</div>
            </div>
            <div className="about-card">
              <div className="num">$2M</div>
              <div className="lbl">General liability insurance</div>
            </div>
            <div className="about-card">
              <div className="num">100%</div>
              <div className="lbl">No-pressure visits, every time</div>
            </div>
            <div className="about-card">
              <div className="num">7</div>
              <div className="lbl">Days a week booking online</div>
            </div>
          </div>
        </div>
        <div>
          <div className="founder-card">
            <div className="photo">
              <img src="assets/photo-van.png" alt="BlueBear-branded service van parked in front of a Nova Scotia home"/>
            </div>
            <div className="quote">
              "We started BlueBear because too many heat pump companies default to replace and upsell. Nobody was focused on keeping an existing unit running well for years. So we built the company we wished existed."
              <cite>The BlueBear crew, Halifax NS</cite>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Reviews ----------
function Reviews(){
  const reviews = [
    {
      stars: 5,
      text: "Booked online on a Sunday, cleaned by Wednesday. Showed us the gunk on the blower wheel and the difference after. No upsell. Just a clean unit.",
      name: 'Megan R.', loc: 'Bedford, NS', initial: 'M'
    },
    {
      stars: 5,
      text: "Honestly the easiest home service experience we've had. Friendly, on time, careful around the dog. The musty smell on our bedroom head is gone.",
      name: 'Daniel & Priya K.', loc: 'Dartmouth, NS', initial: 'D'
    },
    {
      stars: 5,
      text: "They flagged a small refrigerant concern, told us they don't do that work, and gave us two licensed HVAC names. Refreshingly honest.",
      name: 'Heather L.', loc: 'Tantallon, NS', initial: 'H'
    }
  ];
  return (
    <section id="reviews" className="reviews">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"/> Beta customer feedback</div>
          <h2>"Friendly. Careful. No pressure."</h2>
          <p>Real notes from BlueBear customers across HRM and the South Shore. We don't pay for reviews. We don't edit the feedback. These will grow as more homes come through.</p>
        </div>
        <div className="reviews-grid">
          {reviews.map((r, i) => (
            <div className="review-card" key={i}>
              <div className="stars">★★★★★</div>
              <blockquote>"{r.text}"</blockquote>
              <div className="who">
                <div className="avatar">{r.initial}</div>
                <div>
                  <div className="name">{r.name}</div>
                  <div className="loc">{r.loc}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ({ onBook }){
  const items = [
    {
      q: 'How often should I clean my heat pump?',
      a: "Most homes benefit from regular filter cleaning and a deeper cleaning every 12–18 months. If your heat pump runs year-round, has weak airflow, smells musty, or shows visible buildup, it may be time for a cleaning."
    },
    {
      q: 'Do you repair heat pumps?',
      a: "BlueBear handles the cleaning. But sometimes, heat pumps need more serious love. If we spot a repair issue during a visit, we flag it, explain it, and send the right person for the job."
    },
    {
      q: 'Will cleaning lower my power bill?',
      a: "A clean system can support better airflow and more efficient operation, but we don't promise a specific power bill reduction. Our job is to remove buildup and help your heat pump run cleaner."
    },
    {
      q: 'Do you clean all brands?',
      a: "BlueBear cleans most common ductless heat pump indoor units, including Mitsubishi, Daikin, Fujitsu, LG, Gree, Senville, and others. If we're not comfortable cleaning a particular model, we'll say so before starting."
    },
    {
      q: 'How long does a cleaning take?',
      a: "Typical single-head cleaning is 60–90 minutes on site. Two-head visits are 2–3 hours. We'll give you a realistic arrival window when you book."
    },
    {
      q: 'Is it messy?',
      a: "We protect the wall, floor, and surrounding furniture with drop sheets, and we collect runoff in a washable bib so nothing drips down your wall. Cleanup is part of the visit."
    },
    {
      q: 'What if you find something serious?',
      a: "We'll show you, explain it in plain language, and recommend a licensed HVAC partner. No scare tactics, no pretending cleaning will fix it."
    },
    {
      q: 'What payment methods do you accept?',
      a: "Credit card, debit, e-transfer, and cash. Payment is taken after the cleaning, not when you book."
    }
  ];
  return (
    <section id="faq" className="faq">
      <div className="container faq-grid">
        <div>
          <div className="eyebrow"><span className="dot"/> Questions</div>
          <h2 style={{ marginTop: 18 }}>Common questions, straight answers.</h2>
          <p style={{ color: 'var(--muted)', fontSize: 17 }}>Still have a question? Call us at (902) 555-0127 or drop a note when you book. We read every one.</p>
          <button className="btn btn-primary btn-arrow" style={{ marginTop: 12 }} onClick={onBook}>
            Book a cleaning <Icon name="arrow"/>
          </button>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <details className="faq-item" key={i} open={i === 0}>
              <summary>{it.q}</summary>
              <div className="answer"><p>{it.a}</p></div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Tips ----------
function Tips(){
  const tips = [
    {
      slug: 'filter-rinse',
      cat: 'Maintenance',
      title: 'How often should you rinse your filter?',
      excerpt: "A two-minute habit that does more for airflow than almost anything else. Here's the timing that actually matches how your heat pump runs in Nova Scotia.",
      read: '3 min read',
      photo: 'assets/tip-filter-rinse.jpg',
      icon: 'wind'
    },
    {
      slug: 'musty-smell',
      cat: 'Smells',
      title: "What that musty smell actually is (and why it's not the unit's fault)",
      excerpt: "Damp, sock-drawer smell when the unit kicks on? It's usually one of three things. Two are easy to fix. One needs a proper wash.",
      read: '4 min read',
      photo: 'assets/tip-musty-smell.jpg',
      icon: 'drop'
    },
    {
      slug: 'cleaning-vs-repair',
      cat: 'Buying',
      title: "Cleaning vs. repair: how to tell which one you actually need",
      excerpt: "A short, no-jargon guide to recognising what a cleaning fixes (and what it doesn't). Bring this with you next time someone tries to upsell you.",
      read: '5 min read',
      photo: 'assets/tip-cleaning-vs-repair.jpg',
      icon: 'handshake'
    },
    {
      slug: 'cold-snap-prep',
      cat: 'Seasonal',
      title: 'Heat pump prep for the first cold snap',
      excerpt: "What to clean, what to check, and one common mistake that quietly costs you efficiency every winter.",
      read: '3 min read',
      photo: 'assets/tip-cold-snap.jpg',
      icon: 'snow'
    },
    {
      slug: 'pets-and-allergies',
      cat: 'Living with one',
      title: "Pets, allergies, and your heat pump",
      excerpt: "If you have shedding pets or seasonal allergies, your indoor unit is doing a lot more work than you think. A simple rhythm to stay ahead of it.",
      read: '4 min read',
      photo: 'assets/tip-pets-allergies.jpg',
      icon: 'leaf'
    },
    {
      slug: 'cleaning-and-power-bills',
      cat: 'Energy',
      title: "Will cleaning lower your power bill? An honest answer.",
      excerpt: "We won't pretend cleaning equals savings. But a clean unit does move air more efficiently. Here's what that realistically looks like.",
      read: '4 min read',
      photo: 'assets/tip-power-bill.jpg',
      icon: 'sparkle'
    }
  ];
  return (
    <section id="tips" className="tips">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"/> BlueBear tips</div>
          <h2>Plain-talk guides to keep your heat pump happy.</h2>
          <p>Short reads from the crew. No technical jargon, no scare tactics. Just what we wish every customer knew before booking us.</p>
        </div>
        <div className="tips-grid">
          {tips.map((t, i) => (
            <a className="tip-card" key={i} href={`tips/${t.slug}.html`} style={{ textDecoration: 'none', color: 'inherit' }}>
              <div className="tip-img">
                {t.photo ? (
                  <img src={t.photo} alt=""/>
                ) : (
                  <div className="swatch"><Icon name={t.icon}/></div>
                )}
                <span className="tip-cat">{t.cat}</span>
              </div>
              <div className="tip-body">
                <h3>{t.title}</h3>
                <p>{t.excerpt}</p>
                <div className="tip-meta">
                  <span>{t.read}</span>
                  <span className="read">Read <Icon name="arrow"/></span>
                </div>
              </div>
            </a>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <a className="btn btn-secondary" href="tips/index.html">See all BlueBear tips</a>
        </div>
      </div>
    </section>
  );
}
// ---------- Final CTA ----------
function CTA({ onBook }){
  return (
    <section id="contact" className="cta">
      <div className="container cta-grid">
        <div>
          <div className="eyebrow" style={{ background: 'rgba(255,255,255,.12)', color: '#fff', borderColor: 'rgba(255,255,255,.2)' }}><span className="dot" style={{ background: 'var(--sky)' }}/> Ready when you are</div>
          <h2 style={{ marginTop: 18 }}>Book your heat pump cleaning.</h2>
          <p>Pick a time, pay nothing today, get an instant confirmation. Cleaner airflow. Friendly service. No pressure.</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 18 }}>
            <button className="btn btn-primary btn-lg btn-arrow" onClick={onBook}>
              Book online <Icon name="arrow"/>
            </button>
            <a className="btn btn-ghost btn-lg" href="tel:9025550127">
              <Icon name="phone"/> (902) 555-0127
            </a>
          </div>
        </div>
        <div className="cta-photo">
          <img src="assets/photo-outdoor.png" alt="BlueBear technician rinsing the outdoor condenser unit at a home"/>
          <div className="grad"/>
          <div className="badge">
            Outdoor condenser rinse
            <small>Included on whole-home visits</small>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer(){
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="logo-block">
            <img src="assets/logo-cut.png" alt="BlueBear Home Comfort"/>
            <p>Friendly ductless heat pump cleaning and maintenance for Nova Scotia homes.</p>
            <p style={{ marginTop: 4 }}>bluebearhomecomfort.ca</p>
          </div>
          <div>
            <h4>Service</h4>
            <a href="#service">What's included</a>
            <a href="#pricing">Pricing</a>
            <a href="#how">How it works</a>
            <a href="#tips">Tips &amp; guides</a>
            <a href="#contact">Book a cleaning</a>
          </div>
          <div>
            <h4>Company</h4>
            <a href="#about">About BlueBear</a>
            <a href="#area">Service area</a>
            <a href="#reviews">Reviews</a>
            <a href="#faq">FAQ</a>
          </div>
          <div>
            <h4>Contact</h4>
            <a href="tel:9025550127">(902) 555-0127</a>
            <a href="mailto:hello@bluebearhomecomfort.ca">hello@bluebearhomecomfort.ca</a>
            <p style={{ marginTop: 8, fontSize: 13 }}>Halifax Regional Municipality<br/>Nova Scotia, Canada</p>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 BlueBear Home Comfort. Heat pump cleaning made simple.</div>
          <div style={{ display: 'flex', gap: 18 }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Insurance & WCB</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.BBComponents = { Header, Hero, HonestRibbon, Marquee, Problem, Service, HowItWorks, Pricing, ServiceArea, About, Reviews, Tips, FAQ, CTA, Footer, Icon };