// Hero.jsx — Homepage hero section
Object.assign(window, { Hero });

function Hero({ onNavigate }) {
  return (
    <section style={heroStyles.section}>
      <div style={heroStyles.inner}>
        {/* Left: copy */}
        <div style={heroStyles.copy}>
          <div style={heroStyles.eyebrow}>Data Consulting · Power BI · Architecture</div>
          <h1 style={heroStyles.headline}>
            We make your<br />data make <span style={{color:"#9747FF"}}>sense.</span>
          </h1>
          <p style={heroStyles.body}>
            Data Dudes is a consulting firm that turns messy data into clear decisions.
            From Power BI dashboards to full data architecture — we've got your back.
          </p>
          <div style={heroStyles.actions}>
            <button style={heroStyles.btnPrimary} onClick={() => onNavigate("contact")}>
              Get Started
            </button>
            <button style={heroStyles.btnSecondary} onClick={() => onNavigate("work")}>
              See Our Work
            </button>
          </div>
          <div style={heroStyles.stats}>
            {[["214+","Dashboards built"],["38","Active clients"],["5yr","In business"]].map(([val,lbl]) => (
              <div key={lbl} style={heroStyles.stat}>
                <div style={heroStyles.statVal}>{val}</div>
                <div style={heroStyles.statLbl}>{lbl}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: mock dashboard card */}
        <div style={heroStyles.visual}>
          <div style={heroStyles.dashCard}>
            <div style={heroStyles.dashHeader}>
              <span style={heroStyles.dashTitle}>Q4 Performance</span>
              <span style={heroStyles.dashBadge}>Live</span>
            </div>
            <div style={heroStyles.kpiRow}>
              {[["$2.4M","Revenue","#9747FF"],["94.2%","Accuracy","#00CC99"],["18d","Avg. Delivery","#0095B7"]].map(([v,l,c]) => (
                <div key={l} style={heroStyles.kpi}>
                  <div style={{...heroStyles.kpiVal, color:c}}>{v}</div>
                  <div style={heroStyles.kpiLbl}>{l}</div>
                </div>
              ))}
            </div>
            {/* Mini bar chart */}
            <div style={heroStyles.chartArea}>
              <div style={heroStyles.chartLabel}>Projects by Type</div>
              <div style={heroStyles.bars}>
                {[["PBI",80,"#1b1b1b"],["Arch",52,"#9747FF"],["Model",44,"#0095B7"],["Anlys",36,"#00CC99"],["ETL",60,"#e6e6e6"]].map(([lbl,h,c]) => (
                  <div key={lbl} style={heroStyles.barCol}>
                    <div style={{width:32, height:h, background:c, borderRadius:"4px 4px 0 0"}} />
                    <div style={heroStyles.barLbl}>{lbl}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          {/* Floating note */}
          <div style={heroStyles.floatingNote}>
            <span style={{fontSize:16}}>✓</span> Updated live from Power BI
          </div>
        </div>
      </div>
    </section>
  );
}

const heroStyles = {
  section: { background:"#fff", borderBottom:"1px solid #e6e6e6", padding:"80px 32px" },
  inner: { maxWidth:1200, margin:"0 auto", display:"grid", gridTemplateColumns:"1fr 1fr", gap:64, alignItems:"center" },
  copy: { display:"flex", flexDirection:"column", gap:24 },
  eyebrow: { fontFamily:"'Patrick Hand',cursive", fontSize:16, letterSpacing:"0.06em", color:"#69BAC9", textTransform:"uppercase" },
  headline: { fontFamily:"'Patrick Hand',cursive", fontSize:56, lineHeight:1.05, color:"#1b1b1b", margin:0 },
  body: { fontFamily:"'Patrick Hand',cursive", fontSize:20, color:"#737373", lineHeight:1.5, margin:0 },
  actions: { display:"flex", gap:16, flexWrap:"wrap" },
  btnPrimary: { background:"#69BAC9", color:"#fff", border:"none", borderRadius:9999, padding:"12px 28px", fontFamily:"'Patrick Hand',cursive", fontSize:20, cursor:"pointer" },
  btnSecondary: { background:"#fff", color:"#1b1b1b", border:"2px solid #1b1b1b", borderRadius:9999, padding:"10px 28px", fontFamily:"'Patrick Hand',cursive", fontSize:20, cursor:"pointer" },
  stats: { display:"flex", gap:32, paddingTop:8, borderTop:"1px solid #e6e6e6" },
  stat: { display:"flex", flexDirection:"column", gap:2 },
  statVal: { fontFamily:"'Inter',sans-serif", fontSize:28, fontWeight:700, color:"#1b1b1b" },
  statLbl: { fontFamily:"'Patrick Hand',cursive", fontSize:16, color:"#737373" },
  visual: { position:"relative" },
  dashCard: { background:"#fff", borderRadius:20, border:"1px solid rgba(0,0,0,0.08)", boxShadow:"0 8px 24px rgba(0,0,0,0.10)", padding:28 },
  dashHeader: { display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:20 },
  dashTitle: { fontFamily:"'Patrick Hand',cursive", fontSize:22, color:"#1b1b1b" },
  dashBadge: { background:"rgba(0,204,153,0.12)", color:"#009966", border:"1px solid rgba(0,204,153,0.3)", borderRadius:9999, padding:"3px 12px", fontFamily:"'Inter',sans-serif", fontSize:12, fontWeight:500 },
  kpiRow: { display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:16, marginBottom:24, paddingBottom:20, borderBottom:"1px solid #f0f0f0" },
  kpi: { display:"flex", flexDirection:"column", gap:2 },
  kpiVal: { fontFamily:"'Inter',sans-serif", fontSize:28, fontWeight:700 },
  kpiLbl: { fontFamily:"'Inter',sans-serif", fontSize:12, color:"#b4b4b4", fontWeight:500 },
  chartArea: {},
  chartLabel: { fontFamily:"'Patrick Hand',cursive", fontSize:16, color:"#737373", marginBottom:12 },
  bars: { display:"flex", gap:8, alignItems:"flex-end", height:90 },
  barCol: { display:"flex", flexDirection:"column", alignItems:"center", gap:4 },
  barLbl: { fontFamily:"'Inter',sans-serif", fontSize:10, color:"#b4b4b4" },
  floatingNote: { position:"absolute", bottom:-18, right:16, background:"#f9f9f9", border:"1px solid #e6e6e6", borderRadius:12, padding:"8px 16px", fontFamily:"'Patrick Hand',cursive", fontSize:14, color:"#737373", display:"flex", alignItems:"center", gap:6, boxShadow:"0 4px 4px rgba(0,0,0,0.06)" },
};