import React, { useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';
import {
  ArrowRight, BadgeCheck, BarChart3, BrainCircuit, BriefcaseBusiness,
  Check, ChevronRight, FileSearch, Gauge, Layers3, LockKeyhole,
  Menu, ScanSearch, ShieldCheck, Sparkles, Target, UsersRound, X
} from 'lucide-react';
import './styles.css';

const candidateBullets = [
  'Đo mức độ phù hợp giữa CV và JD theo tiêu chí rõ ràng',
  'Chỉ ra kỹ năng còn thiếu và khoảng trống bằng chứng',
  'Gợi ý cải thiện CV nhưng không bịa thêm kinh nghiệm',
  'Ưu tiên những thay đổi có khả năng tăng tỷ lệ được gọi phỏng vấn',
];

const recruiterBullets = [
  'Phân tích nhiều CV trên cùng một JD và tạo leaderboard',
  'Giải thích điểm mạnh, rủi ro và mức phù hợp của từng ứng viên',
  'Lưu batch để mở lại mà không cần chạy AI lại',
  'Hỗ trợ quyết định shortlist dựa trên evidence thay vì cảm tính',
];

const features = [
  {
    icon: Target,
    title: 'CV–JD Match Intelligence',
    text: 'Biến một JD và một hoặc nhiều CV thành báo cáo matching có cấu trúc, ưu tiên những tiêu chí thực sự quan trọng.'
  },
  {
    icon: ShieldCheck,
    title: 'Evidence-Based Analysis',
    text: 'Phân biệt EVIDENCE, INFERENCE và MISSING để giảm hallucination và tránh khuyến nghị đưa thông tin không có thật vào CV.'
  },
  {
    icon: BrainCircuit,
    title: 'Multi-stage AI Review',
    text: 'Kết quả đi qua Draft Analysis, Auditor và Synthesizer trước khi hiển thị cho người dùng.'
  },
  {
    icon: UsersRound,
    title: 'Candidate + Recruiter',
    text: 'Một sản phẩm, hai trải nghiệm: tối ưu hồ sơ cho ứng viên và tăng tốc screening cho nhà tuyển dụng.'
  },
  {
    icon: BarChart3,
    title: 'Actionable Insights',
    text: 'Không chỉ chấm điểm. RoleMatch giải thích vì sao, đâu là khoảng trống và hành động tiếp theo nên làm là gì.'
  },
  {
    icon: LockKeyhole,
    title: 'Commercial-ready Architecture',
    text: 'Thiết kế website theo hướng SaaS để sau này bổ sung subscription, workspace doanh nghiệp, SSO, audit log và billing.'
  },
];

function ScoreCard() {
  return (
    <div className="score-card glass-card">
      <div className="card-topline">
        <span>IT Delivery Manager</span>
        <span className="status-dot">AI analysis complete</span>
      </div>
      <div className="score-main">
        <div className="score-ring">
          <span>84</span>
          <small>/100</small>
        </div>
        <div>
          <p className="eyebrow">Overall match</p>
          <h3>Strong fit</h3>
          <p className="muted">Good alignment in infrastructure, operations and stakeholder management.</p>
        </div>
      </div>
      <div className="mini-grid">
        <div><span>92%</span><small>Core skills</small></div>
        <div><span>78%</span><small>Leadership</small></div>
        <div><span>71%</span><small>Evidence</small></div>
      </div>
      <div className="insight-row good"><BadgeCheck size={17}/><span>Regional IT operations directly supported by CV</span></div>
      <div className="insight-row warn"><ScanSearch size={17}/><span>Missing quantified business impact for 2 key achievements</span></div>
      <button className="soft-button">View full evidence map <ChevronRight size={16}/></button>
    </div>
  )
}

function App(){
  const [menuOpen, setMenuOpen] = useState(false);
  const [audience, setAudience] = useState('candidate');
  const [lang, setLang] = useState('VI');

  const bullets = useMemo(() => audience === 'candidate' ? candidateBullets : recruiterBullets, [audience]);

  return (
    <div className="site-shell">
      <header className="nav-wrap">
        <nav className="nav container">
          <a className="brand" href="#top" aria-label="RoleMatch home">
            <span className="brand-mark"><Layers3 size={20}/></span>
            <span>RoleMatch</span>
          </a>
          <div className="nav-links desktop-only">
            <a href="#product">Sản phẩm</a>
            <a href="#how">Cách hoạt động</a>
            <a href="#trust">AI Trust</a>
            <a href="#pricing">Pricing</a>
          </div>
          <div className="nav-actions desktop-only">
            <button className="lang-switch" onClick={() => setLang(lang === 'VI' ? 'EN' : 'VI')}>{lang}</button>
            <button className="text-button">Đăng nhập</button>
            <a className="primary-button small" href="#cta">Dùng thử <ArrowRight size={15}/></a>
          </div>
          <button className="menu-button mobile-only" onClick={() => setMenuOpen(!menuOpen)} aria-label="Toggle menu">
            {menuOpen ? <X/> : <Menu/>}
          </button>
        </nav>
        {menuOpen && (
          <div className="mobile-menu">
            <a href="#product" onClick={() => setMenuOpen(false)}>Sản phẩm</a>
            <a href="#how" onClick={() => setMenuOpen(false)}>Cách hoạt động</a>
            <a href="#trust" onClick={() => setMenuOpen(false)}>AI Trust</a>
            <a href="#pricing" onClick={() => setMenuOpen(false)}>Pricing</a>
          </div>
        )}
      </header>

      <main id="top">
        <section className="hero container">
          <div className="hero-copy">
            <div className="pill"><Sparkles size={15}/> AI-powered CV & JD intelligence</div>
            <h1>Biến CV và JD thành <span>quyết định tốt hơn.</span></h1>
            <p className="hero-sub">RoleMatch giúp ứng viên tối ưu hồ sơ và giúp nhà tuyển dụng đánh giá ứng viên nhanh hơn bằng phân tích AI có bằng chứng, minh bạch và có thể hành động.</p>
            <div className="hero-actions">
              <a className="primary-button" href="#product">Khám phá RoleMatch <ArrowRight size={17}/></a>
              <a className="secondary-button" href="#how">Xem cách hoạt động</a>
            </div>
            <div className="trust-row">
              <span><Check size={16}/> Evidence-first</span>
              <span><Check size={16}/> Candidate & Recruiter</span>
              <span><Check size={16}/> Multi-stage AI review</span>
            </div>
          </div>
          <div className="hero-visual">
            <div className="glow glow-a"></div>
            <div className="glow glow-b"></div>
            <ScoreCard/>
            <div className="floating-chip chip-a"><Gauge size={16}/> Match confidence</div>
            <div className="floating-chip chip-b"><ShieldCheck size={16}/> Evidence checked</div>
          </div>
        </section>

        <section className="logo-strip">
          <div className="container logo-strip-inner">
            <span>Built for modern hiring workflows</span>
            <div className="logo-word">Candidate Experience</div>
            <div className="logo-word">Talent Acquisition</div>
            <div className="logo-word">AI Governance</div>
            <div className="logo-word">HR Operations</div>
          </div>
        </section>

        <section id="product" className="section container">
          <div className="section-heading centered">
            <p className="eyebrow accent">ONE PLATFORM · TWO EXPERIENCES</p>
            <h2>Thiết kế cho cả người tìm việc lẫn đội ngũ tuyển dụng.</h2>
            <p>RoleMatch không chỉ là “CV checker”. Nền tảng tập trung vào chất lượng quyết định ở cả hai phía của quy trình tuyển dụng.</p>
          </div>

          <div className="audience-panel">
            <div className="audience-tabs">
              <button className={audience === 'candidate' ? 'active' : ''} onClick={() => setAudience('candidate')}><FileSearch size={18}/> Dành cho ứng viên</button>
              <button className={audience === 'recruiter' ? 'active' : ''} onClick={() => setAudience('recruiter')}><BriefcaseBusiness size={18}/> Dành cho nhà tuyển dụng</button>
            </div>
            <div className="audience-content">
              <div>
                <p className="eyebrow">{audience === 'candidate' ? 'Candidate Workspace' : 'Recruiter Workspace'}</p>
                <h3>{audience === 'candidate' ? 'Tăng chất lượng CV trước khi ứng tuyển.' : 'Shortlist ứng viên nhanh hơn, có cơ sở hơn.'}</h3>
                <p className="muted large">{audience === 'candidate'
                  ? 'Nhận phân tích phù hợp với từng JD cụ thể, thay vì những lời khuyên CV chung chung.'
                  : 'So sánh ứng viên trên cùng một tiêu chuẩn và xem rõ bằng chứng nào đang nâng hoặc kéo điểm xuống.'}</p>
                <div className="bullet-list">
                  {bullets.map((item) => <div key={item}><span className="check-icon"><Check size={16}/></span><p>{item}</p></div>)}
                </div>
              </div>
              <div className="mock-window">
                <div className="mock-toolbar"><span></span><span></span><span></span><b>app.rolematch.ai</b></div>
                {audience === 'candidate' ? (
                  <div className="candidate-mock">
                    <div className="mock-sidebar">
                      <div className="active-line">Phân tích mới</div><div>Lịch sử</div><div>Hướng dẫn</div>
                    </div>
                    <div className="mock-body">
                      <div className="mock-title"><span>CV Match Report</span><strong>84%</strong></div>
                      <div className="progress"><i style={{width:'84%'}}></i></div>
                      <div className="mock-cards"><div><b>5</b><small>Strengths</small></div><div><b>3</b><small>Gaps</small></div><div><b>7</b><small>Actions</small></div></div>
                      <div className="evidence-box"><span>EVIDENCE</span><p>Managed IT operations across multiple sites and regions.</p></div>
                    </div>
                  </div>
                ) : (
                  <div className="recruiter-mock">
                    <div className="leader-header"><span>Candidate leaderboard</span><span>8 profiles</span></div>
                    {[
                      ['01','Nguyen M.','91','Strong fit'],['02','Tran A.','86','Strong fit'],['03','Le K.','79','Review'],['04','Pham T.','73','Review']
                    ].map((r) => <div className="leader-row" key={r[0]}><span>{r[0]}</span><div><b>{r[1]}</b><small>{r[3]}</small></div><strong>{r[2]}</strong></div>)}
                  </div>
                )}
              </div>
            </div>
          </div>
        </section>

        <section id="how" className="section process-section">
          <div className="container">
            <div className="section-heading">
              <p className="eyebrow accent">HOW ROLEMATCH THINKS</p>
              <h2>Không để một lần gọi AI quyết định toàn bộ kết quả.</h2>
              <p>Một pipeline nhiều bước giúp RoleMatch kiểm tra, phản biện và tổng hợp trước khi đưa insight đến người dùng.</p>
            </div>
            <div className="process-grid">
              <div className="process-card"><span className="step">01</span><BrainCircuit/><h3>Draft Analysis</h3><p>Phân tích CV, JD, yêu cầu cốt lõi và tạo bản đánh giá ban đầu có cấu trúc.</p></div>
              <div className="process-arrow"><ArrowRight/></div>
              <div className="process-card"><span className="step">02</span><ScanSearch/><h3>Auditor</h3><p>Phản biện kết quả, tìm mâu thuẫn, unsupported claims và các khoảng trống bằng chứng.</p></div>
              <div className="process-arrow"><ArrowRight/></div>
              <div className="process-card"><span className="step">03</span><Sparkles/><h3>Synthesizer</h3><p>Tổng hợp thành báo cáo cuối cùng, cân bằng giữa tính hữu ích, rõ ràng và độ tin cậy.</p></div>
            </div>
          </div>
        </section>

        <section id="trust" className="section container">
          <div className="trust-panel">
            <div>
              <div className="pill dark"><ShieldCheck size={15}/> Evidence integrity</div>
              <h2>AI có thể thông minh. Nhưng sản phẩm tuyển dụng cần đáng tin hơn thế.</h2>
              <p>RoleMatch được định hướng bởi một nguyên tắc đơn giản: những thông tin quan trọng về ứng viên phải có thể truy ngược về bằng chứng.</p>
            </div>
            <div className="evidence-legend">
              <div><span className="ev evidence">EVIDENCE</span><p>Được hỗ trợ trực tiếp bởi CV hoặc JD.</p></div>
              <div><span className="ev inference">INFERENCE</span><p>Diễn giải hợp lý nhưng chưa được xác nhận trực tiếp.</p></div>
              <div><span className="ev missing">MISSING</span><p>Chưa đủ bằng chứng để kết luận hoặc khẳng định.</p></div>
            </div>
          </div>
        </section>

        <section className="section container">
          <div className="section-heading centered">
            <p className="eyebrow accent">PRODUCT CAPABILITIES</p>
            <h2>Nền tảng được chuẩn bị để phát triển thành một SaaS hoàn chỉnh.</h2>
          </div>
          <div className="feature-grid">
            {features.map(({icon:Icon, title, text}) => (
              <div className="feature-card" key={title}><span className="feature-icon"><Icon size={21}/></span><h3>{title}</h3><p>{text}</p></div>
            ))}
          </div>
        </section>

        <section id="pricing" className="section pricing-section">
          <div className="container">
            <div className="pricing-card">
              <div>
                <p className="eyebrow accent">COMMERCIAL PATH</p>
                <h2>Sẵn sàng cho mô hình Free → Pro → Business.</h2>
                <p>Phiên bản website này đã dành chỗ cho pricing, conversion funnel và enterprise positioning. Khi sản phẩm sẵn sàng thương mại hoá, có thể nối trực tiếp billing và account plan.</p>
              </div>
              <div className="plan-list">
                <div><strong>Free</strong><span>Thử nghiệm / giới hạn số lượt phân tích</span></div>
                <div><strong>Pro</strong><span>Cá nhân / ứng viên chuyên nghiệp</span></div>
                <div><strong>Business</strong><span>Recruiter team / workspace / admin controls</span></div>
              </div>
            </div>
          </div>
        </section>

        <section id="cta" className="section container cta-section">
          <div className="cta-panel">
            <div><p className="eyebrow">ROLEMATCH</p><h2>Đưa AI vào tuyển dụng mà không đánh đổi sự tin cậy.</h2><p>Bắt đầu từ một CV và một JD. Mở rộng thành quy trình ra quyết định có thể giải thích.</p></div>
            <div className="cta-actions"><button className="primary-button light">Bắt đầu phân tích <ArrowRight size={17}/></button><button className="secondary-button light-outline">Liên hệ demo</button></div>
          </div>
        </section>
      </main>

      <footer>
        <div className="container footer-grid">
          <div><a className="brand" href="#top"><span className="brand-mark"><Layers3 size={20}/></span><span>RoleMatch</span></a><p>AI CV & JD Intelligence for better hiring decisions.</p></div>
          <div><b>Product</b><a href="#product">Candidate</a><a href="#product">Recruiter</a><a href="#trust">AI Trust</a></div>
          <div><b>Company</b><a href="#">About</a><a href="#">Security</a><a href="#">Contact</a></div>
          <div><b>Legal</b><a href="#">Privacy</a><a href="#">Terms</a><a href="#">AI Policy</a></div>
        </div>
        <div className="container footer-bottom"><span>© 2026 RoleMatch. All rights reserved.</span><span>AI CV & JD Intelligence</span></div>
      </footer>
    </div>
  )
}

createRoot(document.getElementById('root')).render(<App />)