/* global React, ReactDOM, Nav, Footer, Icon, SectionHead, CtaCard */
const { useState } = React;

const CATEGORIES = [
  {
    id: "residential",
    icon: <Icon.Home size={18}/>,
    label: "Residential",
    title: "Residential electrical, done with care.",
    blurb: "From a flickering outlet to a whole-home rewire, we treat your house like it's our own. Drop cloths down, shoes off, every wire labeled.",
    starting: "Most jobs from $180",
    services: [
      "Whole-home rewire", "Panel upgrade & replacement", "Sub-panel installation",
      "Smart lighting design", "Recessed & canned lighting", "Outlet & switch upgrades",
      "Ceiling fan installation", "Outdoor & landscape lighting", "Generator hookup",
      "Surge protection", "GFCI / AFCI upgrades", "Code-compliance inspections",
      "Aluminum wiring remediation", "Knob-and-tube replacement",
    ],
  },
  {
    id: "commercial",
    icon: <Icon.Tool size={18}/>,
    label: "Commercial",
    title: "Commercial work, on your schedule.",
    blurb: "Restaurants, retail, offices, and light industrial. We run nights and weekends so your business never closes.",
    starting: "Custom flat-rate quotes",
    services: [
      "Tenant fit-outs", "200A / 400A service upgrades", "Three-phase wiring",
      "Restaurant kitchen circuits", "Retail lighting & signage", "Office build-outs",
      "Data & low-voltage", "Emergency lighting & exit signs", "Code corrections",
      "Annual safety inspections", "After-hours service",
    ],
  },
  {
    id: "ev",
    icon: <Icon.Car size={18}/>,
    label: "EV charging",
    title: "EV chargers, installed in an afternoon.",
    blurb: "Tesla-certified and rated for every major brand. We handle the permit, the load calc, and the rebate paperwork.",
    starting: "From $640 installed",
    services: [
      "Level 2 home chargers", "Tesla Wall Connector", "ChargePoint / JuiceBox / Wallbox",
      "Outdoor & garage installs", "Load calculations & service upgrades",
      "Smart-home integration", "Solar + battery integration", "Permit & rebate filing",
      "Commercial charging stations", "Multi-unit dwelling chargers",
    ],
  },
  {
    id: "hvac",
    icon: <Icon.Wind size={18}/>,
    label: "AC & HVAC",
    title: "Power for cooler, smarter homes.",
    blurb: "We don't fix the unit — we make sure the electricity feeding it is right. Done before the heat wave, done before the rebate deadline.",
    starting: "From $420",
    services: [
      "AC unit circuits", "Mini-split wiring", "Smart thermostat installation",
      "HVAC service upgrades", "Heat pump wiring", "Whole-home dehumidifier circuits",
      "Compressor disconnects", "Zone controller wiring",
    ],
  },
  {
    id: "hottub",
    icon: <Icon.Droplet size={18}/>,
    label: "Hot tubs & spas",
    title: "Wired for relaxation, wired to code.",
    blurb: "Dedicated GFCI circuits, weatherproof disconnects, proper grounding. The job most pool installers can't legally do.",
    starting: "From $780",
    services: [
      "Dedicated GFCI circuits", "240V hot tub circuits", "Outdoor disconnects",
      "Spa panel installation", "Underground conduit runs", "Bonding & grounding",
      "Pool equipment wiring", "Sauna circuits",
    ],
  },
  {
    id: "emergency",
    icon: <Icon.Shield size={18}/>,
    label: "24/7 emergency",
    title: "When the power's out, we're not.",
    blurb: "Real humans answer at 2am. Trucks rolling within the hour for true emergencies, anywhere in Travis County.",
    starting: "$240 emergency call-out",
    services: [
      "Power loss diagnosis", "Burning smell / hot panels", "Sparking outlets",
      "Storm damage repair", "Tripped main breakers", "Generator failures",
      "Smoke alarm wiring", "Water damage assessment",
    ],
  },
];

