// Coast Green Plumbing — shared site components
// Babel-transpiled. Exposed on window for use across pages.

const { useEffect, useRef, useState } = React;

// ---------------- Lucide icon helper ----------------
function Icon({ name, size = 22, color, stroke = 1.75, style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ icons: window.lucide.icons, attrs: { width: size, height: size, 'stroke-width': stroke } });
      const svg = ref.current.querySelector('svg');
      if (svg) {
        svg.setAttribute('width', size);
        svg.setAttribute('height', size);
        svg.style.stroke = color || 'currentColor';
        svg.style.strokeWidth = stroke;
      }
    }
  }, [name, size, color, stroke]);
  return <span ref={ref} style={{ display: 'inline-flex', lineHeight: 0, color: color || 'currentColor', ...style }} />;
}

// ---------------- Brand mark ----------------
function BrandMark({ size = 28, onDark = false }) {
  const stroke = onDark ? '#FFFFFF' : '#4A7C59';
  return (
    <svg width={size} height={size * 1.05} viewBox="0 0 40 42" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M20 3 C20 3, 5 19, 5 28 a15 15 0 0 0 30 0 C35 19, 20 3, 20 3 z" stroke={stroke} strokeWidth="2.2" fill="none" strokeLinejoin="round"/>
      <path d="M13 26 C18 22, 25 22, 28 27 C24 30, 18 31, 14 28 z" stroke={stroke} strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
      <path d="M13 26 C17 27, 22 27, 28 27" stroke={stroke} strokeWidth="1.6" fill="none"/>
    </svg>
  );
}

// ---------------- Nav (with mobile slide-over) ----------------
function Nav({ current }) {
  const [open, setOpen] = useState(false);
  const links = [
    { id: 'services', label: 'Services', href: 'services.html' },
    { id: 'tankless', label: 'Tankless', href: 'tankless.html' },
    { id: 'about', label: 'About', href: 'about.html' },
    { id: 'book', label: 'Book', href: 'about.html#book' },
  ];
  return (
    <React.Fragment>
      <header className="cg-nav">
        <div className="cg-container cg-nav-inner">
          <a href="index.html" className="cg-nav-brand">
            <BrandMark size={32} onDark />
            <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
              <span className="cg-nav-brand-name">Coast Green</span>
              <span style={{ fontFamily: 'var(--cg-font-display)', fontWeight: 600, fontSize: 11, letterSpacing: '0.22em', color: '#fff', marginTop: 4 }}>PLUMBING</span>
            </span>
          </a>
          <nav className="cg-nav-links">
            {links.map(l => (
              <a key={l.id} href={l.href} className={"cg-nav-link " + (current === l.id ? 'is-active' : '')}>{l.label}</a>
            ))}
          </nav>
          <div className="cg-nav-spacer" />
          <a className="cg-nav-phone" href="tel:6045550100">
            <Icon name="phone" size={14} color="#9DB8A6" />
            <span className="num">604 · 555 · 0100</span>
          </a>
          <a href="about.html#book" className="btn btn-primary btn-sm" style={{ background: '#fff', color: 'var(--cg-coast-blue)', marginLeft: 4 }}>Book a free quote</a>
          <button className="cg-burger" onClick={() => setOpen(true)} aria-label="Open menu">
            <Icon name="menu" size={26} color="#fff" />
          </button>
        </div>
      </header>
      <div className={"cg-mobile-panel " + (open ? 'is-open' : '')}>
        <div className="scrim" onClick={() => setOpen(false)} />
        <div className="panel">
          <button className="close" onClick={() => setOpen(false)} aria-label="Close menu">
            <Icon name="x" size={26} color="#fff" />
          </button>
          <a href="tel:6045550100" style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#fff', textDecoration: 'none', fontFamily: 'var(--cg-font-body)', fontVariantNumeric: 'tabular-nums', fontSize: 18, fontWeight: 500, padding: '8px 0 16px', borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
            <Icon name="phone" size={18} color="#9DB8A6" />
            604 · 555 · 0100
          </a>
          {links.map(l => (
            <a key={l.id} href={l.href} className={"cg-mobile-link " + (current === l.id ? 'is-active' : '')}>{l.label}</a>
          ))}
          <a href="about.html#book" className="btn btn-primary" style={{ background: '#fff', color: 'var(--cg-coast-blue)', marginTop: 24, alignSelf: 'flex-start' }}>Book a free quote</a>
        </div>
      </div>
    </React.Fragment>
  );
}

