/* global React */
/* Opportunities — three paths to agency ownership.
   Matches the structure from the provided reference: hero,
   three path cards (Direct / Associate / Protégé), and a closing
   "What agency owners are building" section. */

function Opportunities({ navigate }) {
  return (
    <div className="page">
      {/* Hero */}
      <section className="opp-hero" style={{ textAlign: "left", padding: "120px 32px 56px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Opportunities</div>
          <h1 style={{ textAlign: "left", maxWidth: 980, margin: "0 0 18px" }}>
            Paths to agency ownership.
          </h1>
          <p style={{ textAlign: "left", maxWidth: 760, margin: 0 }}>
            District 52 supports multiple paths to ownership across Dallas–Fort
            Worth, depending on experience, background, and qualifications.
          </p>
        </div>
      </section>

      {/* Path 1 — Direct Agency Ownership */}
      <PathCard
        id="direct"
        title="Direct agency ownership."
        intro="For experienced professionals who meet eligibility and capital requirements and are prepared to step directly into agency ownership."
        listLabel="Key considerations include:"
        items={[
          ["Award",  "Relevant business, sales, or leadership experience"],
          ["Doc",    "Applicable licensing requirements"],
          ["Check",  "Capital requirements as defined by program guidelines"]
        ]}
        outro="This path allows qualified candidates to begin building their agency with ownership responsibilities from day one."
        imageSrc="assets/direct-ownership-office.webp"
        imageAlt="Richard Salinas's agency office in Grand Prairie, TX"
        imageCaption="Richard Salinas Office - Grand Prairie, TX"
        navigate={navigate}
      />

      {/* Path 2 — Associate Agent */}
      <PathCard
        id="associate"
        title="Associate Agent path."
        intro="For business professionals who want to demonstrate performance and readiness before transitioning to ownership."
        listLabel="This path offers:"
        items={[
          ["Track",  "A structured opportunity to build experience inside an existing agency"],
          ["Award",  "Performance-based progression toward ownership"],
          ["Doc",    "Potential to reduce or waive future capital requirements based on results"]
        ]}
        outro="Well-suited for individuals with strong professional backgrounds who prefer to prove execution before assuming full ownership."
        imageSrc="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1200&h=900&fit=crop"
        imageAlt="Two business professionals in a meeting at a desk"
        imageCaption="Working inside an existing agency"
        navigate={navigate}
      />

      {/* Path 3 — Protégé Mentorship */}
      <PathCard
        id="protege"
        title="Protégé Mentorship path."
        intro="For individuals who want hands-on experience and structured development before agency ownership."
        listLabel="Through this path, candidates:"
        items={[
          ["Track",   "Work within an existing agency environment"],
          ["Award",   "Develop business, leadership, and operational skills"],
          ["Check",   "Participate in structured training programs"],
          ["Rocket",  "May have the opportunity to move toward ownership after meeting program requirements"]
        ]}
        outro="This path emphasizes preparation, mentorship, and readiness."
        imageSrc="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=1200&h=900&fit=crop"
        imageAlt="A senior professional mentoring a younger colleague at a laptop"
        imageCaption="Learning alongside an agent"
        navigate={navigate}
      />

      {/* What agency owners are building */}
      <section style={{ background: "var(--color-canvas)", padding: "120px 32px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 80, alignItems: "center" }} className="owners-grid">
          <div>
            <h2 style={{ font: "600 64px/1.04 var(--font-display)", letterSpacing: "-1.2px", margin: "0 0 22px", textWrap: "balance" }}>
              What agency owners are building.
            </h2>
            <p style={{ font: "var(--type-lead-airy)", letterSpacing: "var(--type-lead-airy-ls)", color: "var(--color-ink-muted-80)", margin: "0 0 28px", maxWidth: 540 }}>
              Agency owners in District 52 are building more than a book of
              business. They are building:
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "0 0 32px", display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                "Independent operations they lead and manage",
                "Teams and systems that support growth",
                "Long-term business assets developed over time"
              ].map(t => (
                <li key={t} style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <span style={{ flex: "0 0 24px", width: 24, height: 24, borderRadius: 9999, background: "var(--color-primary)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 2 }}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                  </span>
                  <span style={{ font: "var(--type-body)", letterSpacing: "var(--type-body-ls)", color: "var(--color-ink)" }}>{t}</span>
                </li>
              ))}
            </ul>
            <p style={{ font: "var(--type-body)", letterSpacing: "var(--type-body-ls)", color: "var(--color-ink-muted-80)", margin: 0, maxWidth: 540 }}>
              Growth and income potential are tied to performance, discipline,
              and execution — not guarantees.
            </p>
          </div>

          {/* Collage */}
          <div style={{ position: "relative", height: 540 }} className="owners-collage">
            <RealPhoto
              style={{ position: "absolute", right: 0, top: 0, width: 260, height: 440 }}
              src="assets/owner-chris-stiles-2026.png"
              alt="Christopher Stiles, new agency owner, shaking hands with Gary Edmonds"
              caption="Christopher Stiles · opened 2026"
            />
            <RealPhoto
              style={{ position: "absolute", left: 0, bottom: 0, width: 340, height: 340 }}
              src="assets/owner-joe-wimpee-rockwall.jpg"
              alt="Joe Wimpee Agency office building in Rockwall, TX"
              caption="Joe Wimpee Agency · Rockwall, TX"
            />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-tile">
        <h2>Not sure which path fits?</h2>
        <p>Twenty minutes with a district recruiter and we'll walk you through the eligibility, capital, and timeline for each.</p>
        <div style={{ display: "inline-flex", gap: 12 }}>
          <a href="#/contact" className="btn-pill-dark" onClick={(e) => {e.preventDefault();navigate("contact");}}>Schedule a call</a>
          <a href="#/about" className="btn-pill-outline" onClick={(e) => {e.preventDefault();navigate("about");}}>About District 52</a>
        </div>
      </section>

      <style>{`
        .owners-grid { grid-template-columns: 1.05fr 1fr; }
        @media (max-width: 980px) {
          .owners-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          /* Photos sit below the text, side by side, equal size, centered */
          .owners-collage {
            height: auto !important;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            align-items: start;
            max-width: 520px;
            margin: 0 auto;
          }
          .owners-collage > div {
            position: static !important;
            inset: auto !important;
            left: auto !important; right: auto !important;
            top: auto !important; bottom: auto !important;
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 3 / 4;
          }
        }
      `}</style>
    </div>);

}

/* ============================================================
   PathCard — title + intro on top, two-column body (list + photo).
   ============================================================ */
function PathCard({ id, title, intro, listLabel, items, outro, imageColor, imageInitials, imageCaption, imageSrc, imageAlt, navigate }) {
  return (
    <section id={id} style={{ padding: "0 32px 40px", scrollMarginTop: 24 }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", background: "var(--color-canvas-parchment)", borderRadius: 28, padding: "56px 56px 64px" }} className="path-card">
        {/* Header — title left, intro right */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56, alignItems: "start", marginBottom: 48 }} className="path-header">
          <h2 style={{ font: "600 48px/1.04 var(--font-display)", letterSpacing: "-1px", margin: 0, color: "var(--color-ink)", textWrap: "balance" }}>
            {title}
          </h2>
          <p style={{ font: "var(--type-lead-airy)", letterSpacing: "var(--type-lead-airy-ls)", color: "var(--color-ink-muted-80)", margin: 0 }}>
            {intro}
          </p>
        </div>

        {/* Body — list + photo */}
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 56, alignItems: "center" }} className="path-body">
          <div>
            <div style={{ font: "var(--type-body-strong)", letterSpacing: "var(--type-body-strong-ls)", color: "var(--color-ink)", marginBottom: 18 }}>
              {listLabel}
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px", display: "flex", flexDirection: "column", gap: 14 }}>
              {items.map(([iconKey, text], i) => (
                <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <span style={{ flex: "0 0 28px", width: 28, height: 28, borderRadius: 8, background: "#fff", color: "var(--color-primary)", display: "inline-flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--color-hairline)" }}>
                    <PathIcon name={iconKey} />
                  </span>
                  <span style={{ font: "var(--type-body)", letterSpacing: "var(--type-body-ls)", color: "var(--color-ink)" }}>{text}</span>
                </li>
              ))}
            </ul>
            <p style={{ font: "var(--type-body)", letterSpacing: "var(--type-body-ls)", color: "var(--color-ink-muted-80)", margin: "0 0 24px" }}>
              {outro}
            </p>
            <a href="#/contact" className="btn-pill-dark" onClick={(e) => {e.preventDefault();navigate("contact");}}>
              Talk to a recruiter
              <svg width="13" height="13" 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>

          {imageSrc ? (
            <RealPhoto
              style={{ width: "100%", aspectRatio: "4/3", height: "auto" }}
              src={imageSrc}
              alt={imageAlt || title}
              caption={imageCaption}
            />
          ) : (
            <PlaceholderPhoto
              style={{ width: "100%", aspectRatio: "4/3", height: "auto" }}
              bg={imageColor}
              initials={imageInitials}
              caption={imageCaption}
            />
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .path-card { padding: 36px 28px 40px; }
          .path-header, .path-body { grid-template-columns: 1fr !important; gap: 24px !important; }
          .path-header h2 { font-size: 36px !important; }
        }
      `}</style>
    </section>);

}

/* ============================================================
   PathIcon — small list-marker icons used inside each path card.
   ============================================================ */
function PathIcon({ name }) {
  const common = { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "Award":
      return (<svg {...common}><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>);
    case "Doc":
      return (<svg {...common}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>);
    case "Check":
      return (<svg {...common}><circle cx="12" cy="12" r="10"></circle><polyline points="9 12 11 14 15 10"></polyline></svg>);
    case "Track":
      return (<svg {...common}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>);
    case "Rocket":
      return (<svg {...common}><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg>);
    default:
      return (<svg {...common}><circle cx="12" cy="12" r="3"></circle></svg>);
  }
}

/* ============================================================
   RealPhoto — same chrome as PlaceholderPhoto, but with a real <img>.
   ============================================================ */
function RealPhoto({ style, src, alt = "", caption = "" }) {
  return (
    <div style={{ ...style, position: style?.position || "relative", borderRadius: 22, overflow: "hidden", boxShadow: "rgba(0,0,0,0.10) 0 14px 40px 0, rgba(0,0,0,0.06) 0 2px 6px 0", background: "#1d1d1f" }}>
      <img src={src} alt={alt} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      {caption &&
      <div style={{ position: "absolute", left: 12, bottom: 12, background: "#fff", padding: "7px 11px", borderRadius: 8, font: "600 12px/1.2 var(--font-text)", letterSpacing: "-0.1px", color: "var(--color-ink)" }}>
          {caption}
        </div>
      }
    </div>);

}

/* ============================================================
   PlaceholderPhoto — a softly-tinted photo stand-in.
   Replace with real images when available.
   ============================================================ */
function PlaceholderPhoto({ style, bg = "#3d4f6a", initials = "", caption = "" }) {
  return (
    <div style={{ ...style, position: style?.position || "relative", borderRadius: 22, overflow: "hidden", boxShadow: "rgba(0,0,0,0.10) 0 14px 40px 0, rgba(0,0,0,0.06) 0 2px 6px 0", background: bg }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.12), transparent 60%)" }}></div>
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.85)", font: "600 64px/1 var(--font-display)", letterSpacing: "-2px", textShadow: "0 2px 18px rgba(0,0,0,0.25)" }}>
        {initials}
      </div>
      {caption && (
        <div style={{ position: "absolute", left: 12, bottom: 12, background: "#fff", padding: "7px 11px", borderRadius: 8, font: "600 12px/1.2 var(--font-text)", letterSpacing: "-0.1px", color: "var(--color-ink)" }}>
          {caption}
        </div>
      )}
      <div style={{ position: "absolute", right: 12, top: 12, background: "rgba(255,255,255,0.92)", color: "var(--color-ink-muted-48)", padding: "4px 8px", borderRadius: 6, font: "var(--type-fine-print)", letterSpacing: "var(--type-fine-print-ls)", textTransform: "uppercase" }}>
        Photo placeholder
      </div>
    </div>);

}

window.Opportunities = Opportunities;