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

// ====== Hero ======
const Hero = () => {
  const [service, setService] = useState("Panel upgrade");
  const [zip, setZip] = useState("78704");
  const [when, setWhen] = useState("Tomorrow");
  return (
    <section className="hero-yellow">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-left">
            <div className="hero-pill">
              <span className="pill-dot"/>
              Booking next-day in Austin
            </div>
            <h1 className="display-xl hero-h1">
              Electrical work,<br/>
              handled like<br/>
              <span className="hero-concierge">concierge.</span>
            </h1>
            <p className="hero-lede">
              Book a licensed master electrician in 60 seconds. Upfront flat-rate pricing, same-day visits across Austin, and a lifetime workmanship guarantee on every job.
            </p>

            <div className="hero-stats">
              {[
                ["4.9", "★", "312 Google reviews"],
                ["TECL #28442", null, "Master licensed"],
                ["12 yrs", null, "Serving Austin"],
              ].map(([k, mark, v]) => (
                <div key={k} className="hero-stat">
                  <span className="hero-stat-k">
                    {k}{mark && <Icon.Star size={20} color="var(--ink)"/>}
                  </span>
                  <span className="hero-stat-v">{v}</span>
                </div>
              ))}
            </div>

            {/* Booking strip */}
            <form className="booking-strip hero-booking" onSubmit={(e) => { e.preventDefault(); window.location.href = "schedule.html"; }}>
              <div className="bs-field">
                <div className="bs-label">SERVICE</div>
                <select value={service} onChange={(e) => setService(e.target.value)}>
                  <option>Panel upgrade</option>
                  <option>EV charger install</option>
                  <option>Whole-home rewire</option>
                  <option>AC / HVAC wiring</option>
                  <option>Hot tub circuit</option>
                  <option>Lighting design</option>
                  <option>Emergency repair</option>
                </select>
              </div>
              <div className="bs-field bs-bordered">
                <div className="bs-label">ZIP</div>
                <input value={zip} onChange={(e) => setZip(e.target.value)} maxLength={5}/>
              </div>
              <div className="bs-field bs-bordered">
                <div className="bs-label">WHEN</div>
                <select value={when} onChange={(e) => setWhen(e.target.value)}>
                  <option>Today</option>
                  <option>Tomorrow</option>
                  <option>This week</option>
                  <option>Next week</option>
                </select>
              </div>
              <button type="submit" className="btn btn-primary btn-lg" style={{ borderRadius: 14 }}>
                Get quote <Icon.ArrowRight/>
              </button>
            </form>
          </div>

          <div className="hero-right">
            <div className="hero-portrait">
              <img
                src="assets/images/slava-electrician.webp"
                alt="Kwality Electric master electrician in uniform with tool belt"
                loading="eager"
                decoding="async"
              />
            </div>
            <div className="hero-float hero-float-response">
              <span className="fl-label">RESPONSE</span>
              <span className="fl-value">~ 90 min</span>
            </div>
            <div className="hero-float hero-float-techs">
              <span className="live-dot"/>
              <span>3 techs available now</span>
            </div>
            <div className="hero-float hero-float-reviews">
              <div className="avatar-stack">
                {["#D5C5A8","#B8A285","#8C7A5C","#5E4E33"].map((c, i) => <div key={i} style={{ background: c }}/>)}
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, display: "flex", alignItems: "center", gap: 4 }}>
                  4.9 <Icon.Star color="#FFC233"/> · 312
                </div>
                <div style={{ fontSize: 11, color: "var(--muted)" }}>Google reviews</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ====== Trust bar ======
const TrustBar = () => (
  <section style={{ padding: "8px var(--pad)" }}>
    <div className="container">
      <div className="trustbar">
        <div className="eyebrow trustbar-eyebrow">Trusted by 1,200+ Austin homeowners &amp; businesses</div>
        <div className="trustbar-logos">
          <span>Google ★★★★★</span>
          <span style={{ fontFamily: "Georgia, serif", fontStyle: "italic" }}>BBB A+</span>
          <span>Angi · Super Service</span>
          <span style={{ fontFamily: "Georgia, serif" }}>HOUZZ</span>
          <span>NEXTDOOR · Fav 2024</span>
        </div>
      </div>
    </div>
  </section>
);

