/* ────────────────────────────────────────────────────────────
   Section 6 - The Team
   Rounded card: full-bleed headshot top, dark caption bar
   beneath with name, title, and LinkedIn glyph.
   ──────────────────────────────────────────────────────────── */

function SectionTeam() {
  const team = [
  { title: "CEO", name: "Jonathan Barbone", img: "assets/team-barbone.jpg", linkedin: "https://www.linkedin.com/in/jonathanbarbone/" },
  { title: "Technology Advisor", name: "Dr. Matt Ellis", img: "assets/team-ellis.jpg", linkedin: "https://www.linkedin.com/in/matthewcellis/" },
  { title: "CTO", name: "Dillon Sances", img: "assets/team-sances.jpg", linkedin: "https://www.linkedin.com/in/dillon-sances-9152b8b0/" },
  { title: "Robotics Advisor", name: "Charles Kirschman", img: "assets/team-kirschman.jpg", linkedin: "https://www.linkedin.com/in/ckirschman/" },
  { title: "Drilling Strategy Lead", name: "Rinke Tegeler", img: "assets/team-tegeler.jpg", linkedin: "https://www.linkedin.com/in/rinke-tegeler-48079350/" }];


  return (
    <SectionFrame index="06" plate="VI." dispatch="Operators · § 06" bg="#131519">
      <SectionEyebrow index="06" label="The team" />

      <SectionHeading size="md">
        <span style={{ color: "#EDEAE2" }}>Aerospace-grade <span style={{ color: "#D4A24C" }}>engineering</span>.</span><br />
        <span style={{ color: "#EDEAE2" }}>Drilling-domain expertise.</span>
      </SectionHeading>

      <SectionDeck max={760}>
        Engineers from SpaceX, Blue Origin, and NASA, building alongside one of the world's leading deep-drilling experts.
      </SectionDeck>

      <div className="ax-team-grid" style={{
        marginTop: "var(--sp-fluid-xl)",
        display: "grid",
        gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
        gap: 20
      }}>
        {team.map((p, i) =>
        <div key={p.name} className="ax-team-card" style={{
          display: "flex",
          flexDirection: "column",
          gap: 8
        }}>
            <ImageSettle delay={i * (window.ax ? window.ax.stagger("base") : 80)} className="ax-team-photo" style={{
            position: "relative",
            aspectRatio: "1 / 1",
            background: "#1F2226",
            border: "1px solid rgba(237,234,226,0.08)",
            borderRadius: 12,
            overflow: "hidden"
          }}>
              <img src={p.img} alt={p.name} style={{
              width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block"
            }} />
            </ImageSettle>

            {/* caption container - separate card beneath the photo */}
            <div style={{
            padding: "16px 18px",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 12,
            background: "#1A1D21",
            border: "1px solid rgba(237,234,226,0.08)",
            borderRadius: 12
          }}>
              <div style={{ minWidth: 0 }}>
                <div style={{
                fontFamily: '"GT America", var(--font-display)',
                fontSize: 18,
                fontWeight: 500,
                color: "#EDEAE2",
                lineHeight: 1.2,
                letterSpacing: "-0.01em",
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis"
              }}>
                  {p.name}
                </div>
                <div style={{
                fontFamily: "Inter, var(--font-body)",



                marginTop: 4,
                lineHeight: 1.2,
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis", fontSize: "14px", color: "rgb(168, 168, 162)", fontWeight: "500"
              }}>
                  {p.title}
                </div>
              </div>

              {/* LinkedIn glyph */}
              <a
                href={p.linkedin || "#"}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={`${p.name} on LinkedIn`}
                style={{
              flexShrink: 0,
              width: 28,
              height: 28,
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              border: "1px solid rgba(237,234,226,0.18)",
              borderRadius: 4,
              color: "#A8A8A2",
              textDecoration: "none"
            }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square" strokeLinejoin="miter">
                  <rect x="3" y="3" width="18" height="18" rx="1" />
                  <line x1="8" y1="11" x2="8" y2="16" />
                  <line x1="8" y1="8" x2="8" y2="8.01" />
                  <line x1="12" y1="16" x2="12" y2="11" />
                  <path d="M16 16v-3a2 2 0 0 0-4 0" />
                </svg>
              </a>
            </div>
          </div>
        )}
      </div>

      {/* ── Tier 1 · Partners & Advisors ──────────────────────────
                                                                        Two-column row of credibility credits. No portraits.
                                                                        Container has a hairline border + a vertical divider
                                                                        between columns; stacks at <768px with a horizontal
                                                                        divider replacing the vertical one. */}
      <div className="ax-team-partners-wrap" style={{ marginTop: 96, margin: "55px 0px 0px" }}>
        <div data-role="eyebrow" style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.10em",
          textTransform: "uppercase",

          opacity: 0.6,
          marginBottom: 16, color: "rgb(168, 168, 162)"
        }}>
          Partners &amp; Advisors
        </div>

        <div data-card className="ax-team-partners" style={{
          border: "1px solid rgba(255,255,255,0.08)",

          display: "grid",
          gridTemplateColumns: "1fr 1px 1fr",
          gap: 0, padding: "16px 40px"
        }}>
          {/* ── Left · Advisor ── */}
          <div data-meta-group style={{ paddingRight: 40, display: "flex", flexDirection: "column", justifyContent: "center", textAlign: "left" }}>
            <div data-meta-row style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: "#D4A24C",
              opacity: 0.7
            }}>
              Advisor
            </div>
            <div data-meta-row style={{
              marginTop: 24,
              fontFamily: '"GT America", Inter, var(--font-display)',

              fontWeight: 400,
              color: "#EDEAE2",
              lineHeight: 1.2,
              letterSpacing: "-0.005em", fontSize: "18px"
            }}>Rex Alexandre · High-Power Laser Expert

            </div>
            <div data-meta-row style={{
              marginTop: 4,
              fontFamily: "Inter, var(--font-body)",

              color: "rgba(237,234,226,0.70)",
              lineHeight: 1.4, fontSize: "14px"
            }}>SpaceX, Blue Origin

            </div>
          </div>

          {/* Vertical divider - full container height */}
          <div aria-hidden="true" className="ax-team-partners-divider" style={{
            width: 1,
            background: "rgba(255,255,255,0.08)"
          }} />

          {/* ── Right · Technology Partner ── */}
          <div data-meta-group style={{ display: "flex", flexDirection: "column", justifyContent: "center", padding: "0px 0px 0px 40px" }}>
            <div data-meta-row style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: "#D4A24C",
              opacity: 0.7
            }}>
              Technology Partner
            </div>
            <div data-meta-row style={{
              marginTop: 24,
              fontFamily: '"GT America", Inter, var(--font-display)',

              fontWeight: 400,
              color: "#EDEAE2",
              lineHeight: 1.2,
              letterSpacing: "-0.005em", fontSize: "18px"
            }}>Laserline Inc.

            </div>
            <div data-meta-row style={{
              marginTop: 4,
              fontFamily: "Inter, var(--font-body)",
              fontSize: 14,
              color: "rgba(237,234,226,0.70)",
              lineHeight: 1.4
            }}>
              Global leader in industrial laser systems
            </div>
          </div>
        </div>
      </div>

      {/* ── Tier 2 · Backed By ───────────────────────────────────
                                                                        Inline eyebrow + SNR logo, single line. */}
      <div className="ax-team-backed" style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 16,
        margin: "40px 0px 0px", padding: "10px 0px"

      }}>
        <div data-role="eyebrow" style={{


          color: "#A8A8A2", fontFamily: "Inter", fontSize: "12px"
        }}>
          Backed By
        </div>

        <img
          src="assets/snr-logo.png"
          alt="SNR - Investor"
          className="ax-team-backed-logo"
          style={{

            height: "auto",
            display: "block",
            /* Keep tonality with the foundational palette. */
            filter: "saturate(0) brightness(1.05)", objectFit: "cover", width: "60px"
          }} />
      </div>

      {/* Responsive - stack the partners tier below 768px and replace
                                                                        the vertical divider with a horizontal one. */}
      <style>{`
        @media (max-width: 1024px) {
          .ax-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        }
        @media (max-width: 640px) {
          .ax-team-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 16px !important;
          }
          /* Caption: at narrow widths, stack name/title above the
             LinkedIn glyph and allow the title to wrap so longer
             roles ("Head of Automation and Robotics") aren't clipped. */
          .ax-team-card > div:last-child {
            flex-direction: column !important;
            align-items: flex-start !important;
            padding: 12px 12px !important;
            gap: 8px !important;
          }
          .ax-team-card > div:last-child > div:first-child > div:first-child {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            font-size: 14.5px !important;
          }
          .ax-team-card > div:last-child > div:first-child > div:last-child {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            font-size: 12.5px !important;
            margin-top: 2px !important;
          }
        }
          /* Mobile: two-column treatment.
             Reorder via CSS so desktop array order is unchanged.
             Desktop array: Jonathan, Matt, Dillon, Rinke, Charles.
             Mobile pairs: (Jonathan, Dillon), (Matt, Charles), (Rinke). */
          .ax-team-card:nth-child(1) { order: 1; } /* Jonathan */
          .ax-team-card:nth-child(2) { order: 3; } /* Matt    */
          .ax-team-card:nth-child(3) { order: 2; } /* Dillon  */
          .ax-team-card:nth-child(4) { order: 5; } /* Charles */
          .ax-team-card:nth-child(5) { order: 4; } /* Rinke   */
        }
        @media (max-width: 900px) {
          .ax-team-partners {
            grid-template-columns: 1fr !important;
            grid-template-rows: auto auto auto !important;
            padding: 20px !important;
          }
          .ax-team-partners > div[data-meta-group]:first-of-type {
            padding-right: 0 !important;
            padding-bottom: 20px !important;
          }
          .ax-team-partners > div[data-meta-group]:last-of-type {
            padding-left: 0 !important;
            padding-top: 20px !important;
          }
          .ax-team-partners-divider {
            width: 100% !important;
            height: 1px !important;
          }
        }
        /* Container query: stack when the partners block itself is
           narrower than 720px, so previews that scale a desktop render
           down still get the stacked layout. */
        .ax-team-partners-wrap {
          container-type: inline-size;
          container-name: partners;
        }
        @container partners (max-width: 720px) {
          .ax-team-partners {
            grid-template-columns: 1fr !important;
            grid-template-rows: auto auto auto !important;
            padding: 20px !important;
          }
          .ax-team-partners > div[data-meta-group]:first-of-type {
            padding-right: 0 !important;
            padding-bottom: 20px !important;
          }
          .ax-team-partners > div[data-meta-group]:last-of-type {
            padding-left: 0 !important;
            padding-top: 20px !important;
          }
          .ax-team-partners-divider {
            width: 100% !important;
            height: 1px !important;
          }
        }
      `}</style>
    </SectionFrame>);

}

window.SectionTeam = SectionTeam;