import { A } from '@solidjs/router';
import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js';
import OpportunityGraph from '~/components/OpportunityGraph';
import PublicHeader from '~/components/PublicHeader';
import PublicFooter from '~/components/PublicFooter';
import { professionalPages, professionalSignupHref, type ProfessionalCategory } from '~/lib/professionals';

type AudienceCard = {
  title: string;
  description: string;
  button: string;
  chip: string;
  icon: 'briefcase' | 'user' | 'users' | 'code';
  href: string;
  image: string;
  audience: 'customer' | 'professional' | 'company' | 'job_seeker';
};

type Flow = {
  label: string;
  title: string;
  description: string;
  image: string;
  steps: Array<{ title: string; description: string }>;
};

const audienceCards: AudienceCard[] = [
  {
    title: 'Post a Job',
    description: 'Create verified job openings and find the right talent faster.',
    button: 'Explore Company',
    chip: 'Company',
    icon: 'briefcase',
    href: '/roles/company',
    audience: 'company',
    image: 'https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?q=80&w=800&auto=format&fit=crop',
  },
  {
    title: 'Apply for Jobs',
    description: 'Build your profile and apply to approved opportunities quickly.',
    button: 'Explore Job Seeker',
    chip: 'Job Seeker',
    icon: 'user',
    href: '/roles/job-seeker',
    audience: 'job_seeker',
    image: 'https://images.unsplash.com/photo-1586281380349-632531db7ed4?q=80&w=800&auto=format&fit=crop',
  },
  {
    title: 'Hire a Professional',
    description: 'Post your requirement and discover trusted specialists.',
    button: 'Explore Customer',
    chip: 'Customer',
    icon: 'users',
    href: '/roles/customer',
    audience: 'customer',
    image: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=800&auto=format&fit=crop',
  },
  {
    title: 'Join as Professional',
    description: 'Create a trusted profile and grow through verified demand.',
    button: 'Explore Professionals',
    chip: 'Professional',
    icon: 'code',
    href: '/professionals',
    audience: 'professional',
    image: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=800&auto=format&fit=crop',
  },
];

const roleFilterOptions: Array<{ key: 'all' | ProfessionalCategory; label: string }> = [
  { key: 'all', label: 'All' },
  { key: 'creative', label: 'Creative' },
  { key: 'tech', label: 'Tech' },
  { key: 'education', label: 'Education' },
  { key: 'wellness', label: 'Wellness' },
  { key: 'events', label: 'Events' },
  { key: 'marketing', label: 'Marketing' },
];

const benefits = [
  { title: 'Verified profiles & businesses', body: 'Identity and profile checks reduce fake submissions and spam.', icon: 'shield-check' },
  { title: 'Approval-based quality (24-48 hours)', body: 'Profiles, requirements, and jobs are reviewed before visibility.', icon: 'zap' },
  { title: 'Smart matching using tags/skills', body: 'Tag-based relevance helps surface better opportunities faster.', icon: 'hash' },
  { title: 'Focused discovery with filters', body: 'Search and filter tools keep opportunity discovery focused.', icon: 'search' },
  { title: 'Controlled contact visibility', body: 'Sensitive contact flow remains controlled by role and workflow.', icon: 'lock' },
  { title: 'Notifications & updates', body: 'Track approvals, responses, applications, and key updates.', icon: 'bell' },
] as const;

const flows: Flow[] = [
  {
    label: 'Customers',
    title: 'Hire trusted professionals with less noise',
    description: 'Post requirements, pass review checks, and receive better-fit responses.',
    image: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1200&auto=format&fit=crop',
    steps: [
      { title: 'Create account', description: 'Sign up quickly with customer intent.' },
      { title: 'Share requirement', description: 'Add budget, scope, and timing.' },
      { title: 'Review and verify', description: 'Quality checks run before visibility.' },
      { title: 'Track responses', description: 'Monitor replies and status updates.' },
    ],
  },
  {
    label: 'Professionals',
    title: 'Build trust once, discover better opportunities',
    description: 'Create a strong profile and respond to verified demand.',
    image: 'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=1200&auto=format&fit=crop',
    steps: [
      { title: 'Pick role and skills', description: 'Choose service category and specialization.' },
      { title: 'Build profile', description: 'Add portfolio, strengths, and proof.' },
      { title: 'Pass verification', description: 'Approval protects platform trust.' },
      { title: 'Respond to opportunities', description: 'Manage matching leads in one flow.' },
    ],
  },
  {
    label: 'Companies',
    title: 'Post jobs with approval-based quality control',
    description: 'Publish openings, keep quality high, and track applicants clearly.',
    image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1200&auto=format&fit=crop',
    steps: [
      { title: 'Create company profile', description: 'Set hiring context and org details.' },
      { title: 'Post requirements', description: 'Publish role details and expectations.' },
      { title: 'Approval before publish', description: 'Listings are reviewed first.' },
      { title: 'Manage pipeline', description: 'Track candidates and responses.' },
    ],
  },
  {
    label: 'Job Seekers',
    title: 'Apply to approved opportunities with clarity',
    description: 'Build your profile and track application progress without confusion.',
    image: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=1200&auto=format&fit=crop',
    steps: [
      { title: 'Set up profile', description: 'Complete essentials and work preferences.' },
      { title: 'Approval check', description: 'Review keeps quality consistent.' },
      { title: 'Explore matching jobs', description: 'Filter by practical criteria.' },
      { title: 'Apply and track', description: 'Submit applications and watch status.' },
    ],
  },
];

