cre-sync/app/(app)/automations/page.tsx

'use client';

import React, { useState } from 'react';
import {
  Zap,
  Play,
  Clock,
  Mail,
  MessageSquare,
  GitBranch,
  Target,
  Bell,
  CheckCircle2,
  ArrowRight,
  Sparkles
} from 'lucide-react';

export default function AutomationsPage() {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (email) {
      setSubmitted(true);
      setEmail('');
    }
  };

  const upcomingFeatures = [
    { icon: Play, title: 'Trigger-Based Workflows', description: 'Start automations when deals change status, contacts engage, or time conditions are met' },
    { icon: Mail, title: 'Automated Email Sequences', description: 'Send personalized follow-up emails automatically based on prospect behavior' },
    { icon: MessageSquare, title: 'SMS & Notification Actions', description: 'Reach out via text or push notifications at the perfect moment' },
    { icon: GitBranch, title: 'Conditional Logic', description: 'Build smart workflows with if/then branches and decision points' },
    { icon: Target, title: 'Lead Scoring Automation', description: 'Automatically prioritize leads based on engagement and criteria' },
    { icon: Clock, title: 'Scheduled Actions', description: 'Set delays, schedule sends, and time your outreach perfectly' },
  ];

  return (
    <div className="space-y-8">
      {/* Hero Section */}
      <div className="clay-card shadow-lg border border-border/50 max-w-4xl mx-auto text-center p-8 lg:p-12 mb-8">
        {/* Animated Icon Stack */}
        <div className="relative w-24 h-24 mx-auto mb-8">
          <div className="absolute inset-0 clay-icon-btn w-24 h-24 flex items-center justify-center">
            <Zap className="w-12 h-12 text-primary" />
          </div>
          <div className="absolute -top-2 -right-2 w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center border border-amber-200 shadow-sm">
            <Sparkles className="w-4 h-4 text-amber-600" />
          </div>
          <div className="absolute -bottom-2 -left-2 w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center border border-emerald-200 shadow-sm">
            <Play className="w-4 h-4 text-emerald-600" />
          </div>
        </div>

        {/* Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium mb-6">
          <Clock className="w-4 h-4" />
          Coming Q2 2026
        </div>

        <h1 className="text-3xl lg:text-4xl font-bold text-foreground mb-4">
          Workflow Automations
        </h1>
        <p className="text-lg text-slate-500 mb-4 max-w-2xl mx-auto leading-relaxed">
          Put your CRE outreach on autopilot. Build powerful automations that nurture leads,
          follow up at the perfect time, and keep your pipeline moving without lifting a finger.
        </p>
        <p className="text-slate-500 mb-8 max-w-xl mx-auto">
          From simple email sequences to complex multi-channel workflows with conditional logic,
          automations will help you scale your business while maintaining a personal touch.
        </p>

        {/* Email Signup */}
        {!submitted ? (
          <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
            <input
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="flex-1 px-4 py-3 rounded-xl border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
              required
            />
            <button type="submit" className="clay-btn-primary px-6 py-3 font-medium inline-flex items-center justify-center gap-2">
              <Bell className="w-4 h-4" />
              Notify Me
            </button>
          </form>
        ) : (
          <div className="flex items-center justify-center gap-2 text-emerald-600 bg-emerald-50 px-6 py-3 rounded-xl max-w-md mx-auto mb-4">
            <CheckCircle2 className="w-5 h-5" />
            <span className="font-medium">You&apos;re on the list! We&apos;ll notify you when it&apos;s ready.</span>
          </div>
        )}
        <p className="text-sm text-slate-500">
          Be the first to know when automations launch. No spam, just updates.
        </p>
      </div>

      {/* Features Preview */}
      <div className="max-w-4xl mx-auto">
        <h2 className="text-xl font-semibold text-foreground text-center mb-6">
          What&apos;s Coming
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {upcomingFeatures.map((feature, index) => (
            <div
              key={index}
              className="clay-card p-5 opacity-75 border border-dashed border-border/70"
            >
              <div className="w-10 h-10 bg-muted rounded-lg flex items-center justify-center mb-3">
                <feature.icon className="w-5 h-5 text-muted-foreground" />
              </div>
              <h3 className="font-medium text-foreground mb-1">{feature.title}</h3>
              <p className="text-sm text-slate-500">{feature.description}</p>
            </div>
          ))}
        </div>

        {/* Workflow Preview (Disabled/Grayed) */}
        <div className="clay-card p-6 mt-8 opacity-50 pointer-events-none select-none border border-dashed border-border">
          <div className="flex items-center gap-2 mb-4 text-muted-foreground">
            <GitBranch className="w-5 h-5" />
            <span className="font-medium">Workflow Builder Preview</span>
            <span className="ml-auto text-xs bg-muted px-2 py-1 rounded">Coming Soon</span>
          </div>
          <div className="flex items-center justify-center gap-4 py-8">
            {/* Trigger */}
            <div className="w-32 h-20 bg-muted/50 rounded-xl border-2 border-dashed border-muted-foreground/30 flex flex-col items-center justify-center">
              <Target className="w-6 h-6 text-muted-foreground/50 mb-1" />
              <span className="text-xs text-muted-foreground/50">Trigger</span>
            </div>
            <ArrowRight className="w-6 h-6 text-muted-foreground/30" />
            {/* Condition */}
            <div className="w-32 h-20 bg-muted/50 rounded-xl border-2 border-dashed border-muted-foreground/30 flex flex-col items-center justify-center">
              <GitBranch className="w-6 h-6 text-muted-foreground/50 mb-1" />
              <span className="text-xs text-muted-foreground/50">Condition</span>
            </div>
            <ArrowRight className="w-6 h-6 text-muted-foreground/30" />
            {/* Action */}
            <div className="w-32 h-20 bg-muted/50 rounded-xl border-2 border-dashed border-muted-foreground/30 flex flex-col items-center justify-center">
              <Mail className="w-6 h-6 text-muted-foreground/50 mb-1" />
              <span className="text-xs text-muted-foreground/50">Action</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}