import React from "react";
import { Search } from "lucide-react";

export default function Banner() {
  return (
    <section className="relative">
      {/* Full-bleed hero image */}
      <div className="w-screen relative left-1/2 right-1/2 -translate-x-1/2">
        <img
          src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&h=750&q=80&auto=format&fit=crop"
          alt="Hero"
          className="h-[750px] w-full object-cover"
        />
      </div>

      {/* Content container below the hero (no login/register) */}
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            <div className="rounded-2xl bg-white p-6 shadow-sm dark:bg-neutral-900">
              <h2 className="text-3xl font-bold mb-2">Welcome to Next Fiber</h2>
              <p className="text-sm text-muted-foreground">Discover articles, projects and updates from the team. Explore our latest posts and tutorials.</p>
            </div>
          </div>

          <aside className="space-y-6">
            <div className="rounded-lg border bg-white p-4 shadow-sm dark:bg-neutral-900">
              <div className="relative flex items-center gap-2 rounded-md bg-gray-100 px-3 py-2">
                <Search className="size-4 text-gray-600" />
                <input placeholder="Write your keyword..." className="w-full bg-transparent outline-none text-sm" />
              </div>
            </div>

            <div className="rounded-lg border bg-white p-4 shadow-sm dark:bg-neutral-900">
              <h3 className="mb-3 font-semibold">Popular Posts</h3>
              <ul className="space-y-3">
                <li className="flex items-start gap-3">
                  <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&q=60&auto=format&fit=crop" className="h-12 w-12 rounded-full object-cover" />
                  <div>
                    <div className="text-sm font-medium">How Wireless Technology is Changing Business</div>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=80&q=60&auto=format&fit=crop" className="h-12 w-12 rounded-full object-cover" />
                  <div>
                    <div className="text-sm font-medium">Designing Faster Interfaces</div>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <img src="https://images.unsplash.com/photo-1503342452485-86f7f3f45e2b?w=80&q=60&auto=format&fit=crop" className="h-12 w-12 rounded-full object-cover" />
                  <div>
                    <div className="text-sm font-medium">Productivity Tips for Developers</div>
                  </div>
                </li>
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}