// ====== Services chips ======
const ServicesChips = () => {
  const items = [
    { img: "assets/images/panel-icon.png", t: "Panel upgrade", p: "From $1,890", m: "↑ 12% this month", mt: "trend" },
    { img: "assets/images/ev-charger-icon.png", t: "EV charger install", p: "From $640", m: "Tesla certified", mt: "info" },
    { img: "assets/images/air-conditioner-icon.png", t: "AC wiring", p: "From $420", m: "Same-day", mt: "good" },
    { img: "assets/images/hottub-icon.png", t: "Hot tub circuit", p: "From $780", m: "GFCI included", mt: "info" },
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="Most booked this month"
          title="Pick a service, get a quote in minutes."
          action={<a href="services.html" className="u-link">See all 24 services <Icon.ArrowRight/></a>}
        />
        <div className="chips-grid">
          {items.map((it, i) => (
            <a key={i} href="services.html" className="card chip-card">
              <img src={it.img} alt="" className="svc-img" width="168" height="168"/>
              <div style={{ fontSize: 17, fontWeight: 600, marginTop: 16 }}>{it.t}</div>
              <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>{it.p}</div>
              <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className={`pill ${it.mt === "good" ? "pill-green" : it.mt === "trend" ? "pill-yellow" : ""}`} style={it.mt === "info" ? { background: "var(--bg-2)", color: "var(--ink-2)" } : {}}>
                  {it.m}
                </span>
                <Icon.ArrowRight/>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== How it works (dark card) ======
const HowItWorks = () => (
  <section className="section">
    <div className="container">
      <div className="card-lg" style={{ background: "var(--ink)", color: "var(--bg)", padding: 48 }}>
        <div className="how-grid">
          <div>
            <div className="eyebrow" style={{ color: "var(--yellow)" }}>How it works</div>
            <h2 className="display-md" style={{ margin: "12px 0 0" }}>
              From quote to wired<br/>in 24 hours.
            </h2>
            <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.55, color: "rgba(244,241,236,0.7)", maxWidth: 360 }}>
              No phone tag, no surprise charges. Three steps from your kitchen table to a finished job.
            </p>
          </div>
          <div className="steps-grid">
            {[
              ["01", "Tell us what you need", "60 seconds online. Zip code, service, when. We confirm in minutes."],
              ["02", "Free estimate visit", "A master electrician shows up same-day. Walk the job, write a flat-rate quote."],
              ["03", "Job done right", "Permitted, inspected, photographed. Lifetime workmanship guarantee, in writing."],
            ].map(([n, t, d], i) => (
              <div key={i} className="step">
                <div className="step-num">{n}</div>
                <div className="step-title">{t}</div>
                <div className="step-desc">{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ====== Featured projects ======
const FeaturedWork = () => {
  const projects = [
    { tag: "Residential rewire", loc: "Hyde Park · 1924 craftsman", note: "Full rewire without disturbing original trim", color: "#D5C5A8", img: "assets/images/rewiring-work.webp" },
    { tag: "EV charging", loc: "Westlake · Tesla Powerwall", note: "Dual-charger install + load-balancing", color: "#A8C5D5", img: "assets/images/tesla-charger-work.webp" },
    { tag: "Panel upgrade", loc: "Tarrytown · 1950s ranch", note: "100A to 200A service upgrade, zero downtime", color: "#C5D5A8", img: "assets/images/panel-upgrade-work.webp" },
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="Recent work"
          title="Quietly difficult jobs, done right."
          lead="A small sample of recent projects across Austin. Every job photographed, permitted, and inspected."
          action={<a href="#" className="u-link">View all projects <Icon.ArrowRight/></a>}
        />
        <div className="work-grid">
          {projects.map((p, i) => (
            <article key={i} className="card" style={{ overflow: "hidden" }}>
              {p.img ? (
                <div className="ph" style={{ aspectRatio: "4/3", overflow: "hidden", padding: 0, background: "none" }}>
                  <img src={p.img} alt={p.loc} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                </div>
              ) : (
                <div className="ph" style={{ aspectRatio: "4/3", background: `repeating-linear-gradient(135deg, ${p.color} 0 14px, ${p.color}88 14px 15px)` }}>
                  {p.tag} — project photo
                </div>
              )}
              <div style={{ padding: 24 }}>
                <div className="eyebrow">{p.tag}</div>
                <div style={{ fontSize: 18, fontWeight: 600, marginTop: 8 }}>{p.loc}</div>
                <p style={{ fontSize: 14, color: "var(--muted)", margin: "8px 0 16px", lineHeight: 1.5 }}>{p.note}</p>
                <a href="#" className="u-link" style={{ fontSize: 13 }}>Read case study <Icon.ArrowRight/></a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Why choose ======
const WhyChoose = () => {
  const items = [
    { icon: <Icon.Shield size={22}/>, t: "Licensed master electricians", d: "TECL #28442. Every tech is a journeyman or master — no apprentices unsupervised." },
    { icon: <Icon.Clock size={22}/>, t: "Same-day response", d: "Most calls answered within an hour. Six trucks rolling across Travis County daily." },
    { icon: <Icon.Tool size={22}/>, t: "Flat-rate pricing", d: "Quote before we start. No hourly surprises, no upsells, no surprises on the invoice." },
    { icon: <Icon.Check size={22}/>, t: "Lifetime guarantee", d: "Workmanship guaranteed for life. If our wiring fails, we fix it free, forever." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="why-grid">
          <div>
            <div className="eyebrow">Why Kwality</div>
            <h2 className="display-md" style={{ margin: "12px 0 16px" }}>
              The kind of electrician you'd<br/>refer to your mother.
            </h2>
            <p className="lede" style={{ maxWidth: 460 }}>
              We built Kwality Electric to be the antidote to dodgy quotes and no-shows. Every job runs the same way: a real human answers, a licensed pro arrives on time, the work is done to code and to last.
            </p>
            <a href="about.html" className="btn btn-primary btn-lg" style={{ marginTop: 24 }}>About our team <Icon.ArrowRight/></a>
          </div>
          <div className="why-list">
            {items.map((it, i) => (
              <div key={i} className="why-item">
                <div className="svc-icon">{it.icon}</div>
                <div>
                  <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 6 }}>{it.t}</div>
                  <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>{it.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ====== Testimonials ======
const Testimonials = () => {
  const quotes = [
    { q: "They rewired our 1920s craftsman without disturbing a single piece of original trim. Genuine craftsmen.", n: "Margaret Chen", l: "Hyde Park · Whole-home rewire", c: "#D5C5A8" },
    { q: "Three other electricians quoted my EV charger as a two-day job. Kwality did it in four hours, clean as a whistle.", n: "Devon Mitchell", l: "Westlake · EV install", c: "#A8C5D5" },
    { q: "I run a restaurant. They worked overnight so we wouldn't lose a single dinner service. That's a real partner.", n: "Sofia Alvarez", l: "East 6th · Commercial rewire", c: "#C5A8D5" },
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="What clients say"
          title="312 five-star reviews. Here are three."
          action={<a href="#" className="u-link">Read all on Google <Icon.ArrowRight/></a>}
        />
        <div className="testimonial-grid">
          {quotes.map((q, i) => (
            <figure key={i} className="card" style={{ padding: 28, margin: 0, display: "flex", flexDirection: "column" }}>
              <div style={{ display: "flex", gap: 2, marginBottom: 16 }}>
                {[0,1,2,3,4].map(s => <Icon.Star key={s} size={16} color="#FFC233"/>)}
              </div>
              <blockquote style={{ margin: 0, fontSize: 17, lineHeight: 1.5, flex: 1 }}>"{q.q}"</blockquote>
              <figcaption style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 999, background: q.c }}/>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{q.n}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>{q.l}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Service area / map ======
const ServiceArea = () => (
  <section className="section">
    <div className="container">
      <div className="area-grid card-lg" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div className="eyebrow">Service area</div>
          <h2 className="display-md" style={{ margin: "12px 0 16px" }}>
            All of Travis County,<br/>and then some.
          </h2>
          <p className="lede" style={{ maxWidth: 420 }}>
            We dispatch from East 6th and roll to every Austin neighborhood, plus Round Rock, Cedar Park, Pflugerville, Bee Cave, Lakeway, and Buda.
          </p>
          <div style={{ marginTop: 24, display: "flex", gap: 8, flexWrap: "wrap" }}>
            {["78701","78702","78704","78745","78751","78757","78759","Cedar Park","Round Rock","Bee Cave","Lakeway","Pflugerville"].map(z => (
              <span key={z} className="pill" style={{ background: "var(--bg-2)", color: "var(--ink-2)" }}>{z}</span>
            ))}
          </div>
        </div>
        <div className="map-side">
          <svg viewBox="0 0 400 400" style={{ width: "100%", height: "100%", display: "block" }} preserveAspectRatio="xMidYMid slice">
            <defs>
              <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(14,27,44,0.06)" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="400" height="400" fill="#EEEAE2"/>
            <rect width="400" height="400" fill="url(#grid)"/>
            {/* Stylized Austin shape */}
            <path d="M 80 120 Q 100 80 160 90 Q 220 60 280 100 Q 340 120 330 200 Q 340 280 280 310 Q 220 340 160 320 Q 100 320 80 260 Q 60 180 80 120 Z" fill="rgba(14,27,44,0.05)" stroke="rgba(14,27,44,0.2)" strokeWidth="1.5"/>
            {/* Coverage zone */}
            <circle cx="200" cy="200" r="140" fill="#FFC233" fillOpacity="0.12" stroke="#FFC233" strokeWidth="1.5" strokeDasharray="4 4"/>
            {/* HQ */}
            <circle cx="200" cy="200" r="8" fill="#0E1B2C"/>
            <circle cx="200" cy="200" r="14" fill="none" stroke="#0E1B2C" strokeOpacity="0.3"/>
            <text x="212" y="204" fontSize="11" fontWeight="600" fill="#0E1B2C" fontFamily="Geist, sans-serif">HQ · East 6th</text>
            {/* Active jobs */}
            {[[140, 140], [260, 130], [150, 270], [280, 250], [180, 320], [320, 200]].map(([x,y], i) => (
              <g key={i}>
                <circle cx={x} cy={y} r="4" fill="#FFC233"/>
                <circle cx={x} cy={y} r="4" fill="#FFC233" opacity="0.3">
                  <animate attributeName="r" values="4;14;4" dur="2s" begin={`${i * 0.3}s`} repeatCount="indefinite"/>
                  <animate attributeName="opacity" values="0.3;0;0.3" dur="2s" begin={`${i * 0.3}s`} repeatCount="indefinite"/>
                </circle>
              </g>
            ))}
          </svg>
          <div className="card" style={{ position: "absolute", top: 20, right: 20, padding: "10px 14px", display: "flex", alignItems: "center", gap: 8 }}>
            <div style={{ width: 8, height: 8, borderRadius: 999, background: "#1E7A3A" }}/>
            <div style={{ fontSize: 12, fontWeight: 600 }}>6 trucks dispatched today</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ====== Mount ======
function HomePage() {
  return (
    <>
      <Nav active="home"/>
      <Hero/>
      <TrustBar/>
      <ServicesChips/>
      <HowItWorks/>
      <FeaturedWork/>
      <WhyChoose/>
      <Testimonials/>
      <ServiceArea/>
      <CtaCard/>
      <Footer/>
    </>
  );
}

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