// Services.jsx — Services grid section
Object.assign(window, { Services });

const SERVICES = [
  { icon: "▦", title: "Power BI Dashboards", desc: "Interactive reports and dashboards that bring your data to life. We design, build, and maintain Power BI solutions tailored to your business.", color: "#9747FF", tags: ["Power BI", "Reports", "Viz"] },
  { icon: "⬡", title: "Data Architecture", desc: "Scalable data infrastructure designed for how your business actually works. From warehouses to lakes — we blueprint the whole thing.", color: "#0095B7", tags: ["Warehousing", "Lakes", "Pipelines"] },
  { icon: "⬡", title: "Data Modeling", desc: "Clean, consistent data models that make reporting fast and reliable. We turn your chaos into a unified semantic layer.", color: "#00CC99", tags: ["Semantic Layer", "Star Schema", "dbt"] },
  { icon: "◈", title: "Data Analysis", desc: "Deep-dive analysis to answer the questions your business is actually asking. We find the signal in the noise.", color: "#5265B1", tags: ["Python", "SQL", "Insights"] },
  { icon: "◉", title: "ETL & Pipelines", desc: "Automated data pipelines that move, transform, and load your data reliably. Say goodbye to manual exports.", color: "#FF7622", tags: ["Azure", "Fabric", "ADF"] },
  { icon: "◎", title: "Training & Enablement", desc: "We don't just build it and leave. We train your team to own it. Power BI, DAX, SQL — we teach it all.", color: "#D4145A", tags: ["Workshops", "DAX", "SQL"] },
];

function ServiceCard({ service, onClick }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{...svcStyles.card, ...(hovered ? svcStyles.cardHover : {})}}>
      <div style={{...svcStyles.iconWrap, background: service.color + "18", color: service.color}}>
        <span style={{fontSize:28}}>{service.icon}</span>
      </div>
      <h3 style={svcStyles.title}>{service.title}</h3>
      <p style={svcStyles.desc}>{service.desc}</p>
      <div style={svcStyles.tags}>
        {service.tags.map(t => (
          <span key={t} style={svcStyles.tag}>{t}</span>
        ))}
      </div>
      <div style={{...svcStyles.arrow, color: service.color}}>Learn more →</div>
    </div>
  );
}

function Services({ onNavigate }) {
  return (
    <section style={svcStyles.section}>
      <div style={svcStyles.inner}>
        <div style={svcStyles.header}>
          <div style={svcStyles.eyebrow}>What We Do</div>
          <h2 style={svcStyles.headline}>Services that move the needle</h2>
          <p style={svcStyles.subhead}>We work across the full data stack — from strategy to implementation to training.</p>
        </div>
        <div style={svcStyles.grid}>
          {SERVICES.map(s => (
            <ServiceCard key={s.title} service={s} onClick={() => onNavigate("services")} />
          ))}
        </div>
        <div style={svcStyles.cta}>
          <button style={svcStyles.ctaBtn} onClick={() => onNavigate("contact")}>
            Talk to us about your project
          </button>
        </div>
      </div>
    </section>
  );
}

const svcStyles = {
  section: { background:"#f9f9f9", padding:"80px 32px", borderBottom:"1px solid #e6e6e6" },
  inner: { maxWidth:1200, margin:"0 auto" },
  header: { textAlign:"center", marginBottom:56 },
  eyebrow: { fontFamily:"'Patrick Hand',cursive", fontSize:16, letterSpacing:"0.06em", color:"#69BAC9", textTransform:"uppercase", marginBottom:12 },
  headline: { fontFamily:"'Patrick Hand',cursive", fontSize:44, color:"#1b1b1b", margin:"0 0 16px" },
  subhead: { fontFamily:"'Patrick Hand',cursive", fontSize:20, color:"#737373", maxWidth:540, margin:"0 auto" },
  grid: { display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:24 },
  card: { background:"#fff", borderRadius:16, border:"1px solid rgba(0,0,0,0.08)", boxShadow:"0 4px 4px rgba(0,0,0,0.06)", padding:28, cursor:"pointer", transition:"box-shadow 0.15s ease, transform 0.15s ease", display:"flex", flexDirection:"column", gap:12 },
  cardHover: { boxShadow:"0 8px 20px rgba(0,0,0,0.12)", transform:"translateY(-2px)" },
  iconWrap: { width:52, height:52, borderRadius:12, display:"flex", alignItems:"center", justifyContent:"center" },
  title: { fontFamily:"'Patrick Hand',cursive", fontSize:22, color:"#1b1b1b", margin:0 },
  desc: { fontFamily:"'Patrick Hand',cursive", fontSize:17, color:"#737373", lineHeight:1.5, margin:0, flex:1 },
  tags: { display:"flex", gap:6, flexWrap:"wrap" },
  tag: { background:"#f0f0f0", color:"#737373", borderRadius:9999, padding:"3px 10px", fontFamily:"'Inter',sans-serif", fontSize:11, fontWeight:500 },
  arrow: { fontFamily:"'Patrick Hand',cursive", fontSize:17, fontWeight:400, textDecoration:"underline", cursor:"pointer" },
  cta: { textAlign:"center", marginTop:48 },
  ctaBtn: { background:"#69BAC9", color:"#fff", border:"none", borderRadius:9999, padding:"14px 36px", fontFamily:"'Patrick Hand',cursive", fontSize:20, cursor:"pointer" },
};