// Contact: Frag uns form + Newsletter + FAQ
function ContactSection({ t, lang }) {
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const [newsletter, setNewsletter] = React.useState('');
  const [newsletterSent, setNewsletterSent] = React.useState(false);
  const [openFaq, setOpenFaq] = React.useState(0);

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSent(true);
    setTimeout(() => { setSent(false); setForm({ name: '', email: '', message: '' }); }, 3500);
  };

  const onNewsletter = (e) => {
    e.preventDefault();
    if (!newsletter) return;
    setNewsletterSent(true);
    setTimeout(() => { setNewsletterSent(false); setNewsletter(''); }, 3500);
  };

  return (
    <section className="section">
      <div className="eyebrow">{t('contactEyebrow')}</div>
      <h2 style={{ fontSize: 'clamp(40px, 6vw, 72px)', lineHeight: 1.05, marginBottom: 18 }}>
        {t('contactTitle')}
      </h2>
      <p style={{ fontSize: 17, color: 'var(--ink-soft)', maxWidth: 640, marginBottom: 32 }}>
        {t('contactLead')}
      </p>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
        gap: 20,
        marginBottom: 56,
      }}>
        {/* Contact form */}
        <form className="card" onSubmit={onSubmit} style={{ padding: 28 }}>
          <div style={{
            fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: 'var(--gold)', marginBottom: 16,
          }}>✦ {lang === 'de' ? 'Schreib uns' : 'Write to us'}</div>
          <FormField label={t('formName')} value={form.name} onChange={v => setForm({...form, name: v})} />
          <FormField label={t('formEmail')} type="email" value={form.email} onChange={v => setForm({...form, email: v})} />
          <FormField label={t('formMessage')} multiline value={form.message} onChange={v => setForm({...form, message: v})} />
          <button type="submit" className="btn btn-primary" style={{ marginTop: 8, width: '100%', justifyContent: 'center' }}>
            {sent ? `✦ ${t('formSent')}` : t('formSend')}
          </button>
        </form>

        {/* Newsletter */}
        <div className="card" style={{
          padding: 0,
          background: 'linear-gradient(135deg, oklch(0.20 0.10 290 / 0.65), oklch(0.16 0.08 268 / 0.55))',
          borderColor: 'oklch(0.65 0.20 305 / 0.5)',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* Decorative orbits */}
          <svg viewBox="0 0 300 300" style={{
            position: 'absolute', right: -60, top: -60, width: 260, height: 260,
            pointerEvents: 'none', opacity: 0.55,
          }}>
            <defs>
              <radialGradient id="nlGlow" cx="0.5" cy="0.5" r="0.5">
                <stop offset="0" stopColor="oklch(0.65 0.20 305 / 0.6)" />
                <stop offset="1" stopColor="oklch(0.65 0.20 305 / 0)" />
              </radialGradient>
            </defs>
            <circle cx="150" cy="150" r="120" fill="url(#nlGlow)" />
            <circle cx="150" cy="150" r="90" fill="none" stroke="oklch(0.84 0.15 82 / 0.35)" strokeWidth="1" strokeDasharray="3 6" style={{ animation: 'spinSlow2 30s linear infinite' }} />
            <circle cx="150" cy="150" r="70" fill="none" stroke="oklch(0.78 0.18 305 / 0.4)" strokeWidth="0.8" strokeDasharray="2 5" style={{ animation: 'spinSlow2 22s linear infinite reverse' }} />
            <circle cx="150" cy="60" r="3" fill="oklch(0.99 0.02 80)" style={{ filter: 'drop-shadow(0 0 6px oklch(0.84 0.15 82))' }} />
          </svg>

          <div style={{ position: 'relative', padding: 28 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: 'oklch(0.85 0.14 305)', marginBottom: 18,
              padding: '6px 12px', borderRadius: 999,
              background: 'oklch(0.65 0.20 305 / 0.15)',
              border: '1px solid oklch(0.65 0.20 305 / 0.4)',
            }}>
              <span style={{ animation: 'pulse 2s ease-in-out infinite' }}>✦</span>
              Newsletter
            </div>
            <h3 style={{
              fontFamily: '"Cormorant Garamond", serif',
              fontSize: 38, lineHeight: 1.05, marginBottom: 12, fontWeight: 400,
              maxWidth: 260,
            }}>{t('newsletterTitle')}</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-soft)', marginBottom: 22, lineHeight: 1.55, maxWidth: 320 }}>
              {t('newsletterLead')}
            </p>
            <form onSubmit={onNewsletter} style={{
              display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'nowrap',
              padding: 5, borderRadius: 999,
              background: 'oklch(0.10 0.04 268 / 0.7)',
              border: '1px solid oklch(0.65 0.20 305 / 0.4)',
              boxShadow: 'inset 0 1px 0 oklch(1 0 0 / 0.04)',
            }}>
              <span style={{ paddingLeft: 14, color: 'var(--ink-mute)', fontSize: 14 }}>✉</span>
              <input
                type="email"
                value={newsletter}
                onChange={(e) => setNewsletter(e.target.value)}
                placeholder={t('newsletterPlaceholder')}
                style={{
                  flex: 1, minWidth: 0,
                  padding: '10px 8px',
                  border: 'none', background: 'transparent',
                  color: 'var(--ink-bright)',
                  fontFamily: 'inherit', fontSize: 14,
                  outline: 'none',
                }} />
              <button type="submit" className="btn btn-primary" style={{ padding: '10px 18px', flexShrink: 0 }}>
                {newsletterSent ? t('newsletterSent') : t('newsletterCta')} {!newsletterSent && '→'}
              </button>
            </form>
            <div style={{
              marginTop: 14, fontSize: 11, color: 'var(--ink-mute)',
              display: 'flex', alignItems: 'center', gap: 6, letterSpacing: '0.05em',
            }}>
              <span>🔒</span>
              {lang === 'de' ? 'Keine Werbung. Jederzeit kündbar.' : 'No spam. Unsubscribe anytime.'}
            </div>
          </div>
          <style>{`@keyframes spinSlow2 { to { transform: rotate(360deg); } }`}</style>
        </div>
      </div>

      {/* FAQ */}
      <div>
        <div className="eyebrow" style={{ color: 'var(--ink-soft)' }}>{t('faqTitle')}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}>
          {window.AstroniaData.faq.map((item, i) => (
            <FaqItem key={i}
              q={item.q[lang]}
              a={item.a[lang]}
              open={openFaq === i}
              onToggle={() => setOpenFaq(openFaq === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function FormField({ label, value, onChange, type = 'text', multiline }) {
  const Tag = multiline ? 'textarea' : 'input';
  return (
    <label style={{ display: 'block', marginBottom: 14 }}>
      <div style={{
        fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--ink-mute)', marginBottom: 8,
      }}>{label}</div>
      <Tag
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        rows={multiline ? 4 : undefined}
        style={{
          width: '100%',
          padding: '12px 14px',
          borderRadius: 12,
          border: '1px solid var(--line)',
          background: 'oklch(0.14 0.05 268 / 0.5)',
          color: 'var(--ink-bright)',
          fontFamily: 'inherit', fontSize: 14,
          outline: 'none',
          resize: multiline ? 'vertical' : 'none',
        }}
        onFocus={(e) => e.target.style.borderColor = 'var(--gold)'}
        onBlur={(e) => e.target.style.borderColor = 'var(--line)'}
      />
    </label>
  );
}

function FaqItem({ q, a, open, onToggle }) {
  return (
    <div className="card" style={{
      padding: 0, cursor: 'pointer',
      borderColor: open ? 'oklch(0.84 0.15 82 / 0.4)' : '',
    }} onClick={onToggle}>
      <div style={{
        padding: '20px 24px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 16,
      }}>
        <div style={{ fontSize: 17, fontWeight: 500 }}>{q}</div>
        <span style={{
          fontSize: 18, color: 'var(--gold)',
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
          transition: 'transform .3s ease',
        }}>+</span>
      </div>
      <div style={{
        maxHeight: open ? 200 : 0,
        overflow: 'hidden',
        transition: 'max-height .35s ease',
      }}>
        <div style={{
          padding: '0 24px 22px',
          fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55,
        }}>{a}</div>
      </div>
    </div>
  );
}

Object.assign(window, { ContactSection });