const { useState } = React;

const SERVICES = [
  {
    num: '01', icon: '◇', color: 'var(--accent)',
    title: 'Restaurant & Hospitality',
    desc: 'Online menus, reservation integrations, and immersive visuals that fill seats before doors open.',
    features: ['Digital menus & QR codes','Reservation system integrations','Google Business sync','Multi-language & RTL','Food photography-first layouts'],
    from: '$1,200',
  },
  {
    num: '02', icon: '◈', color: 'var(--mint)',
    title: 'Retail & E-Commerce',
    desc: 'Shopify, WooCommerce, or custom-built — designed to convert browsers into buyers.',
    features: ['Shopify & WooCommerce builds','Custom product catalogs','Payment gateway setup','Inventory integrations','Mobile-first checkout'],
    from: '$1,800',
  },
  {
    num: '03', icon: '△', color: 'var(--gold)',
    title: 'Professional Services',
    desc: 'Law firms, clinics, consultancies. Authority design that earns trust before a word is read.',
    features: ['Authority-first layouts','Lead capture & CRM integration','Case study & team pages','Appointment booking','Clean, trust-building copy'],
    from: '$1,400',
  },
  {
    num: '04', icon: '▣', color: 'var(--accent)',
    title: 'Institutions & Education',
    desc: 'Portals, course platforms, and public-facing sites for universities, schools, and governments.',
    features: ['Student & staff portals','Course & program listings','Event calendars','Full accessibility (WCAG)','Multi-language support'],
    from: '$3,500',
  },
  {
    num: '05', icon: '◎', color: 'var(--mint)',
    title: 'SaaS & Startups',
    desc: 'High-conversion landing pages and product sites that make investors lean forward.',
    features: ['Product landing pages','Interactive demo sections','Pricing page optimization','Blog & docs integration','Analytics & A/B setup'],
    from: '$2,200',
  },
  {
    num: '06', icon: '✦', color: 'var(--gold)',
    title: 'Custom Platforms',
    desc: 'Booking systems, marketplaces, member portals — full-stack engineering for ideas that don\'t fit a template.',
    features: ['Custom back-end architecture','User portals & dashboards','API & third-party integrations','Real-time features','Scalable cloud infrastructure'],
    from: 'Custom',
  },
];