const faqs = [
  {
    q: 'What is Nxtgauge?',
    a: 'Nxtgauge connects customers, professionals, companies, and job seekers in one trusted platform.',
  },
  {
    q: 'Who can join Nxtgauge?',
    a: 'Customers, service professionals, companies, and job seekers can create an account and choose their path.',
  },
  {
    q: 'Why does Nxtgauge require verification?',
    a: 'Verification helps reduce fake profiles and improves trust across the platform.',
  },
  {
    q: 'How long does account approval take?',
    a: 'Most profile approvals are completed within 24-48 hours.',
  },
  {
    q: 'Do I need to choose my role during signup?',
    a: 'Create one account, then choose and activate the role flow you need.',
  },
] as const;

const chipNodes = [
  { kind: 'code', left: '2%', top: '14%', size: 44, cls: 'lp-chip-slow' },
  { kind: 'camera', left: '94%', top: '22%', size: 46, cls: 'lp-chip-mid' },
  { kind: 'briefcase', left: '3%', top: '76%', size: 46, cls: 'lp-chip-fast' },
  { kind: 'bell', left: '93%', top: '80%', size: 42, cls: 'lp-chip-slow' },
  { kind: 'sparkles', left: '50%', top: '6%', size: 40, cls: 'lp-chip-mid' },
] as const;

function ChipIcon(props: { kind: (typeof chipNodes)[number]['kind'] }) {
  const common = { fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' } as const;
  if (props.kind === 'camera') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
        <path d="M14 4a2 2 0 0 1 1.76 1.05l.49.9A2 2 0 0 0 18 7h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2a2 2 0 0 0 1.76-1.05l.49-.9A2 2 0 0 1 10 4z" />
        <circle cx="12" cy="13" r="3" />
      </svg>
    );
  }
  if (props.kind === 'briefcase') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
        <path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
        <path d="M22 13a18 18 0 0 1-20 0" />
        <rect x="2" y="6" width="20" height="14" rx="2" />
      </svg>
    );
  }
  if (props.kind === 'bell') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
        <path d="M10.3 21a2 2 0 0 0 3.4 0" />
        <path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.67C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" />
      </svg>
    );
  }
  if (props.kind === 'sparkles') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
        <path d="M11 2.8a1 1 0 0 1 2 0l1 5.6a2 2 0 0 0 1.6 1.6l5.6 1a1 1 0 0 1 0 2l-5.6 1a2 2 0 0 0-1.6 1.6l-1 5.6a1 1 0 0 1-2 0l-1-5.6A2 2 0 0 0 8.4 14l-5.6-1a1 1 0 0 1 0-2l5.6-1A2 2 0 0 0 10 8.4z" />
        <path d="M20 2v4M22 4h-4" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
      <path d="m18 16 4-4-4-4" />
      <path d="m6 8-4 4 4 4" />
      <path d="m14.5 4-5 16" />
    </svg>
  );
}

function PathRoleIcon(props: { kind: AudienceCard['icon'] }) {
  const common = { fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' } as const;
  if (props.kind === 'briefcase') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" /><path d="M22 13a18 18 0 0 1-20 0" /><rect x="2" y="6" width="20" height="14" rx="2" /></svg>;
  if (props.kind === 'user') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><circle cx="12" cy="8" r="4" /><path d="M6 20c1.4-3.2 3.4-5 6-5s4.6 1.8 6 5" /></svg>;
  if (props.kind === 'users') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>;
  if (props.kind === 'code') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="m18 16 4-4-4-4" /><path d="m6 8-4 4 4 4" /><path d="m14.5 4-5 16" /></svg>;
  return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="m18 16 4-4-4-4" /><path d="m6 8-4 4 4 4" /><path d="m14.5 4-5 16" /></svg>;
}

function CheckBadgeIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M9 12.4l2 2 4-4" />
      <circle cx="12" cy="12" r="9" />
    </svg>
  );
}

