/* global React, ReactDOM, Nav, Footer, Icon, SectionHead, CtaCard */

const AboutHero = () => (
  <section className="section" style={{ paddingTop: 40 }}>
    <div className="container">
      <div className="about-hero">
        <div>
          <div className="pill pill-yellow"><span className="pill-dot"/>About Kwality Electric</div>
          <h1 className="display-xl" style={{ margin: "20px 0 0" }}>
            A different kind<br/>of electrician.
          </h1>
          <p className="lede" style={{ marginTop: 20, maxWidth: 540 }}>
            Founded in 2014 by a master electrician who got tired of dodgy quotes, missed appointments, and watered-down workmanship. Today we're a 14-person team running six trucks across Austin — but the rules haven't changed.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
            <a href="schedule.html" className="btn btn-primary btn-lg">Book a visit <Icon.ArrowRight/></a>
            <a href="#team" className="btn btn-outline btn-lg">Meet the team</a>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div className="ph" style={{ aspectRatio: "4/5", borderRadius: 20 }}>
            founder portrait — workshop / van background
          </div>
          <div className="card" style={{ position: "absolute", bottom: -16, left: -16, padding: "16px 20px", maxWidth: 220 }}>
            <div style={{ fontSize: 12, color: "var(--muted)", fontWeight: 600 }}>FOUNDER</div>
            <div style={{ fontSize: 17, fontWeight: 600, marginTop: 4 }}>Marcus Rivera</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Master electrician, 23 yrs</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Stats = () => (
  <section className="section">
    <div className="container">
      <div className="stats-grid">
        {[
          ["1,247", "projects completed"],
          ["4.9 ★", "Google rating (312 reviews)"],
          ["~ 90 min", "average response time"],
          ["12 years", "serving Austin"],
        ].map(([k, v], i) => (
          <div key={i} className="stat-cell">
            <div style={{ fontSize: 44, fontWeight: 700, letterSpacing: -1.6, lineHeight: 1 }}>{k}</div>
            <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 10, textTransform: "uppercase", fontWeight: 600, letterSpacing: 0.4 }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Story = () => (
  <section className="section">
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56, alignItems: "start" }} className="about-hero">
        <div>
          <div className="eyebrow">Our story</div>
          <h2 className="display-md" style={{ margin: "12px 0 0" }}>
            Built on the<br/>jobs nobody else<br/>wanted to take.
          </h2>
        </div>
        <div style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-2)", display: "flex", flexDirection: "column", gap: 20 }}>
          <p>Marcus started Kwality Electric in 2014 out of a single van and a frustration that runs through every trade: too many contractors who under-promise and under-deliver, too many homeowners stuck with half-finished jobs.</p>
          <p>The fix was simple. Quote in writing. Show up on time. Send a real master electrician — not a kid in a polo. Document everything. Stand behind the work forever.</p>
          <p>Twelve years later, we run six service trucks, employ fourteen master and journeyman electricians, and answer the phone ourselves at 2am. The fundamentals haven't changed.</p>
        </div>
      </div>
    </div>
  </section>
);

const Values = () => {
  const values = [
    { icon: <Icon.Clock size={22}/>, t: "On time, or it's free", d: "If we're more than 15 minutes late to a scheduled visit without warning, the estimate's on the house. We've owed it twice this year." },
    { icon: <Icon.Shield size={22}/>, t: "Licensed eyes on every job", d: "Every truck has a journeyman or master electrician on it. No apprentices unsupervised — yes, even on the small jobs." },
    { icon: <Icon.Check size={22}/>, t: "Guaranteed forever", d: "Our workmanship guarantee transfers with the property. If our wiring fails because of how we installed it, we fix it. Period." },
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead eyebrow="Our values" title="Three promises we won't break."/>
        <div className="values-grid">
          {values.map((v, i) => (
            <div key={i} className="card" style={{ padding: 32 }}>
              <div className="svc-icon">{v.icon}</div>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.3, marginTop: 20 }}>{v.t}</div>
              <p style={{ fontSize: 15, color: "var(--ink-2)", marginTop: 10, lineHeight: 1.6 }}>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Team = () => {
  const team = [
    { n: "Marcus Rivera", r: "Founder · Master electrician", y: "23 yrs", c: "#D5C5A8" },
    { n: "Jen Okafor", r: "Operations lead", y: "8 yrs", c: "#A8C5D5" },
    { n: "Diego Velasquez", r: "Master electrician", y: "16 yrs", c: "#C5A8D5" },
    { n: "Aisha Walker", r: "Master electrician · EV lead", y: "11 yrs", c: "#A8D5B9" },
    { n: "Sam Kowalski", r: "Journeyman · Commercial", y: "9 yrs", c: "#D5B9A8" },
    { n: "Priya Shah", r: "Journeyman · Residential", y: "6 yrs", c: "#B9A8D5" },
    { n: "Ty Brennan", r: "Journeyman · HVAC", y: "7 yrs", c: "#D5A8B9" },
    { n: "Carmen Diaz", r: "Apprentice · Year 3", y: "3 yrs", c: "#A8D5D5" },
  ];
  return (
    <section id="team" className="section">
      <div className="container">
        <SectionHead
          eyebrow="The crew"
          title="The people who'll be in your house."
          lead="Fourteen full-time electricians on staff. No subcontractors. No revolving door. The person we send is one of these."
        />
        <div className="team-grid">
          {team.map((p, i) => (
            <div key={i} className="card" style={{ overflow: "hidden" }}>
              <div className="ph" style={{ aspectRatio: "1/1", background: `repeating-linear-gradient(135deg, ${p.c} 0 14px, ${p.c}88 14px 15px)` }}>
                portrait
              </div>
              <div style={{ padding: 20 }}>
                <div style={{ fontSize: 16, fontWeight: 600 }}>{p.n}</div>
                <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 4 }}>{p.r}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 8, fontFamily: "Geist Mono, monospace" }}>{p.y} in the trade</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ServiceArea = () => (
  <section id="service-area" 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" }}>Travis County<br/>and the close-ins.</h2>
          <p className="lede" style={{ maxWidth: 460 }}>
            Six trucks dispatched daily from East 6th. We cover every Austin neighborhood plus Round Rock, Cedar Park, Pflugerville, Bee Cave, Lakeway, Buda, and Manor.
          </p>
          <div style={{ marginTop: 24, display: "flex", gap: 8, flexWrap: "wrap" }}>
            {["78701","78702","78703","78704","78705","78745","78751","78757","78759","Cedar Park","Round Rock","Bee Cave","Lakeway","Pflugerville","Manor","Buda"].map(z => (
              <span key={z} className="pill" style={{ background: "var(--bg-2)", color: "var(--ink-2)" }}>{z}</span>
            ))}
          </div>
          <a href="schedule.html" className="btn btn-primary btn-lg" style={{ marginTop: 24, alignSelf: "flex-start" }}>
            Check my address <Icon.ArrowRight/>
          </a>
        </div>
        <div className="map-side">
          <svg viewBox="0 0 400 400" style={{ width: "100%", height: "100%", display: "block" }} preserveAspectRatio="xMidYMid slice">
            <defs>
              <pattern id="gridA" 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(#gridA)"/>
            <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"/>
            <circle cx="200" cy="200" r="140" fill="#FFC233" fillOpacity="0.12" stroke="#FFC233" strokeWidth="1.5" strokeDasharray="4 4"/>
            <circle cx="200" cy="200" r="8" fill="#0E1B2C"/>
            <text x="212" y="204" fontSize="11" fontWeight="600" fill="#0E1B2C" fontFamily="Geist, sans-serif">HQ · East 6th</text>
          </svg>
        </div>
      </div>
    </div>
  </section>
);

const Certifications = () => (
  <section className="section">
    <div className="container">
      <SectionHead
        eyebrow="Credentials"
        title="Licensed, insured, and audited."
      />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16 }} className="cred-grid">
        {[
          ["TECL", "#28442", "TX Master license"],
          ["BBB", "A+", "Accredited since 2015"],
          ["GAF", "Cert.", "Solar partner"],
          ["IBEW", "Local 520", "Union-trained"],
          ["NEC", "2023", "Current code"],
          ["INS", "$2M", "General liability"],
        ].map(([k, v, l], i) => (
          <div key={i} className="card" style={{ padding: 20, textAlign: "center" }}>
            <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600, letterSpacing: 0.5 }}>{k}</div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, margin: "6px 0" }}>{v}</div>
            <div style={{ fontSize: 11, color: "var(--ink-2)" }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

function AboutPage() {
  return (
    <>
      <Nav active="about"/>
      <AboutHero/>
      <Stats/>
      <Story/>
      <Values/>
      <Team/>
      <Certifications/>
      <ServiceArea/>
      <CtaCard/>
      <Footer/>
    </>
  );
}

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