/* eslint-disable */
/* =========================================================================
   Helix — About page  (Team + Advisors, post-card visual style)
   ========================================================================= */

const TEAM = [
  {
    name: "Miles Mans",
    title: "Co-Founder · Business Development & Strategy",
    photo: "assets/team/miles.jpg",
    bio: "Miles developed an operational foundation through work in energy and family-run businesses. He advises a private family office across energy, real estate, and private markets, applying a disciplined focus on operations, risk, and capital deployment at Helix.",
    gradient: "linear-gradient(135deg, #1d3f6e, #8aa6c8)",
  },
  {
    name: "Keaton Minor",
    title: "Co-Founder · AI Research & Science",
    photo: "assets/team/keaton.jpg",
    bio: "Keaton is a computational biologist trained at the intersection of cardiac biology and computational approaches. He cofounded Helix to help groups translate complex systems into real-world applications.",
    gradient: "linear-gradient(135deg, #3a5d8a, #c9d8ea)",
  },
  {
    name: "Kamden Minor",
    title: "Co-Founder · Engineering & Delivery",
    photo: "assets/team/kamden.jpg",
    bio: "Kamden is a mechanical engineer working in the energy industry. He cofounded Helix to help deliver practical AI solutions that provide real-world value.",
    gradient: "linear-gradient(135deg, #cfe0f2, #f6e6df)",
  },
];

const ADVISORS = [
  {
    name: "Bill Bryan, MS",
    photo: null,
    gradient: "linear-gradient(135deg, #0a1f3d, #3a5d8a)",
    credentials: [
      "20 years building data and ML systems at the largest independent natural gas producer in the US",
      "Speaker, Snowflake Summit",
      "The single highest-leverage hire in Oklahoma energy AI",
    ],
  },
  {
    name: "Curtis Coleman",
    suffix: "DBA, CISSP, CISM, CRISC",
    photo: "assets/team/curtis.png",
    gradient: "linear-gradient(135deg, #1d3f6e, #8aa6c8)",
    credentials: [
      "Top 50 Information Security Professional, OnCon Icon Awards 2026",
      "Former CISO, Seagate Technology",
      "Oracle Cloud, McAfee, Salesforce, and Google Security Advisory Councils",
      "Oklahoma Governor's cybersecurity advisor",
      "Founding Director, Cybersecurity Education Center, Oklahoma Christian University",
    ],
  },
  {
    name: "David Bates, MFA",
    photo: "assets/team/david.png",
    gradient: "linear-gradient(135deg, #3a5d8a, #c9d8ea)",
    credentials: [
      "30+ years building brands at the highest level",
      "International brand standards at Fossil",
      "Head of Commercial Production, Reel FX — Golden Globe-nominated animation studio",
      "Strategic creative leadership at Bedrock Manufacturing (Shinola, Filson)",
      "Managing Director, ATK PLN — AT&T, Mercedes-Benz, Ford, Anheuser Busch, Verizon, HBO, Chevrolet",
      "Marketing Director, Lone Star Pharmaceuticals",
    ],
  },
  {
    name: "Jackson High",
    photo: null,
    gradient: "linear-gradient(135deg, #cfe0f2, #f6e6df)",
    credentials: [
      "Associate, Kirkland & Ellis",
      "JD Cum Laude, University of Texas School of Law — top of class in secured credit & regulation of financial markets",
      "Staff Editor, Texas Journal of Oil, Gas and Energy Law",
      "BBA Finance, Magna Cum Laude, Oklahoma Christian University",
      "Business strategy, structure, and entity formation",
    ],
  },
];

// Photo area — image if available, gradient + initials if not
function PersonThumb({ person, size = "team" }) {
  const initials = person.name.split(" ").filter(w => /^[A-Z]/.test(w)).map(w => w[0]).slice(0, 2).join("");
  return (
    <div className={`pcard-thumb pcard-thumb--${size}`} style={{ background: person.gradient }}>
      {person.photo
        ? <img src={person.photo} alt={person.name} className="pcard-thumb-img" />
        : <span className="pcard-initials">{initials}</span>}
    </div>
  );
}

function AboutPage({ onContact }) {
  return (
    <main className="page-fade">

      {/* Hero */}
      <section className="about-hero-wrap">
        <div className="about-hero container">
          <h1 className="hero-animate" style={{ animationDelay: "0.05s" }}>The people behind the framework.</h1>
          <p className="hero-animate" style={{ animationDelay: "0.2s" }}>Complementary depth across commercial strategy, machine-learning engineering, computational science, marketing,and energy data science.</p>
        </div>
      </section>

      {/* ── Team ─────────────────────────────────────── */}
      <section className="container section-tight" id="team">
        <h2 className="about-section-label reveal">Team</h2>
        <div className="pcards-list">
          {TEAM.map((m, i) => (
            <article key={i} className="pcard reveal" style={{ transitionDelay: `${i * 0.1}s` }}>
              <PersonThumb person={m} size="team" />
              <div className="pcard-body">
                <div className="pcard-meta">
                  <h3 className="pcard-name">{m.name}</h3>
                  <p className="pcard-role">{m.title}</p>
                </div>
                <p className="pcard-bio">{m.bio}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ── Advisors ─────────────────────────────────── */}
      <section className="container section-tight" id="advisors">
        <h2 className="about-section-label reveal">Advisors</h2>
        <div className="pcards-list">
          {ADVISORS.map((a, i) => (
            <article key={i} className="pcard reveal" style={{ transitionDelay: `${i * 0.1}s` }}>
              <PersonThumb person={a} size="advisor" />
              <div className="pcard-body">
                <div className="pcard-meta">
                  <h3 className="pcard-name">{a.name}{a.suffix && <span className="pcard-suffix">{a.suffix}</span>}</h3>
                </div>
                <ul className="pcard-creds">
                  {a.credentials.map((c, j) => <li key={j}>{c}</li>)}
                </ul>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ── Values ───────────────────────────────────── */}
      <section className="container">
        <div className="values-bar">
          <div className="value-item reveal" style={{ transitionDelay: "0s" }}>
            <span className="value-item-num">01 · Data first</span>
            <h4>Foundation before flash.</h4>
            <p>We don't sell AI before we've audited the data feeding it. Most engagements start in the bottom two layers.</p>
          </div>
          <div className="value-item reveal" style={{ transitionDelay: "0.1s" }}>
            <span className="value-item-num">02 · Hands on</span>
            <h4>We build, not slide-deck.</h4>
            <p>Every deliverable is something running in production — pipelines, dashboards, models — not a recommendation memo.</p>
          </div>
          <div className="value-item reveal" style={{ transitionDelay: "0.2s" }}>
            <span className="value-item-num">03 · Hand-off ready</span>
            <h4>Designed to leave behind.</h4>
            <p>Your team owns what we build. Documentation, runbooks, and training are part of every engagement, not a billable add-on.</p>
          </div>
        </div>
      </section>

      {/* ── CTA removed ── */}

    </main>
  );
}

Object.assign(window, { AboutPage });