// DownloadCTA.jsx — final download CTA + footer
// Supports two palettes via `variant` prop: 'dark' (original) | 'light' (lavender fade)

const DownloadCTA = ({ variant = 'dark' }) => {
  const isDark = variant === 'dark';

  const sectionBg = isDark
    ? 'var(--ink)'
    : 'linear-gradient(180deg, var(--bg) 0%, #EEEAF5 55%, #F7F5FF 100%)';
  const radialGlow = isDark
    ? 'radial-gradient(60% 80% at 50% 100%, rgba(107,61,232,0.35), transparent 70%)'
    : 'radial-gradient(60% 80% at 50% 100%, rgba(107,61,232,0.18), transparent 70%)';
  const textMain = isDark ? 'white' : 'var(--ink)';
  const textSub = isDark ? 'rgba(255,255,255,0.6)' : 'var(--ink-3)';
  const accentEm = isDark ? 'var(--accent-2)' : 'var(--accent)';
  const watermarkOpacity = isDark ? 0.07 : 0.06;
  const watermarkFilter = isDark ? 'brightness(0) invert(1)' : 'none';
  const marqueeMask = 'linear-gradient(90deg, transparent, black 15%, black 85%, transparent)';

  // "Coming soon" chip + marquee text — different tones per variant
  const chipBg = isDark ? 'rgba(107,61,232,0.18)' : 'rgba(107,61,232,0.10)';
  const chipBorder = isDark ? '1px solid rgba(155,122,240,0.4)' : '1px solid rgba(107,61,232,0.22)';
  const chipTextPrimary = isDark ? '#fff' : 'var(--accent-ink)';
  const chipTextSecondary = isDark ? 'rgba(255,255,255,0.6)' : 'var(--ink-3)';
  const marqueeCityColor = isDark ? 'rgba(255,255,255,0.35)' : 'var(--ink-3)';
  const marqueeTeamColor = isDark ? 'rgba(255,255,255,0.55)' : 'var(--ink-3)';

  return (
    <section id="download" style={{
      padding: '180px 0 100px',
      background: sectionBg,
      color: isDark ? 'var(--bg)' : 'var(--ink)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: radialGlow,
      }}/>
      {/* big logo watermark — sits above the headline as a masthead */}
      <img src="assets/logo.png" alt="" aria-hidden="true" className="sc-cta-watermark" style={{
        position: 'absolute', top: 60, left: '50%',
        transform: 'translateX(-50%)',
        width: '26%', maxWidth: 380,
        opacity: isDark ? 0.22 : 1,
        pointerEvents: 'none', userSelect: 'none',
        filter: watermarkFilter,
      }}/>

      <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
        <h2 className="display" style={{ fontSize: 'clamp(40px, 5.4vw, 72px)', margin: 0, color: textMain, maxWidth: 780, marginInline: 'auto', lineHeight: 1.02 }}>
          Join for the tickets.<br/>
          Stay for <em style={{ color: accentEm }}>the fans</em>.
        </h2>
        <p style={{ fontSize: 18, color: textSub, marginTop: 20, maxWidth: 560, marginInline: 'auto', lineHeight: 1.55 }}>
          Live on the App Store — Android coming soon to Google Play. All fans welcome. The Raiders marketplace is up first.
          As more fans of your team join, your marketplace and hub unlock next.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 40, justifyContent: 'center', flexWrap: 'wrap' }}>
          <AppStoreBadge variant="apple"/>
          <AppStoreBadge variant="play"/>
        </div>

        {/* Tagline — the thesis in one line */}
        <div style={{ marginTop: 44, display: 'flex', justifyContent: 'center', padding: '0 24px' }}>
          <div style={{
            textAlign: 'center', maxWidth: 680,
          }}>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(24px, 3.2vw, 34px)',
              fontWeight: 500,
              lineHeight: 1.2,
              letterSpacing: '-0.02em',
              color: chipTextPrimary,
            }}>
              Finally — <em style={{
                fontStyle: 'italic',
                color: isDark ? 'var(--accent-2)' : 'var(--accent)',
              }}>a place built for sports fans.</em>
            </div>
            <div className="sc-cta-taglist" style={{
              marginTop: 10,
              fontSize: 12, fontFamily: 'var(--font-mono)',
              textTransform: 'uppercase', letterSpacing: '0.22em',
              color: chipTextSecondary, fontWeight: 600,
            }}>
              Social marketplace · Fan-to-fan · No fees
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Social icons — real brand marks where distinctive, simple geometric where not.
// All inline SVG, 18px, designed for a purple outline pill.
const SocialIcon = ({ name, size = 18 }) => {
  // Filled marks (using currentColor so they inherit the pill's stroke color)
  const filled = {
    instagram: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
        <rect x="3" y="3" width="18" height="18" rx="5"/>
        <circle cx="12" cy="12" r="4"/>
        <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/>
      </svg>
    ),
    // Real X mark — two crossing diagonals forming an X glyph
    x: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M17.53 3H20.5l-6.49 7.41L22 21h-6.16l-4.82-6.3L5.5 21H2.5l6.95-7.93L2 3h6.32l4.36 5.77L17.53 3Zm-1.08 16.2h1.65L7.6 4.7H5.83L16.45 19.2Z"/>
      </svg>
    ),
    // Real TikTok note mark
    tiktok: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M16.5 3h-2.8v12.2a2.7 2.7 0 1 1-2.7-2.7c.3 0 .5 0 .7.1v-2.9a5.6 5.6 0 1 0 4.8 5.5V8.8a6.8 6.8 0 0 0 4 1.3V7.3a4 4 0 0 1-4-4.3Z"/>
      </svg>
    ),
    // Real Discord wordmark icon
    discord: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M19.5 5.2A16.6 16.6 0 0 0 15.4 4l-.2.3a11 11 0 0 1 3.6 1.7 11.4 11.4 0 0 0-11.6 0A11 11 0 0 1 10.9 4.3L10.7 4a16.5 16.5 0 0 0-4.2 1.2A17.5 17.5 0 0 0 3.4 17a16.7 16.7 0 0 0 5 2.5l.4-.6a11 11 0 0 1-1.7-.8l.3-.2a11.8 11.8 0 0 0 10.2 0l.3.2a11 11 0 0 1-1.7.8l.4.6a16.7 16.7 0 0 0 5-2.5 17.4 17.4 0 0 0-3.2-11.9ZM9.5 15c-1 0-1.9-.9-1.9-2.1s.8-2.1 1.9-2.1 1.9.9 1.9 2.1S10.5 15 9.5 15Zm5 0c-1 0-1.9-.9-1.9-2.1s.8-2.1 1.9-2.1 1.9.9 1.9 2.1-.8 2.1-1.9 2.1Z"/>
      </svg>
    ),
    // Real YouTube mark — rounded rectangle with play triangle
    youtube: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M21.6 7.2c-.2-.9-.9-1.6-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4c-.9.2-1.6.9-1.8 1.8C2 8.8 2 12 2 12s0 3.2.4 4.8c.2.9.9 1.6 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4c.9-.2 1.6-.9 1.8-1.8.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8ZM10 15V9l5.2 3L10 15Z"/>
      </svg>
    ),
    // Real Facebook "f" mark
    facebook: (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M13.5 21v-8h2.7l.4-3.2h-3.1V7.8c0-.9.3-1.6 1.6-1.6h1.7V3.4a24 24 0 0 0-2.5-.1c-2.5 0-4.2 1.5-4.2 4.3v2.2H7.4V13h2.7v8h3.4Z"/>
      </svg>
    ),
  };
  return filled[name] || null;
};