const ServicesPage = ({ navigate }) => {
  const [open, setOpen] = useState(null);

  return (
    <>
      {/* Header */}
      <section className="section" style={{ paddingBottom: 56 }}>
        <div className="container">
          <span className="label">Services</span>
          <h1 className="display-lg reveal" style={{ marginBottom: 20 }}>
            One studio.<br />Every kind of digital presence.
          </h1>
          <p className="body-lg reveal d1" style={{ maxWidth: 520 }}>
            We design and build from scratch. No templates. No shortcuts.
            Whatever your business needs — we've built it before.
          </p>
        </div>
      </section>

      {/* Grid */}
      <section style={{ paddingBottom: 100 }}>
        <div className="container">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))',
            gap: 20,
          }}>
            {SERVICES.map((svc, i) => (
              <div key={svc.num}
                className="card reveal"
                style={{
                  padding: '36px 32px', cursor: 'pointer',
                  transitionDelay: `${i * 0.06}s`,
                  borderColor: open === i ? 'var(--border-accent)' : undefined,
                }}
                onClick={() => setOpen(open === i ? null : i)}>

                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  alignItems: 'flex-start', marginBottom: 22,
                }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: 2 }}>
                    ({svc.num})
                  </span>
                  <div style={{
                    width: 26, height: 26, borderRadius: '50%',
                    border: '1px solid var(--border)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, color: 'var(--muted)',
                    transition: 'transform 0.3s, border-color 0.3s, color 0.3s',
                    transform: open === i ? 'rotate(45deg)' : 'none',
                    borderColor: open === i ? 'var(--accent)' : undefined,
                    color: open === i ? 'var(--accent)' : undefined,
                  }}>+</div>
                </div>

                <div style={{ fontSize: 24, color: svc.color, marginBottom: 14 }}>{svc.icon}</div>
                <h3 style={{ fontFamily: 'var(--display)', fontSize: 26, fontWeight: 500, marginBottom: 10 }}>
                  {svc.title}
                </h3>
                <p className="body-md">{svc.desc}</p>

                {open === i && (
                  <div style={{
                    marginTop: 24, paddingTop: 24,
                    borderTop: '1px solid var(--border)',
                    animation: 'expandIn 0.28s ease',
                    transformOrigin: 'top',
                  }}>
                    <ul style={{ listStyle: 'none', marginBottom: 24 }}>
                      {svc.features.map(f => (
                        <li key={f} style={{
                          display: 'flex', alignItems: 'flex-start', gap: 10,
                          padding: '9px 0', fontSize: 13, color: 'var(--muted)',
                          borderBottom: '1px solid var(--border)',
                        }}>
                          <span style={{ color: 'var(--mint)', marginTop: 1, flexShrink: 0, fontSize: 12 }}>✓</span>
                          {f}
                        </li>
                      ))}
                    </ul>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <div>
                        <div style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: 2, color: 'var(--muted)', marginBottom: 6 }}>
                          STARTING FROM
                        </div>
                        <div style={{ fontFamily: 'var(--display)', fontSize: 30, fontWeight: 500, color: svc.color }}>
                          {svc.from}
                        </div>
                      </div>
                      <button className="btn btn-primary btn-sm"
                        onClick={(e) => { e.stopPropagation(); navigate('contact'); }}>
                        Get a Quote →
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Mobile apps highlight */}
          <div className="card reveal" style={{
            marginTop: 20,
            padding: '40px 36px',
            display: 'flex',
            alignItems: 'center',
            gap: 36,
            flexWrap: 'wrap',
            background: 'linear-gradient(135deg, rgba(123,104,238,0.07) 0%, rgba(0,205,160,0.04) 100%)',
            borderColor: 'rgba(0,205,160,0.15)',
          }}>
            <div style={{
              width: 72, height: 72, borderRadius: 18, flexShrink: 0,
              background: 'var(--mint-dim)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="30" height="30" viewBox="0 0 24 24" fill="none"
                stroke="var(--mint)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <rect x="5" y="2" width="14" height="20" rx="2"/>
                <line x1="12" y1="18" x2="12.01" y2="18"/>
              </svg>
            </div>
            <div style={{ flex: 1, minWidth: 200 }}>
              <h3 style={{ fontFamily: 'var(--display)', fontSize: 30, fontWeight: 500, marginBottom: 8 }}>
                Mobile Apps
              </h3>
              <p className="body-md">
                iOS & Android apps built for your business. Booking apps, ordering systems,
                loyalty programmes, customer portals. Native performance, custom design.
              </p>
            </div>
            <div style={{ textAlign: 'right', flexShrink: 0 }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: 2, color: 'var(--muted)', marginBottom: 6 }}>FROM</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 36, fontWeight: 500, color: 'var(--mint)' }}>$2,500</div>
              <button className="btn btn-primary btn-sm" style={{ marginTop: 14 }} onClick={() => navigate('contact')}>
                Learn More →
              </button>
            </div>
          </div>

          {/* Stack note */}
          <div className="reveal" style={{
            marginTop: 48, padding: '28px 32px',
            background: 'var(--surface)',
            borderRadius: 'var(--radius)',
            display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap',
          }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: 2, color: 'var(--muted)', flexShrink: 0 }}>
              WE BUILD WITH
            </div>
            {['Next.js','React','Shopify','WordPress','Webflow','Node.js','AWS','Vercel'].map(t => (
              <span key={t} style={{
                padding: '5px 14px', background: 'var(--card)',
                border: '1px solid var(--border)', borderRadius: 100,
                fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)',
              }}>{t}</span>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

window.ServicesPage = ServicesPage;