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

const SERVICE_OPTIONS = [
  { id: "panel", label: "Panel upgrade", icon: <Icon.Bolt size={16}/>, from: "From $1,890" },
  { id: "ev", label: "EV charger install", icon: <Icon.Car size={18}/>, from: "From $640" },
  { id: "rewire", label: "Whole-home rewire", icon: <Icon.Home size={18}/>, from: "Custom quote" },
  { id: "lighting", label: "Lighting design / install", icon: <Icon.Bolt size={16}/>, from: "From $320" },
  { id: "ac", label: "AC / HVAC wiring", icon: <Icon.Wind size={18}/>, from: "From $420" },
  { id: "hottub", label: "Hot tub circuit", icon: <Icon.Droplet size={18}/>, from: "From $780" },
  { id: "outlet", label: "Outlet / switch work", icon: <Icon.Tool size={18}/>, from: "From $180" },
  { id: "emergency", label: "Emergency repair", icon: <Icon.Shield size={18}/>, from: "$240 call-out" },
  { id: "other", label: "Something else", icon: <Icon.Tool size={18}/>, from: "We'll figure it out" },
];

const TIME_SLOTS = ["Today (urgent)", "Tomorrow morning", "Tomorrow afternoon", "This week", "Next week", "Flexible"];
const PROPERTY = ["Single-family home", "Condo / townhome", "Apartment / rental", "Commercial property", "New construction"];

