'use client'

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

const products = [
  { 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)' },
  { name: 'Wolldecke «Vintersol»', price: '€ 89', desc: 'Weiche Merinowolle in warmen Tönen.', badge: 'Bald', bg: 'repeating-linear-gradient(40deg,#EDE5D5,#EDE5D5 11px,#E3D8C5 11px,#E3D8C5 22px)' },
  { name: 'Keramik-Schale «Ro»', price: '€ 38', desc: 'Für Früchte, Schlüssel oder stille Momente.', badge: null, bg: 'repeating-linear-gradient(40deg,#F2EAD8,#F2EAD8 11px,#E8DEC8 11px,#E8DEC8 22px)' },
  { name: 'Leinentuch «Morgon»', price: '€ 44', desc: 'Natürlich, weich, zeitlos.', badge: null, bg: 'repeating-linear-gradient(40deg,#EFE8D8,#EFE8D8 11px,#E5DBC6 11px,#E5DBC6 22px)' },
]

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

        {/* Header */}
        <div style={{ marginBottom: 64 }}>
          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#C4896A' }}>Shop</span>
          <h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 62, letterSpacing: -1, color: '#3D2B1F', margin: '14px 0 18px' }}>
            Stücke fürs Zuhause
          </h1>
          <p style={{ fontSize: 17, color: '#6b5d4e', maxWidth: 540, margin: 0, lineHeight: 1.7 }}>
            Handgefertigte Objekte für ein langsameres, bewussteres Zuhause.
            Jedes Stück ist mit Bedacht ausgewählt.
          </p>
        </div>

        {/* Shopify-Platzhalter-Hinweis */}
        <div style={{ background: '#F5F0E8', borderRadius: 20, padding: '20px 28px', marginBottom: 52, display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ fontSize: 20 }}>🛒</span>
          <p style={{ margin: 0, fontSize: 14, color: '#8a7a68', lineHeight: 1.6 }}>
            <strong style={{ color: '#3D2B1F' }}>Shop-Integration kommt bald.</strong>{' '}
            Diese Produkte sind Platzhalter. Die Shopify Storefront API wird in{' '}
            <code style={{ background: 'rgba(61,43,31,0.08)', padding: '2px 6px', borderRadius: 6, fontSize: 12 }}>lib/shopify.ts</code>{' '}
            integriert.
          </p>
        </div>

        {/* Product grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 30 }}>
          {products.map((p) => (
            <div
              key={p.name}
              onClick={() => posthog.capture('product_viewed', { product_name: p.name, price: p.price })}
              style={{ display: 'block', color: 'inherit', cursor: 'pointer' }}
            >
              <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: p.badge === 'Bald' ? '#C4896A' : '#A8B89A', color: '#FAFAF7', fontSize: 11.5, fontWeight: 700, letterSpacing: 0.6, padding: '6px 13px', borderRadius: 30 }}>
                    {p.badge}
                  </span>
                )}
                <span style={{ fontFamily: '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>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}