const ServicesHero = () => (
  <section className="section" style={{ paddingTop: 40 }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "end" }} className="about-hero">
        <div>
          <div className="pill pill-yellow"><span className="pill-dot"/>Every job, every neighborhood</div>
          <h1 className="display-xl" style={{ margin: "20px 0 0" }}>
            Everything we<br/>wire, in one place.
          </h1>
          <p className="lede" style={{ marginTop: 20, maxWidth: 540 }}>
            Six service lines, dozens of specialties, one team of master electricians. Pick a category to see the full list — or just tell us what's broken and we'll figure it out.
          </p>
        </div>
        <div>
          <div className="card" style={{ padding: 24 }}>
            <div className="eyebrow">Pricing</div>
            <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6, marginTop: 8, lineHeight: 1.2 }}>
              Flat rates, written down.
            </div>
            <p style={{ fontSize: 14, color: "var(--ink-2)", marginTop: 8, lineHeight: 1.5 }}>
              Every quote is fixed-price, in writing, before any work starts. No hourly clock running, no surprises on the invoice.
            </p>
            <a href="schedule.html" className="btn btn-primary" style={{ marginTop: 16 }}>Get a free quote <Icon.ArrowRight/></a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const ServicesTabs = () => {
  const [active, setActive] = useState(CATEGORIES[0].id);
  const cat = CATEGORIES.find(c => c.id === active);
  return (
    <section className="section" style={{ paddingTop: 16 }}>
      <div className="container">
        <div className="svc-tabs" style={{ marginBottom: 32 }}>
          {CATEGORIES.map(c => (
            <button key={c.id} className={`svc-tab ${active === c.id ? "active" : ""}`} onClick={() => setActive(c.id)}>
              {c.icon} {c.label}
            </button>
          ))}
        </div>

        <div id={cat.id} className="card-lg" style={{ padding: 40 }}>
          <div className="svc-detail">
            <div>
              <h2 className="display-md" style={{ margin: 0 }}>{cat.title}</h2>
              <p className="lede" style={{ marginTop: 16 }}>{cat.blurb}</p>

              <div style={{ marginTop: 28 }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>What we handle</div>
                <div className="svc-list">
                  {cat.services.map(s => (
                    <div key={s} className="svc-list-item">
                      <Icon.Check size={14}/> {s}
                    </div>
                  ))}
                </div>
              </div>

              <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a href="schedule.html" className="btn btn-primary btn-lg">Book this service <Icon.ArrowRight/></a>
                <a href="tel:7374440405" className="btn btn-outline btn-lg"><Icon.Phone/> (737) 444-0405</a>
              </div>
            </div>

            <div style={{ position: "sticky", top: 100 }}>
              <div className="card" style={{ padding: 24, marginBottom: 16 }}>
                <div className="eyebrow">Starting price</div>
                <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.6, marginTop: 6 }}>{cat.starting}</div>
                <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>Final quote always written before work begins.</div>
              </div>
              <div className="card" style={{ padding: 24, marginBottom: 16 }}>
                <div className="eyebrow">What's included</div>
                <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                  {[
                    "Licensed master electrician on site",
                    "All permits & inspections",
                    "Code-compliant workmanship",
                    "Lifetime workmanship guarantee",
                    "Job photos & documentation",
                  ].map(x => (
                    <li key={x} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14 }}>
                      <span style={{ color: "var(--green)", marginTop: 2 }}><Icon.Check size={14}/></span>
                      {x}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="ph" style={{ aspectRatio: "4/3", borderRadius: 16 }}>
                {cat.label} — representative job photo
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ProcessBand = () => (
  <section className="section">
    <div className="container">
      <SectionHead
        eyebrow="Our process"
        title="Same flow, every job."
        lead="No matter the service line, your job runs the same playbook. Predictable, documented, guaranteed."
      />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, background: "var(--card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)", overflow: "hidden" }} className="process-grid">
        {[
          ["01", "Free estimate", "Same-day visit. Walk the job. Written flat-rate quote on the spot."],
          ["02", "Permit & schedule", "We file every permit. You pick a date. We text you the truck's ETA."],
          ["03", "Work the job", "Drop cloths, photos at each step, every wire labeled. Cleaned up before we leave."],
          ["04", "Inspect & guarantee", "City inspection passed. Photo report emailed. Lifetime guarantee, in writing."],
        ].map(([n, t, d], i) => (
          <div key={i} style={{ padding: 32, borderRight: i < 3 ? "1px solid var(--line)" : "none", display: "flex", flexDirection: "column", gap: 16 }} className="process-step">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: "var(--muted)", fontFamily: "Geist Mono, monospace" }}>{n}</span>
              <Icon.ArrowRight/>
            </div>
            <div>
              <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>{t}</div>
              <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>{d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FAQ = () => {
  const [open, setOpen] = useState(0);
  const faqs = [
    ["Are you licensed and insured?", "Yes. Kwality Electric is a Texas-licensed electrical contractor (TECL #28442). We carry $2M general liability and full workers' comp. We'll send proof of insurance before the first visit if you'd like."],
    ["Do you give free estimates?", "Every estimate is free for jobs in our standard service area (Travis County and immediate neighbors). For larger projects we'll come walk the job, ask questions, and leave you with a written flat-rate quote — no obligation."],
    ["How does your flat-rate pricing work?", "We quote each job as a single fixed price before any work begins. No hourly clock, no surprise charges. If the job turns out to be more complex than we expected, that's our problem, not yours."],
    ["What does the lifetime workmanship guarantee cover?", "If any wiring we install fails because of how we installed it — ever — we fix it free. We'll come back to your address as many times as needed. It's in writing, and it transfers to the next owner of the home."],
    ["Do you pull permits?", "Yes, for any job that requires one. Filing permits and scheduling the city inspection is included in your flat-rate quote. We do not start a permitted job without one on file."],
    ["Do you offer emergency service?", "24/7. Real humans answer the phone at 2am. We dispatch within the hour for true emergencies (power loss, burning smells, sparking) anywhere in Travis County."],
  ];
  return (
    <section className="section">
      <div className="container" style={{ maxWidth: 920 }}>
        <SectionHead
          eyebrow="FAQ"
          title="Questions we hear a lot."
        />
        <div>
          {faqs.map(([q, a], i) => (
            <div key={i} className="faq-item" onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{q}</span>
                <span style={{ transform: open === i ? "rotate(45deg)" : "none", transition: "transform 0.2s ease", fontSize: 22, fontWeight: 300 }}>+</span>
              </div>
              {open === i && <div className="faq-a">{a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

function ServicesPage() {
  return (
    <>
      <Nav active="services"/>
      <ServicesHero/>
      <ServicesTabs/>
      <ProcessBand/>
      <FAQ/>
      <CtaCard/>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ServicesPage/>);