'use client'

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

export default function Footer() {
  return (
    <footer style={{ background: '#3D2B1F', color: '#FAFAF7', padding: '0 48px 48px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', borderTop: '1px solid rgba(250,250,247,0.14)', paddingTop: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, paddingBottom: 52 }}>

          {/* Brand */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 18 }}>
              <div style={{ width: 30, height: 30, borderRadius: '50% 50% 50% 10px', background: '#A8B89A' }} />
              <span style={{ fontFamily: 'var(--font-cormorant), "Cormorant Garamond", serif', fontSize: 23, fontWeight: 600, color: '#FAFAF7' }}>
                HyggeCraftery
              </span>
            </div>
            <p style={{ fontSize: 14.5, color: 'rgba(250,250,247,0.55)', maxWidth: 280, margin: 0 }}>
              Skandinavisches Lifestyle-Handwerk für ein langsameres, schöneres Leben. Mit Liebe gemacht in Schweden.
            </p>
          </div>

          {/* Entdecken */}
          <div>
            <h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: '#A8B89A', margin: '0 0 18px' }}>
              Entdecken
            </h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <FooterLink href="/shop" section="Entdecken">Shop</FooterLink>
              <FooterLink href="/apps" section="Entdecken">Apps</FooterLink>
              <FooterLink href="/#ueber" section="Entdecken">Über uns</FooterLink>
              <FooterLink href="/#newsletter" section="Entdecken">Newsletter</FooterLink>
            </div>
          </div>

          {/* Service */}
          <div>
            <h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: '#A8B89A', margin: '0 0 18px' }}>
              Service
            </h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <FooterLink href="#" section="Service">Versand</FooterLink>
              <FooterLink href="#" section="Service">Kontakt</FooterLink>
              <FooterLink href="#" section="Service">Impressum</FooterLink>
              <FooterLink href="#" section="Service">Datenschutz</FooterLink>
            </div>
          </div>

          {/* Social */}
          <div>
            <h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: '#A8B89A', margin: '0 0 18px' }}>
              Folgen
            </h4>
            <div style={{ display: 'flex', gap: 12 }}>
              {[['Ig', 'Instagram'], ['Pin', 'Pinterest'], ['Jo', 'Journal']].map(([abbr, label]) => (
                <a
                  key={abbr}
                  href="#"
                  title={label}
                  onClick={() => posthog.capture('footer_link_clicked', { label, section: 'Folgen' })}
                  style={{
                    textDecoration: 'none',
                    width: 42,
                    height: 42,
                    borderRadius: '50% 50% 50% 12px',
                    background: 'rgba(250,250,247,0.08)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: 13,
                    fontWeight: 600,
                    color: '#FAFAF7',
                  }}
                >
                  {abbr}
                </a>
              ))}
            </div>
          </div>
        </div>

        <div style={{ borderTop: '1px solid rgba(250,250,247,0.14)', paddingTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14 }}>
          <span style={{ fontSize: 13.5, color: 'rgba(250,250,247,0.45)' }}>© 2026 HyggeCraftery AB · Göteborg, Sverige</span>
          <span style={{ fontSize: 13.5, color: 'rgba(250,250,247,0.45)' }}>Leben. Langsam. Schön.</span>
        </div>
      </div>
    </footer>
  )
}

function FooterLink({ href, section, children }: { href: string; section: string; children: React.ReactNode }) {
  return (
    <Link
      href={href}
      onClick={() => posthog.capture('footer_link_clicked', { label: String(children), section })}
      style={{ textDecoration: 'none', fontSize: 14.5, color: 'rgba(250,250,247,0.7)' }}
    >
      {children}
    </Link>
  )
}