import React, { useState } from 'react';
import {
  CheckCircle,
  AlertTriangle,
  Server,
  CreditCard,
  Code,
  Smartphone,
  ArrowRight,
  ShieldCheck,
  Loader2,
  HelpCircle,
  UserCheck,
  Zap,
  Coffee,
  Image as ImageIcon,
  UploadCloud,
  Copy,
  Trash2,
  FileUp,
  Terminal,
  Globe,
  Printer,
  X,
  Link as LinkIcon,
  ExternalLink,
  User,
  Mail,
  Tag,
  Info,
  Eye,
  Lock,
  Menu,
  Settings,
  UserPlus
} from 'lucide-react';

// --- UI Components ---
const Card = ({ children, className = "" }) => (
  <div className={`bg-white rounded-xl shadow-2xl border border-stone-200 overflow-hidden ${className}`}>
    {children}
  </div>
);

const Button = ({ children, onClick, disabled, variant = "primary", className = "", ...props }) => {
  const baseStyle = "px-6 py-3 rounded-lg font-bold transition-all duration-200 flex items-center justify-center gap-2 tracking-wide";
  const styles = {
    primary: "bg-stone-900 hover:bg-stone-800 text-white shadow-md disabled:opacity-50 disabled:cursor-not-allowed border border-stone-900",
    secondary: "bg-stone-50 border-2 border-stone-200 text-stone-700 hover:border-stone-400 hover:bg-stone-100",
    outline: "bg-transparent border border-stone-300 text-stone-700 hover:bg-stone-50",
    danger: "bg-red-50 text-red-800 border border-red-200 hover:bg-red-100",
    paypal: "bg-[#FFC439] hover:brightness-95 text-stone-900 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed",
    venmo: "bg-[#008CFF] hover:brightness-95 text-white shadow-sm disabled:opacity-50 disabled:cursor-not-allowed",
    action: "px-3 py-1.5 text-xs bg-white border border-stone-200 shadow-sm hover:border-amber-500 hover:text-amber-800",
    checklist: "px-8 py-4 bg-stone-100 text-stone-900 border-2 border-stone-900 font-serif italic text-lg hover:bg-stone-200 shadow-sm"
  };
  return (
    <button onClick={onClick} disabled={disabled} className={`${baseStyle} ${styles[variant]} ${className}`} {...props}>
      {children}
    </button>
  );
};

