// Gedeelde componenten voor De Buurtkok website

const BeetSilhouette = ({ color = "#533373", leafColor = "#4D8A2D", size = 80, style = {} }) => (
  <svg viewBox="0 0 200 220" width={size} height={size * 1.1} style={style} aria-hidden="true">
    <path d="M100 60 C 60 55, 30 75, 25 110 C 20 145, 35 180, 70 200 C 90 212, 110 212, 130 200 C 165 180, 180 145, 175 110 C 170 75, 140 55, 100 60 Z"
      fill={color} />
    <path d="M95 65 C 90 40, 75 25, 60 18 C 65 35, 70 45, 80 55 M100 55 C 105 30, 120 15, 140 12 C 135 28, 125 42, 110 52 M100 60 C 110 35, 130 22, 150 20 C 145 38, 130 50, 115 58"
      fill={leafColor} stroke={leafColor} strokeWidth="3" strokeLinejoin="round" />
  </svg>
);

const PhotoPlaceholder = ({ label, ratio = "4/3", tint = "#DAD6B2", style = {}, className = "" }) => (
  <div
    className={"bk-photo-placeholder " + className}
    style={{
      aspectRatio: ratio,
      background: tint,
      backgroundImage: `repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 1px, transparent 1px 14px)`,
      ...style
    }}
  >
    <span style={{ fontFamily: 'JetBrains Mono, ui-monospace, monospace', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,.5)' }}>
      {label}
    </span>
  </div>
);

const DonatieModule = ({ variant = "purple", onDone }) => {
  const [type, setType] = React.useState('eenmalig');
  const [bedrag, setBedrag] = React.useState(10);
  const [eigenBedrag, setEigenBedrag] = React.useState('');
  const [step, setStep] = React.useState('kies'); // kies | contact | verzonden | klaar
  const [naam, setNaam] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [telefoon, setTelefoon] = React.useState('');
  const [verzenden, setVerzenden] = React.useState(false);

  const presets = type === 'eenmalig' ? [5, 10, 25, 50] : [5, 10, 20, 35];
  const finalBedrag = eigenBedrag ? Number(eigenBedrag) : bedrag;
  const maaltijden = Math.floor(finalBedrag / 7.5);

  const palette = {
    purple: { bg: '#533373', fg: '#FDFCF7', accent: '#4D8A2D', soft: 'rgba(255,255,255,.12)', softBorder: 'rgba(255,255,255,.25)' },
    cream:  { bg: '#FDFCF7', fg: '#1a1614', accent: '#533373', soft: 'rgba(83,51,115,.06)', softBorder: 'rgba(83,51,115,.18)' },
    green:  { bg: '#4D8A2D', fg: '#FDFCF7', accent: '#FDFCF7', soft: 'rgba(255,255,255,.14)', softBorder: 'rgba(255,255,255,.3)' },
  }[variant];

  const handleVerzenden = () => {
    if (!naam || !email) return;
    setVerzenden(true);
    fetch('/api/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        naam,
        email,
        telefoon: telefoon || '',
        donatie: `€${finalBedrag} ${type === 'maandelijks' ? 'per maand (vriend van De Buurtkok)' : 'eenmalig'}`,
      })
    })
      .finally(() => { setVerzenden(false); setStep('klaar'); });
  };

  if (step === 'klaar') {
    return (
      <div style={{ background: palette.bg, color: palette.fg, padding: '40px 32px', borderRadius: 18, textAlign: 'center' }}>
        <div style={{ fontSize: 56, lineHeight: 1, marginBottom: 12 }}>♥</div>
        <h3 style={{ fontFamily: 'Dosis', fontSize: 28, fontWeight: 700, margin: '0 0 12px' }}>Bedankt!</h3>
        <p style={{ fontFamily: 'Assistant', fontSize: 16, opacity: .85, maxWidth: 320, margin: '0 auto 20px' }}>
          We nemen zo snel mogelijk contact met je op om je donatie van €{finalBedrag}{type === 'maandelijks' ? ' per maand' : ''} te regelen.
        </p>
        <button onClick={() => { setStep('kies'); setEigenBedrag(''); setNaam(''); setEmail(''); setTelefoon(''); onDone && onDone(); }}
          style={{ background: 'transparent', color: palette.fg, border: `1.5px solid ${palette.softBorder}`, padding: '10px 22px', borderRadius: 999, fontFamily: 'Assistant', fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>
          Nog een donatie
        </button>
      </div>
    );
  }

  if (step === 'contact') {
    const inputStyle = {
      width: '100%', padding: '11px 14px', borderRadius: 10,
      border: `1.5px solid ${palette.softBorder}`,
      background: 'transparent', color: palette.fg,
      fontFamily: 'Assistant', fontSize: 15, outline: 'none',
      marginBottom: 10,
    };
    return (
      <div style={{ background: palette.bg, color: palette.fg, padding: 32, borderRadius: 18 }}>
        <div style={{ fontFamily: 'Assistant', fontSize: 12, letterSpacing: '.15em', textTransform: 'uppercase', opacity: .7, marginBottom: 6 }}>Jouw gegevens</div>
        <div style={{ fontFamily: 'Dosis', fontSize: 28, fontWeight: 700, lineHeight: 1, marginBottom: 4 }}>
          €{finalBedrag}{type === 'maandelijks' && <span style={{ fontSize: 16, opacity: .7 }}> /maand</span>}
        </div>
        <div style={{ fontFamily: 'Assistant', fontSize: 13, opacity: .75, marginBottom: 20 }}>
          We nemen contact op om de donatie te regelen.
        </div>
        <input
          type="text" placeholder="Naam *" value={naam} onChange={e => setNaam(e.target.value)}
          className="donatie-input" style={inputStyle}
        />
        <input
          type="email" placeholder="E-mailadres *" value={email} onChange={e => setEmail(e.target.value)}
          className="donatie-input" style={inputStyle}
        />
        <input
          type="tel" placeholder="Telefoonnummer (optioneel)" value={telefoon} onChange={e => setTelefoon(e.target.value)}
          className="donatie-input" style={{ ...inputStyle, marginBottom: 16 }}
        />
        <button
          onClick={handleVerzenden}
          disabled={!naam || !email || verzenden}
          style={{
            width: '100%', background: (!naam || !email) ? 'rgba(255,255,255,.3)' : palette.fg,
            color: palette.bg, border: 0, padding: '14px 18px', borderRadius: 12, cursor: (!naam || !email) ? 'default' : 'pointer',
            fontFamily: 'Assistant', fontSize: 15, fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            transition: 'background .15s',
          }}>
          {verzenden ? 'Verzenden…' : 'Verstuur aanmelding →'}
        </button>
        <button onClick={() => setStep('kies')} style={{ background: 'transparent', color: palette.fg, border: 0, fontFamily: 'Assistant', fontSize: 13, opacity: .7, cursor: 'pointer', textDecoration: 'underline', padding: '10px 0 0', display: 'block' }}>
          ← Wijzig bedrag
        </button>
      </div>
    );
  }

  return (
    <div style={{ background: palette.bg, color: palette.fg, padding: 32, borderRadius: 18 }}>
      <div style={{ display: 'flex', gap: 4, padding: 4, background: palette.soft, borderRadius: 999, marginBottom: 20 }}>
        {['eenmalig', 'maandelijks'].map(t => (
          <button key={t} onClick={() => setType(t)}
            style={{
              flex: 1, padding: '8px 14px', borderRadius: 999, border: 0, cursor: 'pointer',
              background: type === t ? palette.fg : 'transparent',
              color: type === t ? palette.bg : palette.fg,
              fontFamily: 'Assistant', fontSize: 13, fontWeight: 600,
              textTransform: 'capitalize', transition: 'all .2s'
            }}>
            {t === 'maandelijks' ? 'Vriend (maandelijks)' : 'Eenmalig'}
          </button>
        ))}
      </div>
      <div style={{ fontFamily: 'Assistant', fontSize: 12, letterSpacing: '.15em', textTransform: 'uppercase', opacity: .7, marginBottom: 12 }}>
        Kies een bedrag
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
        {presets.map(p => (
          <button key={p} onClick={() => { setBedrag(p); setEigenBedrag(''); }}
            style={{
              padding: '14px 12px', borderRadius: 12, cursor: 'pointer',
              border: `1.5px solid ${(bedrag === p && !eigenBedrag) ? palette.fg : palette.softBorder}`,
              background: (bedrag === p && !eigenBedrag) ? palette.fg : 'transparent',
              color: (bedrag === p && !eigenBedrag) ? palette.bg : palette.fg,
              fontFamily: 'Dosis', fontSize: 22, fontWeight: 700, transition: 'all .15s'
            }}>
            €{p}{type === 'maandelijks' ? <span style={{ fontSize: 12, opacity: .6, fontWeight: 500 }}> /mnd</span> : ''}
          </button>
        ))}
      </div>
      <div style={{ position: 'relative', marginBottom: 20 }}>
        <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', fontFamily: 'Dosis', fontSize: 18, fontWeight: 600, opacity: .6 }}>€</span>
        <input
          type="number"
          value={eigenBedrag}
          onChange={e => setEigenBedrag(e.target.value)}
          placeholder="Eigen bedrag"
          className="donatie-input"
          style={{
            width: '100%', padding: '12px 14px 12px 28px', borderRadius: 12,
            border: `1.5px solid ${eigenBedrag ? palette.fg : palette.softBorder}`,
            background: 'transparent', color: palette.fg,
            fontFamily: 'Dosis', fontSize: 18, fontWeight: 600, outline: 'none'
          }}
        />
      </div>
      <button onClick={() => setStep('contact')}
        style={{
          width: '100%', background: palette.fg, color: palette.bg, border: 0,
          padding: '16px 18px', borderRadius: 12, cursor: 'pointer',
          fontFamily: 'Assistant', fontSize: 15, fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8
        }}>
        Doneer €{finalBedrag}{type === 'maandelijks' ? ' /maand' : ''} →
      </button>
      <div style={{ fontFamily: 'Assistant', fontSize: 11, opacity: .6, textAlign: 'center', marginTop: 12 }}>
        Stichting Buurtkok · veilig via iDEAL
      </div>
    </div>
  );
};

const ContactFormulier = () => {
  const [naam, setNaam] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [telefoon, setTelefoon] = React.useState('');
  const [bericht, setBericht] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | verzenden | klaar | fout

  const inputStyle = {
    width: '100%', padding: '12px 16px', borderRadius: 10,
    border: '1.5px solid rgba(83,51,115,.2)',
    background: '#FDFCF7', color: '#1a1614',
    fontFamily: 'Assistant', fontSize: 15, outline: 'none',
    marginBottom: 12,
  };

  const handleSubmit = () => {
    if (!naam || !email) return;
    setStatus('verzenden');
    fetch('/api/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ type: 'contact', naam, email, telefoon, bericht }),
    })
      .then(r => setStatus(r.ok ? 'klaar' : 'fout'))
      .catch(() => setStatus('fout'));
  };

  if (status === 'klaar') {
    return (
      <div style={{ textAlign: 'center', padding: '48px 0' }}>
        <div style={{ fontSize: 48, marginBottom: 12 }}>♥</div>
        <h3 style={{ fontFamily: 'Dosis', fontSize: 28, fontWeight: 700, color: '#533373', margin: '0 0 10px' }}>Bedankt!</h3>
        <p style={{ fontSize: 16, color: '#3a342f', margin: 0 }}>We nemen zo snel mogelijk contact met je op.</p>
      </div>
    );
  }

  return (
    <div style={{ maxWidth: 640, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 0 }}>
        <input type="text" placeholder="Naam *" value={naam} onChange={e => setNaam(e.target.value)} style={inputStyle} />
        <input type="email" placeholder="E-mailadres *" value={email} onChange={e => setEmail(e.target.value)} style={inputStyle} />
      </div>
      <input type="tel" placeholder="Telefoonnummer (optioneel)" value={telefoon} onChange={e => setTelefoon(e.target.value)} style={inputStyle} />
      <textarea
        placeholder="Je bericht"
        value={bericht}
        onChange={e => setBericht(e.target.value)}
        rows={5}
        style={{ ...inputStyle, resize: 'vertical', marginBottom: 16 }}
      />
      <button
        onClick={handleSubmit}
        disabled={!naam || !email || status === 'verzenden'}
        style={{
          background: (!naam || !email) ? 'rgba(83,51,115,.3)' : '#533373',
          color: '#FDFCF7', border: 0, padding: '14px 28px', borderRadius: 999,
          fontFamily: 'Assistant', fontSize: 15, fontWeight: 700,
          cursor: (!naam || !email) ? 'default' : 'pointer', transition: 'background .15s',
        }}>
        {status === 'verzenden' ? 'Verzenden…' : 'Verstuur bericht →'}
      </button>
      {status === 'fout' && (
        <p style={{ color: '#c0392b', fontSize: 13, marginTop: 10 }}>Er ging iets mis — probeer het opnieuw of mail ons direct.</p>
      )}
    </div>
  );
};

Object.assign(window, { BeetSilhouette, PhotoPlaceholder, DonatieModule, ContactFormulier });