const SERVICES = [
  { Icon: IconGlobe, name: 'Website Creation', desc: 'Custom websites on cutting-edge frameworks — engineered for speed, scale and storytelling.',
    tags: ['Landing Pages', 'Corporate', 'E-Commerce', 'Portfolios', 'CMS'], code: 'WEB' },
  { Icon: IconMobile, name: 'App Development', desc: 'Mobile and web apps from first concept to App Store launch.',
    tags: ['iOS', 'Android', 'PWA', 'API'], code: 'APP' },
  { Icon: IconSocial, name: 'Social Media Management', desc: 'Strategy, content and community growth for ambitious brands.',
    tags: ['Calendars', 'Post Design', 'Ad Creatives', 'Analytics'], code: 'SOC' },
  { Icon: IconPaint, name: 'Graphic Design', desc: 'Visual identity systems, marketing assets, and brand expressions.',
    tags: ['Logos', 'Brand Guides', 'Decks', 'Social Graphics'], code: 'BRD' },
  { Icon: IconRobot, name: 'AI Automation', desc: 'Intelligent workflow automation, chatbots and AI-powered apps.',
    tags: ['Chatbots', 'Automation', 'Pipelines', 'AI Apps'], code: 'AI' },
  { Icon: IconServer, name: 'System Development', desc: 'Custom software, dashboards and backend infrastructure built to last.',
    tags: ['APIs', 'CRMs', 'ERPs', 'Dashboards'], code: 'SYS' },
];

const STEPS = [
  { n: '01', title: 'Discover', desc: 'Workshops, audits, and product vision sessions to align on outcomes.' },
  { n: '02', title: 'Design', desc: 'Wireframes, prototypes and brand systems — validated with real users.' },
  { n: '03', title: 'Build', desc: 'Engineering sprints with weekly demos, transparent progress and code quality.' },
  { n: '04', title: 'Launch', desc: 'Deploy, monitor, iterate. Post-launch support included in every engagement.' },
];

