import React from "react";
<h3 className="text-2xl font-bold">Frequently asked questions</h3>
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
<FAQ q="Do I need to make repairs?" a="No — we buy as-is." />
<FAQ q="Will you charge me a fee?" a="No commissions or hidden fees." />
<FAQ q="How fast can you close?" a="We can close in as little as 7 days, or on your timeline." />
<FAQ q="Is there any obligation?" a="No — offers are free and carry no obligation." />
</div>
</div>
</section>


{/* Contact / Lead form */}
<section id="contact" className="py-12">
<div className="max-w-4xl mx-auto px-6 bg-gradient-to-b from-white to-indigo-50 rounded-xl p-8 shadow">
<h3 className="text-2xl font-bold">Get your free cash offer</h3>
<p className="text-sm text-slate-600 mt-2">Fill the form or call us at <a href={`tel:${COMPANY.phone}`} className="text-emerald-600">{COMPANY.phone}</a></p>


<ContactForm />
</div>
</section>
</main>


<footer className="bg-slate-900 text-white py-8 mt-12">
<div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
<div>
<div className="font-semibold">{COMPANY.name}</div>
<div className="text-sm text-slate-400">© {new Date().getFullYear()} {COMPANY.name}. All rights reserved.</div>
</div>


<div className="text-sm text-slate-400">Designed for fast home purchases • <a href="#contact" className="text-white underline">Contact</a></div>
</div>
</footer>
</div>
);
}


function Step({ number, title, desc }) {
return (
<div className="p-6 border rounded-lg bg-white">
<div className="rounded-full bg-emerald-600 text-white w-10 h-10 flex items-center justify-center font-semibold">{number}</div>
<h4 className="mt-4 font-semibold">{title}</h4>
<p className="text-sm text-slate-600 mt-2">{desc}</p>
</div>
);
}


function FAQ({ q, a }) {
return (
<div className="p-4 border rounded-lg bg-white">
<div className="font-medium">{q}</div>
<div className="text-sm text-slate-600 mt-2">{a}</div>
</div>
);
}


function ContactForm() {
// This form uses a mailto fallback. For a production site, swap to a server endpoint or form service like Formspree / Netlify Forms.
const mailto = `mailto:hello@example.com?subject=Home%20Offer%20Request&body=Name:%0APhone:%0AAddress:%0ANotes:`;


return (
<form className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4" onSubmit={(e) => e.preventDefault()}>
<input name="name" placeholder="Your name" className="p-3 rounded-md border" />
<input name="phone" placeholder="Phone" className="p-3 rounded-md border" />
<input name="address" placeholder="Property address" className="p-3 rounded-md border md:col-span-2" />
<textarea name="notes" placeholder="Notes (optional)" className="p-3 rounded-md border md:col-span-2" rows={4} />


<div className="md:col-span-2 flex gap-3 items-center">
<a href={mailto} className="inline-block rounded-md bg-emerald-600 px-5 py-3 text-white">Send by email</a>
<button type="button" onClick={() => alert('Demo: form would be submitted to server or Formspree in production.')} className="rounded-md border px-4 py-2">Submit (demo)</button>
<div className="text-sm text-slate-500">Or call <a href={`tel:${COMPANY.phone}`} className="text-emerald-600">{COMPANY.phone}</a></div>
</div>
</form>
);
}