'use client'

import { useState } from 'react'
import { posthog } from '@/lib/posthog'

export default function NewsletterForm({ source = 'homepage' }: { source?: string }) {
  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)

  if (submitted) {
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, background: '#F5F0E8', borderRadius: 40, padding: '16px 28px' }}>
        <span style={{ width: 26, height: 26, borderRadius: '50%', background: '#A8B89A', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#FAFAF7', fontSize: 14 }}>
          ✓
        </span>
        <span style={{ fontSize: 15, fontWeight: 500, color: '#3D2B1F' }}>Tack så mycket! Willkommen in der Ruhe.</span>
      </div>
    )
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        if (email.trim()) {
        posthog.capture('newsletter_signup', { source })
        setSubmitted(true)
      }
      }}
      style={{ display: 'flex', gap: 12, maxWidth: 480, margin: '0 auto', flexWrap: 'wrap' }}
    >
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Deine E-Mail-Adresse"
        required
        style={{
          flex: 1,
          minWidth: 200,
          fontFamily: 'inherit',
          fontSize: 15,
          color: '#3D2B1F',
          background: '#F5F0E8',
          border: '1.5px solid transparent',
          borderRadius: 40,
          padding: '15px 24px',
          outline: 'none',
        }}
      />
      <button
        type="submit"
        style={{
          fontFamily: 'inherit',
          fontSize: 15,
          fontWeight: 600,
          color: '#FAFAF7',
          background: '#C4896A',
          border: 'none',
          borderRadius: 40,
          padding: '15px 30px',
          cursor: 'pointer',
        }}
      >
        Anmelden
      </button>
    </form>
  )
}