/* Buoy IT Solutions — redesign of buoyitsolutions.com applying the BITS design system.
   Real content pulled from the live site; styled with DS tokens + primitives.
   Loaded as a Babel script (lowercase filename → not compiled as a DS component). */
const DS = window.BuoyITSolutionsDesignSystem_70d4d8;
const { Button, Badge, Card, CardHeader, Eyebrow, WaveDivider, Logo, Input } = DS;

const ASSET = 'assets';
const PHONE = '(360) 312-7008';
const wrapMax = { maxWidth: 'var(--container-lg)', margin: '0 auto', padding: '0 var(--space-5)' };

function Ico({ name, size = 20, color, style }) {
  return <i data-lucide={name} style={{ width: size, height: size, color, ...style }} />;
}

/* Brand social glyphs — Lucide dropped logo icons, so use the standard marks. */
const BRAND_PATHS = {
  youtube: 'M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.5 15.5v-7l6.3 3.5-6.3 3.5z',
  linkedin: 'M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.2 24 24 23.23 24 22.28V1.72C24 .77 23.2 0 22.22 0z',
  facebook: 'M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z',
};
function BrandIcon({ name, size = 18, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
      <path d={BRAND_PATHS[name]} />
    </svg>
  );
}

/* ---------- Header ---------- */
function SiteHeader({ onContact }) {
  const links = [['Home', 'index.html'], ['Residential IT', 'residential.html'], ['Business IT', 'business.html'], ['About Us', 'about.html'], ['Contact', 'contact.html']];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: 'color-mix(in srgb, var(--navy) 92%, transparent)',
      backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--navy-500)',
    }}>
      <div style={{ ...wrapMax, display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 88 }}>
        <Logo variant="white" size={60} assetBase={ASSET} showWordmark />
        <nav style={{ display: 'flex', gap: 'var(--space-6)', alignItems: 'center' }}>
          {links.map(([l, href]) => (
            <a key={l} href={href} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--powder)', textDecoration: 'none' }}>{l}</a>
          ))}
        </nav>
        <a href={`tel:+1${PHONE.replace(/\D/g, '')}`} style={{ textDecoration: 'none' }}>
          <Button variant="primary" size="sm" iconLeft={<Ico name="phone-call" size={16} />}>CALL {PHONE}</Button>
        </a>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero({ onContact }) {
  return (
    <section style={{ background: 'linear-gradient(180deg, var(--honeydew), var(--powder-100))', paddingTop: 'var(--space-8)', paddingBottom: 0 }}>
      <div style={{ ...wrapMax, display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 0.95fr)', gap: 'var(--space-8)', alignItems: 'center', paddingBottom: 'var(--space-8)' }}>
        <div>
          <div style={{ marginBottom: 'var(--space-4)' }}>
            <Eyebrow icon="anchor" color="var(--steel-600)">Your Buoy in Choppy Tech Waters</Eyebrow>
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(38px, 4.6vw, 64px)', lineHeight: 1.04, color: 'var(--navy)', margin: '0 0 var(--space-4)', letterSpacing: '-0.02em' }}>
            Tech support that keeps <span style={{ color: 'var(--red)' }}>Whidbey Island</span> afloat.
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.55, color: 'var(--gray-600)', maxWidth: 520, margin: '0 0 var(--space-3)' }}>
            Prompt, reliable, honest tech support from a neighbor who actually picks up the phone.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.5, color: 'var(--gray-600)', maxWidth: 520, margin: '0 0 var(--space-6)', fontStyle: 'italic' }}>
            No hold music, no jargon, and no “have you tried turning it off and on again?” <span style={{ color: 'var(--navy)', fontStyle: 'normal', fontWeight: 600 }}>(Okay… sometimes that one.)</span>
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" onClick={onContact} iconRight={<Ico name="arrow-right" />}>Contact us</Button>
            <a href={`tel:+1${PHONE.replace(/\D/g, '')}`} style={{ textDecoration: 'none' }}>
              <Button variant="secondary" size="lg" iconLeft={<Ico name="phone-call" size={18} />}>Talk to a human</Button>
            </a>
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-5)', marginTop: 'var(--space-7)', flexWrap: 'wrap' }}>
            {[['badge-check', 'Woman-owned'], ['anchor', 'Locally owned'], ['calendar', 'Est. 2016'], ['shield-check', 'HIPAA compliant']].map(([ic, t]) => (
              <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--navy)' }}>
                <Ico name={ic} size={18} color="var(--steel)" />{t}
              </span>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)', aspectRatio: '4 / 5' }}>
            <img src={`${ASSET}/photo-buoy-nwp.jpg`} alt="A navigation buoy off Whidbey Island, sea lions resting on its base" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'saturate(0.92) contrast(1.02)' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, color-mix(in srgb, var(--navy) 18%, transparent) 0%, transparent 32%, transparent 62%, color-mix(in srgb, var(--navy) 30%, transparent) 100%)' }} />
          </div>
          <div style={{ position: 'absolute', left: 'calc(-1 * var(--space-4))', bottom: 'var(--space-5)', background: 'var(--white)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-md)', border: '1px solid var(--border)', padding: 'var(--space-3) var(--space-4)', display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 42, height: 42, borderRadius: 'var(--radius-md)', background: 'var(--powder-100)', color: 'var(--steel-600)' }}>
              <Ico name="phone-call" size={22} />
            </span>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: 'var(--navy)', lineHeight: 1 }}>A real human answers</div>
              <div style={{ fontSize: 13, color: 'var(--gray-600)', marginTop: 3 }}>No phone trees, no queues</div>
            </div>
          </div>
        </div>
      </div>
      <WaveDivider color="var(--white)" height={64} />
    </section>
  );
}

