// hero.jsx — three hero variants with paper planes, clouds, sun bursts

const PaperPlane = ({ size = 60, color = '#1C1C1C', shadow = '#E8674A', style = {} }) => (
  <svg width={size} height={size * 0.7} viewBox="0 0 100 70" style={style} xmlns="http://www.w3.org/2000/svg">
    {/* Shadow / back crease */}
    <path d="M4 40 L90 8 L62 44 L50 38 Z" fill={shadow} opacity="0.9" stroke="#1C1C1C" strokeWidth="1.8" strokeLinejoin="round"/>
    {/* Top wing */}
    <path d="M4 40 L90 8 L48 30 Z" fill="#FFFBF3" stroke="#1C1C1C" strokeWidth="1.8" strokeLinejoin="round"/>
    {/* Bottom crease triangle */}
    <path d="M48 30 L62 44 L50 62 Z" fill={color} opacity="0.95" stroke="#1C1C1C" strokeWidth="1.8" strokeLinejoin="round"/>
    {/* Center fold line */}
    <path d="M48 30 L50 62" stroke="#1C1C1C" strokeWidth="1.4" strokeLinecap="round" opacity="0.6"/>
  </svg>
);

const Cloud = ({ w = 180, style = {}, opacity = 1 }) => (
  <svg width={w} height={w * 0.55} viewBox="0 0 180 100" style={style} xmlns="http://www.w3.org/2000/svg">
    <path
      d="M30 70 Q14 70 14 54 Q14 40 30 38 Q34 20 54 22 Q64 8 82 16 Q98 8 110 22 Q136 20 140 44 Q160 46 160 64 Q160 80 140 80 L36 80 Q30 80 30 70 Z"
      fill="#FFFBF3" stroke="#1C1C1C" strokeWidth="2" strokeLinejoin="round" opacity={opacity}
    />
  </svg>
);

const SunBurst = ({ size = 280, color = '#E8A830', rayColor = '#1C1C1C', style = {}, half = false }) => {
  const rays = [];
  const count = 24;
  for (let i = 0; i < count; i++) {
    const angle = (i / count) * (half ? 180 : 360);
    if (half && (angle < 5 || angle > 175)) continue;
    rays.push(
      <line
        key={i}
        x1="50" y1="50"
        x2={50 + 54 * Math.cos((angle - 90) * Math.PI / 180)}
        y2={50 + 54 * Math.sin((angle - 90) * Math.PI / 180)}
        stroke={rayColor} strokeWidth="0.6" opacity="0.55"
      />
    );
  }
  return (
    <svg width={size} height={half ? size / 2 : size} viewBox={half ? '0 0 100 52' : '0 0 100 100'} style={style} xmlns="http://www.w3.org/2000/svg">
      <g>{rays}</g>
      {half ? (
        <>
          <path d="M 22 50 A 28 28 0 0 1 78 50 Z" fill={color} stroke="#1C1C1C" strokeWidth="0.8" strokeLinejoin="round"/>
        </>
      ) : (
        <circle cx="50" cy="50" r="28" fill={color} stroke="#1C1C1C" strokeWidth="0.8"/>
      )}
    </svg>
  );
};

const DashedPath = ({ style = {}, d, color = '#1C1C1C' }) => (
  <svg style={{ position: 'absolute', ...style }} xmlns="http://www.w3.org/2000/svg" fill="none">
    <path d={d} stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeDasharray="5 6"/>
  </svg>
);

