'use client'

import Image from 'next/image'
import Link from 'next/link'
import NewsletterForm from '@/components/ui/NewsletterForm'
import { posthog } from '@/lib/posthog'

export default function HomePage() {
  return (
    <div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', overflow: 'hidden', position: 'relative', lineHeight: 1.6 }}>

      {/* ===== HERO ===== */}
      <section style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '40px 48px 90px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div style={{ position: 'relative', zIndex: 5 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: '#F5F0E8', borderRadius: 40, padding: '7px 16px 7px 12px', marginBottom: 28 }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#C4896A', display: 'inline-block' }} />
            <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#8a7a68' }}>Seit 2019 · Schweden</span>
          </div>
          <h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 78, lineHeight: 1.04, letterSpacing: -1, margin: '0 0 24px', color: '#3D2B1F' }}>
            Leben.<br />
            <span style={{ fontStyle: 'italic', color: '#C4896A' }}>Langsam.</span> Schön.
          </h1>
          <p style={{ fontSize: 17.5, lineHeight: 1.7, color: '#6b5d4e', maxWidth: 430, margin: '0 0 38px' }}>
            Handgemachte Stücke und sanfte Rituale für ein Zuhause, das zur Ruhe einlädt. Wir feiern das Langsame, das Echte, das Wesentliche.
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
            <Link
              href="/shop"
              onClick={() => posthog.capture('hero_cta_clicked', { destination: '/shop', label: 'Entdecken' })}
              style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, background: '#C4896A', color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, letterSpacing: 0.3, padding: '16px 32px', borderRadius: 44 }}
            >
              Entdecken
              <span style={{ display: 'inline-block', width: 18, height: 18, borderRadius: '50%', border: '1.5px solid rgba(250,250,247,0.6)' }} />
            </Link>
            <Link
              href="/#ueber"
              onClick={() => posthog.capture('hero_cta_clicked', { destination: '/#ueber', label: 'Unsere Geschichte' })}
              style={{ textDecoration: 'none', fontSize: 15, fontWeight: 600, color: '#3D2B1F', borderBottom: '1.5px solid #A8B89A', paddingBottom: 3 }}
            >
              Unsere Geschichte
            </Link>
          </div>
        </div>

        <div style={{ position: 'relative', height: 560 }}>
          <div style={{ position: 'absolute', right: -30, top: 20, width: '120%', height: 520, background: '#F5F0E8', borderRadius: '46% 54% 48% 52% / 56% 44% 56% 44%' }} />
          <div style={{ position: 'absolute', inset: 0, right: -10, borderRadius: '48% 52% 46% 54% / 54% 46% 54% 46%', overflow: 'hidden', background: '#EDE6DA' }}>
            <Image
              src="/hero-lifestyle.png"
              alt="Stilles Stillleben mit zwei Tassen Tee, getrockneten Blumen und Leinen am Fenster"
              fill
              style={{ objectFit: 'cover' }}
              priority
            />
          </div>
          <div className="animate-float" style={{ position: 'absolute', left: -46, bottom: 30, width: 118, height: 118, borderRadius: '50% 50% 50% 14px', background: '#A8B89A', zIndex: 6 }} />
          <div className="animate-float-slow" style={{ position: 'absolute', right: 8, top: -18, width: 64, height: 64, borderRadius: '50%', background: '#C4896A', opacity: 0.85, zIndex: 6 }} />
        </div>
      </section>

      {/* ===== ÜBER UNS ===== */}
      <section id="ueber" style={{ position: 'relative', background: '#F5F0E8', padding: '120px 48px' }}>
        <div style={{ position: 'absolute', left: -90, top: 60, width: 240, height: 240, borderRadius: '42% 58% 60% 40% / 52% 44% 56% 48%', background: '#FAFAF7', opacity: 0.6 }} />
        <div style={{ position: 'absolute', right: -60, bottom: -40, width: 200, height: 200, borderRadius: '50% 50% 46% 54% / 58% 50% 50% 42%', background: '#A8B89A', opacity: 0.32 }} />
        <div style={{ position: 'relative', zIndex: 3, maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#A8B89A' }}>Über uns</span>
          <p style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 400, fontSize: 38, lineHeight: 1.42, letterSpacing: -0.4, color: '#3D2B1F', margin: '26px auto 0', maxWidth: 760 }}>
            HyggeCraftery wurde aus einer einfachen Sehnsucht geboren — nach mehr Wärme im Alltag. Wir gestalten Dinge, die zum Innehalten einladen, von Hand und mit Bedacht gefertigt. Denn das schönste Leben ist nicht das schnellste, sondern das achtsamste.
          </p>
        </div>
      </section>

      {/* ===== SHOP TEASER ===== */}
      <section id="shop" style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '120px 48px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 54, gap: 24, flexWrap: 'wrap' }}>
          <div>
            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#C4896A' }}>Shop</span>
            <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, letterSpacing: -0.8, color: '#3D2B1F', margin: '14px 0 0' }}>
              Stücke fürs Zuhause
            </h2>
          </div>
          <Link
            href="/shop"
            onClick={() => posthog.capture('hero_cta_clicked', { destination: '/shop', label: 'Zum Shop' })}
            style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, border: '1.5px solid #3D2B1F', color: '#3D2B1F', fontSize: 15, fontWeight: 600, padding: '14px 28px', borderRadius: 44 }}
          >
            Zum Shop <span style={{ fontSize: 18, lineHeight: 1 }}>→</span>
          </Link>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 30 }}>
          {shopProducts.map((p) => (
            <Link
              key={p.name}
              href="/shop"
              onClick={() => posthog.capture('product_teaser_clicked', { product_name: p.name, price: p.price })}
              style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}
            >
              <div style={{ position: 'relative', height: 360, borderRadius: 30, overflow: 'hidden', background: p.bg, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: 18 }}>
                {p.badge && (
                  <span style={{ position: 'absolute', top: 18, left: 18, background: '#A8B89A', color: '#FAFAF7', fontSize: 11.5, fontWeight: 700, letterSpacing: 0.6, padding: '6px 13px', borderRadius: 30 }}>
                    {p.badge}
                  </span>
                )}
                <span style={{ fontFamily: 'Mulish, monospace', fontSize: 11.5, letterSpacing: 1, color: '#8a7a68', background: 'rgba(250,250,247,0.72)', padding: '7px 13px', borderRadius: 18 }}>
                  [ Produktfoto ]
                </span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 18 }}>
                <h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 23, color: '#3D2B1F', margin: 0 }}>{p.name}</h3>
                <span style={{ fontSize: 15, fontWeight: 700, color: '#C4896A' }}>{p.price}</span>
              </div>
              <p style={{ fontSize: 14, color: '#8a7a68', margin: '5px 0 0' }}>{p.desc}</p>
            </Link>
          ))}
        </div>
      </section>

      {/* ===== APPS TEASER ===== */}
      <section id="apps" style={{ position: 'relative', background: '#3D2B1F', color: '#FAFAF7', padding: '120px 48px', borderRadius: '60px 60px 0 0' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto 60px' }}>
            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#A8B89A' }}>Unsere Apps</span>
            <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, letterSpacing: -0.8, margin: '14px 0 16px', color: '#FAFAF7' }}>
              Achtsamkeit in der Tasche
            </h2>
            <p style={{ fontSize: 16, color: 'rgba(250,250,247,0.62)', margin: 0 }}>
              Drei sanfte Begleiter für einen langsameren, bewussteren Alltag.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 26 }}>
            {appCards.map((app) => (
              <div key={app.name} style={{ background: 'rgba(250,250,247,0.05)', border: '1px solid rgba(250,250,247,0.1)', borderRadius: 30, padding: '38px 32px' }}>
                <div style={{ width: 62, height: 62, borderRadius: app.iconRadius, background: app.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
                  <span style={app.iconInner} />
                </div>
                <h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 27, margin: '0 0 10px', color: '#FAFAF7' }}>{app.name}</h3>
                <p style={{ fontSize: 14.5, color: 'rgba(250,250,247,0.6)', margin: '0 0 22px' }}>{app.desc}</p>
                <Link
                  href={app.href}
                  onClick={() => posthog.capture('app_teaser_clicked', { app_name: app.name })}
                  style={{ textDecoration: 'none', fontSize: 14.5, fontWeight: 600, color: app.linkColor, borderBottom: `1.5px solid ${app.linkColor}50`, paddingBottom: 2 }}
                >
                  Mehr erfahren →
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== NEWSLETTER ===== */}
      <section id="newsletter" style={{ position: 'relative', background: '#3D2B1F', padding: '0 48px 120px' }}>
        <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', background: '#FAFAF7', borderRadius: 44, padding: '72px 56px', textAlign: 'center', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -40, top: -40, width: 160, height: 160, borderRadius: '50% 50% 46% 54% / 56% 50% 50% 44%', background: '#F5F0E8' }} />
          <div style={{ position: 'absolute', left: -30, bottom: -30, width: 110, height: 110, borderRadius: '50% 50% 50% 14px', background: '#A8B89A', opacity: 0.4 }} />
          <div style={{ position: 'relative', zIndex: 3 }}>
            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#C4896A' }}>Newsletter</span>
            <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 44, letterSpacing: -0.6, color: '#3D2B1F', margin: '18px 0 14px' }}>
              Ein wenig Hygge in dein Postfach
            </h2>
            <p style={{ fontSize: 16, color: '#8a7a68', margin: '0 auto 36px', maxWidth: 460 }}>
              Sanfte Geschichten, saisonale Rituale und stille Inspiration — etwa einmal im Monat, ganz ohne Eile.
            </p>
            <NewsletterForm source="homepage" />
          </div>
        </div>
      </section>

    </div>
  )
}

