'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { EditableText } from '@/components/EditableText';

export default function Home() {
  const [memberAuthEnabled, setMemberAuthEnabled] = useState(false);
  
  // Fetch settings on component mount
  useEffect(() => {
    const fetchSettings = async () => {
      try {
        const response = await fetch('/api/settings');
        if (response.ok) {
          const data = await response.json();
          setMemberAuthEnabled(data.settings.memberAuthEnabled);
        }
      } catch (err) {
        console.error('Error fetching settings:', err);
      }
    };
    
    fetchSettings();
  }, []);
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-[#0057a6] mb-4">WILLKOMMEN BEI DER ONLINE-ABSTIMMUNG</h1>
        <div className="ssvc-main-content">
          <EditableText id="welcome-text" />
          
          <div className="mt-8">
            <h2 className="text-xl font-bold text-[#0057a6] mb-4">ZUGANG ZUR ABSTIMMUNG</h2>
            <p className="mb-4">
              Wenn Sie einen Abstimmungslink erhalten haben, verwenden Sie diesen bitte direkt, um auf Ihren Stimmzettel zuzugreifen.
            </p>
            
            {memberAuthEnabled && (
              <div className="mb-4 p-4 bg-[#e6f0fa]">
                <p className="mb-2">
                  Als Mitglied können Sie sich auch mit Ihrer Mitgliedsnummer und Ihrem Passwort anmelden.
                </p>
                <Link 
                  href="/login" 
                  className="ssvc-button inline-block text-center w-full"
                >
                  ZUR MITGLIEDERANMELDUNG
                </Link>
              </div>
            )}
            
          <div className="flex flex-col gap-4 mt-6">
            <Link 
              href="/abstimmung" 
              className="ssvc-button inline-block text-center mb-3"
            >
              ABSTIMMUNGSERGEBNISSE
            </Link>
          </div>
          </div>
        </div>
      </div>
      
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-[#0057a6] mb-4">AKTUELLE ABSTIMMUNG</h2>
        <div className="ssvc-main-content">
          <EditableText id="current-vote-text" />
        </div>
      </div>
    </div>
  );
}