/* ---------- Brand atmosphere band (full-bleed photo + navy scrim) ---------- */
function BrandBand({ onContact }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', backgroundColor: 'var(--navy)' }}>
      <img src={`${ASSET}/photo-buoy-seals.jpg`} alt="Sea lions resting on a red channel buoy in Puget Sound" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.9)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, color-mix(in srgb, var(--navy) 92%, transparent) 0%, color-mix(in srgb, var(--navy) 78%, transparent) 45%, color-mix(in srgb, var(--navy) 30%, transparent) 100%)' }} />
      <div style={{ ...wrapMax, position: 'relative', padding: 'var(--space-9) var(--space-5)' }}>
        <div style={{ maxWidth: 560 }}>
          <Eyebrow icon="waves" color="var(--powder)">Steady hands</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(30px, 3.4vw, 44px)', color: '#fff', margin: '10px 0 var(--space-4)', letterSpacing: '-0.01em', lineHeight: 1.1 }}>
            We keep island businesses off the rocks.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--powder)', margin: '0 0 var(--space-6)' }}>
            Proactive monitoring that spots trouble before you do. Fewer surprises, quieter Mondays — and a real person on the line when it counts.
          </p>
          <Button variant="primary" size="lg" onClick={onContact} iconRight={<Ico name="arrow-right" />}>Get a quote</Button>
        </div>
      </div>
    </section>
  );
}

/* ---------- Why Us ---------- */
const WHY = [
  ['zap', 'Exceptional Service', 'Prompt, reliable, and honest. No runaround, no jargon, no waiting days for a callback.'],
  ['map-pin', 'Community Driven', "We live here too. Whidbey Island isn't just our market — it's our home."],
  ['handshake', 'Relationship Based', 'No contracts, no call centers — just a real relationship with people who know your name.'],
];
function WhyUs({ onContact }) {
  return (
    <section style={{ background: 'var(--white)', padding: 'var(--space-8) 0' }}>
      <div style={wrapMax}>
        <div style={{ textAlign: 'center', marginBottom: 'var(--space-7)' }}>
          <Eyebrow icon="life-buoy">Why us?</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 44, color: 'var(--navy)', margin: '10px 0 0', letterSpacing: '-0.01em' }}>Support that feels like a neighbor</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--space-5)' }}>
          {WHY.map(([ic, t, d]) => (
            <Card key={t} interactive>
              <CardHeader icon={ic} title={t} />
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'var(--gray-600)' }}>{d}</p>
            </Card>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 'var(--space-7)' }}>
          <Button variant="primary" onClick={onContact}>Contact us</Button>
        </div>
      </div>
    </section>
  );
}

