// Philosophy.jsx
const ValueCard = ({ num, icon, title, children }) => (
  <div className="cc-value-card">
    <span className="cc-value-number">{num}</span>
    <div className="cc-value-icon"><Icon name={icon} size={20} /></div>
    <h3 className="cc-value-title">{title}</h3>
    <p className="cc-value-text">{children}</p>
  </div>
);

const Philosophy = () => (
  <section className="cc-philosophy" id="approach">
    <div className="cc-section-grid">
      <div className="cc-phil-label">Approach</div>
      <div className="cc-phil-content">
        <h2 className="cc-phil-heading">Craft over code.<br/><em>Experience over features.</em></h2>
        <p className="cc-phil-text">
          We believe great apps aren't just built. They're designed with intention. Every interaction, every animation, every pixel serves the person using it. We obsess over the details so your users don't have to think about them.
        </p>
      </div>
    </div>
    <div className="cc-values-row">
      <ValueCard num="01" icon="sparkles" title="User-First Design">
        Interfaces that feel intuitive from the first tap. No learning curves, no friction.
      </ValueCard>
      <ValueCard num="02" icon="shield" title="Privacy by Default">
        COPPA-compliant, GDPR-ready. We build apps families trust with their data.
      </ValueCard>
      <ValueCard num="03" icon="zap" title="Ship & Iterate">
        Real apps in real hands. We launch fast, listen to feedback, and make it better.
      </ValueCard>
    </div>
  </section>
);
window.Philosophy = Philosophy;