/* global React */
const { useState, useEffect } = React;

// ====== Icons ======
const Icon = {
  Bolt: ({ size = 16, color = "currentColor" }) => (
    <svg width={size} height={size * 1.4} viewBox="0 0 14 20" fill="none">
      <path d="M8 0L0 12h5l-2 8L14 7H8l2-7H8z" fill={color}/>
    </svg>
  ),
  Phone: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <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-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  ),
  Pin: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
  ),
  Mail: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
      <polyline points="22,6 12,13 2,6"/>
    </svg>
  ),
  Clock: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
    </svg>
  ),
  Check: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  ),
  ArrowRight: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
    </svg>
  ),
  Star: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} stroke="none">
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
    </svg>
  ),
  Plug: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 2v6M15 2v6"/><path d="M5 8h14v3a7 7 0 0 1-14 0V8z"/><path d="M12 18v4"/>
    </svg>
  ),
  Home: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12l9-9 9 9"/><path d="M5 10v10h14V10"/>
    </svg>
  ),
  Wind: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9.59 4.59A2 2 0 1 1 11 8H2"/><path d="M12.59 19.41A2 2 0 1 0 14 16H2"/><path d="M17.73 7.73A2.5 2.5 0 1 1 19.5 12H2"/>
    </svg>
  ),
  Car: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 17h14M3 17l2-7h14l2 7M7 17v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-2M14 17v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-2"/>
    </svg>
  ),
  Droplet: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
    </svg>
  ),
  Shield: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
    </svg>
  ),
  Tool: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
    </svg>
  ),
  Menu: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="17" x2="21" y2="17"/>
    </svg>
  ),
  X: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/>
    </svg>
  ),
};

// ====== Logo ======
const Logo = () => (
  <a href="index.html" className="logo" aria-label="Kwality Electric home">
    <div className="logo-col l">
      <span>KW</span>
      <span>ELE</span>
    </div>
    <Icon.Bolt size={18} color="#FFC233"/>
    <div className="logo-col r">
      <span>ALITY</span>
      <span>CTRIC</span>
    </div>
  </a>
);

// ====== Nav ======
const Nav = ({ active = "home" }) => {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["home", "index.html", "Home"],
    ["services", "services.html", "Services"],
    ["about", "about.html", "About"],
    ["schedule", "schedule.html", "Schedule"],
  ];

  return (
    <>
      <div className={`nav-wrap ${scrolled ? "scrolled" : ""}`}>
        <div className="nav">
          <div className="nav-logo"><Logo/></div>
          <nav className="nav-links" aria-label="Primary">
            {links.map(([k, h, t]) => (
              <a key={k} href={h} className={active === k ? "active" : ""}>{t}</a>
            ))}
          </nav>
          <div className="nav-cta">
            <a href="tel:7374440405" className="nav-call">
              <Icon.Phone/> (737) 444-0405
            </a>
            <a href="schedule.html" className="btn btn-primary">Book now</a>
            <button className="nav-burger" onClick={() => setOpen(true)} aria-label="Open menu">
              <Icon.Menu/>
            </button>
          </div>
        </div>
      </div>

      <div className={`mobile-menu ${open ? "open" : ""}`}>
        <div className="between">
          <Logo/>
          <button className="nav-burger" style={{ display: "inline-flex" }} onClick={() => setOpen(false)} aria-label="Close menu">
            <Icon.X/>
          </button>
        </div>
        <div className="mobile-menu-links">
          {links.map(([k, h, t]) => (
            <a key={k} href={h} onClick={() => setOpen(false)}>{t}</a>
          ))}
        </div>
        <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 12 }}>
          <a href="tel:7374440405" className="btn btn-ghost btn-lg" style={{ justifyContent: "center" }}>
            <Icon.Phone/> (737) 444-0405
          </a>
          <a href="schedule.html" className="btn btn-primary btn-lg" style={{ justifyContent: "center" }}>
            Book a visit <Icon.ArrowRight/>
          </a>
        </div>
      </div>
    </>
  );
};

