// AboutPage.jsx — About section
Object.assign(window, { AboutPage });

const TEAM = [
  { name:"Jordan Mercer", role:"Founder & Data Architect", bio:"10 years building data systems. Believes every company deserves a clean data model." },
  { name:"Riley Thompson", role:"Power BI Lead", role2:"", bio:"DAX wizard. Has built 100+ dashboards and still loves doing it." },
  { name:"Alex Nguyen", role:"Data Engineer", bio:"Pipeline whisperer. If your data needs to move, Alex makes it happen." },
  { name:"Sam Okafor", role:"Analytics Consultant", bio:"Turns analysis into stories. Former BI analyst, now helps others do it better." },
];

function AboutPage() {
  return (
    <div>
      {/* About hero */}
      <section style={abStyles.hero}>
        <div style={abStyles.heroInner}>
          <div style={abStyles.eyebrow}>About Us</div>
          <h1 style={abStyles.headline}>We're data people<br />who actually <span style={{color:"#69BAC9"}}>explain things.</span></h1>
          <p style={abStyles.body}>Data Dudes Consulting was founded on one simple idea: data should help businesses, not confuse them. We work with companies of all sizes to build the systems, dashboards, and processes that make data useful.</p>
        </div>
      </section>

      {/* Values */}
      <section style={abStyles.valuesSection}>
        <div style={abStyles.inner}>
          <h2 style={abStyles.sectionTitle}>How we work</h2>
          <div style={abStyles.valuesGrid}>
            {[
              ["Clarity first","We make the complex simple. Always.","#9747FF"],
              ["Real talk","No jargon. No fluff. Just straight answers.","#0095B7"],
              ["Built to last","We don't build throwaway dashboards — we build systems.","#00CC99"],
              ["You own it","We train your team to run it themselves.","#5265B1"],
            ].map(([title, desc, color]) => (
              <div key={title} style={abStyles.valueCard}>
                <div style={{width:4, background:color, borderRadius:9999, alignSelf:"stretch", minHeight:40, flexShrink:0}} />
                <div>
                  <div style={abStyles.valueTitle}>{title}</div>
                  <div style={abStyles.valueDesc}>{desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section style={abStyles.teamSection}>
        <div style={abStyles.inner}>
          <h2 style={abStyles.sectionTitle}>Meet the dudes</h2>
          <div style={abStyles.teamGrid}>
            {TEAM.map(member => (
              <div key={member.name} style={abStyles.teamCard}>
                <div style={abStyles.avatar}>
                  <span style={{fontFamily:"'Patrick Hand',cursive", fontSize:28, color:"#fff"}}>
                    {member.name.split(" ").map(n=>n[0]).join("")}
                  </span>
                </div>
                <div style={abStyles.memberName}>{member.name}</div>
                <div style={abStyles.memberRole}>{member.role}</div>
                <div style={abStyles.memberBio}>{member.bio}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

const abStyles = {
  hero: { background:"#fff", padding:"80px 32px", borderBottom:"1px solid #e6e6e6" },
  heroInner: { maxWidth:800, margin:"0 auto", display:"flex", flexDirection:"column", gap:20 },
  eyebrow: { fontFamily:"'Patrick Hand',cursive", fontSize:16, letterSpacing:"0.06em", color:"#69BAC9", textTransform:"uppercase" },
  headline: { fontFamily:"'Patrick Hand',cursive", fontSize:52, color:"#1b1b1b", margin:0, lineHeight:1.1 },
  body: { fontFamily:"'Patrick Hand',cursive", fontSize:20, color:"#737373", margin:0, lineHeight:1.5 },
  valuesSection: { background:"#f9f9f9", padding:"80px 32px", borderBottom:"1px solid #e6e6e6" },
  inner: { maxWidth:1200, margin:"0 auto" },
  sectionTitle: { fontFamily:"'Patrick Hand',cursive", fontSize:36, color:"#1b1b1b", margin:"0 0 40px" },
  valuesGrid: { display:"grid", gridTemplateColumns:"1fr 1fr", gap:20 },
  valueCard: { background:"#fff", borderRadius:16, border:"1px solid rgba(0,0,0,0.08)", boxShadow:"0 4px 4px rgba(0,0,0,0.06)", padding:"20px 24px", display:"flex", gap:16, alignItems:"flex-start" },
  valueTitle: { fontFamily:"'Patrick Hand',cursive", fontSize:22, color:"#1b1b1b", marginBottom:6 },
  valueDesc: { fontFamily:"'Patrick Hand',cursive", fontSize:17, color:"#737373", lineHeight:1.5 },
  teamSection: { background:"#fff", padding:"80px 32px" },
  teamGrid: { display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:24 },
  teamCard: { background:"#f9f9f9", borderRadius:16, border:"1px solid rgba(0,0,0,0.06)", padding:24, display:"flex", flexDirection:"column", alignItems:"center", gap:10, textAlign:"center" },
  avatar: { width:72, height:72, borderRadius:"50%", background:"#1b1b1b", display:"flex", alignItems:"center", justifyContent:"center" },
  memberName: { fontFamily:"'Patrick Hand',cursive", fontSize:20, color:"#1b1b1b" },
  memberRole: { fontFamily:"'Inter',sans-serif", fontSize:12, color:"#69BAC9", fontWeight:500, textTransform:"uppercase", letterSpacing:"0.06em" },
  memberBio: { fontFamily:"'Patrick Hand',cursive", fontSize:16, color:"#737373", lineHeight:1.5 },
};