import { createFileRoute } from "@tanstack/react-router";

const pageStyles = `
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a;--surface:#141414;--border:#262626;--text:#fafafa;--muted:#a1a1aa;
  --primary:#ff5500;--primary-glow:#ff7a33;--gradient:linear-gradient(135deg,#ff5500,#ff7a33);
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
h1,h2,h3,h4{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;line-height:1.2}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
nav{position:sticky;top:0;background:rgba(10,10,10,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;max-width:1100px;margin:0 auto;flex-wrap:wrap;gap:1rem}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:1.5rem;list-style:none;flex-wrap:wrap}
.nav-links a{color:var(--muted);font-size:.95rem}
.nav-links a:hover{color:var(--text);text-decoration:none}
.breadcrumb{padding:1rem 0;font-size:.85rem;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.breadcrumb span{margin:0 .5rem}
.hero{padding:4rem 0 5rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(255,85,0,.15),transparent 70%);pointer-events:none}
.badge{display:inline-block;padding:.4rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:var(--muted);margin-bottom:2rem}
.hero h1{font-size:clamp(2.25rem,5vw,3.75rem);margin-bottom:1.25rem}
.gradient-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p.lead{font-size:1.125rem;color:var(--muted);max-width:38rem;margin:0 auto 2.5rem}
form.dl-form{display:flex;flex-wrap:wrap;gap:.75rem;max-width:42rem;margin:0 auto;position:relative}
form.dl-form input[type=url]{flex:1;min-width:240px;height:3.5rem;padding:0 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;color:var(--text);font-size:1rem;font-family:inherit}
form.dl-form input[type=url]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,85,0,.2)}
form.dl-form button{height:3.5rem;padding:0 2rem;background:var(--gradient);color:#fff;border:none;border-radius:.75rem;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 8px 24px rgba(255,85,0,.35);transition:opacity .2s}
form.dl-form button:hover{opacity:.92}
.form-note{margin-top:1rem;font-size:.85rem;color:var(--muted)}
section{padding:4rem 0}
section h2{font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:1rem;text-align:center}
section .sub{color:var(--muted);text-align:center;max-width:40rem;margin:0 auto 3rem}
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1.75rem}
.card h3{font-size:1.15rem;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.95rem}
.card .num{display:inline-flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;background:var(--gradient);border-radius:.6rem;font-weight:700;margin-bottom:1rem;color:#fff}
.compare{overflow-x:auto;margin-top:2rem}
.compare table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:1rem;overflow:hidden;border:1px solid var(--border)}
.compare th,.compare td{padding:1rem 1.25rem;text-align:left;border-bottom:1px solid var(--border);font-size:.95rem}
.compare th{background:#1c1c1c;font-family:'Space Grotesk',sans-serif;color:var(--text)}
.compare td:first-child{font-weight:500}
.compare .yes{color:#4ade80;font-weight:600}
.compare .no{color:#ef4444}
.long-content{max-width:48rem;margin:0 auto}
.long-content h3{margin-top:2rem;margin-bottom:.75rem;font-size:1.35rem}
.long-content p{color:var(--muted);margin-bottom:1rem}
.long-content ul{color:var(--muted);margin:1rem 0 1rem 1.5rem}
.long-content li{margin-bottom:.4rem}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;margin-bottom:.75rem;padding:1.25rem 1.5rem}
.faq summary{cursor:pointer;font-weight:500;font-family:'Space Grotesk',sans-serif;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:'+';color:var(--primary);font-size:1.5rem;font-weight:300}
.faq details[open] summary::after{content:'\\u2212'}
.faq details p{color:var(--muted);margin-top:.75rem}
.tools-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tools-grid a{display:block;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;color:var(--text);text-align:center}
.tools-grid a:hover{border-color:var(--primary);text-decoration:none}
.tools-grid a span{display:block;color:var(--muted);font-size:.8rem;margin-top:.25rem}
footer{background:var(--surface);border-top:1px solid var(--border);padding:3rem 0 2rem;margin-top:4rem}
.footer-inner{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.footer-col h4{margin-bottom:1rem;font-size:1rem}
.footer-col p{color:var(--muted);font-size:.9rem;max-width:18rem}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-links a{color:var(--muted);font-size:.9rem}
.footer-bottom{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:.85rem}
@media (max-width:600px){
  .hero{padding:3rem 0 4rem}
  section{padding:3rem 0}
  .nav-links{gap:.9rem}
  .nav-links a{font-size:.85rem}
}
`;

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "SoundCloud to MP3 Downloader - Free SoundCloud MP3 Converter" },
      {
        name: "description",
        content:
          "Free SoundCloud downloader. Convert SoundCloud songs to MP3 in seconds. Restricted tracks fall back to YouTube via RapidAPI. No signup, no JavaScript required.",
      },
      {
        name: "keywords",
        content:
          "soundcloud to mp3, download soundcloud songs, soundcloud mp3 converter, free soundcloud downloader, rapidapi youtube mp3",
      },
      { property: "og:type", content: "website" },
      { property: "og:title", content: "SoundCloud to MP3 Downloader - Free MP3 Converter" },
      {
        property: "og:description",
        content:
          "Convert SoundCloud songs to MP3 in seconds. YouTube fallback powered by RapidAPI. Free, fast, no signup.",
      },
      { property: "og:url", content: "/" },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:title", content: "SoundCloud to MP3 Downloader - Free" },
      {
        name: "twitter:description",
        content: "Convert SoundCloud songs to MP3 instantly. RapidAPI fallback for restricted tracks.",
      },
    ],
    links: [
      { rel: "canonical", href: "/" },
      { rel: "preconnect", href: "https://fonts.googleapis.com" },
      { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=DM+Sans:wght@400;500&display=swap",
      },
    ],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "WebApplication",
          name: "SoundCloud to MP3 Downloader",
          description: "Free online tool to convert SoundCloud songs to MP3 with RapidAPI YouTube fallback.",
          applicationCategory: "MultimediaApplication",
          operatingSystem: "Any",
          offers: { "@type": "Offer", price: "0", priceCurrency: "USD" },
        }),
      },
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: [
            {
              "@type": "Question",
              name: "Is this SoundCloud downloader free?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "Yes, our SoundCloud to MP3 converter is 100% free with no signup required.",
              },
            },
            {
              "@type": "Question",
              name: "Do I need JavaScript to download SoundCloud songs?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "No. This tool works with pure HTML - no JavaScript required.",
              },
            },
            {
              "@type": "Question",
              name: "What audio quality do I get?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "You get high-quality 128kbps MP3 files, the maximum quality SoundCloud streams publicly.",
              },
            },
            {
              "@type": "Question",
              name: "Is it legal to download SoundCloud songs?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "Downloading is legal for personal use of tracks where the artist has enabled public streaming.",
              },
            },
          ],
        }),
      },
    ],
  }),
  component: Index,
});

