/* Hero.jsx — #hero — TaxTrail NETFILE self-file hero + animated "trail" motif */

// The winding trail path (viewBox 420×480). Shared by the visible stroke and the moving spark.
const TRAIL_D = 'M70 452 C 150 404, 78 336, 196 300 C 318 264, 224 188, 318 124';
const TRAIL_NODES = [[70, 452, 'tt-n1'], [119, 372, 'tt-n2'], [196, 300, 'tt-n3'], [268, 222, 'tt-n4']];

function TrailGraphic() {
  return (
    <div className="hero-trail" aria-hidden="true" style={{
      position: 'absolute', right: 'clamp(24px, 4vw, 96px)', top: '50%', transform: 'translateY(-50%)',
      width: 420, height: 480, zIndex: 1, pointerEvents: 'none',
    }}>
      <svg viewBox="0 0 420 480" width="420" height="480" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <filter id="ttGlow" x="-60%" y="-60%" width="220%" height="220%">
            <feGaussianBlur stdDeviation="4" />
          </filter>
        </defs>

        {/* soft glow behind destination */}
        <circle cx="318" cy="96" r="46" fill="var(--teal-500)" opacity="0.16" filter="url(#ttGlow)" />

        {/* trail — wide faint underlay + dotted line */}
        <path d={TRAIL_D} stroke="var(--navy-500)" strokeWidth="9" strokeLinecap="round" opacity="0.45" />
        <path d={TRAIL_D} stroke="var(--teal-300)" strokeWidth="3" strokeLinecap="round" strokeDasharray="0.1 12" opacity="0.9" />

        {/* waypoint nodes */}
        {TRAIL_NODES.map(([x, y, cls]) => (
          <g key={cls} className={`tt-node ${cls}`}>
            <circle cx={x} cy={y} r="8" fill="var(--navy-800)" stroke="var(--teal-400)" strokeWidth="2.5" />
            <circle cx={x} cy={y} r="2.6" fill="var(--teal-300)" />
          </g>
        ))}

        {/* destination pulse rings */}
        <circle className="tt-pulse" cx="318" cy="96" r="20" fill="none" stroke="var(--teal-400)" strokeWidth="2"
                style={{ transformBox: 'fill-box', transformOrigin: 'center' }} />

        {/* destination pin (matches the logo mark) */}
        <g className="tt-pin">
          <path d="M318 72 C 305 72, 295.5 81.5, 295.5 94 C 295.5 109, 318 124, 318 124 C 318 124, 340.5 109, 340.5 94 C 340.5 81.5, 331 72, 318 72 Z"
                fill="var(--teal-500)" />
          <circle cx="318" cy="93" r="6.8" fill="#fff" />
        </g>

        {/* moving spark — glowing traveler running the trail */}
        <g className="tt-spark" style={{ offsetPath: `path('${TRAIL_D}')`, offsetDistance: '100%' }}>
          <circle r="9" fill="var(--teal-300)" opacity="0.5" filter="url(#ttGlow)" />
          <circle r="4" fill="#EAFBF8" />
          <circle r="6.5" fill="none" stroke="var(--teal-200)" strokeWidth="1.5" opacity="0.7" />
        </g>

        {/* "NETFILE'd" chip near the destination */}
        <g className="tt-chip">
          <rect x="226" y="26" width="170" height="40" rx="12" fill="var(--navy-950)" stroke="var(--navy-600)" strokeWidth="1" />
          <circle cx="250" cy="46" r="9" fill="var(--teal-500)" />
          <path d="M246 46 l3 3 l5.5 -6" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
          <text x="268" y="51" fontFamily="var(--font-mono)" fontSize="13" fontWeight="500" letterSpacing="0.5" fill="#fff">NETFILE&#39;d</text>
        </g>
      </svg>
    </div>
  );
}

function Hero() {
  return (
    <section id="hero" style={{
      position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center',
      background: 'radial-gradient(120% 90% at 80% -10%, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%)',
      color: '#fff', overflow: 'hidden', paddingTop: 70,
    }}>
      <TopoBg opacity={0.22} color="var(--teal-300)" />
      <div aria-hidden="true" style={{
        position: 'absolute', width: 620, height: 620, right: '-8%', top: '-12%',
        background: 'radial-gradient(circle, rgba(0,168,150,0.22), transparent 62%)', filter: 'blur(8px)',
      }}></div>

      <TrailGraphic />

      <Container style={{ position: 'relative', zIndex: 2 }}>
        <div className="hero-grid" style={{ maxWidth: 760 }}>
          <span className="reveal" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            font: 'var(--t-label)', letterSpacing: '0.08em', textTransform: 'uppercase',
            color: 'var(--amber-500)', background: 'rgba(217,145,43,0.12)',
            border: '1px solid rgba(217,145,43,0.35)', padding: '6px 12px', borderRadius: 999, marginBottom: 28,
          }}>
            <Icon name="loader" size={13} /> NETFILE Certification — In Progress
          </span>

          <h1 className="reveal" style={{
            font: 'var(--t-display)', letterSpacing: '-0.02em', margin: 0, textWrap: 'balance',
            color: '#fff', animationDelay: '60ms',
          }}>
            File Your Own Canadian<br />Taxes — with Confidence
          </h1>

          <p className="reveal" style={{
            font: 'var(--t-lead)', color: 'var(--teal-300)', margin: '22px 0 0', maxWidth: 620,
            fontWeight: 500, animationDelay: '120ms',
          }}>
            Guided, step-by-step self-filing. NETFILE-certified <span style={{ color: 'var(--teal-200)' }}>(in progress)</span> for
            the 2027 filing season — so you can file directly with the CRA.
          </p>

          <p className="reveal" style={{
            font: 'var(--t-body)', color: 'var(--fg-on-dark-2)', margin: '20px 0 0', maxWidth: 600,
            animationDelay: '160ms',
          }}>
            TaxTrail walks you through your return step by step — auto-filling your slips from the CRA,
            checking your work, and finding credits you might miss. Built by the team behind
            <strong style={{ color: 'var(--fg-on-dark-1)', fontWeight: 600 }}> TaxAim</strong>, the
            professional platform Canadian preparers trust.
          </p>

          <div className="reveal" style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap', animationDelay: '220ms' }}>
            <Button href="#contact" variant="primary" icon="arrow-right">Start Your Return</Button>
            <Button href="#how" variant="secondaryDark">See How It Works</Button>
          </div>

          <div className="reveal" style={{ display: 'flex', gap: 22, marginTop: 34, flexWrap: 'wrap', animationDelay: '280ms' }}>
            {[['shield-check', 'Files directly with the CRA'], ['map-pin', 'All 13 provinces + Quebec'], ['search-check', 'Built-in checks before you file']].map(([icon, label]) => (
              <span key={label} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, font: '500 14px/1.2 var(--font-sans)', color: 'var(--fg-on-dark-2)' }}>
                <Icon name={icon} size={17} style={{ color: 'var(--teal-400)' }} /> {label}
              </span>
            ))}
          </div>
        </div>
      </Container>

      <div aria-hidden="true" style={{
        position: 'absolute', bottom: 26, left: '50%', transform: 'translateX(-50%)', zIndex: 2,
        color: 'var(--fg-on-dark-3)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
      }}>
        <span style={{ font: '500 11px/1 var(--font-mono)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Scroll</span>
        <Icon name="chevron-down" size={18} />
      </div>
    </section>
  );
}

window.Hero = Hero;