import * as React from 'react';
import { FormState } from './types';

export const PRICING = {
  BASE_WEBSITE: 6000,
  PAGE: 800,
  FEATURE: 2000,
  FUNCTION: 1000,
  NEW_DATASET: 400,
  HOSTING_MONTHLY: 120,
  STORAGE_EXPANSION_MONTHLY: 10,
  CMS_SETUP: 1500,
  CMS_CONNECTION_PER_FEATURE: 800,
  API_INTEGRATION: 1000,
  APP_HOURLY: 120,
};

export const initialState: FormState = {
  projectType: 'website',
  // Company
  companyName: '',
  employeeCount: '',
  // Existing Presence
  existingWebsite: '',
  socialMedia: [],
  socialMediaUrls: {},
  existingDomain: '',
  wishedDomain: '',
  // Project
  websiteTopic: '',
  selectedPages: ['Home'],
  otherPages: [],
  otherPagesCount: 0,
  features: [],
  otherFeatures: [],
  otherFeaturesCount: 0,
  functions: [],
  otherFunctions: [],
  otherFunctionsCount: 0,
  apiSystems: [],
  otherTech: [],
  otherTechCount: 0,
  assets: [],
  otherAssets: [],
  otherAssetsCount: 0,
  newDatasets: 0,
  cmsSetup: false,
  storageExpansion: 0,
  name: '',
  email: '',
  role: '',
  message: '',
  sitemapFile: null,
  contactFiles: [],
  // Design
  designVibe: 'minimal',
  colorScheme: ['#ffffff', '#f8fafc', '#0f172a'],
  references: [],
  designWishes: '',
  // Maintenance
  expectedAdjustments: 'low',
  languagesList: ['Deutsch'],
  // Timeline
  deadline: 'flexible',
  // Web App specific
  targetAudience: 'internal',
  userRoles: [],
  dataSensitivity: 'standard',
  platformType: 'web-only',
  // Meta
  dontKnows: [],
  visualStaging: 'standard',
  complexInteractions: 'standard',
};

export const PAGE_SAMPLES = [
  { id: 'Home', label: 'Startseite', desc: 'Der erste Eindruck Ihrer Marke.' },
  { id: 'About', label: 'Über uns', desc: 'Ihre Geschichte und Ihr Team.' },
  { id: 'Services', label: 'Leistungen', desc: 'Übersicht Ihres Angebots.' },
  { id: 'Contact', label: 'Kontakt', desc: 'Anlaufstelle für Ihre Kunden.' },
  { id: 'Landing', label: 'Landingpage', desc: 'Optimiert für Marketing-Kampagnen.' },
  { id: 'Legal', label: 'Rechtliches', desc: 'Impressum & Datenschutz.' },
];

export const FEATURE_OPTIONS = [
  { id: 'blog_news', label: 'Blog / News', desc: 'Ein Bereich für aktuelle Beiträge und Neuigkeiten.' },
  { id: 'products', label: 'Produktbereich', desc: 'Katalog Ihrer Leistungen oder Produkte.' },
  { id: 'jobs', label: 'Karriere / Jobs', desc: 'Stellenanzeigen und Bewerbungsoptionen.' },
  { id: 'refs', label: 'Referenzen / Cases', desc: 'Präsentation Ihrer Projekte.' },
  { id: 'events', label: 'Events / Termine', desc: 'Veranstaltungskalender.' },
];

export const FUNCTION_OPTIONS = [
  { id: 'search', label: 'Suche', desc: 'Volltextsuche über alle Inhalte.' },
  { id: 'filter', label: 'Filter-Systeme', desc: 'Kategorisierung und Sortierung.' },
  { id: 'pdf', label: 'PDF-Export', desc: 'Automatisierte PDF-Erstellung.' },
  { id: 'forms', label: 'Erweiterte Formulare', desc: 'Komplexe Abfragen & Logik.' },
];

