figma

[BaoKkhanh]

import React, { useState } from 'react';
import { ArrowLeft, Store, Shield, TrendingUp, Users, Headphones, FileCheck, Camera, Upload, Send, CheckCircle, User, Smartphone, Info } from 'lucide-react';

const WhyVerificationScreens = () => {
const [currentScreen, setCurrentScreen] = useState('ekyb');

const EKYBScreen = () => (

{/* Header */}

Xác thực cửa hàng

  {/* Hero Section */}
  <div className="px-4 pt-6 pb-4">
    <div className="bg-gradient-to-br from-teal-700 to-teal-600 rounded-2xl p-6 text-white relative overflow-hidden">
      {/* Pattern */}
      <div className="absolute inset-0 opacity-20" style={{
        backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px)`
      }}></div>
      
      <div className="relative z-10">
        <div className="flex items-center justify-center mb-4">
          <div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
            <Store className="w-9 h-9 text-white" />
          </div>
        </div>
        <h2 className="text-2xl font-bold text-center mb-2">Xác thực cửa hàng</h2>
        <p className="text-center text-teal-50 text-sm leading-relaxed">
          Xác thực để kích hoạt đầy đủ tính năng dành cho hộ kinh doanh trên Bonbonshop.
        </p>
      </div>
    </div>
  </div>

  {/* Benefits */}
  <div className="px-4 mb-6">
    <h3 className="text-base font-bold text-gray-900 mb-4">Lợi ích khi xác thực</h3>
    
    <div className="space-y-3">
      {[
        {
          icon: TrendingUp,
          title: 'Kích hoạt tính năng bán hàng nâng cao',
          desc: 'Dùng đầy đủ các tính năng quản lý cửa hàng (đơn hàng, báo cáo, phân quyền…).'
        },
        {
          icon: FileCheck,
          title: 'Chuẩn hóa hồ sơ cửa hàng',
          desc: 'Thông tin cửa hàng được xác minh rõ ràng, giảm nhầm lẫn khi vận hành.'
        },
        {
          icon: Shield,
          title: 'Tăng độ tin cậy khi dùng dịch vụ đối tác',
          desc: 'Dễ tích hợp các dịch vụ liên quan đến hóa đơn/chữ ký số sau này (nếu cần).'
        },
        {
          icon: Headphones,
          title: 'Hỗ trợ nhanh hơn khi có sự cố',
          desc: 'Có hồ sơ xác thực giúp hệ thống hỗ trợ đúng cửa hàng, đúng chủ thể.'
        },
      ].map((benefit, idx) => (
        <div key={idx} className="bg-gray-50 rounded-xl p-4 border border-gray-200">
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 bg-teal-700 rounded-xl flex items-center justify-center flex-shrink-0">
              <benefit.icon className="w-5 h-5 text-white" />
            </div>
            <div className="flex-1">
              <h4 className="font-bold text-gray-900 mb-1 text-sm">{benefit.title}</h4>
              <p className="text-xs text-gray-600 leading-relaxed">{benefit.desc}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>

  {/* Steps */}
  <div className="px-4 mb-6">
    <div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
      <h3 className="font-bold text-gray-900 mb-4 text-sm">Các bước thực hiện</h3>
      <div className="space-y-3">
        {[
          { icon: FileCheck, text: 'Chuẩn bị giấy phép (GPKD/MST)' },
          { icon: Camera, text: 'Chụp/Upload giấy phép' },
          { icon: Send, text: 'Gửi hồ sơ và chờ duyệt' },
        ].map((step, idx) => (
          <div key={idx} className="flex items-center gap-3">
            <div className="w-9 h-9 bg-teal-700 rounded-xl flex items-center justify-center">
              <step.icon className="w-5 h-5 text-white" />
            </div>
            <p className="text-sm font-medium text-gray-700 flex-1">{step.text}</p>
            <div className={`w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs ${
              idx === 0 ? 'bg-teal-700 text-white' : 'bg-gray-300 text-gray-600'
            }`}>
              {idx + 1}
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>

  {/* Security Note */}
  <div className="px-4 mb-6">
    <div className="bg-teal-50 border border-teal-200 rounded-xl p-4 flex items-start gap-3">
      <CheckCircle className="w-5 h-5 text-teal-700 flex-shrink-0 mt-0.5" />
      <p className="text-sm text-teal-900 font-medium">
        Thông tin được bảo mật và chỉ dùng cho mục đích xác thực.
      </p>
    </div>
  </div>

  {/* CTAs */}
  <div className="px-4 space-y-3">
    <button className="w-full bg-teal-700 text-white font-bold py-4 rounded-xl shadow-md hover:bg-teal-800 transition-all">
      Xác thực cửa hàng
    </button>
    <button className="w-full text-teal-700 font-semibold py-3 rounded-xl hover:bg-teal-50 transition-all">
      Xem hướng dẫn
    </button>
  </div>

  {/* Demo Toggle */}
  <div className="fixed bottom-4 left-4 right-4 bg-white rounded-xl shadow-xl p-3 border-2 border-gray-300 z-50">
    <button
      onClick={() => setCurrentScreen('ekyc')}
      className="w-full py-2 bg-teal-700 text-white rounded-lg text-sm font-medium"
    >
      → Xem màn eKYC
    </button>
  </div>
</div>

);

const EKYCScreen = () => (

{/* Header */}

Xác thực chủ cửa hàng

  {/* Hero Section */}
  <div className="px-4 pt-6 pb-4">
    <div className="bg-gradient-to-br from-teal-700 to-teal-600 rounded-2xl p-6 text-white relative overflow-hidden">
      {/* Pattern */}
      <div className="absolute inset-0 opacity-20" style={{
        backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px)`
      }}></div>
      
      <div className="relative z-10">
        <div className="flex items-center justify-center mb-4">
          <div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
            <User className="w-9 h-9 text-white" />
          </div>
        </div>
        <h2 className="text-2xl font-bold text-center mb-2">Xác thực chủ cửa hàng</h2>
        <p className="text-center text-teal-50 text-sm leading-relaxed">
          Xác thực để bảo vệ tài khoản và xác nhận quyền quản lý cửa hàng.
        </p>
      </div>
    </div>
  </div>

  {/* Benefits */}
  <div className="px-4 mb-6">
    <h3 className="text-base font-bold text-gray-900 mb-4">Lợi ích khi xác thực</h3>
    
    <div className="space-y-3">
      {[
        {
          icon: Shield,
          title: 'Bảo vệ quyền quản lý tài khoản',
          desc: 'Tránh người khác chiếm quyền hoặc đổi thông tin cửa hàng trái phép.'
        },
        {
          icon: CheckCircle,
          title: 'Giảm rủi ro gian lận giao dịch',
          desc: 'Tăng độ an toàn khi dùng các tính năng quan trọng.'
        },
        {
          icon: Users,
          title: 'Thiết lập người đại diện hợp lệ',
          desc: 'Xác nhận đúng người chịu trách nhiệm vận hành cửa hàng.'
        },
        {
          icon: Headphones,
          title: 'Trải nghiệm mượt hơn khi cần hỗ trợ',
          desc: 'Khi cần xử lý sự cố, xác minh nhanh và chính xác hơn.'
        },
      ].map((benefit, idx) => (
        <div key={idx} className="bg-gray-50 rounded-xl p-4 border border-gray-200">
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 bg-teal-700 rounded-xl flex items-center justify-center flex-shrink-0">
              <benefit.icon className="w-5 h-5 text-white" />
            </div>
            <div className="flex-1">
              <h4 className="font-bold text-gray-900 mb-1 text-sm">{benefit.title}</h4>
              <p className="text-xs text-gray-600 leading-relaxed">{benefit.desc}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>

  {/* Steps */}
  <div className="px-4 mb-6">
    <div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
      <h3 className="font-bold text-gray-900 mb-4 text-sm">Các bước thực hiện</h3>
      <div className="space-y-3">
        {[
          { icon: Camera, text: 'Chụp CCCD' },
          { icon: Smartphone, text: 'Xác thực khuôn mặt' },
          { icon: CheckCircle, text: 'Xác nhận thông tin' },
        ].map((step, idx) => (
          <div key={idx} className="flex items-center gap-3">
            <div className="w-9 h-9 bg-teal-700 rounded-xl flex items-center justify-center">
              <step.icon className="w-5 h-5 text-white" />
            </div>
            <p className="text-sm font-medium text-gray-700 flex-1">{step.text}</p>
            <div className={`w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs ${
              idx === 0 ? 'bg-teal-700 text-white' : 'bg-gray-300 text-gray-600'
            }`}>
              {idx + 1}
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>

  {/* Security Note */}
  <div className="px-4 mb-6">
    <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 flex items-start gap-3">
      <Info className="w-5 h-5 text-blue-700 flex-shrink-0 mt-0.5" />
      <p className="text-sm text-blue-900 font-medium">
        Dữ liệu được mã hóa và tuân thủ quy định bảo mật.
      </p>
    </div>
  </div>

  {/* CTAs */}
  <div className="px-4 space-y-3">
    <button className="w-full bg-teal-700 text-white font-bold py-4 rounded-xl shadow-md hover:bg-teal-800 transition-all">
      Xác thực chủ cửa hàng
    </button>
    <button className="w-full text-teal-700 font-semibold py-3 rounded-xl hover:bg-teal-50 transition-all">
      Để sau
    </button>
  </div>

  {/* Demo Toggle */}
  <div className="fixed bottom-4 left-4 right-4 bg-white rounded-xl shadow-xl p-3 border-2 border-gray-300 z-50">
    <button
      onClick={() => setCurrentScreen('ekyb')}
      className="w-full py-2 bg-teal-700 text-white rounded-lg text-sm font-medium"
    >
      ← Quay lại màn eKYB
    </button>
  </div>
</div>

);

return currentScreen === 'ekyb' ? : ;
};

export default WhyVerificationScreens;