function Services() {
  return (
    <section id="services" data-screen-label="02 Services" style={{
      padding: 'clamp(80px, 10vw, 140px) 0',
      background: 'transparent',
      backgroundImage: `
        linear-gradient(rgba(0,200,224,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,200,224,0.04) 1px, transparent 1px)
      `,
      backgroundSize: '60px 60px',
    }}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">≫ CAPABILITIES</span>
          <h2>What We Do</h2>
          <p>End-to-end digital solutions — engineered to perform, built to outlast.</p>
        </div>

        <div className="service-grid">
          {SERVICES.map((s, i) => (
            <article key={i} className="service-card reveal" data-delay={(i % 3) + 1}>
              <div className="service-head">
                <div className="service-icon"><s.Icon size={28} /></div>
                <div className="service-code">[ {s.code} ]</div>
              </div>
              <h3 className="service-name">{s.name}</h3>
              <p className="service-desc">{s.desc}</p>
              <div className="service-tags">
                {s.tags.map((t, j) => (
                  <span key={j} className="service-tag">{t}</span>
                ))}
              </div>
            </article>
          ))}
        </div>

        {/* Process timeline */}
        <div className="reveal" style={{ marginTop: 96 }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <span className="eyebrow">≫ THE PROCESS</span>
            <h3 style={{ fontSize: 'clamp(26px, 3vw, 38px)', marginTop: 16, color: 'var(--stardust-white)' }}>
              How a Project Comes to Life
            </h3>
          </div>
          <div className="process-flow">
            <div className="process-line" />
            {STEPS.map((s, i) => (
              <div key={i} className="step">
                <div className="step-marker">
                  <span className="step-num">{s.n}</span>
                  <div className="step-dot" />
                </div>
                <div className="step-title">{s.title}</div>
                <div className="step-desc">{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .service-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 20px;
        }
        @media (max-width: 980px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }

        .service-card {
          position: relative;
          background: linear-gradient(135deg, rgba(10,14,26,0.95), rgba(13,27,75,0.4));
          border: 1px solid rgba(0,200,224,0.12);
          border-radius: 18px;
          padding: 32px 28px 28px;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s, background 0.3s;
          overflow: hidden;
        }
        .service-card::before {
          content: '';
          position: absolute; inset: 0;
          background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(0,200,224,0.08), transparent 50%);
          opacity: 0; transition: opacity 0.3s;
          pointer-events: none;
        }
        .service-card:hover {
          transform: translateY(-10px);
          border-color: rgba(0,200,224,0.5);
          box-shadow: 0 24px 60px rgba(0,200,224,0.12), 0 0 0 1px rgba(0,200,224,0.2);
          background: linear-gradient(135deg, rgba(10,14,26,0.98), rgba(0,200,224,0.05));
        }
        .service-card:hover::before { opacity: 1; }

        .service-head {
          display: flex; justify-content: space-between; align-items: center;
          margin-bottom: 20px;
        }
        .service-icon {
          width: 56px; height: 56px; border-radius: 14px;
          background: rgba(0,200,224,0.1);
          border: 1px solid rgba(0,200,224,0.25);
          display: flex; align-items: center; justify-content: center;
          color: var(--stellar-cyan);
        }
        .service-code {
          font-family: 'Space Mono', monospace;
          font-size: 11px; letter-spacing: 0.2em;
          color: var(--asteroid-grey);
        }
        .service-name {
          font-family: 'Orbitron', sans-serif;
          font-size: 19px;
          letter-spacing: 0.04em;
          color: var(--stardust-white);
          margin-bottom: 12px;
        }
        .service-desc {
          font-family: 'Syne', sans-serif;
          font-size: 14.5px;
          line-height: 1.7;
          color: var(--asteroid-grey);
          margin-bottom: 18px;
          min-height: 76px;
        }
        .service-tags {
          display: flex; flex-wrap: wrap; gap: 6px;
        }
        .service-tag {
          font-family: 'Space Mono', monospace;
          font-size: 10.5px; letter-spacing: 0.05em;
          background: rgba(0,200,224,0.08);
          border: 1px solid rgba(0,200,224,0.2);
          color: rgba(232,238,255,0.8);
          border-radius: 4px;
          padding: 4px 9px;
        }

        /* Process */
        .process-flow {
          position: relative;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
        }
        @media (max-width: 760px) {
          .process-flow { grid-template-columns: 1fr; }
          .process-line { display: none; }
        }
        .process-line {
          position: absolute;
          top: 36px; left: 12.5%; right: 12.5%;
          height: 2px;
          background: repeating-linear-gradient(90deg, rgba(0,200,224,0.4) 0 8px, transparent 8px 16px);
          z-index: 0;
        }
        .step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
        .step-marker {
          position: relative;
          width: 72px; height: 72px;
          margin: 0 auto 18px;
          display: flex; align-items: center; justify-content: center;
          background: var(--space-void);
          border: 1.5px solid rgba(0,200,224,0.3);
          border-radius: 50%;
        }
        .step-num {
          font-family: 'Orbitron', sans-serif;
          font-size: 24px; font-weight: 700;
          color: var(--stellar-cyan);
          letter-spacing: 0.02em;
        }
        .step-dot {
          position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
          width: 10px; height: 10px; border-radius: 50%;
          background: var(--stellar-cyan);
          box-shadow: 0 0 14px var(--stellar-cyan);
        }
        .step-title {
          font-family: 'Syne', sans-serif;
          font-size: 18px; font-weight: 700;
          color: var(--stardust-white);
          margin-bottom: 6px;
        }
        .step-desc {
          font-family: 'Syne', sans-serif;
          font-size: 13.5px; line-height: 1.6;
          color: var(--asteroid-grey);
        }
      `}</style>
    </section>
  );
}

window.Services = Services;