// ServiceCard.jsx
const ServiceCard = ({ icon, title, description, featured }) => (
  <article className={`service-card${featured ? ' featured' : ''}`}>
    <div className="service-icon"><Icon name={icon} size={22}/></div>
    <h3>{title}</h3>
    <p>{description}</p>
    <div className="service-link">
      <span>Learn more</span>
      <Icon name="arrow-right" size={14}/>
    </div>
  </article>
);
window.ServiceCard = ServiceCard;

const SERVICES = [
  { icon: 'paintbrush', title: 'Product design',       description: 'UX, UI, and brand systems. From discovery to a shipped Figma file your engineers can actually build from.', featured: true },
  { icon: 'code',       title: 'Web development',      description: 'Marketing sites and full-stack web apps in Next.js, React, and TypeScript — end-to-end typed.' },
  { icon: 'smartphone', title: 'Mobile apps',          description: 'Cross-platform iOS + Android in React Native, or native when the use case demands it.' },
  { icon: 'bot',        title: 'AI integrations',      description: 'Chatbots, RAG over your docs, and AI assistants wired into existing apps.' },
  { icon: 'database',   title: 'Backend & APIs',       description: 'Node, Postgres, auth, payments, queues — the unglamorous half that keeps the lights on.' },
  { icon: 'wrench',     title: 'Maintenance & support', description: 'Uptime, security patches, the small tweaks that add up. Available on retainer or per-incident.' },
];
window.SERVICES = SERVICES;