const SOCIALS = [
  { name: 'instagram', href: 'https://www.instagram.com/seatconnect/', label: 'Instagram' },
  { name: 'x', href: 'https://x.com/SeatConnect', label: 'X' },
  { name: 'tiktok', href: 'https://www.tiktok.com/@seat_connect', label: 'TikTok' },
  { name: 'discord', href: 'https://discord.com/channels/1438661427329110138/1438661427929026695', label: 'Discord' },
  { name: 'facebook', href: 'https://www.facebook.com/profile.php?id=61558222952739', label: 'Facebook' },
];

const Footer = ({ variant = 'dark' }) => {
  const isDark = variant === 'dark';

  const bg = isDark ? 'var(--ink)' : '#F7F5FF';
  const borderTop = isDark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(10,8,30,0.06)';
  const bodyText = isDark ? 'var(--bg)' : 'var(--ink)';
  const sublineColor = isDark ? 'rgba(255,255,255,0.55)' : 'var(--ink-3)';
  const headingColor = isDark ? 'rgba(255,255,255,0.45)' : 'var(--ink-3)';
  const dividerColor = isDark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(10,8,30,0.06)';
  const copyrightColor = isDark ? 'rgba(255,255,255,0.45)' : 'var(--ink-3)';
  const accentColor = '#9D7CFF';  // lighter lavender that reads well on dark
  const emailAccent = isDark ? '#B9A1FF' : 'var(--accent)';

  const logoCardBg = isDark ? '#fff' : 'transparent';
  const logoCardPad = isDark ? '8px 14px' : 0;

  return (
    <footer style={{ background: bg, color: bodyText, padding: '72px 0 32px', borderTop }}>
      <div className="container">
        {/* Top row: brand | follow along | questions — all in line */}
        <div className="sc-footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr 1fr',
          gap: 40,
          marginBottom: 48,
          alignItems: 'start',
        }}>
          {/* Brand column — left */}
          <div className="sc-footer-brand">
            <div style={{
              display: 'inline-flex', alignItems: 'center',
              padding: logoCardPad, borderRadius: 12,
              background: logoCardBg,
            }}>
              <img src="assets/logo.png" alt="SeatConnect" style={{ height: 13, display: 'block' }}/>
            </div>
            <p style={{ color: sublineColor, fontSize: 13, marginTop: 16, maxWidth: 300, lineHeight: 1.6 }}>
              The fan-to-fan ticket marketplace. Join for the tickets. Stay for the fans.
            </p>
          </div>

          {/* Follow along — center */}
          <div style={{ textAlign: 'center' }}>
            <div style={{
              fontSize: 10, fontFamily: 'var(--font-mono)', textTransform: 'uppercase',
              letterSpacing: '0.2em', color: headingColor, marginBottom: 16, fontWeight: 600,
            }}>Follow along</div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center' }}>
              {SOCIALS.map(s => (
                <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer"
                  aria-label={s.label}
                  style={{
                    width: 36, height: 36, borderRadius: 999,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    background: 'transparent',
                    border: `1.5px solid ${accentColor}`,
                    color: accentColor,
                    textDecoration: 'none',
                    transition: 'background 0.18s ease, color 0.18s ease, transform 0.18s ease',
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background = accentColor;
                    e.currentTarget.style.color = isDark ? '#0A080F' : '#fff';
                    e.currentTarget.style.transform = 'translateY(-2px)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.background = 'transparent';
                    e.currentTarget.style.color = accentColor;
                    e.currentTarget.style.transform = 'none';
                  }}
                >
                  <SocialIcon name={s.name} size={15} />
                </a>
              ))}
            </div>
          </div>

          {/* Questions column — right */}
          <div className="sc-footer-questions" style={{ textAlign: 'right' }}>
            <div style={{
              fontSize: 10, fontFamily: 'var(--font-mono)', textTransform: 'uppercase',
              letterSpacing: '0.2em', color: headingColor, marginBottom: 16, fontWeight: 600,
            }}>Questions?</div>
            <p style={{ color: sublineColor, fontSize: 13, marginBottom: 12, lineHeight: 1.55, maxWidth: 300, marginLeft: 'auto' }}>
              Feel free to reach out any time with questions, comments, or concerns.
            </p>
            <a href="mailto:support@seatconnect.com" style={{
              color: emailAccent, fontSize: 14, fontWeight: 600, textDecoration: 'none',
              borderBottom: `1px solid ${emailAccent}`, paddingBottom: 2,
            }}>support@seatconnect.com</a>
          </div>
        </div>

        {/* Bottom bar: copyright · legal · disclaimer */}
        <div className="sc-footer-bottom" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 20, paddingTop: 24, borderTop: dividerColor,
          color: copyrightColor, fontSize: 13,
        }}>
          <div className="sc-footer-legal" style={{ display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
            <div>© 2026 SeatConnect, Inc. <span style={{ opacity: 0.5, fontFamily: 'var(--font-mono)', fontSize: 11, marginLeft: 8 }}>build r16</span></div>
            <a href="https://www.seatconnect.com/privacy-policy/privacy-policy" target="_blank" rel="noopener noreferrer"
              style={{ color: copyrightColor, textDecoration: 'none', borderBottom: `1px solid ${isDark ? 'rgba(255,255,255,0.18)' : 'rgba(10,8,30,0.18)'}`, paddingBottom: 1 }}
            >Privacy</a>
            <a href="https://www.seatconnect.com/collection/termsandconditionsandeula" target="_blank" rel="noopener noreferrer"
              style={{ color: copyrightColor, textDecoration: 'none', borderBottom: `1px solid ${isDark ? 'rgba(255,255,255,0.18)' : 'rgba(10,8,30,0.18)'}`, paddingBottom: 1 }}
            >Terms</a>
          </div>
          <div className="sc-footer-disclaimer" style={{ fontSize: 12, color: copyrightColor, maxWidth: 480, textAlign: 'right', lineHeight: 1.55 }}>
            SeatConnect is an independent fan-to-fan marketplace and is not affiliated with, endorsed by, or sponsored by any professional sports league, team, or venue.
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { DownloadCTA, Footer, SocialIcon });