cre-sync/components/ExternalTools.tsx

import React from 'react';
import { ClayCard } from './ClayCard';
import { Button } from './Button';
import {
  FileText,
  Calculator,
  ArrowRight,
  CheckCircle2,
  Sparkles,
  FileSignature,
  BarChart3,
  Clock,
  Zap,
  Shield,
  TrendingUp,
  PieChart,
  Target,
  Layers,
  Award
} from 'lucide-react';

interface ExternalToolsProps {
  loiToolUrl?: string;
  underwritingToolUrl?: string;
  onToolClick?: (toolName: string) => void;
}

interface ToolFeature {
  icon: React.ReactNode;
  text: string;
}

interface Tool {
  id: string;
  name: string;
  fullName: string;
  description: string;
  longDescription: string;
  icon: React.ReactNode;
  iconBg: string;
  gradientFrom: string;
  gradientTo: string;
  features: ToolFeature[];
  capabilities: string[];
  badge?: string;
  badgeColor?: string;
}

export const ExternalTools: React.FC<ExternalToolsProps> = ({
  loiToolUrl = '#',
  underwritingToolUrl = '#',
  onToolClick,
}) => {
  const handleToolAccess = (toolName: string, url: string) => {
    if (onToolClick) {
      onToolClick(toolName);
    }
    if (url && url !== '#') {
      window.open(url, '_blank', 'noopener,noreferrer');
    }
  };

  const tools: Tool[] = [
    {
      id: 'loi',
      name: 'LOI Drafting Tool',
      fullName: 'Letter of Intent (LOI) Drafting Tool',
      description: 'Create professional letters of intent in minutes',
      longDescription: 'Streamline your deal-making process with our intelligent LOI generator. Input your deal terms and receive a professionally formatted letter of intent ready for submission.',
      icon: <FileSignature size={32} />,
      iconBg: 'bg-gradient-to-br from-emerald-500 to-green-600',
      gradientFrom: 'from-emerald-100/50',
      gradientTo: 'to-green-100/50',
      badge: 'Time Saver',
      badgeColor: 'bg-emerald-100 text-emerald-700',
      features: [
        { icon: <Zap className="w-4 h-4" />, text: 'Auto-generate from deal data' },
        { icon: <Shield className="w-4 h-4" />, text: 'Industry-standard templates' },
        { icon: <Clock className="w-4 h-4" />, text: 'Create LOIs in under 5 minutes' },
      ],
      capabilities: [
        'Multiple property type templates',
        'Custom clause library',
        'Export to PDF/Word',
        'Save drafts for later',
        'Track sent LOIs',
      ],
    },
    {
      id: 'underwriting',
      name: 'Underwriting Tool',
      fullName: 'Advanced Underwriting Analysis Tool',
      description: 'Gamified approach to property analysis',
      longDescription: 'Make smarter investment decisions with our comprehensive underwriting tool. Analyze deals with confidence using our intuitive, gamified interface that makes complex financial modeling accessible.',
      icon: <BarChart3 size={32} />,
      iconBg: 'bg-gradient-to-br from-amber-500 to-orange-600',
      gradientFrom: 'from-amber-100/50',
      gradientTo: 'to-orange-100/50',
      badge: 'Pro Analysis',
      badgeColor: 'bg-amber-100 text-amber-700',
      features: [
        { icon: <PieChart className="w-4 h-4" />, text: 'Interactive financial modeling' },
        { icon: <Target className="w-4 h-4" />, text: 'Scenario comparison' },
        { icon: <TrendingUp className="w-4 h-4" />, text: 'ROI & IRR calculations' },
      ],
      capabilities: [
        'Multi-year projections',
        'Sensitivity analysis',
        'Cap rate calculations',
        'Cash flow modeling',
        'Investment scoring',
      ],
    },
  ];

  return (
    <div className="max-w-5xl mx-auto py-10 px-4">
      {/* Header - Level 1 (subtle) since it's a page header */}
      <ClayCard elevation="subtle" className="mb-10">
        <div className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-50 rounded-full text-indigo-600 text-sm font-medium mb-4">
          <Sparkles className="w-4 h-4" />
          Productivity Suite
        </div>
        <h1 className="text-3xl font-bold text-gray-800">External Tools</h1>
        <p className="text-gray-500 mt-2 max-w-2xl">
          Access specialized tools designed to streamline your workflow and help you close deals faster.
          Each tool is built specifically for commercial real estate professionals.
        </p>
      </ClayCard>

      {/* Tools Grid */}
      <div className="grid gap-8">
        {tools.map((tool) => (
          <ClayCard key={tool.id} className="relative overflow-hidden">
            {/* Background Decoration */}
            <div className={`absolute top-0 right-0 w-96 h-96 bg-gradient-to-br ${tool.gradientFrom} ${tool.gradientTo} rounded-full -translate-y-1/2 translate-x-1/3 opacity-60`} />

            <div className="relative">
              {/* Header Section */}
              <div className="flex flex-col lg:flex-row gap-6 items-start">
                <div className={`${tool.iconBg} p-5 rounded-2xl text-white shadow-lg flex-shrink-0`}>
                  {tool.icon}
                </div>

                <div className="flex-1 min-w-0">
                  <div className="flex flex-wrap items-center gap-2 mb-2">
                    <h3 className="text-2xl font-bold text-gray-800">{tool.fullName}</h3>
                    {tool.badge && (
                      <span className={`px-3 py-1 ${tool.badgeColor} text-xs font-semibold rounded-full`}>
                        {tool.badge}
                      </span>
                    )}
                  </div>
                  <p className="text-gray-600 mb-4">{tool.longDescription}</p>

                  {/* Features Row */}
                  <div className="flex flex-wrap gap-4 mb-6">
                    {tool.features.map((feature, index) => (
                      <div key={index} className="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 px-3 py-2 rounded-lg">
                        <span className="text-gray-400">{feature.icon}</span>
                        {feature.text}
                      </div>
                    ))}
                  </div>
                </div>

                <Button
                  onClick={() => handleToolAccess(tool.id, tool.id === 'loi' ? loiToolUrl : underwritingToolUrl)}
                  className="flex-shrink-0"
                >
                  Access Tool
                  <ArrowRight size={16} />
                </Button>
              </div>

              {/* Capabilities Section */}
              <div className="mt-6 pt-6 border-t border-gray-100">
                <div className="flex items-center gap-2 mb-4">
                  <Layers className="w-4 h-4 text-gray-400" />
                  <h4 className="font-semibold text-gray-700">Key Capabilities</h4>
                </div>
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
                  {tool.capabilities.map((capability, index) => (
                    <div
                      key={index}
                      className="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 hover:bg-gray-100 px-3 py-2.5 rounded-lg transition-colors"
                    >
                      <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
                      <span className="truncate">{capability}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </ClayCard>
        ))}
      </div>

      {/* Coming Soon Section */}
      <div className="mt-10">
        <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
          <Award className="w-5 h-5 text-indigo-600" />
          Coming Soon
        </h2>
        <div className="grid md:grid-cols-3 gap-4">
          {[
            { name: 'Comp Analysis Tool', description: 'Market comparison insights', icon: <BarChart3 className="w-5 h-5" /> },
            { name: 'Document Generator', description: 'Custom CRE documents', icon: <FileText className="w-5 h-5" /> },
            { name: 'Deal Calculator', description: 'Quick deal metrics', icon: <Calculator className="w-5 h-5" /> },
          ].map((item, index) => (
            <div
              key={index}
              className="p-5 bg-gray-50 rounded-2xl border border-dashed border-gray-300 opacity-70"
            >
              <div className="w-10 h-10 bg-gray-200 rounded-xl flex items-center justify-center text-gray-500 mb-3">
                {item.icon}
              </div>
              <h4 className="font-semibold text-gray-700">{item.name}</h4>
              <p className="text-sm text-gray-500 mt-1">{item.description}</p>
              <span className="inline-block mt-3 text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded">
                In Development
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};