const Input = ({ label, type = "text", value, onChange, placeholder, icon: Icon, required = false, error = "" }) => (
  <div className="space-y-1">
    <label className="block text-sm font-bold text-stone-700">
      {label} {required && <span className="text-red-500">*</span>}
    </label>
    <div className="relative">
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-amber-600 focus:border-amber-600 transition-all bg-stone-50 focus:bg-white ${error ? 'border-red-500 ring-1 ring-red-200' : 'border-stone-300'}`}
        placeholder={placeholder}
      />
      {Icon && <Icon className={`absolute left-3 top-3.5 h-5 w-5 ${error ? 'text-red-400' : 'text-stone-400'}`} />}
    </div>
    {error && <p className="text-xs text-red-500 mt-1 pl-1">{error}</p>}
  </div>
);

export default function App() {
  const [step, setStep] = useState(0);
  const [deployMode, setDeployMode] = useState("concierge");
  const [showChecklistModal, setShowChecklistModal] = useState(false);
  const [showDelegateGuide, setShowDelegateGuide] = useState(false);
 
  // Payment State
  const [price, setPrice] = useState(99);
  const [promoCode, setPromoCode] = useState("");
  const [promoMessage, setPromoMessage] = useState("");
  const [showPromoInput, setShowPromoInput] = useState(false);

  const [formData, setFormData] = useState({
    domainName: "",
    gdEmail: "",
    htmlCode: "",
    customerName: "",  
    customerEmail: ""  
  });
 
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [codeErrors, setCodeErrors] = useState([]);
  const [emailError, setEmailError] = useState("");
  const [emailWarning, setEmailWarning] = useState("");
  const [highlightUpload, setHighlightUpload] = useState(false);

  const [deployStatus, setDeployStatus] = useState("idle");
  const [paymentProcessing, setPaymentProcessing] = useState(false);

  // --- Helpers ---
  const handleEmailChange = (val) => {
    setFormData({ ...formData, customerEmail: val });
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   
    if (val && !emailRegex.test(val)) {
      setEmailError("Please enter a valid email address.");
    } else {
      setEmailError("");
    }

    if (val && formData.gdEmail && val !== formData.gdEmail) {
      setEmailWarning("Note: This is different from your GoDaddy email. That's okay, just checking!");
    } else {
      setEmailWarning("");
    }
  };

  const applyPromoCode = () => {
    const code = promoCode.trim().toUpperCase();
    if (code === "UPDATE") {
      setPrice(29);
      setPromoMessage("Success! Returning customer rate applied.");
    } else if (code === "FRIEND") {
      setPrice(84);
      setPromoMessage("Success! Friend discount applied.");
    } else {
      setPromoMessage("Invalid code.");
      setTimeout(() => setPromoMessage(""), 2000);
    }
  };

  const handleFileUpload = (e) => {
    const newFiles = Array.from(e.target.files).map(f => ({
      name: f.name,
      size: (f.size / 1024).toFixed(0) + 'KB',
      type: f.type
    }));
    setUploadedFiles([...uploadedFiles, ...newFiles]);
    setHighlightUpload(false);
  };

  const removeFile = (fileName) => {
    setUploadedFiles(uploadedFiles.filter(f => f.name !== fileName));
  };

  const copySnippet = (fileName) => {
    alert(`Copied to clipboard: <img src="${fileName}" />`);
  };

  const handlePreviewCode = () => {
    if (!formData.htmlCode) return;
    const blob = new Blob([formData.htmlCode], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    window.open(url, '_blank');
  };

  const validateCodeAndAssets = () => {
    const errors = [];
    const code = formData.htmlCode;

    // V23: Empty Code Check
    if (!code || code.trim().length < 20) {
      errors.push({ type: "empty_code", msg: "Error: Your code looks empty or too short." });
    }

    const srcMatches = [...code.matchAll(/src=["']([^"']+)["']/g)];
    srcMatches.forEach(match => {
      const srcValue = match[1];
      if (srcValue.startsWith('http') || srcValue.startsWith('//') || srcValue.startsWith('data:')) return;
      const fileExists = uploadedFiles.some(f => f.name === srcValue);
      if (!fileExists) {
        errors.push({ type: "missing_file", file: srcValue, msg: `Missing file: "${srcValue}"` });
      }
    });

    if (code.match(/src=["'](file:|[A-Z]:\\|\/Users\/)/i)) {
      errors.push({ type: "local_path", msg: "Detected a local computer link (C:/...). Please replace it." });
    }

    if (!code.toLowerCase().match(/paypal|venmo|stripe/)) {
      errors.push({ type: "business_logic", msg: "Warning: No payment link (PayPal/Venmo) found. Are you sure?" });
    }

    setCodeErrors(errors);
    return errors.length === 0 || errors.every(e => e.type === "business_logic");
  };

  const handlePayment = (provider) => {
    setPaymentProcessing(true);
    setTimeout(() => {
      setPaymentProcessing(false);
      setStep(5);
    }, 2000);
  };

  // --- Delegate Guide Modal ---
  const DelegateGuideModal = () => (
    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden h-[90vh] md:h-auto flex flex-col">
        <div className="bg-stone-900 p-6 flex justify-between items-center shrink-0">
          <div className="flex items-center gap-2">
             <HelpCircle className="h-6 w-6 text-amber-500" />
             <h2 className="text-xl font-bold text-white">How to Grant Access</h2>
          </div>
          <button onClick={() => setShowDelegateGuide(false)} className="text-stone-400 hover:text-white transition-colors" aria-label="Close guide"><X className="h-6 w-6" /></button>
        </div>
       
        <div className="p-0 overflow-y-auto flex-1">
          <div className="p-6 space-y-8">
            <div className="flex gap-4">
              <div className="flex flex-col items-center">
                <div className="w-8 h-8 rounded-full bg-stone-900 text-white flex items-center justify-center font-bold">1</div>
                <div className="w-0.5 h-full bg-stone-200 mt-2"></div>
              </div>
              <div className="space-y-2 pb-4">
                <h3 className="font-bold text-stone-900 text-lg">Account Settings</h3>
                <p className="text-sm text-stone-600">Log in to GoDaddy. Click your <strong>Name</strong> in the top right, then select <strong>Account Settings</strong>.</p>
                <div className="bg-stone-100 p-3 rounded border border-stone-200 flex items-center gap-2 text-sm text-stone-500">
                  <User className="h-4 w-4" /> Account Settings
                </div>
              </div>
            </div>

            <div className="flex gap-4">
              <div className="flex flex-col items-center">
                <div className="w-8 h-8 rounded-full bg-stone-900 text-white flex items-center justify-center font-bold">2</div>
                <div className="w-0.5 h-full bg-stone-200 mt-2"></div>
              </div>
              <div className="space-y-2 pb-4">
                <h3 className="font-bold text-stone-900 text-lg">Delegate Access & Security</h3>
                <p className="text-sm text-stone-600">Click <strong>Delegate Access</strong>. GoDaddy will text a <strong>verification code</strong> to your phone. Enter it to proceed.</p>
                <div className="bg-stone-100 p-3 rounded border border-stone-200 flex items-center gap-2 text-sm text-stone-500">
                  <Smartphone className="h-4 w-4" /> Verify Code
                </div>
              </div>
            </div>

            <div className="flex gap-4">
              <div className="flex flex-col items-center">
                <div className="w-8 h-8 rounded-full bg-stone-900 text-white flex items-center justify-center font-bold">3</div>
                <div className="w-0.5 h-full bg-stone-200 mt-2"></div>
              </div>
              <div className="space-y-2 pb-4">
                <h3 className="font-bold text-stone-900 text-lg">Invite to Access</h3>
                <p className="text-sm text-stone-600">Click <strong>"Invite to Access"</strong> on the right. Fill out the form exactly like this:</p>
                <div className="bg-amber-50 p-4 rounded border border-amber-200 space-y-2 text-sm">
                  <div className="flex justify-between font-bold text-stone-900"><span>Name:</span> <span>1845 Dev Team</span></div>
                  <div className="flex justify-between font-bold text-stone-900"><span>Email:</span> <span className="select-all bg-amber-100 px-1">deploy@1845.ai</span></div>
                </div>
              </div>
            </div>

            <div className="flex gap-4">
              <div className="flex flex-col items-center">
                <div className="w-8 h-8 rounded-full bg-stone-900 text-white flex items-center justify-center font-bold">4</div>
              </div>
              <div className="space-y-2">
                <h3 className="font-bold text-stone-900 text-lg">Access Level & Invite</h3>
                <p className="text-sm text-stone-600">Select <strong>"Products & Domains"</strong> and click <strong>Invite</strong>.</p>
                <div className="bg-green-50 p-3 rounded border border-green-200 flex items-center gap-2 text-sm text-green-800 font-bold">
                  <CheckCircle className="h-4 w-4" /> Products & Domains
                </div>
              </div>
            </div>
          </div>
        </div>
       
        <div className="p-4 border-t border-stone-200 shrink-0">
          <Button onClick={() => setShowDelegateGuide(false)} className="w-full">I've Done This</Button>
        </div>
      </div>
    </div>
  );

  // --- Checklist Modal Component ---
  const ChecklistModal = () => (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden printable-content">
        <div className="bg-stone-900 p-6 flex justify-between items-center print:bg-white print:border-b print:border-stone-900">
          <div className="flex items-center gap-2">
             <Terminal className="h-6 w-6 text-amber-500 print:text-stone-900" />
             <h2 className="text-xl font-bold text-white print:text-stone-900">HTMLtoWeb Checklist</h2>
          </div>
          <button onClick={() => setShowChecklistModal(false)} className="text-stone-400 hover:text-white transition-colors print:hidden" aria-label="Close checklist"><X className="h-6 w-6" /></button>
        </div>
        <div className="p-8 space-y-6">
          <p className="text-stone-600 print:text-sm">Have these items ready for your concierge deployment.</p>
          <div className="space-y-4">
            {[
              { icon: Globe, title: "1. Domain Name", desc: "Know exactly which URL you are updating." },
              { icon: Server, title: "2. GoDaddy Login", desc: "You will need to log in to grant us access." },
              { icon: UserCheck, title: "3. Delegate Access", desc: "We will ask you to invite 'deploy@1845.ai' in your settings." },
              { icon: Code, title: "4. Your HTML Code", desc: "Your HTML code you created and tested on Gemini or Claude." }
            ].map((item, i) => (
              <div key={i} className="flex items-start gap-4 p-4 border border-stone-200 rounded-lg bg-stone-50 print:bg-white print:border-stone-300">
                <item.icon className="h-6 w-6 text-amber-700 mt-1 shrink-0" />
                <div>
                  <h3 className="font-bold text-stone-900">{item.title}</h3>
                  <p className="text-sm text-stone-600">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="pt-4 border-t border-stone-100 flex gap-3 print:hidden">
            <Button variant="secondary" onClick={() => window.print()} className="flex-1"><Printer className="h-5 w-5" /> Print This</Button>
            <Button onClick={() => setShowChecklistModal(false)} className="flex-1">Got it</Button>
          </div>
        </div>
      </div>
      <style>{`@media print { body * { visibility: hidden; } .printable-content, .printable-content * { visibility: visible; } .printable-content { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none !important; } button { display: none !important; } }`}</style>
    </div>
  );

  // --- Step 0: Preview ---
  const StepPreview = () => (
    <div className="space-y-10 animate-in fade-in slide-in-from-bottom-4 duration-500 text-center">
      <div className="space-y-4">
        <div className="inline-flex items-center justify-center p-3 bg-stone-900 rounded-2xl shadow-xl mb-4">
          <Terminal className="h-8 w-8 text-amber-500 mr-2" />
          <span className="text-2xl font-bold text-white tracking-wider">HTMLtoWeb</span>
        </div>
        <h1 className="text-4xl font-extrabold text-stone-900 leading-tight">
          We Deploy Your AI Code<br />To GoDaddy
        </h1>
        <p className="text-stone-600 text-lg max-w-xl mx-auto leading-relaxed">
          Your code is ready. You just need it online.<br/>
          <strong>Secure "Delegate Access" Service. We never ask for your password.</strong>
        </p>
        <p className="text-xs text-stone-500 font-medium">
          Live within 2-4 hours of request.
        </p>
      </div>

      <div className="grid md:grid-cols-3 gap-6 text-left">
        {[
          { icon: CreditCard, title: "1. One-Time Fee", desc: "$99 Service Fee. Returning customers get updates for $29." },
          { icon: Code, title: "2. Paste Code", desc: "Your HTML code you created and tested on Gemini or Claude." },
          { icon: Globe, title: "3. We Deploy", desc: "Our team securely uploads your files via Delegate Access." }
        ].map((item, i) => (
          <div key={i} className="bg-stone-50 p-6 rounded-xl border border-stone-200 hover:border-amber-500 hover:shadow-lg transition-all group">
            <div className="bg-white p-3 rounded-full w-12 h-12 flex items-center justify-center shadow-sm mb-4 border border-stone-100 group-hover:border-amber-200">
              <item.icon className="h-6 w-6 text-stone-800 group-hover:text-amber-600 transition-colors" />
            </div>
            <h3 className="font-bold text-stone-900 mb-1">{item.title}</h3>
            <p className="text-sm text-stone-600 leading-relaxed">{item.desc}</p>
          </div>
        ))}
      </div>
     
      <div className="flex flex-col md:flex-row gap-6 justify-center items-center pt-4">
        <Button onClick={() => setShowChecklistModal(true)} variant="checklist">
           <Printer className="h-5 w-5 mr-2" /> Print Checklist
        </Button>
        <div className="text-center group">
          <Button onClick={() => setStep(1)} className="w-full md:w-auto px-16 py-4 text-lg shadow-xl bg-stone-900 hover:bg-black border-amber-900/50">
            Start Launch <ArrowRight className="h-5 w-5 ml-2 text-amber-500" />
          </Button>
          <p className="text-xs text-stone-400 mt-2 font-medium tracking-wide group-hover:text-stone-600 transition-colors">
            I have everything & am ready to launch.
          </p>
        </div>
      </div>
    </div>
  );

  // --- Step 1: Checklist ---
  const StepChecklist = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="text-center space-y-2">
        <h2 className="text-2xl font-bold text-stone-900">Pre-Flight Checklist</h2>
        <p className="text-stone-600">Gather these items before we begin.</p>
      </div>
      <div className="grid gap-4">
        {[
          { icon: Server, title: "GoDaddy Login", desc: "Username & Password." },
          { icon: UserCheck, title: "Delegate Access", desc: "You'll invite us to access your hosting safely." },
          { icon: CreditCard, title: "Payment Method", desc: "For the $99 setup fee." }
        ].map((item, i) => (
          <div key={i} className="flex items-start gap-4 p-4 border border-stone-200 rounded-lg bg-stone-50 hover:bg-stone-100 transition-colors">
            <item.icon className="h-6 w-6 text-amber-700 mt-1" />
            <div>
              <h3 className="font-bold text-stone-900">{item.title}</h3>
              <p className="text-sm text-stone-600">{item.desc}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="flex gap-3 pt-4">
        <Button variant="secondary" onClick={() => setStep(0)}>Back</Button>
        <Button onClick={() => setStep(2)} className="flex-1">I'm Ready <ArrowRight className="h-5 w-5" /></Button>
      </div>
    </div>
  );

  // --- Step 2: Config ---
  const StepConfig = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="text-center">
        <h2 className="text-2xl font-bold text-stone-900">Connect Host</h2>
        <p className="text-stone-600">Securely grant access to your hosting.</p>
      </div>
     
      <div className="bg-amber-50 p-4 rounded-xl border border-amber-200 mb-2">
        <Input label="Website Domain Name" placeholder="www.your-site.com" icon={Globe} value={formData.domainName} onChange={(val) => setFormData({...formData, domainName: val})} />
        <p className="text-xs text-amber-800 mt-2 pl-1">*Required so we know exactly which domain to update.</p>
      </div>

      <div className="border-t border-stone-200 pt-4 mt-4">
        <div className="flex items-center justify-between gap-2 mb-4">
          <div className="flex items-center gap-2">
            <ShieldCheck className="h-5 w-5 text-green-600" />
            <h3 className="font-bold text-stone-900">Delegate Access</h3>
          </div>
          <button
            onClick={() => setShowDelegateGuide(true)}
            className="text-xs bg-stone-100 hover:bg-stone-200 text-stone-700 font-bold px-3 py-1.5 rounded-full flex items-center gap-1 transition-colors"
          >
            <HelpCircle className="h-3 w-3" /> Show me how
          </button>
        </div>
       
        <div className="bg-white p-4 rounded-lg border border-stone-200 space-y-4 text-sm text-stone-600">
          <p className="text-xs text-stone-500 italic mb-2">GoDaddy makes this tricky to find. Click "Show me how" above if you get stuck.</p>
          <div className="space-y-2">
            <p>1. Go to <strong>Account Settings</strong> {'>'} <strong>Delegate Access</strong>.</p>
            <p>2. Invite Name: <strong>1845 Dev Team</strong></p>
            <p>3. Invite Email: <strong className="text-stone-900 bg-amber-100 px-1 rounded select-all">deploy@1845.ai</strong></p>
            <p>4. Access Level: <strong>Products & Domains</strong> (Required).</p>
          </div>
        </div>
      </div>

      <div className="space-y-2 mt-2">
        <p className="text-xs font-bold text-stone-700">Confirm your GoDaddy Email</p>
        <Input placeholder="your-email@gmail.com" icon={Mail} value={formData.gdEmail} onChange={(val) => setFormData({...formData, gdEmail: val})} />
        <p className="text-[10px] text-stone-400">We use this to verify your invitation.</p>
      </div>

      <div className="flex gap-3 pt-4">
        <Button variant="secondary" onClick={() => setStep(1)}>Back</Button>
        <Button onClick={() => setStep(3)} className="flex-1" disabled={!formData.domainName || !formData.gdEmail}>Next: Upload Code</Button>
      </div>
    </div>
  );

  // --- Step 3: Editor ---
  const StepEditor = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="text-center">
        <h2 className="text-2xl font-bold text-stone-900">Code & Assets</h2>
        <p className="text-stone-600">1. Upload Images. 2. Paste Code.</p>
      </div>
      <div className="grid md:grid-cols-3 gap-6 h-full">
        <div className="md:col-span-1 space-y-4">
          <div className={`bg-stone-50 p-6 rounded-xl border-2 border-dashed transition-all text-center cursor-pointer relative group ${highlightUpload ? 'border-amber-500 bg-amber-50 ring-2 ring-amber-200' : 'border-stone-300 hover:border-amber-400 hover:bg-white'}`}>
            <UploadCloud className={`h-8 w-8 mx-auto mb-2 ${highlightUpload ? 'text-amber-600 animate-bounce' : 'text-stone-400'}`} />
            <p className="text-sm font-bold text-stone-700">Upload Images</p>
            <input type="file" multiple accept="image/*" className="absolute inset-0 opacity-0 cursor-pointer" onChange={handleFileUpload} />
          </div>
          <div className="space-y-2 max-h-60 overflow-y-auto pr-1">
            {uploadedFiles.map((file, idx) => (
              <div key={idx} className="bg-white p-2 rounded-lg border border-stone-200 shadow-sm flex items-center justify-between group">
                <div className="flex items-center gap-2 overflow-hidden"><ImageIcon className="h-4 w-4 text-amber-600 shrink-0" /><span className="text-xs font-medium text-stone-600 truncate max-w-full" title={file.name}>{file.name}</span></div>
                <div className="flex gap-1"><button onClick={() => copySnippet(file.name)} className="p-1 hover:bg-stone-100 rounded text-stone-500" title="Copy" aria-label="Copy snippet"><Copy className="h-3 w-3" /></button><button onClick={() => removeFile(file.name)} className="p-1 hover:bg-red-50 rounded text-stone-400 hover:text-red-500" aria-label="Remove file"><Trash2 className="h-3 w-3" /></button></div>
              </div>
            ))}
          </div>
        </div>
        <div className="md:col-span-2 space-y-3">
          <div className="relative">
            <textarea className={`w-full h-64 md:h-80 p-4 font-mono text-sm bg-stone-900 text-amber-50 rounded-lg border-2 focus:ring-0 resize-y ${codeErrors.length > 0 ? 'border-red-500' : 'border-stone-800'}`} placeholder={`<html>... paste code here ...<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl510388'},{'dcenter':'p3'},{'cp_id':'10859111'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>`} value={formData.htmlCode} onChange={(e) => setFormData({...formData, htmlCode: e.target.value})} />
           
            {formData.htmlCode && (
              <div className="absolute top-2 right-2 flex flex-col items-end gap-1">
                <button
                  onClick={handlePreviewCode}
                  className="bg-stone-700 hover:bg-stone-600 text-white text-xs px-3 py-1.5 rounded flex items-center gap-1 shadow-md transition-colors"
                  aria-label="Preview code"
                >
                  <Eye className="h-3 w-3" /> Preview
                </button>
                <p className="text-[10px] text-stone-500 bg-stone-900/80 px-1 rounded">* Images won't appear in preview (only live).</p>
              </div>
            )}
          </div>
          {codeErrors.length > 0 && (
            <div className="bg-red-50 border border-red-200 rounded-lg p-4 space-y-3 animate-in slide-in-from-top-2">
              <div className="flex items-center gap-2 text-red-800 font-bold text-sm"><AlertTriangle className="h-4 w-4" /><span>Action Required ({codeErrors.length})</span></div>
              <ul className="space-y-2">{codeErrors.map((err, i) => (<li key={i} className="text-sm bg-white p-3 rounded border border-red-100 shadow-sm"><p className={`${err.type === 'business_logic' ? 'text-amber-800' : 'text-red-800'} font-medium mb-2`}>{err.msg}</p>{err.type === 'missing_file' && (<div className="flex flex-wrap gap-2"><Button variant="action" onClick={() => setHighlightUpload(true)} className="text-amber-700 hover:bg-amber-50"><FileUp className="h-3 w-3 mr-1" /> Please Upload File</Button></div>)}</li>))}</ul>
            </div>
          )}
        </div>
      </div>
      <div className="flex gap-3 pt-4 border-t border-stone-100">
        <Button variant="secondary" onClick={() => setStep(2)}>Back</Button>
        <Button onClick={() => { if (validateCodeAndAssets()) { setStep(4); } }} className="flex-1" disabled={!formData.htmlCode}>{codeErrors.some(e => e.type !== 'business_logic') ? 'Upload Missing Files' : 'Next: Activate'}</Button>
      </div>
    </div>
  );

  // --- Step 4: Payment ---
  const StepPayment = () => {
    const isFormValid = formData.customerName.trim() !== "" && formData.customerEmail.trim().includes("@") && !emailError;

    return (
      <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-stone-900">Activate Deployment</h2>
          <p className="text-stone-600">Your code and connection are ready. Complete payment to go live.</p>
        </div>
       
        <div className="bg-stone-900 text-white p-8 rounded-xl shadow-2xl relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-amber-500/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
         
          <div className="flex justify-between items-center mb-6 relative z-10">
            <div>
              <div className="flex items-baseline gap-2">
                <h3 className="text-4xl font-bold text-white">${price}.00</h3>
                {price < 99 && <span className="text-stone-400 line-through text-lg">$99.00</span>}
              </div>
              <p className="text-stone-400 text-sm mt-1">One-time service fee</p>
            </div>
            <div className="text-right">
              <div className="bg-amber-900/30 text-amber-400 text-xs px-2 py-1 rounded border border-amber-900/50">100% Money-Back Guarantee</div>
            </div>
          </div>

          <div className="bg-white/10 p-4 rounded-lg border border-white/10 space-y-4 mb-4 relative z-10">
            <p className="text-xs text-stone-300 uppercase tracking-wider font-bold mb-1">Contact Details</p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div className="space-y-1">
                <Input label="Full Name" placeholder="Full Name" value={formData.customerName} onChange={(val) => setFormData({...formData, customerName: val})} required={true} />
              </div>
              <div className="space-y-1">
                <Input label="Email Address" type="email" placeholder="receipt@email.com" value={formData.customerEmail} onChange={handleEmailChange} required={true} error={emailError} />
                {emailWarning && <p className="text-xs text-amber-300 mt-1">{emailWarning}</p>}
              </div>
            </div>
          </div>

          <div className="mb-6 relative z-10">
            {!showPromoInput ? (
              <button onClick={() => setShowPromoInput(true)} className="text-xs text-amber-400 hover:text-amber-300 underline flex items-center gap-1"><Tag className="h-3 w-3" /> Have a promo code?</button>
            ) : (
              <div className="flex gap-2">
                <input type="text" placeholder="Enter Code" className="p-2 rounded bg-stone-800 border border-stone-600 text-white text-xs w-32 uppercase" value={promoCode} onChange={(e) => setPromoCode(e.target.value)} />
                <button onClick={applyPromoCode} className="px-3 py-1 bg-amber-600 hover:bg-amber-500 text-white text-xs rounded font-bold">Apply</button>
              </div>
            )}
            {promoMessage && <p className="text-xs text-green-400 mt-2 animate-in slide-in-from-left-2">{promoMessage}</p>}
          </div>
         
          <div className="space-y-4 relative z-10">
            {paymentProcessing ? (
              <div className="bg-white/5 p-8 rounded-lg flex flex-col items-center justify-center gap-3 border border-white/10"><Loader2 className="h-8 w-8 animate-spin text-amber-500" /><p className="text-sm text-stone-300">Processing secure payment...</p></div>
            ) : (
              <div className={`p-5 bg-white rounded-lg border border-stone-200 shadow-inner transition-opacity ${!isFormValid ? 'opacity-50 pointer-events-none' : 'opacity-100'}`}>
                 <p className="text-xs text-stone-500 mb-4 uppercase tracking-wider text-center font-bold">Pay & Deploy with</p>
                 <div className="grid gap-3">
                   <Button variant="paypal" onClick={() => handlePayment('paypal')} disabled={!isFormValid} className="w-full justify-center"><span className="font-bold italic text-lg">Pay<span className="text-[#009cde]">Pal</span></span></Button>
                   <Button variant="venmo" onClick={() => handlePayment('venmo')} disabled={!isFormValid} className="w-full justify-center"><span className="font-bold italic text-lg">venmo</span></Button>
                 </div>
              </div>
            )}
            <div className="flex items-start gap-2 text-[10px] text-stone-400 mt-4 bg-black/20 p-2 rounded"><Info className="h-3 w-3 shrink-0 mt-0.5 text-amber-500" /><p>Note: This fee covers one deployment. Returning customers get updates at a reduced rate.</p></div>
            {!isFormValid && <p className="text-center text-xs text-amber-200 mt-2">* Please enter Name & Valid Email to proceed.</p>}
            <Button variant="outline" onClick={() => setStep(3)} disabled={paymentProcessing} className="w-full text-stone-300 border-stone-700 hover:bg-stone-800 hover:text-white">Back to Code</Button>
          </div>
        </div>
      </div>
    );
  };

  const StepFinal = () => (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 text-center">
      {deployStatus === 'idle' ? (
        <div className="py-12"><Loader2 className="h-16 w-16 animate-spin text-amber-600 mx-auto" /></div>
      ) : (
        <>
          <div className="bg-green-100 p-6 rounded-full w-24 h-24 flex items-center justify-center mx-auto shadow-inner">
            <CheckCircle className="h-12 w-12 text-green-700" />
          </div>
          <h2 className="text-4xl font-extrabold text-stone-900">Request Received!</h2>
          <div className="text-stone-600 max-w-md mx-auto text-lg space-y-4">
            <p>We have received your code and payment.</p>
            <div className="bg-stone-50 p-4 rounded-lg border border-stone-200 text-sm text-left">
              <p className="font-bold mb-2">Next Steps:</p>
              <ul className="list-disc pl-4 space-y-1">
                <li>Please ensure you have sent the Delegate Access invite to <strong>deploy@1845.ai</strong>.</li>
                <li>Our team will accept the invite and upload your files securely.</li>
                <li>You will receive an email confirmation when live (usually &lt; 2 hours).</li>
              </ul>
            </div>
          </div>
          <Button className="w-full bg-green-700 hover:bg-green-800 text-white shadow-lg mt-4">Done</Button>
          {/* V23: Support Link */}
          <a href="mailto:support@1845.ai" className="block text-sm text-stone-400 mt-4 hover:underline hover:text-stone-600">Contact Support</a>
        </>
      )}
    </div>
  );

  return (
    <div className="min-h-screen bg-stone-100 p-6 flex flex-col items-center font-sans text-stone-900">
      <div className="max-w-4xl w-full flex-grow flex flex-col justify-center">
        {step > 0 && (
          <div className="flex justify-center mb-8 gap-3">
            {[1, 2, 3, 4, 5].map((num) => (
              <div key={num} className={`h-1.5 w-12 rounded-full transition-all ${step >= num ? "bg-amber-700" : "bg-stone-300"}`} />
            ))}
          </div>
        )}
        <Card className="p-8 md:p-12 min-h-[600px] flex flex-col justify-center border-t-4 border-t-amber-800">
          {step === 0 && <StepPreview />}
          {step === 1 && <StepChecklist />}
          {step === 2 && <StepConfig />}
          {step === 3 && <StepEditor />}
          {step === 4 && <StepPayment />}
          {step === 5 && <StepFinal />}
        </Card>
      </div>
     
      {showChecklistModal && <ChecklistModal />}
      {showDelegateGuide && <DelegateGuideModal />}
     
      <div className="hidden mt-16 pt-8 border-t border-stone-200 w-full max-w-4xl text-center">
        <h3 className="text-xl font-bold text-stone-900 mb-6 font-serif italic">Real Sites Launched with HTMLtoWeb</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {[1, 2, 3].map((i) => (
            <div key={i} className="bg-stone-50 rounded-lg h-48 border-2 border-dashed border-stone-300 flex items-center justify-center">
              <span className="text-stone-400 text-sm">Example Site Preview</span>
            </div>
          ))}
        </div>
      </div>

      <footer className="mt-12 w-full max-w-4xl border-t border-stone-300 pt-8 pb-12">
        <div className="flex flex-col md:flex-row justify-between items-center gap-6 text-stone-900 font-medium px-4">
          <div className="flex items-center gap-3">
             <img src="https://1845.ai/1845_logo.png" alt="1845.ai" className="h-8 w-auto opacity-90" />
             <span className="text-sm font-bold text-stone-700">&copy; 2026 1845.ai. All rights reserved.</span>
          </div>
          <div className="flex flex-col items-center md:items-end gap-1">
            <div className="flex gap-4 text-sm mb-2">
               <a href="#" className="hover:text-amber-800 hover:underline">Privacy Policy & Terms</a>
               <span className="text-stone-300">|</span>
               <a href="https://browndog.com" target="_blank" rel="noreferrer" className="text-amber-900 hover:text-amber-700 hover:underline font-bold">BrownDog</a>
               <span className="text-stone-300">|</span>
               <a href="https://1845.ai" target="_blank" rel="noreferrer" className="text-amber-900 hover:text-amber-700 hover:underline font-bold">1845AI</a>
            </div>
            <p className="text-xs text-stone-500">Contact: support@1845.ai</p>
          </div>
        </div>
        <div className="max-w-3xl mx-auto mt-8 text-center text-[10px] text-stone-400 leading-relaxed px-4">
          Disclaimer: HTMLtoWeb is a deployment automation tool provided by 1845.ai. We are not affiliated with GoDaddy Operating Company, LLC.
          Users are responsible for their own hosting accounts, billing, and content. We do not store your credentials.
        </div>
      </footer>
    </div>
  );
}