import React, { useState } from "react";

// Single-file React component (TailwindCSS classes)
// Default export so it can be previewed in the canvas.

export default function CyberEssentialsLanding() {
  const [form, setForm] = useState({ name: "", email: "", company: "", message: "" });
  const [sent, setSent] = useState(false);

  function handleChange(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    // Fallback: open mail client with prefilled message (no backend required)
    const subject = encodeURIComponent(`Cyber Essentials - Contact from ${form.name || form.company || "Website"}`);
    const body = encodeURIComponent(
      `Name: ${form.name}\nCompany: ${form.company}\nEmail: ${form.email}\n\nMessage:\n${form.message}`
    );
    window.location.href = `mailto:office@queensbury-it.uk?subject=${subject}&body=${body}`;
    setSent(true);
  }

  return (
    <div className="min-h-screen bg-gray-50 text-slate-900 antialiased">
      <header className="max-w-6xl mx-auto px-6 py-10 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Cyber Essentials Compliance</h1>
          <p className="text-sm text-slate-600">Helping UK businesses achieve Cyber Essentials certification fast and confidently</p>
        </div>
        <nav className="space-x-4 text-sm">
          <a href="#services" className="hover:underline">Services</a>
          <a href="#process" className="hover:underline">Process</a>
          <a href="#pricing" className="hover:underline">Pricing</a>
          <a href="#contact" className="font-semibold border border-slate-200 px-3 py-2 rounded hover:bg-slate-100">Get Started</a>
        </nav>
      </header>

      <main className="max-w-6xl mx-auto px-6">
        <section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center py-12">
          <div>
            <h2 className="text-4xl font-extrabold leading-tight">Get Cyber Essentials certified — without the headache</h2>
            <p className="mt-4 text-lg text-slate-700">I help small and medium businesses become compliant with Cyber Essentials, by combining practical security fixes, gap assessments and hands-on support through the certification process.</p>

            <ul className="mt-6 space-y-3">
              <li className="flex items-start gap-3">
                <svg className="w-6 h-6 flex-none" viewBox="0 0 24 24" fill="none" aria-hidden>
                  <path d="M5 12l4 4L19 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span><strong>Fast assessments</strong> — clear checklist and remediation plan within 3–5 working days.</span>
              </li>
              <li className="flex items-start gap-3">
                <svg className="w-6 h-6 flex-none" viewBox="0 0 24 24" fill="none" aria-hidden>
                  <path d="M12 20l9-5-9-5-9 5 9 5z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span><strong>Hands-on remediation</strong> — we implement or guide the fixes so you pass the external verification.</span>
              </li>
              <li className="flex items-start gap-3">
                <svg className="w-6 h-6 flex-none" viewBox="0 0 24 24" fill="none" aria-hidden>
                  <path d="M3 12h18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                </svg>
                <span><strong>Ongoing support</strong> — simple maintenance checklist and quarterly audits to keep certification current.</span>
              </li>
            </ul>

            <div className="mt-8 flex gap-4">
              <a href="#contact" className="inline-flex items-center justify-center px-6 py-3 bg-slate-900 text-white rounded shadow hover:opacity-95">Book a free 20‑minute call</a>
              <a href="#pricing" className="inline-flex items-center justify-center px-6 py-3 border rounded">View packages</a>
            </div>
          </div>

          <div className="bg-white border rounded-lg p-6 shadow-sm">
            <h3 className="text-xl font-semibold">Quick company snapshot</h3>
            <p className="mt-2 text-sm text-slate-600">Tell me a bit about your organisation and I'll reply with a clear next step—no salesy calls, just practical advice.</p>

            <form className="mt-4 space-y-3" onSubmit={handleSubmit}>
              <input name="name" value={form.name} onChange={handleChange} placeholder="Your name" className="w-full border rounded px-3 py-2" required />
              <input name="company" value={form.company} onChange={handleChange} placeholder="Company" className="w-full border rounded px-3 py-2" />
              <input name="email" value={form.email} onChange={handleChange} placeholder="Email" type="email" className="w-full border rounded px-3 py-2" required />
              <textarea name="message" value={form.message} onChange={handleChange} placeholder="A short note about your setup" className="w-full border rounded px-3 py-2" rows={4} />
              <div className="flex items-center justify-between">
                <button type="submit" className="px-4 py-2 bg-slate-900 text-white rounded">Send</button>
                {sent && <span className="text-sm text-green-600">Mail client opened — if it didn't, contact: <a href="mailto:you@yourdomain.com" className="underline">you@yourdomain.com</a></span>}
              </div>
            </form>
          </div>
        </section>

        <section id="services" className="py-8">
          <h3 className="text-2xl font-bold">Services</h3>
          <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-5 rounded-lg border shadow-sm">
              <h4 className="font-semibold">Assessment</h4>
              <p className="mt-2 text-sm text-slate-600">Full gap analysis against Cyber Essentials controls, evidence collection checklist and prioritized remediation plan.</p>
            </div>
            <div className="bg-white p-5 rounded-lg border shadow-sm">
              <h4 className="font-semibold">Remediation</h4>
              <p className="mt-2 text-sm text-slate-600">Hands-on fixes (or detailed how-to for your IT) for the most common failures: patching, firewall, access control and malware protection.</p>
            </div>
            <div className="bg-white p-5 rounded-lg border shadow-sm">
              <h4 className="font-semibold">Certification support</h4>
              <p className="mt-2 text-sm text-slate-600">We prepare your submission, liaise with the certifying body (if needed) and guide you through the verification step.</p>
            </div>
          </div>
        </section>

        <section id="process" className="py-8">
          <h3 className="text-2xl font-bold">Our simple 4‑step process</h3>
          <ol className="mt-6 space-y-4">
            <li className="bg-white p-4 rounded-lg border shadow-sm">
              <strong>1. Quick discovery call</strong> — 20 minutes to understand your estate and timeline.
            </li>
            <li className="bg-white p-4 rounded-lg border shadow-sm">
              <strong>2. Gap assessment</strong> — remote evidence collection and a remediation roadmap.
            </li>
            <li className="bg-white p-4 rounded-lg border shadow-sm">
              <strong>3. Fixes & verification</strong> — we implement or advise; then you complete the certification questionnaire.
            </li>
            <li className="bg-white p-4 rounded-lg border shadow-sm">
              <strong>4. Maintain</strong> — quarterly checks and an annual refresh so your certification stays valid.
            </li>
          </ol>
        </section>

        <section id="pricing" className="py-8">
          <h3 className="text-2xl font-bold">Packages</h3>
          <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="p-5 border rounded-lg bg-white shadow-sm">
              <h4 className="font-semibold">Starter</h4>
              <p className="text-3xl font-bold mt-3">£499</p>
              <p className="text-sm text-slate-600 mt-2">Assessment + guidance. Best for micro-businesses with simple setups.</p>
              <ul className="mt-3 text-sm space-y-1">
                <li>Gap report</li>
                <li>Remediation checklist</li>
              </ul>
              <div className="mt-4">
                <a href="#contact" className="inline-block px-4 py-2 border rounded">Choose</a>
              </div>
            </div>

            <div className="p-5 border rounded-lg bg-white shadow-sm">
              <h4 className="font-semibold">Standard</h4>
              <p className="text-3xl font-bold mt-3">£1,199</p>
              <p className="text-sm text-slate-600 mt-2">Assessment + remediation support. Ideal for organisations with 1–3 IT admins.</p>
              <ul className="mt-3 text-sm space-y-1">
                <li>All Starter features</li>
                <li>Remediation implementation (hours included)</li>
              </ul>
              <div className="mt-4">
                <a href="#contact" className="inline-block px-4 py-2 bg-slate-900 text-white rounded">Choose</a>
              </div>
            </div>

            <div className="p-5 border rounded-lg bg-white shadow-sm">
              <h4 className="font-semibold">Premium</h4>
              <p className="text-3xl font-bold mt-3">Custom</p>
              <p className="text-sm text-slate-600 mt-2">Full service for larger estates, managed remediation, and ongoing compliance support.</p>
              <ul className="mt-3 text-sm space-y-1">
                <li>Everything in Standard</li>
                <li>Quarterly maintenance checks</li>
              </ul>
              <div className="mt-4">
                <a href="#contact" className="inline-block px-4 py-2 border rounded">Get a quote</a>
              </div>
            </div>
          </div>
        </section>

         <section id="testimonials" className="py-8">
          <h3 className="text-2xl font-bold">What clients say</h3>
          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
            <blockquote className="bg-white p-5 rounded-lg border shadow-sm">
              <p className="italic">"They took the stress out of certification — we passed first time and their remediation notes were crystal clear."</p>
              <footer className="mt-3 text-sm text-slate-600">— Operations Director </footer>
            </blockquote>
            <blockquote className="bg-white p-5 rounded-lg border shadow-sm">
              <p className="italic">"Practical, no jargon and excellent follow up. Worth every penny."</p>
              <footer className="mt-3 text-sm text-slate-600">— IT Manager</footer>
            </blockquote>
          </div>
        </section>

        <section id="contact" className="py-8">
          <h3 className="text-2xl font-bold">Ready to get compliant?</h3>
          <p className="text-slate-600 mt-2">Book a free call or send a quick message — I'll reply within one working day.</p>

          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white p-6 border rounded-lg shadow-sm">
              <h4 className="font-semibold">Book a free call</h4>
              <p className="text-sm text-slate-600 mt-2">Use the contact form to request a time and I will confirm by email.</p>
            </div>

            <div className="bg-white p-6 border rounded-lg shadow-sm">
              <h4 className="font-semibold">Contact</h4>
              <p className="text-sm text-slate-600 mt-2">Email: <a href="mailto:office@queensbury-it.uk" className="underline">office@queensbury-it.uk</a></p>
             // <p className="text-sm text-slate-600">Phone: <a href="tel:+441234567890" className="underline">+44 1234 567 890</a></p>
            </div>
          </div>
        </section>

        <footer className="py-8 text-center text-sm text-slate-600">
          <div className="max-w-3xl mx-auto">© {new Date().getFullYear()} Queensbury IT Ltd — All rights reserved.</div>
        </footer>
      </main>
    </div>
  );
}