function WhyBenefitIcon(props: { kind: (typeof benefits)[number]['icon'] }) {
  const common = { fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' } as const;
  if (props.kind === 'shield-check') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
        <path d="M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6z" />
        <path d="m9 12 2 2 4-4" />
      </svg>
    );
  }
  if (props.kind === 'zap') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
        <path d="M13 2 3 14h7l-1 8 10-12h-7z" />
      </svg>
    );
  }
  if (props.kind === 'hash') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
        <path d="M4 9h16M3 15h16M10 3 8 21M16 3l-2 18" />
      </svg>
    );
  }
  if (props.kind === 'search') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
        <circle cx="11" cy="11" r="7" />
        <path d="m21 21-4.35-4.35" />
      </svg>
    );
  }
  if (props.kind === 'lock') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
        <rect x="4" y="11" width="16" height="10" rx="2" />
        <path d="M8 11V7a4 4 0 0 1 8 0v4" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" {...common}>
      <path d="M10.3 21a2 2 0 0 0 3.4 0" />
      <path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.67C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" />
    </svg>
  );
}

export default function PublicLanding() {
  const [reduceMotion, setReduceMotion] = createSignal(false);
  const [scrollY, setScrollY] = createSignal(0);
  const [heroTilt, setHeroTilt] = createSignal({ x: 0, y: 0 });
  const [roleFilter, setRoleFilter] = createSignal<'all' | ProfessionalCategory>('all');
  const [benefitIdx, setBenefitIdx] = createSignal(0);
  const [flowIndex, setFlowIndex] = createSignal(0);
  const [flowStepIndex, setFlowStepIndex] = createSignal(0);
  const [openFaq, setOpenFaq] = createSignal(0);
  const [showBackToTop, setShowBackToTop] = createSignal(false);

  onMount(() => {
    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
    const syncMotion = () => setReduceMotion(media.matches);
    syncMotion();

    let ticking = false;
    const onScroll = () => {
      setShowBackToTop(window.scrollY > 500);
      if (media.matches) return;
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        setScrollY(window.scrollY || 0);
        ticking = false;
      });
    };

    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    media.addEventListener('change', syncMotion);

    const benefitTimer = window.setInterval(() => setBenefitIdx((x) => (x + 1) % benefits.length), 4200);
    const flowTimer = window.setInterval(() => {
      const active = flows[flowIndex()];
      setFlowStepIndex((prev) => {
        const next = prev + 1;
        if (next < active.steps.length) return next;
        setFlowIndex((f) => (f + 1) % flows.length);
        return 0;
      });
    }, 3000);

    onCleanup(() => {
      window.removeEventListener('scroll', onScroll);
      media.removeEventListener('change', syncMotion);
      window.clearInterval(benefitTimer);
      window.clearInterval(flowTimer);
    });
  });
  const visibleProfessionalCards = createMemo(() => {
    const filtered = roleFilter() === 'all'
      ? professionalPages
      : professionalPages.filter((item) => item.category === roleFilter());
    return filtered.slice(0, 8);
  });

  return (
    <main class="lp-main">
      <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` }}>
                <ChipIcon kind={chip.kind} />
              </span>
            )}
          </For>
        </div>
        <div class="lp-noise" />
      </div>

      <div class="lp-content">
        <PublicHeader />

        <section
          class="public-hero scene-dark lp-section-hero"
          onMouseMove={(event) => {
            if (reduceMotion()) return;
            const rect = event.currentTarget.getBoundingClientRect();
            const px = (event.clientX - rect.left) / rect.width - 0.5;
            const py = (event.clientY - rect.top) / rect.height - 0.5;
            setHeroTilt({ x: px * 14, y: py * 12 });
          }}
          onMouseLeave={() => setHeroTilt({ x: 0, y: 0 })}
        >
          <div class="container lp-hero-grid">
            <div>
              <h1 class="lp-hero-title">Trusted hiring and opportunities, verified.</h1>
              <p class="lp-hero-copy">
                Hire trusted professionals, post verified jobs, and apply faster in one platform.
              </p>
              <div class="hero-actions">
                <A class="lp-primary-btn" href="/signup/customer">Get Started</A>
                <A class="lp-ghost-btn lp-ghost-btn-dark" href="#how-it-works">How It Works</A>
              </div>
              <p class="lp-hero-note">Most profile and listing reviews are completed within 24-48 hours.</p>
            </div>
            <div
              class="lp-hero-graph"
              style={{
                transform: reduceMotion() ? 'none' : `translate3d(${heroTilt().x}px, ${heroTilt().y}px, 0)`,
              }}
            >
              <OpportunityGraph reduceMotion={reduceMotion()} />
            </div>
          </div>
        </section>

        <section id="choose-path" class="public-section scene-dark lp-section">
          <div class="container panel choose-path-panel">
            <div class="section-head">
              <div>
                <h2>Who Nxtgauge is for</h2>
                <p class="sub">Start with one account, then activate the journey you need.</p>
              </div>
            </div>
            <div class="path-grid">
              <For each={audienceCards}>
                {(card) => (
                  <article class="path-card path-card-hero">
                    <div class="path-media">
                      <img src={card.image} alt={card.title} loading="lazy" />
                      <div class="path-media-overlay" />
                    </div>
                    <div class="path-body">
                      <div class="path-head-row">
                        <span class="path-icon"><PathRoleIcon kind={card.icon} /></span>
                        <span class="path-chip"><CheckBadgeIcon />{card.chip}</span>
                      </div>
                      <h3>{card.title}</h3>
                      <p>{card.description}</p>
                      <A class="path-secondary-btn" href={card.href}>{card.button}</A>
                    </div>
                  </article>
                )}
              </For>
            </div>
          </div>
        </section>

        <section id="professionals" class="public-section scene-dark lp-section">
          <div class="container panel choose-path-panel">
            <div class="section-head">
              <div>
                <h2>Explore professional categories</h2>
              </div>
              <A class="path-secondary-btn lp-view-all-btn" href="/professionals">View all professionals</A>
            </div>
            <div class="filter-row">
              <For each={roleFilterOptions}>
                {(filter) => (
                  <button
                    type="button"
                    class={`chip-btn ${roleFilter() === filter.key ? 'active' : ''}`}
                    onClick={() => setRoleFilter(filter.key)}
                  >
                    {filter.label}
                  </button>
                )}
              </For>
            </div>
            <div class="path-grid">
              <For each={visibleProfessionalCards()}>
                {(item) => (
                  <article class="path-card path-card-hero">
                    <div class="path-media">
                      <img src={item.image} alt={item.shortTitle} loading="lazy" />
                      <div class="path-media-overlay" />
                    </div>
                    <div class="path-body">
                      <div class="path-head-row">
                        <span class="path-chip">{item.category}</span>
                      </div>
                      <h3>{item.shortTitle}</h3>
                      <p>{item.heroDescription}</p>
                      <div class="lp-role-cta-grid">
                        <A class="path-secondary-btn" href={`/professionals/${item.slug}`}>Explore {item.shortTitle}</A>
                        <A class="path-secondary-btn" href={professionalSignupHref(item.roleKey)}>Join {item.shortTitle}</A>
                      </div>
                    </div>
                  </article>
                )}
              </For>
            </div>
          </div>
        </section>

        <section id="why-nxtgauge" class="public-section scene-dark lp-section">
          <div class="container panel panel-dark">
            <div class="center">
              <p class="eyebrow">Why Nxtgauge</p>
              <h2>Trust, approvals, and better matching in one flow.</h2>
            </div>
            <div class="whySliderWrap">
              <article class="whyHeroCard whyHeroCardPulse">
                <div class="whyCardGlow" />
                <div class="whyHaloA" />
                <div class="whyHaloB" />
                <div class="whyCardContent whyContentSwap">
                  <p class="whyMetaKicker">Capability {benefitIdx() + 1} of {benefits.length}</p>
                  <span class="whyIconShell"><WhyBenefitIcon kind={benefits[benefitIdx()].icon} /></span>
                  <h3 style={{ margin: '12px 0 0', color: '#fff', 'font-size': '30px' }}>{benefits[benefitIdx()].title}</h3>
                  <p style={{ margin: '8px 0 0', color: 'rgba(255,255,255,0.9)', 'font-size': '17px' }}>{benefits[benefitIdx()].body}</p>
                </div>
                <span class="whyAutoTrack" />
              </article>
              <div class="whyOrbitalNav">
                <For each={benefits}>
                  {(item, idx) => (
                    <button
                      class={`whyOrbitalBtn ${idx() === benefitIdx() ? 'whyOrbitalBtnActive' : ''}`}
                      onClick={() => setBenefitIdx(idx())}
                      aria-label={`Show ${item.title}`}
                      title={item.title}
                    >
                      <WhyBenefitIcon kind={item.icon} />
                    </button>
                  )}
                </For>
              </div>
              <div class="whyControls">
                <button class="whyControlBtn" onClick={() => setBenefitIdx((benefitIdx() - 1 + benefits.length) % benefits.length)} aria-label="Previous slide">◀</button>
                <button class="whyControlBtn" onClick={() => setBenefitIdx((benefitIdx() + 1) % benefits.length)} aria-label="Next slide">▶</button>
              </div>
            </div>
          </div>
        </section>

        <section id="how-it-works" class="public-section scene-dark lp-section landing-hiw-section">
          <div class="container panel panel-light">
            <div class="center">
              <p class="eyebrow">How it works</p>
              <h2>Clear journey, zero confusion</h2>
            </div>
            <article class="hiwCodeCard">
              <div class="hiwCodeMedia">
                <div class="hiwCodeBigRect">
                  <img class="hiwCodePhoto" src={flows[flowIndex()].image} alt={`${flows[flowIndex()].label} role`} />
                </div>
                <div class="hiwCodeMediaCopy">
                  <p class="hiwCodeKicker">{flows[flowIndex()].label}</p>
                  <h3 class="hiwCodeTitle">{flows[flowIndex()].title}</h3>
                  <p class="hiwCodeDesc">{flows[flowIndex()].description}</p>
                </div>
              </div>
              <div class="hiwCodeBody">
                <p class="hiwCodeStepsHeading">Step Flow</p>
                <div class="hiwCodeSteps">
                  <For each={flows[flowIndex()].steps}>
                    {(step, idx) => (
                      <div class={`hiwCodeStep ${idx() === flowStepIndex() ? 'hiwCodeStepActive' : ''}`}>
                        <span class="hiwCodeStepNum">{idx() + 1}</span>
                        <div>
                          <h4 class="hiwCodeStepTitle">{step.title}</h4>
                          <p class="hiwCodeStepDesc">{step.description}</p>
                        </div>
                      </div>
                    )}
                  </For>
                </div>
                <div class="hiwCodeFooter">
                  <div class="hiwCodeArrows">
                    <button class="hiwCodeArrow" onClick={() => { setFlowIndex((flowIndex() - 1 + flows.length) % flows.length); setFlowStepIndex(0); }} aria-label="Previous role">←</button>
                    <button class="hiwCodeArrow" onClick={() => { setFlowIndex((flowIndex() + 1) % flows.length); setFlowStepIndex(0); }} aria-label="Next role">→</button>
                  </div>
                  <div class="hiwCodeDots">
                    <For each={flows}>
                      {(_, idx) => <span class={`hiwCodeDot ${idx() === flowIndex() ? 'hiwCodeDotActive' : ''}`} />}
                    </For>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </section>

        <section id="faqs" class="public-section scene-dark lp-section landing-faq-section">
          <div class="container panel panel-dark faq-wrap">
            <h2 class="center">Frequently asked questions</h2>
            <p class="center sub">Quick answers before you create your account.</p>
            <div class="faq-list">
              <For each={faqs}>
                {(item, idx) => (
                  <article class={`faq-item ${openFaq() === idx() ? 'open' : ''}`}>
                    <button class="faq-q" onClick={() => setOpenFaq(openFaq() === idx() ? -1 : idx())}>
                      <span>{item.q}</span>
                      <span class={`faq-q-icon ${openFaq() === idx() ? 'open' : ''}`}>⌄</span>
                    </button>
                    <Show when={openFaq() === idx()}>
                      <p class="faq-a">{item.a}</p>
                    </Show>
                  </article>
                )}
              </For>
            </div>
          </div>
        </section>

        <section class="public-section scene-dark lp-section">
          <div class="container panel panel-dark cta-panel">
            <div class="cta-glow" />
            <div class="cta-copy">
              <p class="eyebrow">Quick Actions</p>
              <h2>Start with one account. Choose your path after.</h2>
              <p class="sub">Hire, post, apply, or join as a professional from stable role-specific pages.</p>
            </div>
            <div class="hero-actions cta-actions">
              <A class="lp-primary-btn pulse" href="/signup/customer">Get Started</A>
              <A class="lp-ghost-btn lp-ghost-btn-dark" href="/professionals">Explore Professionals</A>
              <A class="lp-ghost-btn lp-ghost-btn-dark" href="/signup/company">Post a Job</A>
            </div>
          </div>
        </section>

        <PublicFooter />
        <Show when={showBackToTop()}>
          <button class="back-top" onClick={() => window.scrollTo({ top: 0, behavior: reduceMotion() ? 'auto' : 'smooth' })}>
            ↑
          </button>
        </Show>
      </div>
    </main>
  );
}