function Index() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: pageStyles }} />

      <nav>
        <div className="nav-inner">
          <div className="logo">SC Downloader</div>
          <ul className="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#downloader">SoundCloud to MP3</a></li>
            <li><a href="#tools">Playlist Downloader</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#faq">FAQ</a></li>
          </ul>
        </div>
      </nav>

      <div className="container">
        <nav className="breadcrumb" aria-label="Breadcrumb">
          <a href="/">Home</a><span>›</span>SoundCloud to MP3
        </nav>
      </div>

      <header className="hero" id="downloader">
        <div className="container">
          <div className="badge">⚡ RapidAPI-Powered YouTube Fallback</div>
          <h1>
            SoundCloud to MP3 <span className="gradient-text">Downloader</span>
          </h1>
          <p className="lead">
            Convert SoundCloud songs to MP3 in seconds. If a track is restricted, we
            search YouTube via Piped/Invidious and convert the exact-duration match
            using RapidAPI's youtube-mp36 — all automatically.
          </p>
          <form className="dl-form" action="/api/public/download" method="get">
            <input
              type="url"
              name="url"
              placeholder="https://soundcloud.com/artist/track-name"
              required
              aria-label="SoundCloud track URL"
            />
            <button type="submit">Download MP3</button>
          </form>
          <p className="form-note">
            Paste any public SoundCloud track URL above. Restricted tracks fall back to a
            RapidAPI-converted YouTube MP3 with matching duration.
          </p>
        </div>
      </header>

      <section>
        <div className="container">
          <h2>How to Download SoundCloud Songs</h2>
          <p className="sub">
            Three simple steps to convert any SoundCloud track to MP3 — no software install, no
            signup.
          </p>
          <div className="grid">
            <div className="card">
              <div className="num">1</div>
              <h3>Copy the SoundCloud URL</h3>
              <p>Open SoundCloud, find the track you want, and copy its URL from the address bar.</p>
            </div>
            <div className="card">
              <div className="num">2</div>
              <h3>Paste in the box</h3>
              <p>Paste the SoundCloud link into the input field at the top of this page.</p>
            </div>
            <div className="card">
              <div className="num">3</div>
              <h3>Click Download MP3</h3>
              <p>Hit the button. Your browser will start downloading the MP3 file automatically.</p>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <h2>Why Use Our Free SoundCloud Downloader</h2>
          <p className="sub">
            Built to be the fastest, simplest, and most accessible SoundCloud MP3 converter on the
            web.
          </p>
          <div className="grid">
            <div className="card"><h3>⚡ Zero JavaScript</h3><p>Works on any browser, even with JS disabled. Pure HTML form — accessible, fast, secure.</p></div>
            <div className="card"><h3>🎵 High Quality MP3</h3><p>Get 128 kbps MP3 files — the maximum quality SoundCloud streams publicly.</p></div>
            <div className="card"><h3>🆓 Always Free</h3><p>No signup, no subscription, no hidden fees. Download as many SoundCloud songs as you want.</p></div>
            <div className="card"><h3>🔒 Privacy First</h3><p>We don't store your downloads or track your activity. The URL goes in, the MP3 comes out.</p></div>
            <div className="card"><h3>📱 Any Device</h3><p>Works on phones, tablets, laptops, desktops. Any OS, any modern browser.</p></div>
            <div className="card"><h3>🚀 RapidAPI Fallback</h3><p>Restricted SoundCloud tracks are matched on YouTube by exact duration and converted via RapidAPI.</p></div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <h2>Best SoundCloud Downloader vs Other Tools</h2>
          <p className="sub">
            See how our free SoundCloud to MP3 converter compares to popular alternatives.
          </p>
          <div className="compare">
            <table>
              <thead>
                <tr><th>Feature</th><th>Our Tool</th><th>Other Online Tools</th><th>Browser Extensions</th></tr>
              </thead>
              <tbody>
                <tr><td>Free to use</td><td className="yes">✓ Yes</td><td className="yes">✓ Yes</td><td className="no">✗ Often paid</td></tr>
                <tr><td>No signup needed</td><td className="yes">✓ Yes</td><td className="no">✗ Often required</td><td className="no">✗ Account needed</td></tr>
                <tr><td>Works without JavaScript</td><td className="yes">✓ Yes</td><td className="no">✗ No</td><td className="no">✗ No</td></tr>
                <tr><td>No ads or popups</td><td className="yes">✓ Yes</td><td className="no">✗ Many ads</td><td className="yes">✓ Sometimes</td></tr>
                <tr><td>MP3 format</td><td className="yes">✓ 128 kbps</td><td className="yes">✓ Yes</td><td className="yes">✓ Yes</td></tr>
                <tr><td>Mobile friendly</td><td className="yes">✓ Yes</td><td className="yes">✓ Mostly</td><td className="no">✗ Desktop only</td></tr>
                <tr><td>Works on any browser</td><td className="yes">✓ Yes</td><td className="yes">✓ Most</td><td className="no">✗ Chrome/Firefox only</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section>
        <div className="container long-content">
          <h2>Everything You Need to Know About SoundCloud Downloaders</h2>
          <h3>What is a SoundCloud Downloader?</h3>
          <p>
            A SoundCloud downloader is an online tool that lets you save SoundCloud tracks as MP3
            audio files to your device. SoundCloud is one of the world's largest music streaming
            platforms, hosting over 320 million tracks from independent artists, remixers,
            podcasters, and DJs. A free SoundCloud to MP3 converter like ours lets you save
            publicly streamable tracks as portable MP3 files you can listen to offline.
          </p>
          <h3>How Does Our SoundCloud MP3 Converter Work?</h3>
          <p>
            When you paste a SoundCloud URL into our form and click "Download MP3", your browser
            submits the link to our backend server. The server resolves the track, locates the
            highest-quality public MP3 stream, downloads the audio, and streams the MP3 file back
            to your browser as a download.
          </p>
          <h3>Benefits of Downloading SoundCloud Songs to MP3</h3>
          <ul>
            <li><strong>Listen offline:</strong> Save tracks for flights, commutes, or anywhere with poor reception.</li>
            <li><strong>Save mobile data:</strong> Downloaded MP3s play with zero data usage.</li>
            <li><strong>Use in projects:</strong> DJs, video editors, and creators need local audio files.</li>
            <li><strong>Build a personal collection:</strong> Keep a permanent library of tracks you love.</li>
            <li><strong>Universal compatibility:</strong> MP3 plays on virtually every device on Earth.</li>
          </ul>
          <h3>Legal Considerations</h3>
          <p>
            The legality of downloading SoundCloud songs depends on copyright law in your country.
            Downloading a track for personal, non-commercial offline listening generally falls
            under fair use. Don't redistribute, sell, or use downloaded tracks commercially
            without the artist's permission.
          </p>
        </div>
      </section>

      <section id="tools">
        <div className="container">
          <h2>Explore More Tools</h2>
          <p className="sub">Free audio and video downloaders for every platform.</p>
          <div className="tools-grid">
            <a href="#downloader">SoundCloud to MP3<span>Single tracks</span></a>
            <a href="#">SoundCloud Playlist Downloader<span>Coming soon</span></a>
            <a href="#downloader">SoundCloud MP3 Converter<span>High quality</span></a>
            <a href="#downloader">Free SoundCloud Downloader<span>No signup</span></a>
            <a href="#downloader">Download SoundCloud Songs<span>Instant MP3</span></a>
            <a href="#downloader">SoundCloud Audio Extractor<span>One-click</span></a>
          </div>
        </div>
      </section>

      <section id="faq" className="faq">
        <div className="container" style={{ maxWidth: "48rem" }}>
          <h2>Frequently Asked Questions</h2>
          <p className="sub">Answers to common questions about our SoundCloud MP3 converter.</p>

          <details>
            <summary>Is this SoundCloud downloader really free?</summary>
            <p>Yes. 100% free, no signup, no subscription, no hidden costs.</p>
          </details>
          <details>
            <summary>Do I need JavaScript to download SoundCloud songs?</summary>
            <p>No. The form submits directly to our server, which streams the MP3 back to your browser. No JS required.</p>
          </details>
          <details>
            <summary>What audio quality do I get?</summary>
            <p>You get 128 kbps MP3 files, which is the maximum quality SoundCloud streams publicly.</p>
          </details>
          <details>
            <summary>Can I download SoundCloud playlists?</summary>
            <p>Currently single tracks only. Playlist support is on the roadmap.</p>
          </details>
          <details>
            <summary>Why do some tracks fail to download?</summary>
            <p>Private, region-locked, or disabled streams fall back to YouTube. We only use a match with the exact same duration, powered by RapidAPI.</p>
          </details>
          <details>
            <summary>Is it legal to download SoundCloud songs?</summary>
            <p>Downloading for personal offline listening is generally fine. Don't redistribute commercially.</p>
          </details>
          <details>
            <summary>Does this work on iPhone and Android?</summary>
            <p>Yes. Works on any device with a modern browser.</p>
          </details>
          <details>
            <summary>Do you store the songs I download?</summary>
            <p>No. We don't keep a copy, log the URL, or track who downloaded what.</p>
          </details>
        </div>
      </section>

      <footer>
        <div className="container">
          <div className="footer-inner">
            <div className="footer-col">
              <h4>SC Downloader</h4>
              <p>The best free SoundCloud to MP3 converter. Download SoundCloud songs instantly with zero JavaScript.</p>
            </div>
            <div className="footer-col">
              <h4>Links</h4>
              <div className="footer-links">
                <a href="#">Home</a>
                <a href="#downloader">Downloader</a>
                <a href="#faq">FAQ</a>
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Service</a>
                <a href="#">Contact</a>
              </div>
            </div>
          </div>
          <div className="footer-bottom">© 2026 SC Downloader. Not affiliated with SoundCloud Limited.</div>
        </div>
      </footer>
    </>
  );
}