import React from 'react';
import { DollarSign, ShieldCheck, Heart, Building2, Lock, AlertOctagon, CheckCircle2, ShieldAlert } from 'lucide-react';
import './Industries.css';

export default function Industries() {
  const industriesList = [
    {
      icon: <DollarSign size={24} />,
      image: "/financial-services.png.jpeg",
      title: "Financial Services & FinTech",
      badge: "BFSI Compliance",
      standards: ["SOC 2 Type II", "GLBA", "PCI-DSS", "SOX"],
      threatLevel: "CRITICAL / HIGH TARGET",
      challenges: [
        "Strict regulatory frameworks requiring continuous auditing, segregation of duties, and detailed logging.",
        "Increased exposure to transaction-based API fraud, ledger tampering, and account takeovers.",
        "Security risks arising from complex integrations between legacy mainframes and open-banking APIs."
      ],
      solution: "We establish air-gapped network perimeters, design hardware-security-module (HSM) key structures, enforce end-to-end data encryption for transactional tables, and build SOC2 readiness reports.",
    },
    {
      icon: <Lock size={24} />,
      image: "/saas-tech.png.jpeg",
      title: "SaaS & Technology Startups",
      badge: "Enterprise Ready",
      standards: ["SOC 2 Type II", "ISO 27001", "GDPR", "AI Auditing"],
      threatLevel: "MODERATE / CONTINOUS RISK",
      challenges: [
        "Rapid continuous code deployment pipelines (CI/CD) that bypass traditional security gatekeepers.",
        "Demonstrating rigorous third-party data governance to close enterprise B2B sales cycles.",
        "Securing multi-tenant cloud storage structures and API endpoints from token leakage."
      ],
      solution: "We inject automated security tools directly into GitHub Actions, configure cloud security posture managers (CSPM) to flag IAM drifts, and write developer-focused security policies.",
    },
    {
      icon: <Heart size={24} />,
      image: "/healthcare-professional.png.jpeg",
      title: "Healthcare Services",
      badge: "HIPAA Compliant",
      standards: ["HIPAA", "HITRUST", "ISO 27001", "SOC 2"],
      threatLevel: "HIGH / PATIENT RECORD PROTECTION",
      challenges: [
        "Strict regulatory liabilities under HIPAA protecting private Protected Health Information (PHI).",
        "Interconnected telemedicine APIs, clinic administration databases, and legacy medical hardware.",
        "Mitigating ransomware threat exposures targeting mission-critical hospital networks."
      ],
      solution: "We implement fine-grained row-level database encryption for PHI tables, activate comprehensive database audit logging, structure secure backups, and compile GRC checkbooks.",
    },
    {
      icon: <Building2 size={24} />,
      title: "Small Business & SMBs",
      image: "/smb.png.jpeg",
      badge: "Secure Growth",
      standards: ["Essential 8", "CIS Controls", "NIST CSF", "SOC 2 Readiness"],
      threatLevel: "MODERATE / RESOURCE THIN",
      challenges: [
        "Lack of dedicated, in-house Chief Information Security Officers or engineering security teams.",
        "Securing remote-work employee laptops, networks, and cloud access credentials from simple phishing.",
        "Operational disruption and severe financial loss from business email compromises (BEC)."
      ],
      solution: "We act as your virtual security team (vCISO), establishing basic access controls, deploying mobile device management (MDM) software, and running phishing simulations.",
    }
  ];

  return (
    <div className="industries-page">
      {/* Page Hero */}
      <section className="industries-hero section">
        <div className="container animate-fade-in-up">
          <span className="section-label">Target Verticals</span>
          <h1 className="section-title">High-Trust Industry Verticals</h1>
          <p className="section-description">
            Cybersecurity is not one-size-fits-all. We design customized security roadmaps based on your industry's specific threat footprint and compliance requirements.
          </p>
        </div>
      </section>

      {/* Redesigned Industry Showcase Section (All in the same page) */}
      <section className="section section-alt industry-showcase-section">
        <div className="container industry-list-container">
          {industriesList.map((ind, idx) => (
            <div key={idx} className="industry-active-profile list-layout animate-fade-in">
              <div className="profile-grid-layout">
                {/* Visual & Identity */}
                <div className="profile-identity-col">
                  <div className="profile-image-container">
                    <img src={ind.image} alt={ind.title} className="profile-hero-image" />
                    <div className="profile-image-overlay"></div>
                    <span className="identity-badge">{ind.badge}</span>
                  </div>
                  
                  <div className="profile-threat-indicators">
                    <h2 className="industry-vertical-title">{ind.title}</h2>
                    <div className="threat-indicator-card">
                      <span className="indicator-label">Threat Footprint Profile</span>
                      <span className="indicator-value">{ind.threatLevel}</span>
                    </div>

                    <div className="frameworks-coverage">
                      <h4>Target Compliance Frameworks</h4>
                      <div className="frameworks-badge-row">
                        {ind.standards.map((std, sIdx) => (
                          <span key={sIdx} className="fw-badge">{std}</span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>

                {/* Challenges & Solutions */}
                <div className="profile-challenges-col">
                  {/* Challenges Card */}
                  <div className="profile-detail-card-redesign challenges-card">
                    <div className="card-redesign-header">
                      <ShieldAlert size={24} className="error-icon" />
                      <h3>Security Vulnerabilities & Challenges</h3>
                    </div>
                    <hr />
                    <ul className="challenges-list-redesign">
                      {ind.challenges.map((challenge, cIdx) => (
                        <li key={cIdx}>
                          <AlertOctagon size={16} className="warning-bullet" />
                          <span>{challenge}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  {/* Solutions Card */}
                  <div className="profile-detail-card-redesign solution-card">
                    <div className="card-redesign-header">
                      <ShieldCheck size={24} className="success-icon" />
                      <h3>Cynomos Defense Architecture</h3>
                    </div>
                    <hr />
                    <p className="solution-text-redesign">{ind.solution}</p>
                    <div className="solution-check-badge">
                      <CheckCircle2 size={16} className="success-icon" />
                      <span>Pass auditor reviews with zero Friction</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* GRC banner callout */}
      <section className="section grc-banner">
        <div className="container grc-banner-container grid grid-2">
          <div className="grc-content">
            <h2 className="section-title">Ready for Your Next Audit?</h2>
            <p>
              We don't just secure your environment; we translate your technical layout into documentation that auditors understand. Ensure smooth sign-offs for:
            </p>
            <div className="audit-badges">
              <span className="audit-badge">SOC 2 Type II</span>
              <span className="audit-badge">ISO 27001</span>
              <span className="audit-badge">HIPAA</span>
              <span className="audit-badge">GDPR</span>
              <span className="audit-badge">AI Auditing</span>
            </div>
          </div>
          <div className="grc-cta-box">
            <div className="grc-cta-inner">
              <ShieldCheck className="grc-badge-icon" size={60} />
              <h4>Instant Readiness Baseline</h4>
              <p>Schedule a 30-minute diagnostic session with our GRC advisory team.</p>
              <a href="/contact" className="btn btn-primary btn-full">Schedule Diagnostic</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
