import React from 'react';
import {
  Fader,
  FlatKnob,
  LEDFader,
  LEDKnob,
  MetalKnob,
  NeonKnob,
  RubberKnob,
  SteppedKnob,
  VintageKnob,
} from 'dreamknob';

export const Hero: React.FC = () => {
  const [copied, setCopied] = React.useState(false);
  return (
    <header className="hero">
      <div className="container">
        <h1>
          Knobs that feel like <span className="grad">hardware.</span>
        </h1>
        <p className="tagline">
          <b>dreamknob</b> is a feature-full React + TypeScript knob &amp; fader library.
          Rotary, linear, 2D, 3D, digital and analog — with a headless core, any number
          range, any decimal precision, and colors you fully control.
        </p>
        <div className="install">
          <span>pnpm add dreamknob</span>
          <button
            onClick={() => {
              navigator.clipboard.writeText('pnpm add dreamknob');
              setCopied(true);
              setTimeout(() => setCopied(false), 1400);
            }}
          >
            {copied ? '✓' : 'copy'}
          </button>
        </div>

        <div className="rack">
          <div className="rack-screws">
            <span /><span /><span /><span />
          </div>
          <div className="rack-row">
            <MetalKnob size={96} label="Gain" defaultValue={64} color="#4cc2ff" aria-label="Gain" />
            <VintageKnob size={96} label="Drive" defaultValue={7} min={0} max={10} step={0.1} aria-label="Drive" />
            <RubberKnob size={96} label="Cutoff" defaultValue={72} color="#ff9640" aria-label="Cutoff" />
            <LEDKnob size={96} label="Rate" defaultValue={120} min={40} max={240} step={1} color="#3df2ad" aria-label="Rate" />
            <NeonKnob size={96} label="Space" defaultValue={35} color="#e44cff" aria-label="Space" />
            <SteppedKnob size={96} label="Mode" positions={['LP', 'BP', 'HP', 'NT']} defaultValue={0} aria-label="Mode" />
            <FlatKnob size={96} label="Mix" defaultValue={50} unit="%" step={1} arcFrom="center" aria-label="Mix" />
            <Fader length={128} breadth={40} label="Out" defaultValue={-6} min={-60} max={12} step={0.5} unit=" dB" aria-label="Output level" />
            <LEDFader
              length={128}
              label="Level"
              defaultValue={70}
              step={1}
              zones={[
                { upTo: 0.6, color: '#3df2ad' },
                { upTo: 0.85, color: '#ffd23e' },
                { upTo: 1, color: '#ff4d6b' },
              ]}
              aria-label="Level meter"
            />
          </div>
          <div className="rack-hint">
            drag to rotate · scroll to nudge · <kbd>⇧</kbd>+scroll for fine control ·
            double-click to reset · arrow keys work too
          </div>
        </div>
      </div>
    </header>
  );
};