const shopProducts = [
  {
    name: 'Leinen-Kissen «Fjord»',
    price: '€ 48',
    desc: 'Sanftes Leinen in gedämpftem Salbei.',
    badge: 'Neu',
    bg: 'repeating-linear-gradient(40deg,#F0E8DA,#F0E8DA 11px,#E7DDCC 11px,#E7DDCC 22px)',
  },
  {
    name: 'Keramik-Tasse «Lykke»',
    price: '€ 32',
    desc: 'Handgedreht, jede ein Unikat.',
    badge: null,
    bg: 'repeating-linear-gradient(40deg,#EEE6D6,#EEE6D6 11px,#E4D9C7 11px,#E4D9C7 22px)',
  },
  {
    name: 'Duftkerze «Skog»',
    price: '€ 26',
    desc: 'Zeder, Moos und stiller Wald.',
    badge: null,
    bg: 'repeating-linear-gradient(40deg,#F0E8DA,#F0E8DA 11px,#E6DBCA 11px,#E6DBCA 22px)',
  },
]

const appCards = [
  {
    name: 'Snakkimo',
    desc: 'Tägliche Sprach-Impulse, die dich in kleinen Schritten weiterbringen.',
    href: '/apps/snakkimo',
    accent: '#A8B89A',
    iconRadius: '20px 20px 20px 6px',
    iconInner: { width: 24, height: 24, borderRadius: '50%', border: '3px solid #3D2B1F', display: 'inline-block' } as React.CSSProperties,
    linkColor: '#A8B89A',
  },
  {
    name: 'Fittimo',
    desc: 'Sanfte Bewegung und Atemübungen für Körper und Geist im Einklang.',
    href: '/apps/fittimo',
    accent: '#C4896A',
    iconRadius: '20px 6px 20px 20px',
    iconInner: { width: 24, height: 24, background: '#3D2B1F', transform: 'rotate(45deg)', borderRadius: 5, display: 'inline-block' } as React.CSSProperties,
    linkColor: '#C4896A',
  },
  {
    name: 'Rezeptimo',
    desc: 'Saisonale Rezepte zum langsamen Kochen — ehrlich, einfach, nährend.',
    href: '/apps/rezeptimo',
    accent: '#F5F0E8',
    iconRadius: '6px 20px 20px 20px',
    iconInner: { width: 24, height: 24, borderRadius: '50% 50% 50% 4px', background: '#3D2B1F', display: 'inline-block' } as React.CSSProperties,
    linkColor: '#F5F0E8',
  },
]