import { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Link, Navigate, Route, Routes } from 'react-router-dom';
import { AdminPanel, CertificateValidation, WhatsAppFloat } from './CertificatePages.jsx';
import './styles/global.css';

const services = [
  {
    standard: 'ISO 9001:2015',
    title: 'Sistem Manajemen Mutu',
    image: '/img/service-iso9001.webp',
    description: 'Bangun proses yang konsisten dan tingkatkan kepuasan pelanggan melalui pengelolaan mutu yang terstruktur.',
  },
  {
    standard: 'ISO 14001:2015',
    title: 'Sistem Manajemen Lingkungan',
    image: '/img/service-iso14001.webp',
    description: 'Kelola dampak lingkungan dan dukung praktik operasional yang lebih bertanggung jawab.',
  },
  {
    standard: 'ISO 27001:2022',
    title: 'Keamanan Informasi',
    image: '/img/service-iso27001.jpg',
    description: 'Lindungi informasi organisasi dengan pendekatan sistematis terhadap risiko keamanan.',
  },
  {
    standard: 'ISO 45001:2018',
    title: 'Keselamatan dan Kesehatan Kerja',
    image: '/img/service-iso45001.jpg',
    description: 'Ciptakan tempat kerja yang lebih aman melalui identifikasi dan pengendalian risiko K3.',
  },
  {
    standard: 'ISO 22000:2018',
    title: 'Keamanan Pangan',
    image: '/img/service-iso22000.webp',
    description: 'Terapkan pengendalian keamanan pangan yang terintegrasi di sepanjang rantai pasok.',
  },
  {
    standard: 'ISO 50001:2018',
    title: 'Manajemen Energi',
    image: '/img/service-iso50001.jpg',
    description: 'Pantau dan tingkatkan kinerja energi organisasi secara berkelanjutan.',
  },
];

const navigation = [
  ['Layanan', '#services'],
  ['Keunggulan', '#about'],
  ['Proses', '#process'],
  ['Kontak', '#contact'],
];