// ====== Footer ======
const Footer = () => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-grid">
        <div>
          <div style={{ background: "rgba(244,241,236,0.06)", display: "inline-block", padding: "12px 18px", borderRadius: 999 }}>
            <div className="logo" style={{ color: "#F4F1EC" }}>
              <div className="logo-col l"><span>KW</span><span>ELE</span></div>
              <Icon.Bolt size={18} color="#FFC233"/>
              <div className="logo-col r"><span>ALITY</span><span>CTRIC</span></div>
            </div>
          </div>
          <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.6, color: "rgba(244,241,236,0.7)", maxWidth: 280 }}>
            Master electricians serving Austin and surrounding communities. Licensed, insured, and proudly local since 2014.
          </p>
          <div style={{ marginTop: 20, display: "flex", gap: 8, flexWrap: "wrap" }}>
            <span className="pill" style={{ background: "rgba(244,241,236,0.08)", color: "rgba(244,241,236,0.85)" }}>TECL #28442</span>
            <span className="pill" style={{ background: "rgba(244,241,236,0.08)", color: "rgba(244,241,236,0.85)" }}>Fully insured</span>
          </div>
        </div>

        <div>
          <h4>Services</h4>
          <ul>
            <li><a href="services.html#residential">Residential</a></li>
            <li><a href="services.html#commercial">Commercial</a></li>
            <li><a href="services.html#ev">EV charging</a></li>
            <li><a href="services.html#hvac">AC &amp; HVAC</a></li>
            <li><a href="services.html#hottub">Hot tubs &amp; spas</a></li>
          </ul>
        </div>

        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="about.html">About us</a></li>
            <li><a href="about.html#team">Our team</a></li>
            <li><a href="about.html#service-area">Service area</a></li>
            <li><a href="schedule.html">Schedule a visit</a></li>
            <li><a href="schedule.html#contact">Contact</a></li>
          </ul>
        </div>

        <div>
          <h4>Reach us</h4>
          <ul>
            <li><a href="tel:7374440405">(737) 444-0405</a></li>
            <li><a href="mailto:hello@kwalityelectric.com">hello@kwalityelectric.com</a></li>
            <li style={{ color: "rgba(244,241,236,0.7)" }}>2400 E 6th St, Suite 200<br/>Austin, TX 78702</li>
            <li style={{ color: "rgba(244,241,236,0.7)" }}>Mon–Sat · 7am–8pm<br/>24/7 emergency line</li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <div>© 2026 Kwality Electric LLC. All rights reserved.</div>
        <div style={{ display: "flex", gap: 20 }}>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Accessibility</a>
        </div>
      </div>
    </div>
  </footer>
);

// ====== Section heading ======
const SectionHead = ({ eyebrow, title, lead, action }) => (
  <div className="section-head">
    <div style={{ maxWidth: 640 }}>
      {eyebrow && <div className="eyebrow" style={{ marginBottom: 12 }}>{eyebrow}</div>}
      {title && <h2 className="display-md" style={{ margin: 0 }}>{title}</h2>}
      {lead && <p className="lede" style={{ marginTop: 12, marginBottom: 0 }}>{lead}</p>}
    </div>
    {action}
  </div>
);

// ====== CTA Card (reusable on multiple pages) ======
const CtaCard = () => (
  <section className="section">
    <div className="container">
      <div className="card-lg" style={{ padding: 48, background: "var(--ink)", color: "var(--bg)", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "center", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", right: -80, top: -80, width: 300, height: 300, borderRadius: 999, background: "var(--yellow)", opacity: 0.12, filter: "blur(40px)" }}/>
        <div style={{ position: "relative" }}>
          <div className="eyebrow" style={{ color: "var(--yellow)" }}>Ready when you are</div>
          <h2 className="display-md" style={{ margin: "12px 0 16px" }}>
            Let's get your <span style={{ background: "var(--yellow)", color: "var(--ink)", padding: "0 12px", borderRadius: 12, display: "inline-block", transform: "rotate(-1deg)" }}>quote</span> started.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "rgba(244,241,236,0.75)", maxWidth: 480, margin: 0 }}>
            Free, no-obligation estimate within 24 hours. Same-day visits when you need them, with upfront flat-rate pricing on every job.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
            <a href="schedule.html" className="btn btn-yellow btn-lg">Book online <Icon.ArrowRight/></a>
            <a href="tel:7374440405" className="btn btn-outline btn-lg" style={{ color: "var(--bg)", borderColor: "rgba(244,241,236,0.25)" }}>
              <Icon.Phone/> (737) 444-0405
            </a>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div className="ph ph-dark" style={{ aspectRatio: "4/5", borderRadius: 20, overflow: "hidden", padding: 0 }}>
            <img
              src="assets/images/slava-electrician-2.webp"
              alt="Kwality Electric master electrician"
              loading="lazy"
              decoding="async"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }}
            />
          </div>
          <div className="card" style={{ position: "absolute", bottom: -16, left: -16, padding: "12px 16px", display: "flex", alignItems: "center", gap: 10, color: "var(--ink)" }}>
            <Icon.Clock size={18} color="var(--ink)"/>
            <div>
              <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600 }}>RESPONSE TIME</div>
              <div style={{ fontWeight: 700, fontSize: 16, color: "var(--ink)" }}>~ 90 minutes</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ====== Expose globally ======
Object.assign(window, { Icon, Logo, Nav, Footer, SectionHead, CtaCard });