// ---------------- Footer ----------------
function Footer() {
  return (
    <footer className="cg-footer">
      <div className="cg-container">
        <div className="grid">
          <div>
            <div className="brand">
              <BrandMark size={28} onDark />
              <span className="brand-name">Coast Green Plumbing</span>
            </div>
            <p className="blurb">North Vancouver-based plumbing crew. Tankless installs and full-service work across the North Shore, Vancouver, and Burnaby. Fully licensed and insured.</p>
            <div style={{ display: 'flex', gap: 14, marginTop: 8 }}>
              <a href="#" aria-label="Instagram" style={{ width: 36, height: 36, border: '1px solid rgba(255,255,255,0.18)', borderRadius: 4, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.8)' }}>
                <Icon name="camera" size={16} color="rgba(255,255,255,0.85)" />
              </a>
              <a href="#" aria-label="Google reviews" style={{ width: 36, height: 36, border: '1px solid rgba(255,255,255,0.18)', borderRadius: 4, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.8)' }}>
                <Icon name="star" size={16} color="rgba(255,255,255,0.85)" />
              </a>
              <a href="#" aria-label="Email" style={{ width: 36, height: 36, border: '1px solid rgba(255,255,255,0.18)', borderRadius: 4, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.8)' }}>
                <Icon name="mail" size={16} color="rgba(255,255,255,0.85)" />
              </a>
            </div>
          </div>
          <div>
            <h4>Services</h4>
            <ul>
              <li><a href="services.html">Tankless installs</a></li>
              <li><a href="services.html">Hot water tanks</a></li>
              <li><a href="services.html">Drain cleaning</a></li>
              <li><a href="services.html">Repiping</a></li>
              <li><a href="services.html">Bathroom &amp; kitchen</a></li>
            </ul>
          </div>
          <div>
            <h4>Service area</h4>
            <ul>
              <li>North Vancouver</li>
              <li>West Vancouver</li>
              <li>Vancouver</li>
              <li>Burnaby</li>
              <li>Lower Mainland (call to confirm)</li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li className="phone-line">604 · 555 · 0100</li>
              <li>hello@coastgreen.ca</li>
              <li>North Vancouver, BC</li>
              <li style={{ paddingTop: 8 }}>Mon–Fri 7am–6pm<br/>Sat 8am–4pm</li>
            </ul>
          </div>
        </div>
        <div className="legal">
          <span><span className="sample">Sample</span>BC Plumber Cert #LP-44128 · WCB Covered · $5M Liability</span>
          <span>© 2026 Coast Green Plumbing Ltd. — Concept site for IshaanEx Digital portfolio.</span>
        </div>
      </div>
    </footer>
  );
}

// ---------------- Final CTA ----------------
function FinalCTA() {
  return (
    <section className="cg-finalcta">
      <div className="cg-container inner">
        <div>
          <span className="eyebrow" style={{ color: '#D4E5DC' }}>Free in-home quote</span>
          <h2>Get a quote before we touch the wall.</h2>
          <p>Tell us what's going on. We'll come look, write it up, and email it within 48 hours. No obligation.</p>
        </div>
        <div className="actions">
          <a href="about.html#book" className="btn btn-on-photo">Book a free quote</a>
          <a href="tel:6045550100" className="btn btn-link btn-link-light"><Icon name="phone" size={16} color="#fff" /> 604 · 555 · 0100</a>
        </div>
      </div>
    </section>
  );
}

// ---------------- Reveal on scroll ----------------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.cg-reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e, i) => {
        if (e.isIntersecting) {
          setTimeout(() => e.target.classList.add('is-in'), (parseInt(e.target.dataset.delay || '0', 10)));
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

Object.assign(window, { Icon, BrandMark, Nav, Footer, FinalCTA, useReveal });