/* ---------- Who We Are ---------- */
function WhoWeAre() {
  return (
    <section id="about" style={{ background: 'var(--powder-100)', padding: 'var(--space-8) 0' }}>
      <div style={{ ...wrapMax, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', alignItems: 'center' }}>
        <div>
          <Eyebrow icon="users">Who we are</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, color: 'var(--navy)', margin: '10px 0 var(--space-4)', letterSpacing: '-0.01em' }}>Founded in 2016. Rooted in Langley.</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--gray-600)', margin: '0 0 var(--space-4)' }}>
            Buoy IT Solutions is a Woman-owned, family-operated IT services company based in Langley, WA — serving homes and small businesses across Whidbey Island.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--gray-600)', margin: '0 0 var(--space-5)' }}>
            With over two decades of certified IT expertise, we deliver prompt, reliable tech support with the responsiveness of a neighbor who actually picks up the phone.
          </p>
          <a href="#about" style={{ textDecoration: 'none' }}>
            <Button variant="secondary" iconRight={<Ico name="arrow-right" size={18} />}>Meet the team</Button>
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
          {[['map-pin', 'Langley, WA', 'Serving all of Whidbey Island'], ['badge-check', 'Woman-owned', 'Family-operated since 2016'], ['award', '20+ years', 'Certified IT expertise'], ['phone-call', 'We answer', 'A real person, every time']].map(([ic, t, d]) => (
            <Card key={t}>
              <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--powder-100)', color: 'var(--steel-600)', marginBottom: 'var(--space-3)' }}>
                <Ico name={ic} size={22} />
              </span>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, color: 'var(--navy)' }}>{t}</div>
              <div style={{ fontSize: 14, color: 'var(--gray-600)', marginTop: 4, lineHeight: 1.45 }}>{d}</div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Testimonial ---------- */
function Testimonial() {
  return (
    <section style={{ background: 'var(--navy)', padding: 'var(--space-9) 0', position: 'relative' }}>
      <div style={{ ...wrapMax, maxWidth: 'var(--container-md)', textAlign: 'center' }}>
        <Ico name="quote" size={44} color="var(--red)" style={{ marginBottom: 'var(--space-4)' }} />
        <blockquote style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(24px, 3vw, 34px)', lineHeight: 1.35, color: '#fff', margin: '0 0 var(--space-5)', letterSpacing: '-0.01em' }}>
          "Buoy IT Solutions is the only company I trust for my ongoing technical needs, and I highly recommend them for yours, too."
        </blockquote>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--powder)' }}>Julie Larsen</div>
        <div style={{ fontSize: 14, color: 'var(--steel-400)', marginTop: 2 }}>Full Circle Business Center · Langley, WA</div>
      </div>
    </section>
  );
}

