'use client';

import { Image } from 'lucide-react';
import { CompanySettings } from '../page';

interface LandingSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
}

export default function LandingSettings({ settings, setSettings }: LandingSettingsProps) {
  return (
    <div className="p-6 space-y-6">
      <h3 className="text-lg font-semibold text-slate-800">Landing Page Hero Section</h3>

      <div className="grid lg:grid-cols-2 gap-4">
        <div>
          <label className="text-sm text-slate-600">Hero Title</label>
          <input
            type="text"
            value={settings.heroData.title}
            onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, title: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Subtitle</label>
          <input
            type="text"
            value={settings.heroData.subtitle}
            onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, subtitle: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
      </div>

      <div className="grid lg:grid-cols-2 gap-4">
        <div>
          <label className="text-sm text-slate-600">CTA Button Text</label>
          <input
            type="text"
            value={settings.heroData.ctaText}
            onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, ctaText: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">CTA Link</label>
          <input
            type="text"
            value={settings.heroData.ctaLink}
            onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, ctaLink: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
      </div>

      <div>
        <label className="text-sm text-slate-600">Background Image</label>
        <div className="mt-2 border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent cursor-pointer">
          <Image className="w-12 h-12 mx-auto text-slate-400" />
          <p className="text-sm text-slate-500 mt-2">Upload Background Image</p>
          <p className="text-xs text-slate-400">Recommended: 1920x1080px</p>
        </div>
      </div>

      <div>
        <label className="text-sm text-slate-600">Video URL (Optional)</label>
        <input
          type="text"
          value={settings.heroData.videoUrl}
          onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, videoUrl: e.target.value } })}
          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          placeholder="https://youtube.com/watch?v=..."
        />
      </div>

      <div className="pt-4 border-t">
        <label className="text-sm text-slate-600">Preview</label>
        <div className="mt-2 p-8 bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg text-center">
          <h4 className="text-2xl font-bold text-white">{settings.heroData.title}</h4>
          <p className="text-slate-300 mt-2">{settings.heroData.subtitle}</p>
          <button
            className="mt-4 px-6 py-2 bg-accent text-white rounded-lg"
            style={{ borderRadius: settings.borderRadius }}
          >
            {settings.heroData.ctaText}
          </button>
        </div>
      </div>
    </div>
  );
}
