// Final CTA section + marquee strip.

function MarqueeStrip() {
  const words = ['FLAC', 'ALAC', 'Lossless', 'Local‑first', '24/192', 'Gapless', '5‑band parametric', 'Liquid glass', 'Zero telemetry', 'Free forever'];
  const track = (
    <span>
      {words.map((w,i) => (
        <React.Fragment key={i}>
          <span style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic' }}>{w}</span>
          <span className="sep">◆</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">{track}{track}</div>
    </div>
  );
}

function CTASection() {
  return (
    <section id="download" className="final-cta">
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
        <div className="orb orb-anim" style={{ width: 700, height: 700, top: -120, left: '-10%', background: 'radial-gradient(circle, #F0B895 0%, transparent 60%)' }}/>
        <div className="orb orb-anim" style={{ width: 760, height: 760, bottom: -160, right: '-10%', background: 'radial-gradient(circle, #D58E90 0%, transparent 60%)', animationDelay: '-9s' }}/>
        <div className="orb orb-anim" style={{ width: 500, height: 500, top: 100, right: '30%', background: 'radial-gradient(circle, #C799B8 0%, transparent 60%)', animationDelay: '-14s' }}/>
      </div>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="pill" style={{ marginBottom: 28 }}><span className="pill-dot"/> FREE · NO ACCOUNT · OPEN SOURCE</div>
        <h2>Press play.<br/><em>That's the whole app.</em></h2>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="/apps/Lumyna/release-notes.html" className="btn btn-primary btn-lg">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M9.8 7.4c0-1.3.7-2.2 1.7-2.8-.5-.8-1.3-1.3-2.3-1.4-1-.1-2 .6-2.5.6-.5 0-1.4-.6-2.3-.6-1.2 0-2.3.7-2.9 1.8-1.3 2.2-.3 5.4 1 7.2.6.9 1.3 1.8 2.3 1.8.9 0 1.3-.6 2.4-.6 1.1 0 1.4.6 2.4.6 1 0 1.6-.9 2.2-1.8.7-1 1-2 1-2.1 0 0-1.9-.7-1.9-2.7zM8.1 2c.5-.6.8-1.4.7-2.2-.7 0-1.5.5-2 1.1-.4.5-.8 1.3-.7 2.1.8.1 1.5-.4 2-1z"/></svg>
            Download for macOS
          </a>
          <a href="/apps/Lumyna/release-notes.html#ios" className="btn btn-primary btn-lg">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1h.9c.1.8-.3 1.6-.7 2.1-.5.5-1.3.8-2 .7-.1-.8.3-1.5.7-2 .5-.4 1.2-.7 1.9-.8zm2.2 3.7c1.2.1 2.1.6 2.7 1.3-1.2.7-1 2.2-.9 2.5.2 1.1 1 1.7 1.5 1.9-.4 1.1-.9 2.2-1.7 3.1-.6.7-1.3 1.4-2.3 1.4-1 0-1.3-.6-2.4-.6-1.1 0-1.5.6-2.5.6-1 0-1.7-.9-2.3-1.6C.3 12-.4 8.9.8 7c.6-.9 1.6-1.5 2.7-1.6.9 0 1.8.6 2.3.6.5 0 1.6-.7 2.7-.6.4 0 1.5.2 2.2 1.3-.1 0-1.4.6-1.3 2z"/></svg>
            Get on App Store
          </a>
          <a href="/apps/Lumyna/open.html#github" className="btn btn-ghost btn-lg">
            View on GitHub
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 3h6v6M9 3L3 9"/></svg>
          </a>
        </div>
        <div style={{ marginTop: 40, fontSize: 13, color: 'var(--ink-3)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.1 }}>
          V1.0 — RELEASED APRIL 2026 · MACOS 14+ · IOS 17+
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    {
      h: 'Product',
      items: [
        { label: 'Library', href: '/apps/Lumyna/preview/12-row-library.html' },
        { label: 'DSP', href: '/apps/Lumyna/ui_kits/website/landing/index.html#dsp' },
        { label: 'Now Playing', href: '/apps/Lumyna/ui_kits/website/landing/index.html#now-playing' },
        { label: 'Visualizer', href: '/apps/Lumyna/preview/15-aurora.html' },
        { label: 'Release notes', href: '/apps/Lumyna/release-notes.html' },
      ],
    },
    {
      h: 'Support',
      items: [
        { label: 'Keyboard shortcuts', href: '/apps/Lumyna/ui_kits/ios/index.html' },
        { label: 'Import guide', href: '/apps/Lumyna/ui_kits/website/index.html' },
        { label: 'FAQ', href: '/apps/Lumyna/support.html#faq' },
        { label: 'Contact', href: '/apps/Lumyna/support.html#contact' },
      ],
    },
    {
      h: 'Open',
      items: [
        { label: 'GitHub', href: '/apps/Lumyna/open.html#github' },
        { label: 'License', href: '/apps/Lumyna/open.html#license' },
        { label: 'Acknowledgements', href: '/apps/Lumyna/open.html#acknowledgements' },
        { label: 'Press kit', href: '/apps/Lumyna/ui_kits/website/index.html' },
      ],
    },
    {
      h: 'Legal',
      items: [
        { label: 'Privacy', href: '/legal/site-privacy.html' },
        { label: 'Terms', href: '/legal/' },
        { label: 'About the team', href: '/apps/Lumyna/preview/17-voice.html' },
      ],
    },
  ];
  return (
    <footer>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 32, marginBottom: 56 }}>
          <div>
            <div className="logo" style={{ marginBottom: 14 }}>
              <div className="logo-mark"></div>
              <span style={{ fontSize: 18 }}>Lumyna</span>
            </div>
            <p style={{ fontSize: 13.5, maxWidth: 260, color: 'var(--ink-3)' }}>
              A distraction‑free music player for the songs you own. Built with care in Vancouver.
            </p>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{c.h}</div>
              {c.items.map(i => (
                <div key={i.label} style={{ padding: '5px 0' }}><a href={i.href}>{i.label}</a></div>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: 0.1 }}>
            © 2026 LUMYNA AUDIO · ALL RIGHTS RESERVED
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: 0.1 }}>
            MADE FOR APPLE SILICON · NOT AFFILIATED WITH APPLE INC.
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { MarqueeStrip, CTASection, Footer });