'use client';

import * as React from 'react';
import { motion } from 'framer-motion';

interface IllustrationProps {
  className?: string;
  delay?: number;
}

export const DirectCommunication: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.circle 
      cx="20" cy="60" r="4" 
      className="fill-slate-400"
      initial={{ scale: 0 }}
      whileInView={{ scale: 1 }}
      viewport={{ once: true }}
      transition={{ delay: delay }}
    />
    <motion.circle 
      cx="100" cy="60" r="4" 
      className="fill-slate-900"
      initial={{ scale: 0 }}
      whileInView={{ scale: 1 }}
      viewport={{ once: true }}
      transition={{ delay: delay + 0.2 }}
    />
    <motion.path
      d="M 24 60 H 96"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-300"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 1, delay: delay + 0.4 }}
    />
    <motion.circle r="2" className="fill-slate-400">
      <animateMotion
        dur="3s"
        repeatCount="indefinite"
        path="M 24 60 H 96"
      />
    </motion.circle>
  </svg>
);

export const FastPrototyping: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.rect 
      x="20" y="30" width="80" height="60" rx="4" 
      stroke="currentColor" strokeWidth="1"
      className="text-slate-300"
      initial={{ pathLength: 0, opacity: 0 }}
      whileInView={{ pathLength: 1, opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 1, delay: delay }}
    />
    <motion.path
      d="M 20 45 H 100"
      stroke="currentColor" strokeWidth="1"
      className="text-slate-200"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: delay + 0.5 }}
    />
    <motion.path
      d="M 45 55 L 75 65 L 45 75 Z"
      className="fill-slate-200 stroke-slate-300"
      strokeWidth="1"
      initial={{ opacity: 0, scale: 0.8 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      transition={{ delay: delay + 0.8 }}
    />
    <motion.path
      d="M 85 37 H 90"
      stroke="currentColor" strokeWidth="1"
      className="text-slate-300"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ delay: delay + 1 }}
    />
  </svg>
);

export const CleanCode: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.path
      d="M 30 40 H 70"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round"
      className="text-slate-300"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: delay }}
    />
    <motion.path
      d="M 30 55 H 90"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round"
      className="text-slate-200"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: delay + 0.2 }}
    />
    <motion.path
      d="M 30 70 H 60"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round"
      className="text-slate-300"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: delay + 0.4 }}
    />
    <motion.path
      d="M 30 85 H 80"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round"
      className="text-slate-200"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: delay + 0.6 }}
    />
    <motion.path
      d="M 85 45 L 95 55 L 110 35"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
      className="text-slate-900"
      initial={{ pathLength: 0, opacity: 0 }}
      whileInView={{ pathLength: 1, opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: delay + 1 }}
    />
  </svg>
);

export const FixedPrice: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.rect 
      x="35" y="35" width="50" height="50" rx="2" 
      stroke="currentColor" strokeWidth="1" 
      className="text-slate-300"
      initial={{ pathLength: 0, opacity: 0 }}
      whileInView={{ pathLength: 1, opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 1, delay: delay }}
    />
    <motion.path
      d="M 45 50 H 75 M 45 60 H 75 M 45 70 H 65"
      stroke="currentColor" strokeWidth="1"
      className="text-slate-200"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.8, delay: delay + 0.5 }}
    />
    <motion.circle 
      cx="85" cy="35" r="12" 
      className="fill-white stroke-slate-900" 
      strokeWidth="1"
      initial={{ scale: 0 }}
      whileInView={{ scale: 1 }}
      viewport={{ once: true }}
      transition={{ type: "spring", stiffness: 200, damping: 10, delay: delay + 1 }}
    />
    <motion.path
      d="M 80 35 L 83 38 L 90 31"
      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
      className="text-slate-900"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.3, delay: delay + 1.3 }}
    />
  </svg>
);

export const WebsitesIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.rect x="20" y="30" width="80" height="60" rx="2" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay }} />
    <motion.path d="M 20 42 H 100" stroke="currentColor" strokeWidth="1" className="text-slate-200"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.5 }} />
    <motion.rect x="30" y="50" width="25" height="30" rx="1" stroke="currentColor" strokeWidth="1" className="text-slate-200"
      initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.8 }} />
    <motion.path d="M 65 55 H 90 M 65 65 H 90 M 65 75 H 80" stroke="currentColor" strokeWidth="1" className="text-slate-200"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ delay: delay + 1 }} />
  </svg>
);

