/* SERVICES — Web, Performance Marketing, MVP */

function Services() {
  const isMobile = useWindowWidth() < 768;
  return (
    <section data-screen-label="06 Services" id="services" style={{ paddingTop: 64, paddingBottom: 64, overflow: 'hidden' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Our services"
          title={<>From ideas into high-impact solutions<br /><span className="accent">that inspire and convert.</span></>}
          lead="One squad, four practices. We embed with your team and operate as your performance design + growth engineering layer."
          align="left"
        />

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr', gap: 18 }}>
          {/* Left column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <ServiceWebMobile />
            <ServiceMVP />
          </div>
          {/* Right column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <ServicePerformance />
            <ServiceWebsites />
            <ServiceCTA />
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ tag, title, body, footer, children, height, color = 'var(--ink)', tagColor = 'var(--green-deep)' }) {
  const isMobile = useWindowWidth() < 768;
  return (
    <Reveal className="card" style={{ padding: 28, minHeight: height, display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'flex-start', gap: isMobile ? 12 : 18 }}>
        <div style={{ flex: 1 }}>
          <div className="mono-label" style={{ color: tagColor, marginBottom: 8 }}>{tag}</div>
          <h3 className="h3" style={{ color, fontSize: 24, fontWeight: 600 }}>{title}</h3>
          {body && <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: '10px 0 0 0', lineHeight: 1.55, maxWidth: '52ch' }}>{body}</p>}
        </div>
        {footer}
      </div>
      {children}
    </Reveal>
  );
}

function ServiceWebMobile() {
  const isMobile = useWindowWidth() < 768;
  return (
    <ServiceCard
      tag="01 / WEB & MOBILE APPS"
      title="Web & mobile apps"
      body="We design and develop high-performing web and mobile applications that are intuitive, scalable, and visually compelling."
      footer={null}
    >
      <div style={{
        background: 'var(--bg-2)',
        borderRadius: 14,
        padding: 24,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        height: isMobile ? 220 : 280, position: 'relative', overflow: 'hidden',
        border: '1px solid var(--hairline-2)',
      }}>
        <PhoneMockup />
      </div>
    </ServiceCard>
  );
}

function PhoneMockup() {
  return (
    <div style={{
      width: 180, height: 360, borderRadius: 32,
      background: 'var(--ink)',
      padding: 6,
      boxShadow: '0 30px 70px -20px rgba(10,15,12,.4)',
      transform: 'rotate(-4deg)',
    }}>
      <div style={{
        background: 'white', borderRadius: 26, height: '100%',
        padding: 14, display: 'flex', flexDirection: 'column', gap: 8,
        fontFamily: 'var(--font-sans)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>
          <span>9:41</span>
          <span>●●●</span>
        </div>
        <div style={{ fontSize: 9, color: 'var(--green-deep)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>EARN MORE</div>
        <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.02em' }}>Today's revenue</div>
        <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.03em' }}>$48,210</div>
        <div style={{ background: 'var(--bg)', borderRadius: 10, padding: 10, marginTop: 4 }}>
          <Sparkline values={[10,14,12,16,20,22,28,30,35,32,38,42,48]} width={140} height={40} color="var(--green)" />
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
          {['CVR', 'AOV', 'CAC'].map(l => (
            <div key={l} style={{ flex: 1, background: 'var(--bg)', borderRadius: 8, padding: 8, textAlign: 'center' }}>
              <div style={{ fontSize: 8, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>{l}</div>
              <div style={{ fontSize: 11, fontWeight: 600, marginTop: 2 }}>↑</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 'auto', background: 'var(--green)', color: 'white', textAlign: 'center', padding: '10px 0', borderRadius: 10, fontSize: 11, fontWeight: 600 }}>
          View campaigns
        </div>
      </div>
    </div>
  );
}

function ServiceWebsites() {
  const items = [
    'Strategy', 'User research', 'Branding',
    'Development', 'UI/UX Design',
    'Copywriting & storytelling', 'SEO optimization',
  ];
  return (
    <ServiceCard
      tag="02 / WEBSITES & LANDING PAGES"
      title="High-Performing Websites & Landing Pages"
      body="We don't just build websites, we build growth engines. From Shopify to custom-coded platforms, every site we design is optimized for performance, conversions, and impact."
      footer={
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', background: 'var(--green-soft)', borderRadius: 999, fontSize: 12, color: 'var(--green-deep)', fontWeight: 500, whiteSpace: 'nowrap' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)' }}></span>
          Shopify Partner
        </div>
      }
    >
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {items.map(t => <span key={t} className="tag" style={{ fontSize: 13, padding: '7px 14px' }}>{t}</span>)}
      </div>
    </ServiceCard>
  );
}

function ServicePerformance() {
  const features = [
    'Campaign strategy & planning',
    'Creative & copywriting',
    'Targeting & funnel setup',
    'Analytics & reporting',
    'Retention & lifecycle',
  ];
  return (
    <ServiceCard
      tag="03 / PERFORMANCE MARKETING"
      title="Performance Marketing"
      body="From strategy to optimization, we help you turn clicks into conversions and campaigns into consistent growth — across Meta, Google, TikTok and Klaviyo."
      footer={
        <div style={{ background: 'var(--green-soft)', color: 'var(--green-deep)', padding: '6px 12px', borderRadius: 999, fontSize: 12, fontWeight: 500, whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon.Check size={12} /> Guaranteed 3× ROAS
        </div>
      }
    >
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
        {features.map(f => (
          <li key={f} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', border: '1px solid var(--hairline-2)', borderRadius: 10, fontSize: 13 }}>
            <span>{f}</span>
            <span style={{ color: 'var(--green)' }}><Icon.Check size={14} /></span>
          </li>
        ))}
      </ul>
    </ServiceCard>
  );
}

function ServiceMVP() {
  const isMobile = useWindowWidth() < 768;
  return (
    <ServiceCard
      tag="04 / MVP DESIGN & DEVELOPMENT"
      title="MVP design & development"
      body="Validate your idea with a fast, functional, and beautifully designed MVP. We specialize in rapid prototyping, lean development, and scalable design systems."
      footer={null}
    >
      <div style={{
        background: 'var(--ink)', color: 'white',
        borderRadius: 14, padding: 18, position: 'relative',
        overflow: 'hidden',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,.5)', marginBottom: 12, overflow: 'hidden' }}>
          <span style={{ flexShrink: 0, width: 8, height: 8, borderRadius: '50%', background: 'var(--green)' }}></span>
          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>ROAS_DASHBOARD.JSX · v0.3</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {[
            { l: 'Spend',   v: '$12.4k', d: '+3.4%' },
            { l: 'Revenue', v: '$58.2k', d: '+18%' },
            { l: 'ROAS',    v: '4.69×',  d: '+0.7×' },
          ].map(s => (
            <div key={s.l} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.06)', borderRadius: 8, padding: 10 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,.5)', textTransform: 'uppercase' }}>{s.l}</div>
              <div className="num" style={{ fontSize: 18, marginTop: 4, fontWeight: 500 }}>{s.v}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--green-bright)', marginTop: 2 }}>↑ {s.d}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 10, overflow: 'hidden' }}>
          <Sparkline values={[20,22,24,28,30,34,38,42,45,49,52,58]} width={isMobile ? 260 : 420} height={48} color="var(--green-bright)" />
        </div>
      </div>
    </ServiceCard>
  );
}

function ServiceCTA() {
  return (
    <Reveal style={{
      background: 'var(--ink)',
      color: 'white',
      borderRadius: 22,
      padding: 28,
      position: 'relative',
      overflow: 'hidden',
      minHeight: 180,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    }}>
      {/* glow */}
      <div aria-hidden style={{
        position: 'absolute', inset: -40, opacity: 0.5,
        background: 'radial-gradient(circle at 80% 100%, rgba(15,191,97,.45), transparent 50%)',
        pointerEvents: 'none',
      }}></div>
      <div style={{ position: 'relative' }}>
        <h3 className="h3" style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>
          World-class design,<br />
          data-driven marketing,<br />
          unstoppable growth.
        </h3>
      </div>
      <div style={{ position: 'relative', marginTop: 24 }}>
        <BtnGreen>Book a call</BtnGreen>
      </div>
    </Reveal>
  );
}

window.Services = Services;