import { createFileRoute, Link } from '@tanstack/react-router'
import { Box, Button, Group, SimpleGrid, Text, Title } from '@pikku/mantine/core'
import { useLocale } from '@/i18n/config'
import { m } from '@/i18n/messages'
import { asI18n } from '@pikku/react'

function QSeal({ size = 30, fontSize = 17, bg = '#1F5641', color = '#FBFAF7', radius = 7 }: {
  size?: number; fontSize?: number; bg?: string; color?: string; radius?: number
}) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: size, height: size, borderRadius: radius,
      background: bg, color, flexShrink: 0,
      fontFamily: "'Source Serif 4', Georgia, serif",
      fontWeight: 600, fontSize, lineHeight: 1,
    }}>
      Q
    </span>
  )
}

function LandingNav() {
  return (
    <Box style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '22px 48px', borderBottom: '1px solid rgba(255,255,255,.07)',
    }}>
      <Group gap={11}>
        <QSeal bg="#2E6F54" />
        <Text style={{ fontFamily: "'Source Serif 4', Georgia, serif", fontSize: 20, fontWeight: 600, color: '#F4F1E9', letterSpacing: '-.01em' }}>
          {m.common_brand_name()}
        </Text>
      </Group>
      <Group gap={34}>
        <Text size="sm" style={{ color: 'rgba(244,241,233,.62)' }}>{m.landing_nav_product()}</Text>
        <Text size="sm" style={{ color: 'rgba(244,241,233,.62)' }}>{m.landing_nav_templates()}</Text>
        <Text size="sm" style={{ color: 'rgba(244,241,233,.62)' }}>{m.landing_nav_pricing()}</Text>
        <Link to="/login" style={{ textDecoration: 'none' }}>
          <Text size="sm" style={{ color: 'rgba(244,241,233,.62)' }}>{m.app_nav_sign_in()}</Text>
        </Link>
        <Link to="/signup" style={{ textDecoration: 'none' }}>
          <Box style={{
            fontSize: 14, fontWeight: 600, color: '#0E1F18',
            background: '#EBC57A', padding: '9px 18px', borderRadius: 6,
            cursor: 'pointer',
          }}>
            {m.landing_nav_cta()}
          </Box>
        </Link>
      </Group>
    </Box>
  )
}

function FloatingResolutionCard() {
  return (
    <Box style={{
      background: '#FBFAF7', borderRadius: 4,
      boxShadow: '0 30px 80px -24px rgba(0,0,0,.5)',
      transform: 'rotate(.6deg)', overflow: 'hidden',
    }}>
      <Box style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px 22px', borderBottom: '1px solid #E6E3DB',
      }}>
        <Group gap={9}>
          <QSeal size={22} fontSize={12} radius={5} />
          <Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: '#8A938C', letterSpacing: '.04em' }}>
            {asI18n('BESCHLUSS · 2026-014')}
          </Text>
        </Group>
        <Box style={{
          fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600,
          fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase',
          color: '#1F5641', background: '#E7F0EA', padding: '4px 9px', borderRadius: 20,
        }}>
          Published
        </Box>
      </Box>
      <Box style={{ padding: '24px 24px 26px' }}>
        <Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: '#A9B0A6', marginBottom: 8 }}>
          {asI18n('Profit Distribution')}
        </Text>
        <Text style={{ fontFamily: "'Source Serif 4', Georgia, serif", fontSize: 21, fontWeight: 600, color: '#16201B', lineHeight: 1.25, marginBottom: 20 }}>
          {asI18n('Resolution on the appropriation of the 2025 annual result')}
        </Text>
        {([
          ['Distributable profit', '€ 248,500.00'],
          ['Per share (25,000)', '€ 9.94'],
          ['Record date', '31 May 2026'],
        ] as [string, string][]).map(([label, value]) => (
          <Box key={label} style={{ display: 'flex', justifyContent: 'space-between', padding: '11px 0', borderTop: '1px solid #EFEDE6' }}>
            <Text size="sm" style={{ color: '#55615A' }}>{asI18n(label)}</Text>
            <Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, fontWeight: 600, color: '#16201B' }}>{asI18n(value)}</Text>
          </Box>
        ))}
        <Box style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 22, paddingTop: 18, borderTop: '1px solid #EFEDE6' }}>
          <Box style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 40, height: 40, borderRadius: '50%', border: '1.5px solid #B08A3E',
            color: '#B08A3E', fontFamily: "'IBM Plex Mono', monospace", fontSize: 9, textAlign: 'center', lineHeight: 1.1,
          }}>
            SIG<br />NED
          </Box>
          <Box>
            <Text size="xs" fw={600} style={{ color: '#16201B' }}>{asI18n('M. Bauer · Managing Director')}</Text>
            <Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: '#8A938C' }}>{asI18n('signed 02 Jun 2026, 14:21')}</Text>
          </Box>
        </Box>
      </Box>
    </Box>
  )
}

const FEATURES = [
  { num: '01', titleKey: 'landing_feature1_title' as const, descKey: 'landing_feature1_desc' as const },
  { num: '02', titleKey: 'landing_feature2_title' as const, descKey: 'landing_feature2_desc' as const },
  { num: '03', titleKey: 'landing_feature3_title' as const, descKey: 'landing_feature3_desc' as const },
  { num: '04', titleKey: 'landing_feature4_title' as const, descKey: 'landing_feature4_desc' as const },
]

