/* global React */
/* Our Agents — the 44 District 52 agency owners.
   Data lives in agents-data.jsx (auto-generated from the uploaded spreadsheet).
   To update a name / agency / city, edit agents-data.jsx. */

function OurAgents({ navigate }) {
  const agents = window.AGENTS_DATA || [];

  return (
    <div className="page">
      <section className="agents-hero">
        <div className="eyebrow" style={{ marginBottom: 14 }}>Our agents</div>
        <h1>{agentsCountWord(agents.length)} agencies. One district.</h1>
        <p>The agency owners of District 52 across Dallas–Fort Worth.</p>
      </section>

      <section className="agents-grid">
        {agents.map((a, idx) =>
        <article key={idx} className="agent-card">
            <div className="photo">
              {a.photo ?
            <img src={a.photo} alt={a.name} loading="lazy" /> :
            <InitialsAvatar name={a.name} />}
            </div>
            <div className="body">
              <h3>{a.name}</h3>
              <div className="role">Agent</div>
              <div className="agency" style={{ marginTop: 4 }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                {a.agency}
              </div>
              {a.city && (
                <div className="agency" style={{ marginTop: 6 }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
                  {a.city}
                </div>
              )}
            </div>
          </article>
        )}
      </section>

      <section className="cta-tile">
        <h2>Want this on your door?</h2>
        <p>Talk with us about the three paths to agency ownership in DFW.</p>
        <div style={{ display: "inline-flex", gap: 12 }}>
          <a href="#/opportunities" className="btn-pill-dark" onClick={(e) => {e.preventDefault();navigate("opportunities");}}>See opportunities</a>
          <a href="#/contact" className="btn-pill-outline" onClick={(e) => {e.preventDefault();navigate("contact");}}>Talk to a recruiter</a>
        </div>
      </section>
    </div>);

}

/* Initials avatar shown when an agent doesn't have a photo yet. */
function InitialsAvatar({ name }) {
  const initials = name.split(/\s+/).filter(w => w.length > 1 || /^[A-Z]/.test(w)).map(w => w[0]).slice(0, 2).join("").toUpperCase();
  // Deterministic muted color per name
  let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
  const hue = h % 360;
  const bg = `hsl(${hue}, 18%, 38%)`;
  return (
    <div style={{ width: "100%", height: "100%", background: bg, color: "rgba(255,255,255,0.92)", display: "flex", alignItems: "center", justifyContent: "center", font: "600 64px/1 var(--font-display)", letterSpacing: "-2px" }}>
      {initials || "—"}
    </div>);

}

function agentsCountWord(n) {
  const words = { 40: "Forty", 41: "Forty-one", 42: "Forty-two", 43: "Forty-three", 44: "Forty-four", 45: "Forty-five", 46: "Forty-six", 47: "Forty-seven", 48: "Forty-eight", 49: "Forty-nine", 50: "Fifty" };
  return words[n] || String(n);
}

window.OurAgents = OurAgents;