'use client'

import Link from 'next/link'
import { posthog } from '@/lib/posthog'

const apps = [
  {
    name: 'Snakkimo',
    tagline: 'Eine Kachel. Eine Lektion. Eine Sprache.',
    desc: 'Sprachen lernen, das sich anfühlt wie durch einen schönen Feed scrollen. Kleine Lektionen, großer Effekt — ganz ohne Druck.',
    href: '/apps/snakkimo',
    accent: '#7BA7BC',
    iconRadius: '20px 20px 20px 6px',
    badge: 'Sprachen lernen für Erwachsene',
  },
  {
    name: 'Fittimo',
    tagline: 'Eine Übung. Jederzeit. Überall.',
    desc: 'Sanfte Bewegung und Atemübungen für Körper und Geist im Einklang. Kleine Übungen, großer Effekt.',
    href: '/apps/fittimo',
    accent: '#7DAF8A',
    iconRadius: '20px 6px 20px 20px',
    badge: 'Bewegung im Alltag',
  },
  {
    name: 'Rezeptimo',
    tagline: 'Ein Rezept. Einfach. Genussvoll.',
    desc: 'Saisonale Rezepte zum langsamen Kochen — ehrlich, einfach, nährend. Ganz ohne Stress.',
    href: '/apps/rezeptimo',
    accent: '#C4896A',
    iconRadius: '6px 20px 20px 20px',
    badge: 'Kochen mit Freude',
  },
]

export default function AppsPage() {
  return (
    <div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '80px 48px 120px' }}>

        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 80px' }}>
          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#A8B89A' }}>Unsere Apps</span>
          <h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 58, letterSpacing: -0.8, color: '#3D2B1F', margin: '14px 0 18px' }}>
            Achtsamkeit in der Tasche
          </h1>
          <p style={{ fontSize: 17, color: '#6b5d4e', margin: 0, lineHeight: 1.7 }}>
            Drei sanfte Begleiter für einen langsameren, bewussteren Alltag.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          {apps.map((app, i) => (
            <Link
              key={app.name}
              href={app.href}
              onClick={() => posthog.capture('app_card_clicked', { app_name: app.name })}
              style={{
                textDecoration: 'none',
                display: 'grid',
                gridTemplateColumns: i % 2 === 0 ? '1fr 2fr' : '2fr 1fr',
                gap: 48,
                alignItems: 'center',
                background: '#F5F0E8',
                borderRadius: 40,
                padding: '56px 64px',
                color: 'inherit',
              }}
            >
              {i % 2 !== 0 && (
                <div>
                  <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', color: app.accent }}>{app.badge}</span>
                  <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 44, letterSpacing: -0.6, color: '#3D2B1F', margin: '12px 0 16px' }}>{app.tagline}</h2>
                  <p style={{ fontSize: 16, color: '#6b5d4e', margin: '0 0 28px', lineHeight: 1.7 }}>{app.desc}</p>
                  <span style={{ fontSize: 15, fontWeight: 600, color: app.accent, borderBottom: `1.5px solid ${app.accent}`, paddingBottom: 3 }}>Mehr erfahren →</span>
                </div>
              )}

              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <div style={{ width: 200, height: 200, borderRadius: app.iconRadius, background: app.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 64, fontWeight: 600, color: 'rgba(250,250,247,0.9)' }}>
                    {app.name[0]}
                  </span>
                </div>
              </div>

              {i % 2 === 0 && (
                <div>
                  <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', color: app.accent }}>{app.badge}</span>
                  <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 44, letterSpacing: -0.6, color: '#3D2B1F', margin: '12px 0 16px' }}>{app.tagline}</h2>
                  <p style={{ fontSize: 16, color: '#6b5d4e', margin: '0 0 28px', lineHeight: 1.7 }}>{app.desc}</p>
                  <span style={{ fontSize: 15, fontWeight: 600, color: app.accent, borderBottom: `1.5px solid ${app.accent}`, paddingBottom: 3 }}>Mehr erfahren →</span>
                </div>
              )}
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}