import React, { useState, useEffect } from 'react';
import { Eye, ShieldAlert, Cpu, Award, CheckCircle, Clock, Calendar, ArrowRight, ShieldCheck } from 'lucide-react';
import { Link, useLocation } from 'react-router-dom';
import './Services.css';

export default function Services() {
  const location = useLocation();
  const [activeTab, setActiveTab] = useState(0);

  useEffect(() => {
    if (location.state && typeof location.state.activeTab === 'number') {
      setActiveTab(location.state.activeTab);
    }
  }, [location.state]);

  const servicesDetails = [
    {
      icon: <Eye size={36} />,
      title: "Cyber Security Strategy & Advisory",
      description: "Establish defensive foundations aligning security investments with compliance standards and business growth.",
      timeline: "2 - 4 Weeks Engagement",
      targetAudience: "Startups raising Series A/B, Growth companies scaling cloud footprint.",
      strategicScope: "We perform a thorough evaluation of your existing architecture, code pipelines, and identity controls. Instead of just highlighting flaws, we map out a multi-phase technical roadmap that secures your system without reducing your developer speed.",
      deliverables: [
        "Interactive Threat Modeling & Cloud Infrastructure Architecture Diagram",
        "Multi-Cloud Security Blueprint (AWS IAM roles, VPC layout, GCP permission guards)",
        "Zero-Trust Identity & Access Management (IAM) roadmap",
        "CI/CD Pipeline Security Integration Specifications",
        "Asset liability matrix mapping data scopes & server perimeters"
      ],
      phases: [
        { title: "Phase 1: Architecture Review", desc: "Detailed audit of existing cloud posture, repository controls, and access rights." },
        { title: "Phase 2: Risk Threat Modeling", desc: "Simulation of potential attack vectors targeting data storage, API perimeters, and dependencies." },
        { title: "Phase 3: Security Roadmap", desc: "Final design document containing developer-ready implementation scripts and blueprints." }
      ]
    },
    {
      icon: <Cpu size={36} />,
      title: "Security Transformation",
      description: "Build operational resiliency by modernizing workflows, automation, and continuous control monitoring.",
      timeline: "4 - 8 Weeks Engagement",
      targetAudience: "Organizations transitioning to automated cloud operations and zero-trust engineering.",
      strategicScope: "We translate your security roadmap into operational reality. We engineer automation into risk management workflows, secure secrets, deploy infrastructure-as-code guards, and build auto-scaling incident containment rules.",
      deliverables: [
        "Automated Third-Party Vendor Risk Assessment engine setup",
        "Disaster Recovery (DR) and active-active failover automation configs",
        "Incident Response Playbooks integrated with Slack/Microsoft Teams alerts",
        "Automated Secret Rotation systems & Infrastructure-as-Code (IaC) hardening rules",
        "Real-time monitoring telemetry panels for security events"
      ],
      phases: [
        { title: "Phase 1: Tool Integration", desc: "Deploying automated scanners, telemetry collectors, and alert configurations." },
        { title: "Phase 2: System Hardening", desc: "Refactoring IAM policies, securing secrets, and closing open network ports." },
        { title: "Phase 3: Resiliency Simulation", desc: "Running disaster failover and incident alert mock drills to verify response speed." }
      ]
    },
    {
      icon: <ShieldAlert size={36} />,
      title: "Risk Management & Vulnerability Testing",
      description: "Proactive, threat-informed penetration testing and vulnerability scans to identify and plug software vulnerabilities.",
      timeline: "1 - 3 Weeks Engagement",
      targetAudience: "SaaS platforms preparing for client audits, FinTech portals releasing new APIs.",
      strategicScope: "Our engineers act as ethical adversaries, simulating real-world target scenarios against your application and perimeters. We focus heavily on API bypasses, cloud credential exposure, and logic flaws that standard scanner tools miss.",
      deliverables: [
        "Network Penetration Testing (Internal, External Cloud perimeters)",
        "Web and Mobile API Security Assessment Report with developer-ready fixes",
        "Continuous Vulnerability Scanning pipelines & patch advisory matrix",
        "Social Engineering simulation reports detailing employee risk factors",
        "Executive Summary Report and Technical Remediations Guide"
      ],
      phases: [
        { title: "Phase 1: Recon & Scoping", desc: "Identifying active perimeters, endpoints, API routes, and cloud environments." },
        { title: "Phase 2: Target Exploitation", desc: "Simulating attacks to bypass authentication, expose databases, or lift server permissions." },
        { title: "Phase 3: Remediation Review", desc: "Delivering categorized findings reports with direct remediation support for developers." }
      ]
    },
    {
      icon: <Award size={36} />,
      title: "Compliance & Regulatory Consulting",
      description: "Fast-track SOC2 Type II, HIPAA, ISO 27001, and AI auditing certifications with expert-led compliance roadmaps.",
      timeline: "3 - 6 Weeks (Readiness Phase)",
      targetAudience: "B2B SaaS companies closing enterprise deals, Healthcare systems handling patient records.",
      strategicScope: "We make audit collection passive. We design compliance pipelines that collect screenshots, verify configurations, and track logs automatically, allowing you to pass complex GRC audits with zero friction.",
      deliverables: [
        "GRC Tool Integration (Vanta, Drata, Secureframe, etc.) & mapping optimization",
        "Tailored Security Policy Documents drafted for your organization",
        "HIPAA/HITRUST encryption configuration validation",
        "Mock Audits simulating SOC2, ISO 27001, or AI safety controls",
        "Continuous compliance monitoring dashboard configuration"
      ],
      phases: [
        { title: "Phase 1: Gap Analysis", desc: "Evaluating current policy settings, configurations, and logs against target audit criteria." },
        { title: "Phase 2: Policy & Control Build", desc: "Drafting required policy docs and configuring monitors to collect compliance telemetry." },
        { title: "Phase 3: Audit Hand-off", desc: "Presenting structured evidence to independent third-party registrars for certification sign-off." }
      ]
    }
  ];

  return (
    <div className="services-page">
      {/* Intro Header (Hero Kept As It Is) */}
      <section className="services-hero section">
        <div className="container animate-fade-in-up">
          <span className="section-label">Our Capabilities</span>
          <h1 className="section-title">Enterprise Security. Remote Delivery.</h1>
          <p className="section-description">
            Cynomos provides modular cyber security capabilities delivered remotely. Select any core offering below to inspect features, sub-tasks, and implementation scopes.
          </p>
        </div>
      </section>

      {/* Redesigned Interactive Services Suite */}
      <section className="section section-alt services-suite-section">
        <div className="container">
          <div className="services-tabs-container">
            {/* Tabs Sidebar */}
            <div className="services-sidebar-tabs">
              {servicesDetails.map((service, idx) => (
                <button
                  key={idx}
                  className={`service-tab-button ${activeTab === idx ? 'active' : ''}`}
                  onClick={() => setActiveTab(idx)}
                >
                  <div className="tab-icon">{service.icon}</div>
                  <div className="tab-btn-text">
                    <h4>{service.title}</h4>
                    <span className="tab-duration">{service.timeline}</span>
                  </div>
                </button>
              ))}
            </div>

            {/* Active Content Pane */}
            <div className="service-content-pane animate-fade-in">
              <div className="pane-header">
                <div className="pane-title-row">
                  <span className="pane-badge">Active Focus</span>
                  <h2>{servicesDetails[activeTab].title}</h2>
                </div>
                <p className="pane-lead">{servicesDetails[activeTab].description}</p>
                
                <div className="pane-metadata grid grid-2">
                  <div className="meta-item">
                    <Clock size={18} className="gold-text" />
                    <span><strong>Duration:</strong> {servicesDetails[activeTab].timeline}</span>
                  </div>
                  <div className="meta-item">
                    <ShieldCheck size={18} className="gold-text" />
                    <span><strong>Target Audience:</strong> {servicesDetails[activeTab].targetAudience}</span>
                  </div>
                </div>
              </div>

              <hr className="pane-divider" />

              <div className="pane-body grid grid-2">
                {/* Left: Strategic Scope & Deliverables */}
                <div className="pane-details-column">
                  <h3>Strategic Scope & Methodology</h3>
                  <p className="scope-text">{servicesDetails[activeTab].strategicScope}</p>
                  
                  <div className="deliverables-box">
                    <h4>Key Deliverables:</h4>
                    <ul className="pane-deliverables-list">
                      {servicesDetails[activeTab].deliverables.map((item, idx) => (
                        <li key={idx}>
                          <CheckCircle size={16} className="success-check" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

                {/* Right: Phased Implementation Checklist */}
                <div className="pane-checklist-column">
                  <h3>Phased Implementation Checklist</h3>
                  <div className="phases-timeline">
                    {servicesDetails[activeTab].phases.map((phase, idx) => (
                      <div key={idx} className="timeline-phase-item">
                        <div className="phase-marker">
                          <span>{idx + 1}</span>
                        </div>
                        <div className="phase-content">
                          <h4>{phase.title}</h4>
                          <p>{phase.desc}</p>
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="pane-cta-box">
                    <h4>Ready to Begin?</h4>
                    <p>Schedule a scoping call with our security team to adapt this model to your environment.</p>
                    <Link to="/contact" className="btn btn-primary btn-full pane-cta-btn">
                      Request Scoping Call <ArrowRight size={16} />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Methodology Section */}
      <section className="section methodology-section">
        <div className="container">
          <div className="section-header">
            <span className="section-label">Execution</span>
            <h2 className="section-title">The Cynomos Security Methodology</h2>
            <p className="section-description">
              How we take you from baseline risk to robust continuous security compliance.
            </p>
          </div>

          <div className="methodology-progress-wrapper">
            <div className="methodology-connecting-line"></div>
            
            <div className="grid grid-3 methodology-grid">
              <div className="meth-step-card">
                <div className="meth-step-badge">
                  <span>Step 01</span>
                </div>
                <div className="meth-icon-circle-redesign">
                  <Eye size={28} />
                </div>
                <h4>Assess & Baseline</h4>
                <p>We analyze current code repositories, network perimeters, IAM configurations, and policy books to establish a current security posture.</p>
              </div>

              <div className="meth-step-card">
                <div className="meth-step-badge">
                  <span>Step 02</span>
                </div>
                <div className="meth-icon-circle-redesign">
                  <Cpu size={28} />
                </div>
                <h4>Engineer & Hardener</h4>
                <p>We fix access controls, setup monitoring rules, deploy security pipelines, and build compliance safeguards directly into your developer environments.</p>
              </div>

              <div className="meth-step-card">
                <div className="meth-step-badge">
                  <span>Step 03</span>
                </div>
                <div className="meth-icon-circle-redesign">
                  <ShieldCheck size={28} />
                </div>
                <h4>Audit & Certify</h4>
                <p>We perform full mock audits and vulnerability penetration tests, preparing your company for certification by independent compliance registrars.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
