import React from "react";

interface HeroSectionProps {
  className?: string;
  children?: React.ReactNode;
}

export default function HeroSection(props: HeroSectionProps) {
  return (
    <>
      <section className="hero-container bg-slate-900 text-white py-16 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-semibold mb-6">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
            </svg>
            <span>Next.js 16 & React 19 Ready</span>
          </div>
          <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight mb-4">
            Convert HTML to <span className="text-indigo-400">Production React JSX</span>
          </h1>
          <p className="text-slate-300 text-base sm:text-lg max-w-2xl mx-auto mb-8">
            Instantly transform static HTML markup into clean, TypeScript-safe React components with automated attribute mapping and inline style objects.
          </p>
          <div className="flex items-center justify-center gap-3">
            <button type="button" className="px-6 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 font-semibold shadow-md transition-colors">
              Get Started
            </button>
            <a href="#docs" className="px-6 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-medium transition-colors">
              Documentation
            </a>
          </div>
        </div>
      </section>
    </>
  );
}