export const SystemsIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.path d="M 40 30 L 20 40 V 80 L 40 90 L 60 80 V 40 L 40 30 Z" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay }} />
    <motion.path d="M 80 50 L 60 60 V 100 L 80 110 L 100 100 V 60 L 80 50 Z" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay: delay + 0.3 }} />
    <motion.path d="M 60 60 L 40 50" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2" className="text-slate-300"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.8 }} />
  </svg>
);

export const AutomationIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.circle cx="45" cy="45" r="15" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay }} />
    <motion.circle cx="75" cy="75" r="15" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay: delay + 0.2 }} />
    <motion.path d="M 55 55 L 65 65" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.5 }} />
    <motion.path d="M 62 58 L 65 65 L 58 62" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.7 }} />
  </svg>
);

export const MinimalistArchitect: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.path
      d="M 40 160 V 60 L 100 30 L 160 60 V 160"
      stroke="currentColor" strokeWidth="1"
      className="text-slate-300"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 1.5, delay: delay }}
    />
    <motion.path
      d="M 40 100 H 160 M 100 30 V 160"
      stroke="currentColor" strokeWidth="0.5"
      className="text-slate-200"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 1, delay: delay + 0.5 }}
    />
    <motion.rect
      x="85" y="120" width="30" height="40"
      stroke="currentColor" strokeWidth="1"
      className="text-slate-300"
      initial={{ opacity: 0, y: 10 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay: delay + 1, duration: 0.5 }}
    />
  </svg>
);

export const DifferenceIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 200 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* Messy Path */}
    <motion.path
      d="M 20 50 C 30 20, 40 80, 50 50 C 60 20, 70 80, 80 50"
      stroke="currentColor" strokeWidth="1" className="text-slate-200"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 2, delay }}
    />
    {/* Arrow to clean side */}
    <motion.path
      d="M 90 50 H 110"
      stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ delay: delay + 1 }}
    />
    {/* Clean Path */}
    <motion.path
      d="M 120 50 H 180"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-slate-900"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay: delay + 1.5 }}
    />
  </svg>
);

export const TargetGroupIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.circle cx="60" cy="40" r="20" stroke="currentColor" strokeWidth="1" className="text-slate-200"
      initial={{ scale: 0 }} whileInView={{ scale: 1 }} viewport={{ once: true }} transition={{ delay }} />
    <motion.path d="M 30 90 C 30 70, 90 70, 90 90" stroke="currentColor" strokeWidth="1" className="text-slate-200"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.3 }} />
    <motion.path d="M 50 20 L 60 10 L 70 20" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.6 }} />
  </svg>
);

export const ContactIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.rect x="20" y="35" width="80" height="50" rx="2" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay }} />
    <motion.path d="M 20 35 L 60 65 L 100 35" stroke="currentColor" strokeWidth="1" className="text-slate-200"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 0.8, delay: delay + 0.5 }} />
    <motion.circle cx="90" cy="35" r="5" className="fill-green-500"
      initial={{ scale: 0 }} whileInView={{ scale: 1 }} viewport={{ once: true }} transition={{ type: "spring", delay: delay + 1.2 }} />
  </svg>
);

export const PromiseSectionIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.path d="M 20 60 L 50 90 L 100 30" stroke="currentColor" strokeWidth="2" className="text-slate-300"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay }} />
    <motion.path d="M 40 50 H 80 M 40 70 H 70" stroke="currentColor" strokeWidth="1" className="text-slate-100"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.5 }} />
  </svg>
);

export const ServicesSectionIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <motion.rect x="20" y="20" width="80" height="80" rx="4" stroke="currentColor" strokeWidth="1" className="text-slate-200"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay }} />
    <motion.circle cx="60" cy="60" r="20" stroke="currentColor" strokeWidth="1" className="text-slate-300"
      initial={{ scale: 0 }} whileInView={{ scale: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.5 }} />
    <motion.path d="M 60 40 V 80 M 40 60 H 80" stroke="currentColor" strokeWidth="1" className="text-slate-100"
      initial={{ pathLength: 0 }} whileInView={{ pathLength: 1 }} viewport={{ once: true }} transition={{ delay: delay + 0.8 }} />
  </svg>
);