// ─── Variant A: SKYLINE — bright sky, clouds drift, deal pills ───
function HeroSkyline() {
  React.useEffect(() => {
    const scene = document.querySelector('.hero-scene');
    if (!scene) return;
    function handleScroll() {
      scene.style.transform = `translateY(${window.scrollY * 0.4}px)`;
    }
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <>
      <div className="hero-scene" aria-hidden="true">
        {/* Soft sky tint (not a gradient — just a flat band) */}
        <div style={{ position: 'absolute', inset: 0, background: 'var(--sky-light)', opacity: 0.6 }}/>

        {/* Sun (top-right corner, only bottom sliver visible) */}
        <div className="sun-pulse-wrap" style={{ position: 'absolute', right: '-180px', top: '-260px', zIndex: 1, animation: 'sun-pulse 8s ease-in-out infinite' }}>
          <SunBurst size={440} color="#F6D488" rayColor="#1C1C1C"/>
        </div>

        {/* Clouds */}
        <div className="cloud cloud-a" style={{ position: 'absolute', top: '14%', left: '6%' }}><Cloud w={180}/></div>
        <div className="cloud cloud-b" style={{ position: 'absolute', top: '22%', right: '26%' }}><Cloud w={140} opacity={0.92}/></div>
        <div className="cloud cloud-c" style={{ position: 'absolute', top: '54%', left: '2%' }}><Cloud w={100} opacity={0.75}/></div>
        <div className="cloud cloud-d" style={{ position: 'absolute', top: '64%', right: '4%' }}><Cloud w={120} opacity={0.8}/></div>
        <div className="cloud cloud-e" style={{ position: 'absolute', top: '34%', left: '42%' }}><Cloud w={80} opacity={0.5}/></div>

        {/* Floating deal pills */}
        <div className="hero-chip" style={{ top: '30%', left: '5%', animation: 'float-chip 5s ease-in-out infinite' }}>
          <span className="chip-ico" style={{ background: 'var(--coral)' }}>✈</span>
          SMF <span className="chip-arrow">→</span> CUN
          <span style={{ color: 'var(--coral)', marginLeft: 4 }}>$298</span>
        </div>
        <div className="hero-chip" style={{ top: '64%', left: '8%', animation: 'float-chip 6s ease-in-out infinite 1s' }}>
          <span className="chip-ico" style={{ background: 'var(--blue)' }}>✈</span>
          SMF <span className="chip-arrow">→</span> OGG
          <span style={{ color: 'var(--coral)', marginLeft: 4 }}>$379</span>
        </div>
        <div className="hero-chip" style={{ top: '48%', right: '6%', animation: 'float-chip 7s ease-in-out infinite 0.5s' }}>
          <span className="chip-ico" style={{ background: 'var(--gold)' }}>✈</span>
          SMF <span className="chip-arrow">→</span> JFK
          <span style={{ color: 'var(--coral)', marginLeft: 4 }}>$189</span>
        </div>

        {/* Cream overlay — dims scene so text reads clearly */}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(245, 240, 230, 0.45)', zIndex: 2, pointerEvents: 'none' }}/>
      </div>

      <div className="hero-content">
        <h1 className="hero-headline" style={{marginBottom:'20px'}}>
          Sacramento flight&nbsp;deals,<br/>
          straight to your <span className="accent-coral">inbox</span>.
        </h1>
        <p style={{fontSize:'18px', color:'var(--ink-mid)', lineHeight:'1.6', marginBottom:'28px', maxWidth:'480px', marginLeft:'auto', marginRight:'auto'}}>
          Real deals from SMF, straight to your inbox. We find them — you book them.
        </p>
        <div className="hero-cta-wrap">
          <a href="pricing.html" className="hero-btn" style={{display:'inline-block', textDecoration:'none', marginTop:'16px'}}>
            Get Deal Alerts →
          </a>
          <p className="hero-caption">14-day free trial · Then $4.99/mo · Cancel anytime</p>
        </div>
      </div>
    </>
  );
}

// ─── Variant B: EDITORIAL — sun-burst centerpiece, big SMF letter, map-like ───
function HeroEditorial() {
  React.useEffect(() => {
    const scene = document.querySelector('.hero-scene');
    if (!scene) return;
    function handleScroll() {
      scene.style.transform = `translateY(${window.scrollY * 0.4}px)`;
    }
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <>
      <div className="hero-scene" aria-hidden="true">
        {/* Large rotating sun burst behind everything */}
        <div style={{
          position: 'absolute',
          left: '50%', top: '50%',
          transform: 'translate(-50%, -50%)',
          animation: 'spin-slow 120s linear infinite',
          opacity: 0.5,
        }}>
          <SunBurst size={900} color="transparent" rayColor="#1C1C1C"/>
        </div>

        {/* Coral half-sun bottom-left */}
        <div className="sun-pulse-wrap" style={{ position: 'absolute', left: '-40px', bottom: '10%', animation: 'sun-pulse 8s ease-in-out infinite' }}>
          <SunBurst size={220} color="#E8674A" rayColor="#1C1C1C" half/>
        </div>

        {/* Gold half-sun top-right */}
        <div className="sun-pulse-wrap" style={{ position: 'absolute', right: '-30px', top: '14%', transform: 'rotate(180deg)', animation: 'sun-pulse 10s ease-in-out infinite' }}>
          <SunBurst size={180} color="#E8A830" rayColor="#1C1C1C" half/>
        </div>

        {/* Clouds */}
        <div className="cloud cloud-a" style={{ position: 'absolute', top: '16%', left: '8%' }}><Cloud w={130} opacity={0.95}/></div>
        <div className="cloud cloud-b" style={{ position: 'absolute', bottom: '18%', right: '10%' }}><Cloud w={100} opacity={0.85}/></div>

        {/* Paper planes */}
        <div className="paper-plane paper-plane-a" style={{ top: '20%', left: 0, '--tilt': '-8deg' }}>
          <PaperPlane size={60} color="#2B5BA8" shadow="#9BBDE3"/>
        </div>
        <div className="paper-plane paper-plane-b" style={{ top: '68%', left: 0, '--tilt': '6deg' }}>
          <PaperPlane size={50} color="#E8674A" shadow="#F4A48D"/>
        </div>

        {/* Floating chips */}
        <div className="hero-chip" style={{ top: '18%', left: '5%', animation: 'float-chip 6s ease-in-out infinite' }}>
          <span className="chip-ico" style={{ background: 'var(--blue)' }}>✈</span>
          SMF <span className="chip-arrow">→</span> JFK
        </div>
        <div className="hero-chip" style={{ top: '72%', right: '6%', animation: 'float-chip 7s ease-in-out infinite 1s' }}>
          <span className="chip-ico" style={{ background: 'var(--coral)' }}>✈</span>
          $189 · nonstop
        </div>
        <div className="hero-chip" style={{ bottom: '12%', left: '8%', animation: 'float-chip 5s ease-in-out infinite 0.5s' }}>
          Save 52% <span className="chip-arrow">↗</span>
        </div>

        <DashedPath style={{ top: '30%', left: '10%', width: '80%', height: '60px' }} d="M 0 30 Q 300 0 600 40 T 1100 20" color="#1C1C1C"/>

        {/* Cream overlay — dims scene so text reads clearly */}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(245, 240, 230, 0.45)', zIndex: 2, pointerEvents: 'none' }}/>
      </div>

      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="dot"></span>
          SMF · Sacramento Int'l
        </div>
        <h1 className="hero-headline" style={{marginBottom:'20px'}}>
          Deals that actually<br/>
          <span className="accent-coral">leave</span> Sacramento.
        </h1>
        <p style={{fontSize:'18px', color:'var(--ink-mid)', lineHeight:'1.6', marginBottom:'28px', maxWidth:'480px', marginLeft:'auto', marginRight:'auto'}}>
          Real deals from SMF, straight to your inbox. We find them — you book them.
        </p>
        <div className="hero-cta-wrap">
          <a href="pricing.html" className="hero-btn" style={{display:'inline-block', textDecoration:'none', marginTop:'16px'}}>
            Get Deal Alerts →
          </a>
          <p className="hero-caption">14-day free trial · Then $4.99/mo · Cancel anytime</p>
        </div>
      </div>
    </>
  );
}

// ─── Variant C: POSTCARD — single large paper plane with arcing contrail ───
function HeroPostcard() {
  React.useEffect(() => {
    const scene = document.querySelector('.hero-scene');
    if (!scene) return;
    function handleScroll() {
      scene.style.transform = `translateY(${window.scrollY * 0.4}px)`;
    }
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <>
      <div className="hero-scene" aria-hidden="true">
        {/* Gold sun top-right */}
        <div className="sun-pulse-wrap" style={{ position: 'absolute', right: '8%', top: '15%', animation: 'sun-pulse 7s ease-in-out infinite' }}>
          <SunBurst size={200} color="#F6D488" rayColor="#1C1C1C"/>
        </div>

        {/* Clouds, calmer arrangement */}
        <div className="cloud cloud-a" style={{ position: 'absolute', top: '22%', left: '10%' }}><Cloud w={200}/></div>
        <div className="cloud cloud-c" style={{ position: 'absolute', top: '70%', left: '60%' }}><Cloud w={160} opacity={0.82}/></div>
        <div className="cloud cloud-d" style={{ position: 'absolute', top: '48%', left: '2%' }}><Cloud w={80} opacity={0.7}/></div>

        {/* Long arcing dashed contrail */}
        <svg style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }} viewBox="0 0 1200 700" preserveAspectRatio="none" aria-hidden="true">
          <path d="M -50 550 Q 300 200 700 300 T 1250 150" stroke="#1C1C1C" strokeWidth="2" strokeDasharray="6 8" fill="none" strokeLinecap="round" opacity="0.45"/>
        </svg>

        {/* One big hero paper plane, slowly drifting */}
        <div className="paper-plane paper-plane-b" style={{ top: '38%', left: 0, '--tilt': '-12deg' }}>
          <PaperPlane size={110} color="#E8674A" shadow="#F4A48D"/>
        </div>

        <div className="hero-chip" style={{ top: '26%', left: '6%', animation: 'float-chip 6s ease-in-out infinite' }}>
          <span className="chip-ico" style={{ background: 'var(--gold)' }}>✦</span>
          New deal alert
        </div>

        {/* Cream overlay — dims scene so text reads clearly */}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(245, 240, 230, 0.45)', zIndex: 2, pointerEvents: 'none' }}/>
      </div>

      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="dot"></span>
          Curated · Low noise · SMF
        </div>
        <h1 className="hero-headline" style={{marginBottom:'20px'}}>
          Only the deals<br/>
          <span className="accent-coral">worth</span> <span className="underline">booking</span>.
        </h1>
        <p style={{fontSize:'18px', color:'var(--ink-mid)', lineHeight:'1.6', marginBottom:'28px', maxWidth:'480px', marginLeft:'auto', marginRight:'auto'}}>
          Real deals from SMF, straight to your inbox. We find them — you book them.
        </p>
        <div className="hero-cta-wrap">
          <a href="pricing.html" className="hero-btn" style={{display:'inline-block', textDecoration:'none', marginTop:'16px'}}>
            Get Deal Alerts →
          </a>
          <p className="hero-caption">14-day free trial · Then $4.99/mo · Cancel anytime</p>
        </div>
      </div>
    </>
  );
}

// Expose globally
Object.assign(window, { HeroSkyline, HeroEditorial, HeroPostcard, PaperPlane, Cloud, SunBurst });