/* ---------- Services ---------- */
const SERVICES = [
  ['wrench', 'Computer Repair', 'Fast diagnostics, hardware and software fixes for PCs and Macs. We get your devices running right — for home users and businesses alike.', 'business.html'],
  ['server', 'Managed IT Services', 'Ongoing monitoring, maintenance, and priority support for Whidbey Island businesses — so you can focus on running your business, not your technology.', 'business.html'],
  ['house', 'Home & Residential IT', 'Wi-Fi setup, smart home devices, printers, everyday tech help — reliable in-home support for Whidbey Island residents.', 'residential.html'],
  ['compass', 'IT Consulting', 'Technology strategy, infrastructure planning, and small business IT solutions tailored to your goals and budget.', 'business.html'],
];
function Services() {
  return (
    <section id="business" style={{ background: 'var(--white)', padding: 'var(--space-8) 0' }}>
      <div style={wrapMax}>
        <div style={{ textAlign: 'center', marginBottom: 'var(--space-7)' }}>
          <Eyebrow icon="anchor">What we do</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 44, color: 'var(--navy)', margin: '10px 0 0', letterSpacing: '-0.01em' }}>Services that keep you on course</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--space-5)' }}>
          {SERVICES.map(([ic, t, d, anchor]) => (
            <Card key={t} interactive style={{ display: 'flex', flexDirection: 'column' }}>
              <CardHeader icon={ic} title={t} />
              <p style={{ margin: '0 0 var(--space-4)', fontSize: 15, lineHeight: 1.55, color: 'var(--gray-600)', flex: 1 }}>{d}</p>
              <a href={anchor} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--steel-600)', textDecoration: 'none' }}>
                Learn more <Ico name="arrow-right" size={16} />
              </a>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Contact ---------- */
function Contact() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" style={{ background: 'var(--powder-100)', padding: 'var(--space-8) 0' }}>
      <div style={{ ...wrapMax, display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-8)', alignItems: 'start' }}>
        <div>
          <Eyebrow icon="mail">Get in touch</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 40, color: 'var(--navy)', margin: '10px 0 var(--space-4)', letterSpacing: '-0.01em' }}>Let's get your tech on course</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--gray-600)', margin: '0 0 var(--space-6)' }}>
            Tell us what's slowing you down. We'll follow up with a plain-English plan — no pressure, no jargon.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            {[['map-pin', '5197 Zig Zag LN, Langley, WA 98260'], ['phone', PHONE], ['mail', 'info@BuoyITSolutions.com']].map(([ic, t]) => (
              <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', fontSize: 16, color: 'var(--navy)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--white)', border: '1px solid var(--border)', color: 'var(--steel-600)' }}>
                  <Ico name={ic} size={20} />
                </span>
                {t}
              </li>
            ))}
          </ul>
        </div>
        <Card style={{ padding: 'var(--space-7)' }}>
          {sent ? (
            <div style={{ textAlign: 'center', padding: 'var(--space-6) 0' }}>
              <Ico name="check-circle-2" size={48} color="var(--steel-600)" />
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--navy)', margin: 'var(--space-3) 0 6px' }}>Message sent — anchors aweigh.</h3>
              <p style={{ fontSize: 15, color: 'var(--gray-600)', margin: 0 }}>We'll be in touch shortly. For anything urgent, call {PHONE}.</p>
            </div>
          ) : (
            <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" onSubmit={(e) => {
              e.preventDefault();
              const form = e.target;
              const body = new URLSearchParams(new FormData(form)).toString();
              fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body })
                .then(() => setSent(true)).catch(() => setSent(true));
            }}>
              <input type="hidden" name="form-name" value="contact" />
              <p style={{ display: 'none' }}><label>Don't fill this out: <input name="bot-field" /></label></p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)', marginBottom: 'var(--space-4)' }}>
                <Field label="First name" required><Input name="first-name" required placeholder="Jane" /></Field>
                <Field label="Last name" required><Input name="last-name" required placeholder="Doe" /></Field>
                <Field label="Email" required><Input name="email" type="email" required icon="mail" placeholder="you@company.com" /></Field>
                <Field label="Phone" required><Input name="phone" type="tel" required icon="phone" placeholder={PHONE} /></Field>
              </div>
              <div style={{ marginBottom: 'var(--space-4)' }}>
                <Field label="Company name (if applicable)"><Input name="company" placeholder="Full Circle Business Center" /></Field>
              </div>
              <div style={{ marginBottom: 'var(--space-5)' }}>
                <Field label="Write a message" required>
                  <textarea name="message" rows={4} required placeholder="How can we help?" style={{
                    width: '100%', resize: 'vertical', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--navy)',
                    padding: 'var(--space-3)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)', outline: 'none', background: 'var(--white)',
                  }} />
                </Field>
              </div>
              <Button variant="primary" size="lg" fullWidth iconRight={<Ico name="arrow-right" size={18} />}>Submit</Button>
            </form>
          )}
        </Card>
      </div>
    </section>
  );
}

