/* global React */
function About({ navigate }) {
  return (
    <div className="page">
      <section className="about-hero">
        <div className="eyebrow" style={{ marginBottom: 18 }}>About District 52</div>
        <h1>A district office focused on building owners. Not just agencies.</h1>
        <p className="lead">We help entrepreneurs build and grow their own businesses with the training, mentorship, and support needed to succeed long term. We work alongside agents across DFW by providing hands-on coaching, business development resources, and a growth-focused network designed to help them scale with confidence.




        </p>
      </section>

      <section className="about-photo-band">
        <img src="assets/dallas-hq-presenting.png" alt="Gary Edmonds presenting at the District 52 Dallas/Fort Worth office" />
        <div className="caption">Gary Edmonds at the Dallas HQ · District 52 Dallas/Fort Worth</div>
      </section>

      <section style={{ padding: "100px 32px 40px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <h2 style={{ font: "600 56px/1.07 var(--font-display)", letterSpacing: "-0.6px", margin: "0 0 24px", maxWidth: 820 }}>
            What the district is for.
          </h2>
          <p style={{ font: "var(--type-lead-airy)", letterSpacing: "var(--type-lead-airy-ls)", color: "var(--color-ink-muted-80)", margin: "0 0 0", maxWidth: 760 }}>We help entrepreneurs build successful insurance businesses with the training, support, and leadership needed to grow long term. Our role is simple: help great people launch strong, scale faster, and build something they truly own.




          </p>
        </div>
      </section>

      <section className="about-pillars">
        <div className="about-pillar">
          <div className="num">01</div>
          <h4>Recruit.</h4>
          <p>We identify driven, business-minded people who want more than just a job. From career changers to experienced professionals, we help future agency owners take the leap into entrepreneurship.</p>
        </div>
        <div className="about-pillar">
          <div className="num">02</div>
          <h4>Train.</h4>
          <p>We provide hands-on coaching, sales development, and real-world business training designed to help agents succeed early and continue growing over time.</p>
        </div>
        <div className="about-pillar">
          <div className="num">03</div>
          <h4>Support.</h4>
          <p>Our agents receive ongoing mentorship, operational guidance, recruiting support, and growth strategies to help them build profitable, sustainable businesses.</p>
        </div>
      </section>

      {/* Leadership row */}
      <section style={{ background: "var(--color-canvas-parchment)", padding: "100px 32px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Leadership</div>
          <h2 style={{ font: "600 48px/1.08 var(--font-display)", letterSpacing: "-0.6px", margin: "0 0 48px" }}>
            The people who run the district.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {[
            { name: "Gary Edmonds", role: "District Manager · since 1989", initials: "GE", color: "#0066cc" },
            { name: "Brenda Wilhite", role: "Office Manager", initials: "BW", color: "#1d1d1f" },
            { name: "Amy Temple", role: "Agency Business Consultant", initials: "AT", color: "#7a7a7a" },
            { name: "Collin Edmonds", role: "Associate District Manager", initials: "CE", color: "#0066cc" },
            { name: "Antonio del Rincon", role: "Associate District Manager", initials: "AR", color: "#1d1d1f" }].
            map((p, i) =>
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 16 }}>
                <div style={{ width: 64, height: 64, borderRadius: 9999, background: p.color, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", font: "600 22px/1 var(--font-display)", letterSpacing: "-0.4px" }}>{p.initials}</div>
                <div>
                  <div style={{ font: "var(--type-body-strong)", letterSpacing: "var(--type-body-strong-ls)" }}>{p.name}</div>
                  <div style={{ font: "var(--type-caption)", letterSpacing: "var(--type-caption-ls)", color: "var(--color-ink-muted-48)", marginTop: 2 }}>{p.role}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Sublink card to Our Agents */}
      <section style={{ padding: "100px 32px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", border: "1px solid var(--color-hairline)", borderRadius: 28, padding: 56, display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 32 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Our Agents</div>
            <h2 style={{ font: "600 40px/1.1 var(--font-display)", letterSpacing: "-0.4px", margin: "0 0 12px" }}>Meet the Agents we work with.</h2>
            <p style={{ font: "var(--type-body)", letterSpacing: "var(--type-body-ls)", color: "var(--color-ink-muted-80)", margin: 0, maxWidth: 540 }}>A directory of who they are and where they office at.


            </p>
          </div>
          <a className="btn-pill-dark" href="#/agents" onClick={(e) => {e.preventDefault();navigate("agents");}} style={{ backgroundColor: "rgb(0, 102, 204)" }}>
            Browse our agents
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
          </a>
        </div>
      </section>
    </div>);

}

window.About = About;