import React from 'react';
import { AdvancedGuide } from './sections/AdvancedGuide';
import { ApiDocs } from './sections/ApiDocs';
import { Console } from './sections/Console';
import { Gallery } from './sections/Gallery';
import { GettingStarted } from './sections/GettingStarted';
import { Hero } from './sections/Hero';
import { Playground } from './sections/Playground';
import { Synth } from './sections/Synth';

const Logo: React.FC = () => (
  <svg width="22" height="22" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="42" fill="#18191f" stroke="#4cc2ff" strokeWidth="7" />
    <line x1="50" y1="50" x2="50" y2="15" stroke="#4cc2ff" strokeWidth="9" strokeLinecap="round" />
  </svg>
);

export const App: React.FC = () => (
  <>
    <nav className="nav">
      <div className="container nav-inner">
        <a className="nav-logo" href="#">
          <Logo />
          dreamknob
        </a>
        <div className="nav-links">
          <a href="#start">Start</a>
          <a href="#gallery">Gallery</a>
          <a href="#synth">Synth</a>
          <a href="#playground">Playground</a>
          <a href="#guide">Guide</a>
          <a href="#docs">Docs</a>
        </div>
      </div>
    </nav>
    <Hero />
    <GettingStarted />
    <Gallery />
    <Console />
    <Synth />
    <Playground />
    <AdvancedGuide />
    <ApiDocs />
    <footer className="footer">
      <div className="container">
        dreamknob · MIT · built with a headless core, SVG and zero runtime dependencies
      </div>
    </footer>
  </>
);