function Field({ label, required, children }) {
  return (
    <label style={{ display: 'block' }}>
      <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, color: 'var(--navy)', marginBottom: 6 }}>
        {label}{required && <span style={{ color: 'var(--red)' }}> *</span>}
      </span>
      {children}
    </label>
  );
}

/* ---------- Footer ---------- */
function SiteFooter() {
  const nav = [['Home', 'index.html'], ['Business IT', 'business.html'], ['Residential IT', 'residential.html'], ['About Us', 'about.html'], ['Contact', 'contact.html']];
  const socials = [['youtube', 'https://www.youtube.com/@BuoyITSolutions'], ['linkedin', 'https://www.linkedin.com/company/buoy-it-solutions/'], ['facebook', 'https://www.facebook.com/BuoyITsolutions']];
  return (
    <footer style={{ background: 'var(--navy)', color: 'var(--powder)' }}>
      <WaveDivider color="var(--navy)" flip height={40} style={{ background: 'var(--powder-100)' }} />
      <div style={{ ...wrapMax, display: 'grid', gridTemplateColumns: '1.6fr 1fr 1.2fr', gap: 'var(--space-7)', padding: 'var(--space-8) var(--space-5) var(--space-6)' }}>
        <div>
          <Logo variant="white" size={52} assetBase={ASSET} showWordmark />
          <p style={{ fontSize: 14, lineHeight: 1.6, marginTop: 'var(--space-4)', maxWidth: 300, color: 'var(--powder)' }}>
            Woman-owned, family-operated managed IT for Whidbey Island. We keep your technology on course.
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-5)', alignItems: 'center' }}>
            {socials.map(([ic, href]) => (
              <a key={ic} href={href} aria-label={ic} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 'var(--radius-pill)', border: '1px solid var(--navy-500)', color: 'var(--powder)' }}>
                <BrandIcon name={ic} size={18} color="currentColor" />
              </a>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-5)', marginTop: 'var(--space-5)', alignItems: 'center' }}>
            <img src={`${ASSET}/hipaa-compliant.png`} alt="HIPAA Compliant" title="HIPAA Compliant" style={{ height: 68, width: 'auto' }} />
            <img src={`${ASSET}/microsoft-partner-white.png`} alt="Microsoft Partner" title="Microsoft Partner" style={{ height: 34, width: 'auto' }} />
          </div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#fff', marginBottom: 'var(--space-4)' }}>Explore</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {nav.map(([i, href]) => <li key={i}><a href={href} style={{ color: 'var(--powder)', textDecoration: 'none', fontSize: 14 }}>{i}</a></li>)}
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#fff', marginBottom: 'var(--space-4)' }}>Get in touch</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14 }}>
            <li style={{ display: 'flex', gap: 10 }}><Ico name="map-pin" size={18} color="var(--steel-400)" />5197 Zig Zag LN, Langley, WA 98260</li>
            <li style={{ display: 'flex', gap: 10 }}><Ico name="phone" size={18} color="var(--steel-400)" />{PHONE}</li>
            <li style={{ display: 'flex', gap: 10 }}><Ico name="mail" size={18} color="var(--steel-400)" />info@BuoyITSolutions.com</li>
          </ul>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--navy-500)' }}>
        <div style={{ ...wrapMax, display: 'flex', justifyContent: 'space-between', padding: 'var(--space-4) var(--space-5)', fontSize: 13, color: 'var(--steel-400)', flexWrap: 'wrap', gap: 8 }}>
          <span>© 2026 Buoy IT Solutions, LLC. All hands on deck.</span>
          <span style={{ display: 'inline-flex', gap: 'var(--space-4)' }}><a href="#" style={{ color: 'var(--steel-400)', textDecoration: 'none' }}>Privacy Policy</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, Hero, BrandBand, WhyUs, WhoWeAre, Testimonial, Services, Contact, SiteFooter, Ico, BrandIcon });