export const API_OPTIONS = [
  { id: 'crm', label: 'CRM System', desc: 'HubSpot, Salesforce, Pipedrive etc.' },
  { id: 'erp', label: 'ERP / Warenwirtschaft', desc: 'SAP, Microsoft Dynamics, Xentral etc.' },
  { id: 'stripe', label: 'Stripe / Payment', desc: 'Zahlungsabwicklung und Abonnements.' },
  { id: 'newsletter', label: 'Newsletter / Marketing', desc: 'Mailchimp, Brevo, ActiveCampaign etc.' },
  { id: 'ecommerce', label: 'E-Commerce / Shop', desc: 'Shopify, WooCommerce, Shopware Sync.' },
  { id: 'hr', label: 'HR / Recruiting', desc: 'Personio, Workday, Recruitee etc.' },
  { id: 'realestate', label: 'Immobilien', desc: 'OpenImmo, FlowFact, Immowelt Sync.' },
  { id: 'calendar', label: 'Termine / Booking', desc: 'Calendly, Shore, Doctolib etc.' },
  { id: 'social', label: 'Social Media Sync', desc: 'Automatisierte Posts oder Feeds.' },
  { id: 'maps', label: 'Google Maps / Places', desc: 'Standortsuche und Kartenintegration.' },
  { id: 'analytics', label: 'Custom Analytics', desc: 'Anbindung an spezialisierte Tracking-Tools.' },
];

export const ASSET_OPTIONS = [
  { id: 'existing_website', label: 'Bestehende Website', desc: 'Inhalte oder Struktur können übernommen werden.' },
  { id: 'logo', label: 'Logo', desc: 'Vektordatei Ihres Logos.' },
  { id: 'styleguide', label: 'Styleguide', desc: 'Farben, Schriften, Design-Vorgaben.' },
  { id: 'content_concept', label: 'Inhalts-Konzept', desc: 'Struktur und Texte sind bereits geplant.' },
  { id: 'media', label: 'Bild/Video-Material', desc: 'Professionelles Bildmaterial vorhanden.' },
  { id: 'icons', label: 'Icons', desc: 'Eigene Icon-Sets vorhanden.' },
  { id: 'illustrations', label: 'Illustrationen', desc: 'Eigene Illustrationen vorhanden.' },
  { id: 'fonts', label: 'Fonts', desc: 'Lizenzen für Hausschriften vorhanden.' },
];

export const DESIGN_VIBES = [
  { 
    id: 'minimal', 
    label: 'Minimalistisch', 
    desc: 'Viel Weißraum, klare Typografie.', 
    illustration: (
      <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
        <rect x="10" y="10" width="80" height="2" rx="1" className="fill-current" />
        <rect x="10" y="20" width="50" height="2" rx="1" className="fill-current" />
        <rect x="10" y="40" width="30" height="10" rx="1" className="fill-current" />
      </svg>
    )
  },
  { 
    id: 'bold', 
    label: 'Mutig & Laut', 
    desc: 'Starke Kontraste, große Schriften.', 
    illustration: (
      <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
        <rect x="10" y="10" width="80" height="15" rx="2" className="fill-current" />
        <rect x="10" y="35" width="80" height="15" rx="2" className="fill-current" />
      </svg>
    )
  },
  { 
    id: 'nature', 
    label: 'Natürlich', 
    desc: 'Sanfte Erdtöne, organische Formen.', 
    illustration: (
      <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
        <circle cx="30" cy="30" r="20" className="fill-current" />
        <circle cx="70" cy="30" r="15" className="fill-current" />
      </svg>
    )
  },
  { 
    id: 'tech', 
    label: 'Technisch', 
    desc: 'Präzise Linien, dunkle Akzente.', 
    illustration: (
      <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
        <path d="M10 10 L90 10 L90 50 L10 50 Z" fill="none" stroke="currentColor" strokeWidth="2" />
        <path d="M10 30 L90 30" stroke="currentColor" strokeWidth="1" strokeDasharray="4 2" />
        <path d="M50 10 L50 50" stroke="currentColor" strokeWidth="1" strokeDasharray="4 2" />
      </svg>
    )
  },
];

export const EMPLOYEE_OPTIONS = [
  { id: '1-5', label: '1-5 Mitarbeiter' },
  { id: '6-20', label: '6-20 Mitarbeiter' },
  { id: '21-100', label: '21-100 Mitarbeiter' },
  { id: '100+', label: '100+ Mitarbeiter' },
];

export const SOCIAL_MEDIA_OPTIONS = [
  { id: 'instagram', label: 'Instagram' },
  { id: 'linkedin', label: 'LinkedIn' },
  { id: 'facebook', label: 'Facebook' },
  { id: 'twitter', label: 'Twitter / X' },
  { id: 'tiktok', label: 'TikTok' },
  { id: 'youtube', label: 'YouTube' },
];