function LandingPage() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(window.scrollY > 50);

  useEffect(() => {
    const updateScrollState = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', updateScrollState, { passive: true });
    return () => window.removeEventListener('scroll', updateScrollState);
  }, []);

  const closeMenu = () => setMenuOpen(false);

  return (
    <>
      <header className={`nav${scrolled ? ' scrolled' : ''}`}>
        <div className="container nav-inner">
          <a className="nav-logo" href="#home" onClick={closeMenu} aria-label="QACS Indonesia, beranda">
            <img src="/QACS.png" alt="" />
            <span>
              <span className="t1">QACS Indonesia</span>
              <span className="t2">Certification body</span>
            </span>
          </a>
          <nav className="nav-menu" aria-label="Navigasi utama">
            {navigation.map(([label, href]) => <a className="nav-link" href={href} key={href}>{label}</a>)}
            <Link className="nav-link" to="/validasi-sertifikat">Validasi sertifikat</Link>
          </nav>
          <a className="btn btn-ink btn-sm nav-cta" href="#contact">Konsultasi <span aria-hidden="true">&rarr;</span></a>
          <button
            className={`nav-burger${menuOpen ? ' open' : ''}`}
            type="button"
            aria-label={menuOpen ? 'Tutup menu' : 'Buka menu'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(!menuOpen)}
          >
            <span /><span />
          </button>
        </div>
        <nav className={`mobile-menu${menuOpen ? ' open' : ''}`} aria-label="Navigasi seluler" aria-hidden={!menuOpen}>
          {navigation.map(([label, href], index) => (
            <a
              className="m-link"
              href={href}
              key={href}
              style={{ '--d': `${index * 0.06}s` }}
              tabIndex={menuOpen ? 0 : -1}
              onClick={closeMenu}
            >
              <span className="m-num">0{index + 1}</span>{label}
            </a>
          ))}
          <Link
            className="m-link"
            to="/validasi-sertifikat"
            style={{ '--d': `${navigation.length * 0.06}s` }}
            tabIndex={menuOpen ? 0 : -1}
            onClick={closeMenu}
          >
            <span className="m-num">05</span>Validasi sertifikat
          </Link>
          <div className="m-foot">
            <a className="btn btn-light" href="#contact" onClick={closeMenu}>Hubungi kami <span aria-hidden="true">&rarr;</span></a>
          </div>
        </nav>
      </header>

      <main>
        <section className="hero" id="home">
          <div className="hero-bg" />
          <div className="container hero-top">
            <div className="hero-badges">
              <span className="chip"><span className="dot" /> Sertifikasi sistem manajemen</span>
              <span className="chip">Melayani organisasi di Indonesia</span>
            </div>
            <h1 className="display-1 hero-title">
              Standar yang baik, <span className="em-i">membangun</span> kepercayaan.
            </h1>
            <div className="hero-row">
              <p className="hero-desc">
                QACS Indonesia mendampingi organisasi dalam perjalanan sertifikasi sistem manajemen
                dengan proses yang jelas, profesional, dan berfokus pada kebutuhan Anda.
              </p>
              <div className="hero-actions">
                <a className="btn btn-ink btn-lg" href="#services">Jelajahi layanan <span className="arr" aria-hidden="true">&rarr;</span></a>
                <a className="btn btn-ghost btn-lg" href="#about">Tentang QACS</a>
              </div>
            </div>
            <div className="hero-media">
              <div className="hero-media-frame">
                <img src="/img/hero-home.webp" alt="Tim profesional berkolaborasi dalam lingkungan kerja" fetchPriority="high" />
                <div className="hero-chipbar">
                  <div className="hero-chip"><span className="n">ISO</span><span className="l">Standar internasional<br />untuk organisasi</span></div>
                  <div className="hero-chip"><span className="n">QACS</span><span className="l">Pendampingan<br />sertifikasi profesional</span></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <div className="marquee" aria-label="Standar sertifikasi yang dilayani">
          <div className="marquee-inner">
            {[...services, ...services].map((service, index) => (
              <span className="marquee-item" key={`${service.standard}-${index}`}>
                {service.standard}<span className="star" aria-hidden="true">*</span>
              </span>
            ))}
          </div>
        </div>

        <section className="section" id="services">
          <div className="container">
            <div className="section-head split">
              <div>
                <span className="overline"><span className="num">01</span><span className="tick" /> Layanan kami</span>
                <h2 className="display-2">Standar yang relevan untuk tantangan Anda.</h2>
              </div>
              <p className="lead">Temukan layanan sertifikasi sistem manajemen yang sesuai dengan prioritas dan sektor organisasi Anda.</p>
            </div>
            <div className="services-grid">
              {services.map((service) => (
                <article className="svc-card" key={service.standard}>
                  <div className="svc-media">
                    <img src={service.image} alt={service.title} loading="lazy" />
                    <span className="tag">{service.standard}</span>
                  </div>
                  <div className="svc-body">
                    <h3 className="svc-title">{service.title}</h3>
                    <p className="svc-desc">{service.description}</p>
                    <ul className="svc-feats">
                      <li>Informasi persyaratan sertifikasi</li>
                      <li>Pendampingan sesuai kebutuhan organisasi</li>
                    </ul>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section className="section section-dark" id="about">
          <div className="container">
            <div className="why-grid">
              <div className="why-sticky">
                <span className="overline on-dark"><span className="num">02</span><span className="tick" /> Mengapa QACS</span>
                <h2 className="display-2">Proses yang jelas. Kemitraan yang bermakna.</h2>
                <p className="lead">Kami percaya proses sertifikasi seharusnya membantu organisasi memahami dan meningkatkan sistem manajemennya.</p>
                <a className="btn btn-light" href="#contact">Diskusikan kebutuhan Anda <span className="arr" aria-hidden="true">&rarr;</span></a>
              </div>
              <div className="why-list">
                <article className="why-row"><span className="idx">01</span><div><h3>Berorientasi pada kebutuhan</h3><p>Kami mulai dengan memahami konteks, ruang lingkup, dan tujuan organisasi Anda.</p></div></article>
                <article className="why-row"><span className="idx">02</span><div><h3>Komunikasi yang transparan</h3><p>Informasi tahapan dan persyaratan disampaikan secara jelas di setiap proses.</p></div></article>
                <article className="why-row"><span className="idx">03</span><div><h3>Fokus pada peningkatan</h3><p>Proses audit membantu organisasi melihat peluang untuk memperkuat sistem manajemennya.</p></div></article>
                <article className="why-row"><span className="idx">04</span><div><h3>Cakupan berbagai standar</h3><p>Pilih layanan untuk mutu, lingkungan, keamanan informasi, K3, pangan, dan energi.</p></div></article>
              </div>
            </div>
          </div>
        </section>

        <section className="section" id="process">
          <div className="container">
            <div className="section-head center">
              <span className="overline"><span className="num">03</span><span className="tick" /> Tahapan sertifikasi</span>
              <h2 className="display-2">Langkah yang terarah dari awal hingga akhir.</h2>
              <p className="lead">Tim kami akan membantu menjelaskan tahapan yang sesuai dengan standar dan ruang lingkup organisasi Anda.</p>
            </div>
            <div className="process-grid">
              {[
                ['01', 'Konsultasi', 'Ceritakan kebutuhan, ruang lingkup, dan tujuan organisasi Anda.'],
                ['02', 'Penawaran', 'Terima informasi tahapan dan penawaran sesuai kebutuhan.'],
                ['03', 'Persiapan', 'Siapkan sistem manajemen dan dokumen yang relevan.'],
                ['04', 'Audit', 'Jalani proses audit sesuai persyaratan standar yang dipilih.'],
                ['05', 'Keputusan', 'Hasil audit ditinjau sebelum keputusan sertifikasi disampaikan.'],
              ].map(([number, title, description]) => (
                <article className="proc-step" key={number}>
                  <div className="p-num">{number}</div>
                  <h3>{title}</h3>
                  <p>{description}</p>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section className="section-tight">
          <div className="container">
            <div className="validate-teaser">
              <div className="vt-icon" aria-hidden="true"><span>✓</span></div>
              <div>
                <h3>Perlu informasi tentang sertifikat?</h3>
                <p>Hubungi tim QACS untuk mendapatkan bantuan terkait layanan atau informasi sertifikasi.</p>
              </div>
              <a className="btn btn-blue" href="mailto:info@qacscert.com?subject=Informasi%20Sertifikasi">Hubungi QACS <span className="arr" aria-hidden="true">&rarr;</span></a>
            </div>
          </div>
        </section>

        <section className="section" id="contact">
          <div className="container">
            <div className="section-head">
              <span className="overline"><span className="num">04</span><span className="tick" /> Hubungi kami</span>
              <h2 className="display-2">Mari bicarakan langkah berikutnya.</h2>
              <p className="lead">Sampaikan pertanyaan atau kebutuhan sertifikasi Anda. Tim kami siap membantu memberikan informasi awal.</p>
            </div>
            <div className="contact-grid">
              <div>
                <h3 className="display-3">Terhubung dengan QACS Indonesia.</h3>
                <div className="contact-cards">
                  <div className="contact-row"><span className="ci" aria-hidden="true">@</span><div><h4>Email</h4><p><a href="mailto:info@qacscert.com">info@qacscert.com</a></p></div></div>
                  <div className="contact-row"><span className="ci" aria-hidden="true">☎</span><div><h4>WhatsApp / Telepon</h4><p><a href="https://wa.me/6285161615461" target="_blank" rel="noreferrer">+62 851-6161-5461</a></p></div></div>
                  <div className="contact-row"><span className="ci" aria-hidden="true">⌖</span><div><h4>Lokasi</h4><p>The Manhattan Square Building,<br />Mid Tower Lt. 12, Jakarta</p></div></div>
                </div>
              </div>
              <div className="lead-card">
                <h3>Hubungi tim kami</h3>
                <p className="sub">Klik tombol di bawah untuk mengirim email. Sertakan nama organisasi dan standar yang ingin Anda ketahui.</p>
                <a className="btn btn-ink btn-lg btn-block" href="mailto:info@qacscert.com?subject=Konsultasi%20Sertifikasi%20ISO">
                  Tulis email ke QACS <span className="arr" aria-hidden="true">&rarr;</span>
                </a>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer className="footer">
        <div className="container">
          <div className="footer-grid">
            <div className="footer-brand">
              <a className="fb-logo" href="#home">
                <img src="/QACS.png" alt="" />
                <span><span className="fb-name">QACS Indonesia</span><span className="fb-sub">Certification body</span></span>
              </a>
              <p>Mendampingi organisasi membangun sistem manajemen yang kuat dan kepercayaan yang berkelanjutan.</p>
            </div>
            <div className="footer-col"><h4>Layanan</h4><ul>{services.slice(0, 4).map((service) => <li key={service.standard}><a href="#services">{service.standard}</a></li>)}</ul></div>
            <div className="footer-col"><h4>Jelajahi</h4><ul>{navigation.map(([label, href]) => <li key={href}><a href={href}>{label}</a></li>)}</ul></div>
            <div className="footer-col"><h4>Kontak</h4><ul><li><a href="mailto:info@qacscert.com">info@qacscert.com</a></li><li><a href="https://wa.me/6285161615461" target="_blank" rel="noreferrer">+62 851-6161-5461</a></li><li>Jakarta, Indonesia</li></ul></div>
          </div>
          <div className="footer-bottom"><span>© {new Date().getFullYear()} QACS Indonesia</span><span>Certification services for a better tomorrow.</span></div>
          <div className="footer-mark" aria-hidden="true">QACS</div>
        </div>
      </footer>
      <WhatsAppFloat />
    </>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/validasi-sertifikat" element={<CertificateValidation />} />
        <Route path="/admin-panel" element={<AdminPanel />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}

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