function IndexPage() {
  useLocale()
  return (
    <Box style={{ background: '#0E1F18', minHeight: '100vh' }}>
      <LandingNav />

      {/* Hero */}
      <Box style={{
        position: 'relative', padding: '84px 48px 76px',
        display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 56, alignItems: 'center',
      }}>
        <Box style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(900px 460px at 16% 18%, rgba(46,111,84,.30), transparent 70%)',
          pointerEvents: 'none',
        }} />

        {/* Left column */}
        <Box style={{ position: 'relative' }}>
          <Box style={{
            display: 'inline-flex', alignItems: 'center', gap: 9,
            padding: '7px 14px', border: '1px solid rgba(235,197,122,.34)',
            borderRadius: 30, marginBottom: 28,
          }}>
            <Box style={{ width: 5, height: 5, borderRadius: '50%', background: '#EBC57A', flexShrink: 0 }} />
            <Text style={{
              fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600,
              fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: '#EBC57A',
            }}>
              {m.landing_eyebrow()}
            </Text>
          </Box>

          <Title style={{
            margin: 0, fontFamily: "'Source Serif 4', Georgia, serif",
            fontWeight: 380, fontSize: 'clamp(2.5rem, 4vw, 3.875rem)',
            lineHeight: 1.06, letterSpacing: '-.025em', color: '#F4F1E9',
          }}>
            {m.landing_headline_plain()}<br />
            <span style={{ fontStyle: 'italic', color: '#8FCBA9' }}>
              {m.landing_headline_accent()}
            </span>
          </Title>

          <Text style={{ margin: '28px 0 0', maxWidth: 460, fontSize: 17, lineHeight: 1.7, color: 'rgba(244,241,233,.66)' }}>
            {m.landing_subline()}
          </Text>

          <Group gap={13} mt={36}>
            <Button
              component={Link}
              to="/signup"
              style={{
                fontSize: 15, fontWeight: 600, color: '#0E1F18',
                background: '#EBC57A', border: 'none',
                padding: '13px 24px', borderRadius: 7, height: 'auto',
              }}
            >
              {m.landing_cta_primary()}
            </Button>
            <Button
              component={Link}
              to="/login"
              variant="outline"
              style={{
                fontSize: 15, fontWeight: 500, color: '#F4F1E9',
                border: '1px solid rgba(244,241,233,.26)',
                padding: '13px 22px', borderRadius: 7, height: 'auto',
                background: 'transparent',
              }}
            >
              {m.landing_cta_secondary()}
            </Button>
          </Group>

          {/* Stats */}
          <Group gap={0} mt={44} align="stretch">
            {[
              { value: m.landing_stat1_value(), label: m.landing_stat1_label() },
              { value: m.landing_stat2_value(), label: m.landing_stat2_label() },
              { value: m.landing_stat3_value(), label: m.landing_stat3_label() },
            ].map(({ value, label }, i) => (
              <Group key={String(value)} gap={0} align="stretch">
                {i > 0 && (
                  <Box style={{ width: 1, background: 'rgba(244,241,233,.12)', marginInline: 28, alignSelf: 'stretch' }} />
                )}
                <Box>
                  <Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 24, fontWeight: 600, color: '#F4F1E9' }}>
                    {value}
                  </Text>
                  <Text size="xs" style={{ color: 'rgba(244,241,233,.5)', marginTop: 3 }}>{label}</Text>
                </Box>
              </Group>
            ))}
          </Group>
        </Box>

        {/* Right column */}
        <Box style={{ position: 'relative' }}>
          <FloatingResolutionCard />
        </Box>
      </Box>

      {/* Feature strip */}
      <Box style={{ borderTop: '1px solid rgba(255,255,255,.07)', padding: '54px 48px 64px' }}>
        <Text style={{
          fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600,
          fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase',
          color: 'rgba(244,241,233,.42)', textAlign: 'center', marginBottom: 38,
        }}>
          {m.landing_features_eyebrow()}
        </Text>
        <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="xl">
          {FEATURES.map(({ num, titleKey, descKey }) => (
            <Box key={num}>
              <Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, color: '#8FCBA9', marginBottom: 14 }}>
                {asI18n(num)}
              </Text>
              <Text style={{ fontFamily: "'Source Serif 4', Georgia, serif", fontSize: 18, fontWeight: 600, color: '#F4F1E9', marginBottom: 8 }}>
                {m[titleKey]()}
              </Text>
              <Text size="sm" style={{ lineHeight: 1.65, color: 'rgba(244,241,233,.55)' }}>
                {m[descKey]()}
              </Text>
            </Box>
          ))}
        </SimpleGrid>
      </Box>

      {/* Footer */}
      <Box style={{ padding: '20px 48px', borderTop: '1px solid rgba(255,255,255,.06)', textAlign: 'center' }}>
        <Text style={{
          fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
          color: 'rgba(244,241,233,.32)', letterSpacing: '.06em',
        }}>
          {m.landing_footer()}
        </Text>
      </Box>
    </Box>
  )
}

export const Route = createFileRoute('/')({
  component: IndexPage,
})