import React from "react"; export default function KiwiJSWebsite() { return (
<div
  className="min-h-screen bg-gradient-to-b from-sky-50 to-white text-slate-900"
>
  <header className="max-w-6xl mx-auto p-6 flex items-center justify-between">
    <div className="flex items-center gap-4">
      <div
        className="w-12 h-12 rounded-lg bg-emerald-500 text-white flex items-center justify-center font-bold"
      >
        K
      </div>
      <div>
        <h1 className="text-2xl font-extrabold">Kiwi.js</h1>
        <p className="text-sm text-slate-600">
          A tiny, elegant JavaScript utility for building interactive UI
          primitives
        </p>
      </div>
    </div>
    <nav className="hidden md:flex gap-6 text-sm text-slate-700">
      <a href="https://kiwijs.org/bosswin168" className="hover:underline">Install</a>
      <a href="https://kiwijs.org/bosswin168" className="hover:underline">Quickstart</a>
      <a href="https://kiwijs.org/bosswin168" className="hover:underline">API</a>
      <a href="https://kiwijs.org/bosswin168" className="hover:underline">Examples</a>
            <a href="https://kiwijs.org/bosswin168" className="hover:underline">bosswin168</a>
    </nav>
  </header>

  <main className="max-w-6xl mx-auto px-6 pb-24">
    <section className="mt-6 bg-white rounded-2xl shadow p-8">
      <h2 className="text-3xl font-bold">
        What is <span className="text-emerald-600">Kiwi.js</span>?
      </h2>
      <p className="mt-4 text-slate-700 leading-relaxed">
        Kiwi.js is a small, dependency-free JavaScript library focused on
        creating responsive UI primitives — tooltips, dropdowns, accessible
        modals, and tiny stateful behaviors — with an ergonomic API and
        predictable behavior. It aims to be tiny (under 4kb gzipped),
        framework-agnostic, and easy to reason about.
      </p>

      <div className="mt-6 grid md:grid-cols-3 gap-4">
        <div className="p-4 border rounded-lg">
          <h3 className="font-semibold">Tiny</h3>
          <p className="text-sm text-slate-600">
            Optimized for size and performance; no dependencies.
          </p>
        </div>
        <div className="p-4 border rounded-lg">
          <h3 className="font-semibold">Accessible</h3>
          <p className="text-sm text-slate-600">
            ARIA-friendly defaults and keyboard interactions built-in.
          </p>
        </div>
        <div className="p-4 border rounded-lg">
          <h3 className="font-semibold">Framework-agnostic</h3>
          <p className="text-sm text-slate-600">
            Works with plain JS, React, Vue, Svelte, or server-side rendered
            pages.
          </p>
        </div>
      </div>
    </section>

    <section id="install" className="mt-8 bg-white rounded-2xl shadow p-8">
      <h3 className="text-2xl font-bold">Install</h3>
      <p className="mt-3 text-slate-700">Pick one of the options below:</p>
      <div className="mt-4 grid md:grid-cols-2 gap-4">
        <div className="p-4 border rounded">
          <h4 className="font-semibold">NPM</h4>
          <pre
            className="bg-slate-900 text-white rounded mt-3 p-3 text-sm overflow-auto"
          >
npm install kiwi-js</pre
          >
        </div>
        <div className="p-4 border rounded">
          <h4 className="font-semibold">CDN</h4>
          <pre
            className="bg-slate-900 text-white rounded mt-3 p-3 text-sm overflow-auto"
          >
&lt;script src="https://cdn.example.com/kiwi.min.js"&gt;&lt;/script&gt;</pre
          >
        </div>
      </div>
    </section>

    <section id="quickstart" className="mt-8 bg-white rounded-2xl shadow p-8">
      <h3 className="text-2xl font-bold">Quickstart</h3>
      <p className="mt-3 text-slate-700">
        Example: Initialize a tooltip and a dropdown with minimal code.
      </p>

      <div className="mt-4 grid md:grid-cols-2 gap-6">
        <div className="p-4 bg-slate-50 rounded">
          <h4 className="font-medium">HTML</h4>
          <pre
            className="bg-white rounded mt-3 p-3 text-sm overflow-auto border"
          >{`<button id="tip-btn" aria-describedby="tip">Hover me</button>
<span role="tooltip" id="tip" hidden>Tooltip content</span>

<div class="dropdown">
  <button id="menu-btn">Menu</button>
  <div role="menu" id="menu" hidden>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>`}</pre>
        </div>

        <div className="p-4 bg-slate-50 rounded">
          <h4 className="font-medium">JavaScript</h4>
          <pre
            className="bg-white rounded mt-3 p-3 text-sm overflow-auto border"
          >
{`import { Tooltip, Dropdown } from 'kiwi-js'

Tooltip.attach('#tip-btn', '#tip')
Dropdown.attach('#menu-btn', '#menu')`}</pre
          >
        </div>
      </div>

      <p className="mt-4 text-slate-600">
        Kiwi exposes simple helpers like <code>attach()</code> that take a
        toggler and a target element and handle ARIA attributes, keyboard
        navigation, and focus management for you.
      </p>
    </section>

    <section id="api" className="mt-8 bg-white rounded-2xl shadow p-8">
      <h3 className="text-2xl font-bold">API</h3>
      <div className="mt-4 grid md:grid-cols-2 gap-4">
        <div className="p-4 border rounded">
          <h4 className="font-semibold">Tooltip</h4>
          <ul className="list-disc pl-5 mt-2 text-slate-700 text-sm">
            <li>
              <code
                >Tooltip.attach(togglerSelector, targetSelector, options)</code
              >
            </li>
            <li>Options: <code>{"{placement:'top',delay:100}</code></li>
          </ul>
        </div>
      </div>
    </section>
  </main>
</div>