/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 07 2025 | 08:02:16 */
import React from "react";
import { motion } from "framer-motion";

export default function VinishKeysLanding() {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900 antialiased">
      {/* NAV */}
      <header className="bg-white shadow-sm">
        <div className="max-w-6xl mx-auto px-6 lg:px-8">
          <div className="flex items-center justify-between h-20">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-indigo-500 to-pink-500 flex items-center justify-center text-white font-bold">
                VK
              </div>
              <div>
                <h1 className="text-lg font-semibold">Vinish Keys</h1>
                <p className="text-xs text-gray-500">Piano · Keyboard · Music Lessons</p>
              </div>
            </div>

            <nav className="hidden md:flex items-center gap-6 text-sm">
              <a href="#classes" className="hover:text-indigo-600">Classes</a>
              <a href="#schedule" className="hover:text-indigo-600">Schedule</a>
              <a href="#pricing" className="hover:text-indigo-600">Pricing</a>
              <a href="#testimonials" className="hover:text-indigo-600">Testimonials</a>
              <a href="#contact" className="bg-indigo-600 text-white px-4 py-2 rounded-md shadow-sm text-sm">Enroll Now</a>
            </nav>

            <div className="md:hidden">
              <button className="p-2 rounded-md border">Menu</button>
            </div>
          </div>
        </div>
      </header>

      {/* HERO */}
      <section className="max-w-6xl mx-auto px-6 lg:px-8 py-12">
        <div className="grid lg:grid-cols-2 gap-10 items-center">
          <div>
            <motion.h2
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="text-3xl md:text-4xl font-extrabold leading-tight"
            >
              Learn Piano & Keyboard with
              <span className="text-indigo-600"> Vinish Keys</span>
            </motion.h2>

            <p className="mt-4 text-gray-600">Structured one-to-one classes, performance coaching, arrangement & composition guidance. Beginner to Advanced — online or offline.</p>

            <ul className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
              <li className="flex items-start gap-3">
                <span className="mt-1 text-indigo-600 font-semibold">•</span>
                <span>45 min classes · 1 class per week</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="mt-1 text-indigo-600 font-semibold">•</span>
                <span>₹4000 / month · Same renewal date</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="mt-1 text-indigo-600 font-semibold">•</span>
                <span>Bollywood · Western · Devotional · Classical</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="mt-1 text-indigo-600 font-semibold">•</span>
                <span>Chord progressions, ear training, performance prep</span>
              </li>
            </ul>

            <div className="mt-8 flex items-center gap-4">
              <a href="#contact" className="inline-block bg-indigo-600 text-white px-5 py-3 rounded-md shadow">Book a Trial</a>
              <a href="#pricing" className="inline-block text-sm text-indigo-600">View Pricing</a>
            </div>
          </div>

          <div className="relative">
            <div className="w-full aspect-[19/9] bg-gradient-to-br from-indigo-100 to-pink-50 rounded-xl shadow-lg flex items-center justify-center">
              <div className="text-center">
                <div className="text-6xl font-extrabold">🎹</div>
                <p className="mt-2 text-sm text-gray-500">Vinish Keys — 19:9 banner preview</p>
              </div>
            </div>

            <div className="mt-4 grid grid-cols-3 gap-3 text-xs">
              <div className="p-3 bg-white rounded-md shadow">One-on-one</div>
              <div className="p-3 bg-white rounded-md shadow">Performance</div>
              <div className="p-3 bg-white rounded-md shadow">Certificate</div>
            </div>
          </div>
        </div>
      </section>

      {/* CLASSES */}
      <section id="classes" className="bg-white py-10">
        <div className="max-w-6xl mx-auto px-6 lg:px-8">
          <h3 className="text-2xl font-semibold">Classes & Curriculum</h3>
          <p className="mt-2 text-gray-600">A modular curriculum for fast progress — pick single topics or a complete track.</p>

          <div className="mt-6 grid md:grid-cols-3 gap-6">
            <div className="p-6 rounded-2xl border">
              <h4 className="font-semibold">Beginner</h4>
              <p className="mt-2 text-sm text-gray-600">Basics, posture, simple tunes, right-hand melody.</p>
              <ul className="mt-4 text-sm space-y-1">
                <li>Notes & fingering</li>
                <li>Simple chords</li>
                <li>Rhythm & timing</li>
              </ul>
            </div>

            <div className="p-6 rounded-2xl border">
              <h4 className="font-semibold">Intermediate</h4>
              <p className="mt-2 text-sm text-gray-600">Chord progressions, left-hand accompaniment, song arrangement.</p>
              <ul className="mt-4 text-sm space-y-1">
                <li>Chord voicings</li>
                <li>Transposition</li>
                <li>Ear training</li>
              </ul>
            </div>

            <div className="p-6 rounded-2xl border">
              <h4 className="font-semibold">Advanced</h4>
              <p className="mt-2 text-sm text-gray-600">Styling, improvisation, composition, stage prep.</p>
              <ul className="mt-4 text-sm space-y-1">
                <li>Arrangement & production tips</li>
                <li>Live performance coaching</li>
                <li>Harmony & reharmonization</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* SCHEDULE */}
      <section id="schedule" className="py-10">
        <div className="max-w-6xl mx-auto px-6 lg:px-8">
          <h3 className="text-2xl font-semibold">Schedule & Class Flow</h3>
          <p className="mt-2 text-gray-600">Each 45-min session follows a structure to maximize learning.</p>

          <div className="mt-6 grid md:grid-cols-3 gap-4 text-sm">
            <div className="p-4 bg-white rounded-lg shadow-sm">
              <h5 className="font-semibold">Warm-up (5–7 min)</h5>
              <p className="mt-2 text-gray-600">Scales, finger exercises, tempo checks.</p>
            </div>
            <div className="p-4 bg-white rounded-lg shadow-sm">
              <h5 className="font-semibold">Core Lesson (25–30 min)</h5>
              <p className="mt-2 text-gray-600">New technique, chords, or song sections.</p>
            </div>
            <div className="p-4 bg-white rounded-lg shadow-sm">
              <h5 className="font-semibold">Practice Plan & Wrap-up (8–10 min)</h5>
              <p className="mt-2 text-gray-600">Homework, metronome targets, next-class goals.</p>
            </div>
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section id="pricing" className="bg-gradient-to-b from-white to-indigo-50 py-12">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <h3 className="text-2xl font-semibold text-center">Pricing</h3>
          <p className="text-center mt-2 text-gray-600">Simple monthly plan — consistent progress, clear commitments.</p>

          <div className="mt-8 grid md:grid-cols-2 gap-6">
            <div className="p-6 rounded-2xl bg-white border shadow-sm">
              <h4 className="text-lg font-semibold">Standard</h4>
              <p className="mt-1 text-sm text-gray-600">1 class per week · 45 minutes</p>
              <div className="mt-4 text-3xl font-bold">₹4000<span className="text-sm font-medium"> / month</span></div>
              <ul className="mt-4 text-sm space-y-2">
                <li>Fixed monthly renewal date</li>
                <li>Missed classes are not carried forward</li>
                <li>Teacher-provided replacement for teacher absence</li>
              </ul>
              <a href="#contact" className="mt-6 inline-block bg-indigo-600 text-white px-4 py-2 rounded-md">Enroll</a>
            </div>

            <div className="p-6 rounded-2xl bg-white border shadow-sm">
              <h4 className="text-lg font-semibold">Custom</h4>
              <p className="mt-1 text-sm text-gray-600">Flexible schedule, multiple classes per week.</p>
              <div className="mt-4 text-2xl font-semibold">Contact for pricing</div>
              <ul className="mt-4 text-sm space-y-2">
                <li>Group rates available</li>
                <li>Arrangement & composition coaching (extra)</li>
                <li>Performance preparation</li>
              </ul>
              <a href="#contact" className="mt-6 inline-block border px-4 py-2 rounded-md">Request Quote</a>
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section id="testimonials" className="py-12">
        <div className="max-w-6xl mx-auto px-6 lg:px-8">
          <h3 className="text-2xl font-semibold">Student Stories</h3>
          <div className="mt-6 grid md:grid-cols-3 gap-6">
            <div className="p-4 bg-white rounded-lg shadow-sm">
              <p className="text-sm">“Vinish helped me prepare for my first stage performance. Clear lessons and great practice plans.”</p>
              <div className="mt-3 text-xs text-gray-500">— Priya</div>
            </div>
            <div className="p-4 bg-white rounded-lg shadow-sm">
              <p className="text-sm">“I learned chords and how to play songs by ear in just a few months.”</p>
              <div className="mt-3 text-xs text-gray-500">— Raj</div>
            </div>
            <div className="p-4 bg-white rounded-lg shadow-sm">
              <p className="text-sm">“Helpful for composers — arrangement tips are excellent.”</p>
              <div className="mt-3 text-xs text-gray-500">— Anjali</div>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACT / ENROLL FORM */}
      <section id="contact" className="bg-white py-12">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <h3 className="text-2xl font-semibold">Contact & Enrollment</h3>
          <p className="mt-2 text-gray-600">Fill this quick form or WhatsApp to start a trial class.</p>

          <div className="mt-6 grid md:grid-cols-2 gap-6">
            <form className="space-y-4">
              <input className="w-full p-3 border rounded-md" placeholder="Full name" />
              <input className="w-full p-3 border rounded-md" placeholder="Phone / WhatsApp" />
              <input className="w-full p-3 border rounded-md" placeholder="Email (optional)" />
              <select className="w-full p-3 border rounded-md">
                <option>Preferred class time</option>
                <option>Weekday (Evening)</option>
                <option>Weekend (Afternoon)</option>
              </select>
              <textarea className="w-full p-3 border rounded-md" placeholder="Tell us your goals (e.g. stage, hobby, composition)"></textarea>
              <div className="flex gap-3">
                <button type="button" className="bg-indigo-600 text-white px-4 py-2 rounded-md">Submit</button>
                <a href="https://wa.me/919999999999" target="_blank" rel="noreferrer" className="inline-flex items-center px-4 py-2 border rounded-md">Message on WhatsApp</a>
              </div>
            </form>

            <div className="p-6 rounded-lg bg-indigo-50">
              <h4 className="font-semibold">Quick Info</h4>
              <ul className="mt-4 text-sm space-y-2">
                <li><strong>Instructor:</strong> Vinish Patel</li>
                <li><strong>Monthly Fee:</strong> ₹4000</li>
                <li><strong>Class length:</strong> 45 minutes</li>
                <li><strong>Renewal:</strong> Same date every month</li>
                <li><strong>Policy:</strong> Missed student classes are not carried forward</li>
              </ul>

              <div className="mt-6">
                <a href="#pricing" className="inline-block bg-indigo-600 text-white px-4 py-2 rounded-md">Enroll Now</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-gray-900 text-gray-200 py-8">
        <div className="max-w-6xl mx-auto px-6 lg:px-8 flex flex-col md:flex-row justify-between gap-6">
          <div>
            <h5 className="font-semibold">Vinish Keys</h5>
            <p className="text-sm mt-2">Piano & keyboard coaching. For booking: WhatsApp.</p>
          </div>

          <div className="text-sm">
            <div>© {new Date().getFullYear()} Vinish Keys</div>
            <div className="mt-2">Contact: +91 99999 99999</div>
            <div className="mt-2">Email: vinish@example.com</div>
          </div>
        </div>
      </footer>
    </div>
  );
}