import { A } from '@solidjs/router';

const roleCards = [
  {
    title: 'Customer',
    description: 'Find verified professionals in Chennai and submit exact requirements by category.',
    cta: '/onboarding?schemaId=customer_onboarding_v1',
    badge: 'Hire',
  },
  {
    title: 'Professional',
    description: 'Create your profile, upload portfolio, and complete identity verification.',
    cta: '/onboarding?schemaId=professional_onboarding_v1',
    badge: 'Offer Services',
  },
  {
    title: 'Company',
    description: 'Set hiring preferences and verify your business documents for trusted recruitment.',
    cta: '/onboarding?schemaId=company_onboarding_v1',
    badge: 'Recruit',
  },
  {
    title: 'Jobseeker',
    description: 'Share your profile, experience and documents once, then continue from dashboard.',
    cta: '/onboarding?schemaId=jobseeker_onboarding_v1',
    badge: 'Apply',
  },
];

const professionalCategories = [
  'Photographer',
  'Makeup Artist',
  'Tutor',
  'Developer',
  'Video Editor',
  'Graphic Designer',
  'Social Media Manager',
  'Fitness Trainer',
  'Catering Services',
];

export default function Home() {
  return (
    <main class="landing">
      <header class="topbar">
        <div class="container nav-row">
          <img class="brand-logo" src="/nxtgauge-logo.png" alt="NXTGAUGE" />
          <nav class="nav-links">
            <A href="/about">About Us</A>
            <A href="/contact">Contact Us</A>
          </nav>
          <div class="nav-actions">
            <A class="btn" href="/onboarding?schemaId=customer_onboarding_v1">Start</A>
          </div>
        </div>
      </header>

      <section class="hero-wrap">
        <div class="container hero-grid">
          <div>
            <p class="eyebrow">Launch City: Chennai, India</p>
            <h1 class="hero-title">Verified Hiring and Services, Powered by Runtime Config</h1>
            <p class="hero-copy">
              NXTGAUGE connects customers, professionals, companies, and jobseekers with role-based onboarding,
              document verification, and dashboard-ready profiles.
            </p>
            <div class="hero-actions">
              <A class="btn primary" href="/onboarding?schemaId=customer_onboarding_v1">I Want To Hire</A>
              <A class="btn" href="/onboarding?schemaId=professional_onboarding_v1">I Am A Professional</A>
            </div>
          </div>
          <div class="hero-panel">
            <h3>Professional Categories</h3>
            <div class="chip-grid">
              {professionalCategories.map((item) => (
                <span class="chip">{item}</span>
              ))}
            </div>
            <p class="note">Customer onboarding Step 1 starts with selecting one of these service categories.</p>
          </div>
        </div>
      </section>

      <section class="section">
        <div class="container">
          <h2 class="section-title">Choose Your Flow</h2>
          <p class="section-copy">Each role stays separate and gets its own onboarding questions from runtime schema.</p>
          <div class="role-grid">
            {roleCards.map((card) => (
              <article class="role-card">
                <span class="role-badge">{card.badge}</span>
                <h3>{card.title}</h3>
                <p>{card.description}</p>
                <A class="btn primary" href={card.cta}>Open {card.title} Onboarding</A>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section class="section soft">
        <div class="container split">
          <div class="card">
            <h3>Verification First</h3>
            <p>
              Document steps are runtime controlled, with PDF-only validation for identity/business verification and
              2MB limits.
            </p>
          </div>
          <div class="card">
            <h3>Portfolio Ready</h3>
            <p>
              Professional onboarding supports image portfolio uploads up to 6 files, ready for 3x2 dashboard preview.
            </p>
          </div>
          <div class="card">
            <h3>No Hardcoded Fallback</h3>
            <p>
              Forms load from runtime schemas. Admin-published config is picked first, then seeded runtime config for
              local demo.
            </p>
          </div>
        </div>
      </section>

      <footer class="footer">
        <div class="container footer-row">
          <p>© {new Date().getFullYear()} NXTGAUGE. All rights reserved.</p>
          <div class="footer-links">
            <A href="/about">About Us</A>
            <A href="/contact">Contact Us</A>
            <A href="/onboarding?schemaId=customer_onboarding_v1">Get Started</A>
          </div>
        </div>
      </footer>
    </main>
  );
}