const ScheduleHero = () => (
  <section className="section" style={{ paddingTop: 32, paddingBottom: 16 }}>
    <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"/>Free estimate · No obligation</div>
          <h1 className="display-xl" style={{ margin: "20px 0 0" }}>
            Book in<br/>
            <span style={{ background: "var(--yellow)", padding: "0 14px", borderRadius: 16, display: "inline-block", transform: "rotate(-1deg)" }}>60 seconds.</span>
          </h1>
          <p className="lede" style={{ marginTop: 20, maxWidth: 520 }}>
            Tell us what you need, where you are, and when you'd like us. We'll text you a confirmation with the truck's ETA — usually within an hour.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div className="card" style={{ padding: 20, display: "flex", alignItems: "center", gap: 14 }}>
            <div className="svc-icon"><Icon.Phone size={18}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: "var(--muted)", fontWeight: 600 }}>PREFER TO CALL?</div>
              <a href="tel:7374440405" style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.4 }}>(737) 444-0405</a>
              <div style={{ fontSize: 12, color: "var(--muted)" }}>Mon–Sat 7am–8pm · 24/7 emergency</div>
            </div>
          </div>
          <div className="card" style={{ padding: 20, display: "flex", alignItems: "center", gap: 14 }}>
            <div className="svc-icon"><Icon.Mail size={18}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: "var(--muted)", fontWeight: 600 }}>EMAIL</div>
              <a href="mailto:hello@kwalityelectric.com" style={{ fontSize: 18, fontWeight: 600 }}>hello@kwalityelectric.com</a>
              <div style={{ fontSize: 12, color: "var(--muted)" }}>Replies within 2 business hours</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const BookingFlow = () => {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    service: "", property: "", urgency: "",
    name: "", phone: "", email: "", zip: "", address: "", notes: "",
  });
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const canNext1 = data.service && data.property;
  const canNext2 = data.urgency && data.zip;
  const canSubmit = data.name && data.phone;

  return (
    <section className="section" style={{ paddingTop: 32 }}>
      <div className="container">
        <div className="schedule-grid">
          <div className="card-lg" style={{ padding: 40 }}>
            <div className="stepper">
              {["What", "When", "Who"].map((s, i) => (
                <div key={s} className={`stepper-step ${step === i + 1 ? "active" : step > i + 1 ? "done" : ""}`}>
                  <span className="stepper-num">{step > i + 1 ? "✓" : i + 1}</span>
                  <span>{s}</span>
                </div>
              ))}
              <div className={`stepper-step ${step === 4 ? "active" : ""}`}>
                <span className="stepper-num">✓</span>
                <span>Done</span>
              </div>
            </div>

            {step === 1 && (
              <div>
                <div className="eyebrow">Step 1 of 3</div>
                <h2 className="display-sm" style={{ margin: "8px 0 24px" }}>What do you need done?</h2>
                <div className="choice-grid">
                  {SERVICE_OPTIONS.map(s => (
                    <div key={s.id} className={`choice ${data.service === s.id ? "selected" : ""}`} onClick={() => set("service", s.id)}>
                      <div className="choice-icon">{s.icon}</div>
                      <div style={{ flex: 1 }}>
                        <div>{s.label}</div>
                        <div style={{ fontSize: 11, fontWeight: 500, opacity: 0.7, marginTop: 2 }}>{s.from}</div>
                      </div>
                      {data.service === s.id && <Icon.Check size={16}/>}
                    </div>
                  ))}
                </div>

                <div style={{ marginTop: 28 }}>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>Property type</div>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {PROPERTY.map(p => (
                      <button key={p} className={`pill ${data.property === p ? "pill-ink" : ""}`}
                        style={data.property === p ? {} : { background: "var(--bg-2)", color: "var(--ink-2)", cursor: "pointer" }}
                        onClick={() => set("property", p)}>
                        {p}
                      </button>
                    ))}
                  </div>
                </div>

                <div style={{ marginTop: 32, display: "flex", justifyContent: "flex-end" }}>
                  <button className="btn btn-primary btn-lg" disabled={!canNext1} onClick={() => setStep(2)} style={{ opacity: canNext1 ? 1 : 0.4 }}>
                    Next: when <Icon.ArrowRight/>
                  </button>
                </div>
              </div>
            )}

            {step === 2 && (
              <div>
                <div className="eyebrow">Step 2 of 3</div>
                <h2 className="display-sm" style={{ margin: "8px 0 24px" }}>When works for you?</h2>
                <div className="choice-grid">
                  {TIME_SLOTS.map(t => (
                    <div key={t} className={`choice ${data.urgency === t ? "selected" : ""}`} onClick={() => set("urgency", t)}>
                      <div className="choice-icon"><Icon.Clock size={16}/></div>
                      <div style={{ flex: 1 }}>{t}</div>
                      {data.urgency === t && <Icon.Check size={16}/>}
                    </div>
                  ))}
                </div>

                <div style={{ marginTop: 28 }}>
                  <div className="form-grid">
                    <div className="field">
                      <label>ZIP code</label>
                      <input value={data.zip} maxLength={5} onChange={(e) => set("zip", e.target.value)} placeholder="78704"/>
                    </div>
                    <div className="field">
                      <label>Street address (optional)</label>
                      <input value={data.address} onChange={(e) => set("address", e.target.value)} placeholder="2400 E 6th St"/>
                    </div>
                  </div>
                </div>

                <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", gap: 12 }}>
                  <button className="btn btn-outline btn-lg" onClick={() => setStep(1)}>← Back</button>
                  <button className="btn btn-primary btn-lg" disabled={!canNext2} onClick={() => setStep(3)} style={{ opacity: canNext2 ? 1 : 0.4 }}>
                    Next: contact info <Icon.ArrowRight/>
                  </button>
                </div>
              </div>
            )}

            {step === 3 && (
              <div>
                <div className="eyebrow">Step 3 of 3</div>
                <h2 className="display-sm" style={{ margin: "8px 0 24px" }}>How do we reach you?</h2>

                <div className="form-grid">
                  <div className="field">
                    <label>Full name *</label>
                    <input value={data.name} onChange={(e) => set("name", e.target.value)} placeholder="Jane Doe"/>
                  </div>
                  <div className="field">
                    <label>Phone *</label>
                    <input value={data.phone} onChange={(e) => set("phone", e.target.value)} placeholder="(512) 555-0123"/>
                  </div>
                </div>

                <div className="field" style={{ marginTop: 16 }}>
                  <label>Email</label>
                  <input value={data.email} onChange={(e) => set("email", e.target.value)} placeholder="jane@example.com"/>
                </div>

                <div className="field" style={{ marginTop: 16 }}>
                  <label>Anything else we should know?</label>
                  <textarea value={data.notes} onChange={(e) => set("notes", e.target.value)} placeholder="Photos, parking notes, gate codes, urgency, etc."/>
                </div>

                <label style={{ display: "flex", alignItems: "flex-start", gap: 10, marginTop: 20, fontSize: 13, color: "var(--ink-2)" }}>
                  <input type="checkbox" defaultChecked style={{ marginTop: 3 }}/>
                  <span>Text me confirmation &amp; truck ETA. Standard rates apply.</span>
                </label>

                <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", gap: 12 }}>
                  <button className="btn btn-outline btn-lg" onClick={() => setStep(2)}>← Back</button>
                  <button className="btn btn-yellow btn-lg" disabled={!canSubmit} onClick={() => setStep(4)} style={{ opacity: canSubmit ? 1 : 0.4 }}>
                    Request my free estimate <Icon.ArrowRight/>
                  </button>
                </div>
              </div>
            )}

            {step === 4 && (
              <div style={{ textAlign: "center", padding: "32px 0" }}>
                <div style={{ width: 80, height: 80, borderRadius: 999, background: "var(--green-bg)", color: "var(--green)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 24 }}>
                  <Icon.Check size={36}/>
                </div>
                <h2 className="display-md" style={{ margin: "0 0 12px" }}>Request received.</h2>
                <p className="lede" style={{ maxWidth: 480, margin: "0 auto" }}>
                  Thanks, {data.name.split(" ")[0]}. We're confirming your slot now — expect a text to {data.phone} within the next hour with your truck's ETA.
                </p>
                <div className="card" style={{ padding: 24, maxWidth: 480, margin: "32px auto 0", textAlign: "left" }}>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>Your request</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                      <span style={{ color: "var(--muted)" }}>Service</span>
                      <span style={{ fontWeight: 600 }}>{SERVICE_OPTIONS.find(s => s.id === data.service)?.label}</span>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                      <span style={{ color: "var(--muted)" }}>Property</span>
                      <span style={{ fontWeight: 600 }}>{data.property}</span>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                      <span style={{ color: "var(--muted)" }}>When</span>
                      <span style={{ fontWeight: 600 }}>{data.urgency}</span>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                      <span style={{ color: "var(--muted)" }}>Location</span>
                      <span style={{ fontWeight: 600 }}>{data.zip}</span>
                    </div>
                  </div>
                </div>
                <button className="btn btn-outline btn-lg" style={{ marginTop: 24 }} onClick={() => { setStep(1); setData({ service: "", property: "", urgency: "", name: "", phone: "", email: "", zip: "", address: "", notes: "" }); }}>
                  Book another visit
                </button>
              </div>
            )}
          </div>

          {/* Sidebar */}
          <aside style={{ display: "flex", flexDirection: "column", gap: 16, position: "sticky", top: 100 }}>
            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow">Current dispatch</div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 12 }}>
                <div style={{ width: 10, height: 10, borderRadius: 999, background: "var(--green)" }}/>
                <div style={{ fontWeight: 600 }}>3 techs available right now</div>
              </div>
              <div style={{ marginTop: 16, padding: 16, background: "var(--bg-2)", borderRadius: 12, display: "flex", justifyContent: "space-between" }}>
                <div>
                  <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600 }}>AVG RESPONSE</div>
                  <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4 }}>~ 90 min</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600 }}>TODAY</div>
                  <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4 }}>6 trucks</div>
                </div>
              </div>
            </div>

            <div className="card" style={{ padding: 24, background: "var(--ink)", color: "var(--bg)" }}>
              <div className="eyebrow" style={{ color: "var(--yellow)" }}>Power emergency?</div>
              <div style={{ fontSize: 20, fontWeight: 600, marginTop: 8, lineHeight: 1.3 }}>
                Burning smell, sparking, total power loss?
              </div>
              <p style={{ fontSize: 14, color: "rgba(244,241,236,0.7)", marginTop: 8, lineHeight: 1.5 }}>
                Skip the form. Call us — we dispatch immediately, 24/7.
              </p>
              <a href="tel:7374440405" className="btn btn-yellow btn-lg" style={{ marginTop: 16, width: "100%", justifyContent: "center" }}>
                <Icon.Phone/> (737) 444-0405
              </a>
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow">Visit our shop</div>
              <div style={{ fontSize: 16, fontWeight: 600, marginTop: 10, lineHeight: 1.4 }}>
                2400 E 6th St, Suite 200<br/>Austin, TX 78702
              </div>
              <div style={{ display: "flex", gap: 10, marginTop: 12, fontSize: 13, color: "var(--ink-2)" }}>
                <Icon.Clock size={14}/>
                <div>Mon–Sat 7am–8pm<br/>Sun · emergency only</div>
              </div>
              <div className="ph" style={{ marginTop: 16, aspectRatio: "16/10", borderRadius: 12 }}>
                map preview
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

const ContactBand = () => (
  <section id="contact" className="section">
    <div className="container">
      <div className="card-lg contact-band" style={{ padding: 48, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
        {[
          { icon: <Icon.Phone size={20}/>, t: "Call us", main: "(737) 444-0405", sub: "Mon–Sat 7am–8pm · 24/7 emergency line", href: "tel:7374440405" },
          { icon: <Icon.Mail size={20}/>, t: "Email", main: "hello@kwalityelectric.com", sub: "Replies within 2 business hours", href: "mailto:hello@kwalityelectric.com" },
          { icon: <Icon.Pin size={20}/>, t: "Visit", main: "2400 E 6th St, #200", sub: "Austin, TX 78702", href: "#" },
        ].map((c, i) => (
          <a key={i} href={c.href} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="svc-icon">{c.icon}</div>
            <div className="eyebrow">{c.t}</div>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.4 }}>{c.main}</div>
            <div style={{ fontSize: 13, color: "var(--muted)" }}>{c.sub}</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

function SchedulePage() {
  return (
    <>
      <Nav active="schedule"/>
      <ScheduleHero/>
      <BookingFlow/>
      <ContactBand/>
      <Footer/>
    </>
  );
}

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