import { A } from '@solidjs/router';
import { Meta, Title } from '@solidjs/meta';
import { For, createSignal, onCleanup, onMount } from 'solid-js';
import PublicFooter from '~/components/PublicFooter';
import PublicHeader from '~/components/PublicHeader';
import { professionalPages, professionalSignupHref } from '~/lib/professionals';

const chipNodes = [
  { left: '10%', top: '18%', size: 32, cls: 'lp-chip-slow', label: '★' },
  { left: '31%', top: '8%', size: 36, cls: 'lp-chip-mid', label: '✓' },
  { left: '82%', top: '12%', size: 34, cls: 'lp-chip-fast', label: '↗' },
  { left: '72%', top: '34%', size: 30, cls: 'lp-chip-mid', label: '✦' },
  { left: '16%', top: '62%', size: 36, cls: 'lp-chip-fast', label: '⚑' },
  { left: '63%', top: '72%', size: 32, cls: 'lp-chip-slow', label: '⎈' },
] as const;

export default function ProfessionalsIndexPage() {
  const [scrollY, setScrollY] = createSignal(0);
  const [reduceMotion, setReduceMotion] = createSignal(false);
  const canonical = 'https://test111.nxtgauge.com/professionals';
  const title = 'Professionals | Nxtgauge Verified Service Categories';
  const description = 'Explore verified professional categories on Nxtgauge and register with a trust-first workflow built for better opportunity quality.';

  onMount(() => {
    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
    const sync = () => setReduceMotion(media.matches);
    sync();
    const onScroll = () => setScrollY(window.scrollY || 0);
    window.addEventListener('scroll', onScroll, { passive: true });
    media.addEventListener('change', sync);
    onCleanup(() => {
      window.removeEventListener('scroll', onScroll);
      media.removeEventListener('change', sync);
    });
  });

  return (
    <main class="lp-main">
      <Title>{title}</Title>
      <Meta name="description" content={description} />
      <Meta property="og:title" content={title} />
      <Meta property="og:description" content={description} />
      <Meta property="og:type" content="website" />
      <Meta property="og:url" content={canonical} />
      <Meta name="twitter:card" content="summary_large_image" />
      <Meta name="twitter:title" content={title} />
      <Meta name="twitter:description" content={description} />
      <link rel="canonical" href={canonical} />

      <div class="lp-bg" aria-hidden="true">
        <div class="lp-dark-base" />
        <div class="lp-mesh" style={{ transform: `translate3d(0, ${reduceMotion() ? 0 : Math.min(36, scrollY() * 0.1)}px, 0)` }} />
        <div class="lp-ribbon" style={{ transform: `translate3d(0, ${reduceMotion() ? 0 : Math.min(58, scrollY() * 0.18)}px, 0)` }} />
        <div class="lp-chips" style={{ transform: `translate3d(0, ${reduceMotion() ? 0 : Math.min(80, scrollY() * 0.24)}px, 0)` }}>
          <For each={chipNodes}>
            {(chip) => (
              <span class={`lp-chip ${chip.cls}`} style={{ left: chip.left, top: chip.top, width: `${chip.size}px`, height: `${chip.size}px` }}>
                <span class="pro-detail-bg-chip-icon">{chip.label}</span>
              </span>
            )}
          </For>
        </div>
        <div class="lp-noise" />
      </div>
      <div class="lp-content">
        <PublicHeader />

        <section class="public-section lp-section-hero">
          <div class="container lp-hero-grid">
            <div>
              <p class="eyebrow">Professionals</p>
              <h1 class="lp-hero-title" style={{"font-size":"clamp(32px,4.6vw,52px)"}}>Explore professional categories on Nxtgauge</h1>
              <p class="lp-hero-copy">
                Choose your category, understand what Nxtgauge offers for your role, and register with a trust-first workflow.
              </p>
              <div class="hero-actions">
                <A class="lp-primary-btn" href="/signup/professional">Get Started</A>
                <A class="lp-ghost-btn lp-ghost-btn-dark" href="/professionals#paths">View categories</A>
              </div>
              <p class="lp-hero-note">Dedicated role pages are optimized for campaign traffic and search visibility.</p>
            </div>
            <div class="lp-hero-graph">
              <img src="/images/roles/photographer.jpg" alt="Professional photography workspace setup" class="role-hero-photo" />
            </div>
          </div>
        </section>

        <section id="paths" class="public-section lp-section">
          <div class="container panel choose-path-panel">
            <div class="section-head">
              <div>
                <h2>All professional paths</h2>
                <p class="sub">Stable landing pages for discovery, SEO, and campaign traffic.</p>
              </div>
            </div>
            <div class="path-grid">
              <For each={professionalPages}>
                {(item) => (
                  <article class="path-card">
                    <div class="path-media">
                      <img src={item.image} alt={item.shortTitle} loading="lazy" />
                      <div class="path-media-overlay" />
                    </div>
                    <div class="path-body">
                      <span class="path-chip">{item.category}</span>
                      <h3>{item.shortTitle}</h3>
                      <p>{item.heroDescription}</p>
                      <div style={{"display":"grid","grid-template-columns":"1fr 1fr","gap":"8px","margin-top":"14px"}}>
                        <A class="path-secondary-btn" href={`/professionals/${item.slug}`}>Explore</A>
                        <A class="path-secondary-btn" href={professionalSignupHref(item.roleKey)}>Register</A>
                      </div>
                    </div>
                  </article>
                )}
              </For>
            </div>
          </div>
        </section>

        <PublicFooter />
      </div>
    </main>
  );
}
