import React from 'react';
import { Users, Award, ShieldCheck, CheckCircle2, Sparkles, Building2, MapPin, Phone, Mail } from 'lucide-react';
import siteInfo from '../data/siteInfo.json';
import teamData from '../data/team.json';

export const About: React.FC = () => {
  return (
    <div className="pt-28 pb-20 bg-slate-950 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Header */}
        <div className="donya-section-header">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/20 text-xs font-bold mb-4">
            <Users className="w-3.5 h-3.5" />
            <span>درباره پلتفرم هوشان</span>
          </div>
          <h1 className="donya-section-title">
            <Sparkles className="w-7 h-7 text-indigo-400" />
            <span>{siteInfo.story.title}</span>
          </h1>
          <div className="donya-divider">
            <span className="donya-divider-line"></span>
            <span className="donya-divider-icon"></span>
            <span className="donya-divider-line"></span>
          </div>
        </div>

        {/* Story Section */}
        <div className="glass-panel p-8 sm:p-12 rounded-3xl border border-white/10 mb-16 shadow-2xl max-w-4xl mx-auto space-y-6 text-sm sm:text-base text-slate-300 leading-relaxed">
          {siteInfo.story.paragraphs.map((p, idx) => (
            <p key={idx}>{p}</p>
          ))}
        </div>

        {/* Licenses Section (Elementor Page #4630: مجوزهای ما) */}
        <div className="mb-20">
          <div className="donya-section-header">
            <h2 className="donya-section-title">
              <Award className="w-6 h-6 text-cyan-400" />
              <span>مجوزها و افتخارات رسمی هوشان</span>
            </h2>
            <div className="donya-divider">
              <span className="donya-divider-line"></span>
              <span className="donya-divider-icon"></span>
              <span className="donya-divider-line"></span>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {siteInfo.licenses.map((lic, idx) => (
              <div key={idx} className="glass-panel p-6 rounded-2xl border border-white/5 text-center flex flex-col items-center justify-center">
                <div className="w-14 h-14 rounded-2xl bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center text-indigo-400 mb-4">
                  <ShieldCheck className="w-7 h-7" />
                </div>
                <h3 className="text-base font-bold text-white mb-2">{lic.title}</h3>
                <p className="text-xs text-slate-400">{lic.desc}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Team Section (Elementor Page #4568: تیم ما) */}
        <div>
          <div className="donya-section-header">
            <h2 className="donya-section-title">
              <Users className="w-6 h-6 text-indigo-400" />
              <span>تیم توسعه و مدیران هوشان</span>
            </h2>
            <div className="donya-divider">
              <span className="donya-divider-line"></span>
              <span className="donya-divider-icon"></span>
              <span className="donya-divider-line"></span>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
            {teamData.map((member, idx) => (
              <div key={idx} className="glass-panel p-6 rounded-2xl border border-white/5 text-center group hover:border-indigo-500/40 transition-all hover:-translate-y-1">
                <div className="w-20 h-20 rounded-full bg-slate-800 border-2 border-indigo-500/30 mx-auto mb-4 flex items-center justify-center text-3xl shadow-lg">
                  👨‍💼
                </div>
                <h4 className="text-base font-bold text-white mb-1 group-hover:text-indigo-300">{member.name}</h4>
                <span className="text-xs text-slate-400">{member.role}</span>
              </div>
            ))}
          </div>
        </div>

      </div>
    </div>
  );
};
