// @design-system: layout/HeroSection/ConstellationHero
'use client';
import { cn } from '@/lib/cn';
import { HeroSection } from './HeroSection';

export interface ConstellationHeroProps {
  title: string;
  subtitle?: string;
  className?: string;
}

const QMARKS = [
  { x: '10%', y: '20%', s: 0.6, d: '0s' },
  { x: '82%', y: '18%', s: 0.9, d: '-2.1s' },
  { x: '18%', y: '75%', s: 0.7, d: '-1.2s' },
  { x: '72%', y: '68%', s: 1.1, d: '-3.4s' },
  { x: '45%', y: '12%', s: 0.5, d: '-0.8s' },
  { x: '90%', y: '48%', s: 0.55, d: '-2.7s' },
  { x: '5%', y: '50%', s: 0.45, d: '-1.7s' },
  { x: '55%', y: '82%', s: 0.6, d: '-0.3s' },
];

export function ConstellationHero({ title, subtitle, className }: ConstellationHeroProps) {
  return (
    <HeroSection className={cn('mdh-faq-1', className)}>
      <style>{`
        .mdh-faq-1 {
          --_qmark-color: color-mix(in srgb, var(--color-brand-primary-300) 18%, transparent);
          --_ring-color: color-mix(in srgb, var(--color-brand-primary-400) 45%, transparent);
          --_glyph-filter: drop-shadow(0 1.125rem 1.5rem color-mix(in srgb, var(--color-brand-primary-950) 28%, transparent));
          background: radial-gradient(ellipse at 50% 30%, var(--color-brand-primary-900) 0%, var(--color-brand-primary-950) 70%, var(--color-brand-primary-950) 100%);
          color: var(--color-text-inverse);
          padding: 6rem var(--spacing-6) 7rem;
          text-align: center;
        }
        .mdh-faq-1__bg {
          position: absolute;
          inset: 0;
          pointer-events: none;
        }
        .mdh-faq-1__qmark {
          position: absolute;
          font-family: "Inter", system-ui, sans-serif;
          font-weight: 700;
          font-size: calc(4.5rem * var(--s));
          color: var(--_qmark-color);
          transform: translate(-50%, -50%);
          animation: mdhFaq1Float 7s ease-in-out var(--d) infinite;
        }
        @keyframes mdhFaq1Float {
          0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-6deg); opacity: 0.4; }
          50%       { transform: translate(-50%, -50%) translateY(-1.125rem) rotate(6deg); opacity: 0.9; }
        }
        .mdh-faq-1__mark {
          position: relative;
          width: 7.5rem;
          height: 7.5rem;
          margin: 0 auto var(--spacing-6);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .mdh-faq-1__ring {
          position: absolute;
          inset: 0;
          border-radius: 50%;
          border: 2px solid var(--_ring-color);
          animation: mdhFaq1Ring 2.4s ease-out infinite;
        }
        .mdh-faq-1__ring--2 { animation-delay: 1.2s; }
        @keyframes mdhFaq1Ring {
          0%   { transform: scale(0.6); opacity: 0.9; }
          100% { transform: scale(1.8); opacity: 0; }
        }
        .mdh-faq-1__glyph {
          position: relative;
          width: 6rem;
          height: 6rem;
          border-radius: 50%;
          background: var(--gradient-brand-accent);
          font-family: "Inter", system-ui, sans-serif;
          font-size: 3.75rem;
          font-weight: 800;
          line-height: 6rem;
          text-align: center;
          filter: var(--_glyph-filter);
          animation: mdhFaq1Bob 3.2s ease-in-out infinite;
        }
        @keyframes mdhFaq1Bob {
          0%, 100% { transform: translateY(0); }
          50%       { transform: translateY(-0.375rem); }
        }
        @media (max-width: 45rem) {
          .mdh-faq-1 { padding: 4rem var(--spacing-5) 5rem; }
          .mdh-faq-1__qmark { font-size: calc(3rem * var(--s)); }
        }
        @media (prefers-reduced-motion: reduce) {
          .mdh-faq-1 .mdh-faq-1__qmark,
          .mdh-faq-1 .mdh-faq-1__ring,
          .mdh-faq-1 .mdh-faq-1__ring--2,
          .mdh-faq-1 .mdh-faq-1__glyph { animation: none !important; }
        }
      `}</style>

      {/* Floating ? marks background */}
      <div className="mdh-faq-1__bg" aria-hidden="true">
        {QMARKS.map((q, i) => (
          <span
            key={i}
            className="mdh-faq-1__qmark"
            style={
              {
                '--x': q.x,
                '--y': q.y,
                '--s': q.s,
                '--d': q.d,
                top: q.y,
                left: q.x,
              } as React.CSSProperties
            }
          >
            ?
          </span>
        ))}
      </div>

      {/* Content */}
      <div className="relative z-10 mx-auto max-w-[40rem]">
        {/* Central ? mark with ring pulse */}
        <div className="mdh-faq-1__mark" aria-hidden="true">
          <span className="mdh-faq-1__ring" />
          <span className="mdh-faq-1__ring mdh-faq-1__ring--2" />
          <span className="mdh-faq-1__glyph">?</span>
        </div>

        <h1 className="tracking-display-tight mb-3 leading-[1.1] font-[var(--font-weight-extrabold)] text-[var(--font-size-display)] text-white">
          {title}
        </h1>
        {subtitle && (
          <p className="text-brand-primary-100/75 mt-3 text-lg leading-relaxed">{subtitle}</p>
        )}
      </div>
    </HeroSection>
  );
}