Homeimport React, { useState } from "react";
<p className="text-sm text-gray-600 mt-2">When logged in, clients see submission status, deliverables, and a chat. Designers get an internal workspace with flags and export buttons.</p>


<div className="mt-6 grid md:grid-cols-2 gap-6">
<div className="p-6 bg-white rounded shadow">
<h5 className="font-semibold">Client view</h5>
<ol className="mt-2 text-sm text-gray-600 list-decimal ml-5">
<li>List of submissions and status</li>
<li>Download deliverables</li>
<li>Schedule calls (Calendly)</li>
</ol>
</div>
<div className="p-6 bg-white rounded shadow">
<h5 className="font-semibold">Designer view</h5>
<ol className="mt-2 text-sm text-gray-600 list-decimal ml-5">
<li>AI checklist and annotated photos</li>
<li>Mark structural flags / request DWG</li>
<li>Build PDF & send</li>
</ol>
</div>
</div>
</section>


{/* Footer with quick links */}
<footer className="bg-white border-t mt-12">
<div className="max-w-6xl mx-auto px-6 py-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
<div>
<h4 className="font-semibold">Fireflyland</h4>
<p className="text-sm text-gray-600 mt-2">Affordable renovation guidance — fast, expert, online</p>
</div>
<div className="flex gap-6">
<a href="#" className="text-sm text-gray-600">Privacy</a>
<a href="#" className="text-sm text-gray-600">Terms</a>
<a href="#" className="text-sm text-gray-600">Contact</a>
</div>
</div>
</footer>
</main>


{/* AI Assistant Modal (simple demo) */}
{showAssistant && (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center p-6 z-50">
<div className="w-full max-w-2xl bg-white rounded-lg shadow-lg overflow-hidden">
<div className="p-4 flex items-center justify-between border-b">
<h4 className="font-semibold">AI Intake Assistant</h4>
<button onClick={() => setShowAssistant(false)} className="p-2">✕</button>
</div>
<div className="p-6 grid md:grid-cols-2 gap-6">
<div>
<p className="text-sm text-gray-700">I’ll ask a few quick questions so we can give an accurate difficulty score and healthy-home plan. Ready?</p>
<ol className="mt-4 list-decimal ml-5 text-sm text-gray-600">
<li>Upload 3–6 photos (use the Typeform link below)</li>
<li>What do you want changed? (layout, replace floor, open wall, rewire lighting, other)</li>
<li>Budget (choose range)</li>
<li>Timeline (ASAP / 1–3 / 3–6 / flexible)</li>
<li>Permits? (yes / no / don’t know)</li>
<li>Any moisture/asbestos/visible damage? (yes / no)</li>
</ol>


<div className="mt-6 flex gap-3">
<a href={TYPEFORM_URL} target="_blank" rel="noreferrer" className="px-4 py-2 bg-gray-100 rounded">Open intake form</a>
<a href={CALENDLY_URL} target="_blank" rel="noreferrer" className="px-4 py-2 bg-yellow-500 text-white rounded">Schedule 30-min call</a>
</div>
</div>


<div>
<h5 className="font-semibold">Quick demo: sample prompts</h5>
<div className="mt-3 p-4 bg-gray-50 rounded text-sm text-gray-700">
<strong>Upload photos → Ask:</strong>
<p className="mt-2">"Thanks! Can you tell me what you want changed in this room?" (layout / replace floor / open wall / rewire lighting / other)</p>
<p className="mt-2">"Do you have any visible moisture, asbestos, or damage?" (yes / no)</p>
<p className="mt-2">Offer: "Would you like to schedule a 30-min video call to confirm?" (Calendly)</p>
</div>


<div className="mt-4">
<p className="text-xs text-gray-500">Note: This is a demo of the AI intake flow. The live version runs the intake through your Typeform, triggers Zapier to call OpenAI for preliminary scoring, and stores results in Airtable.</p>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
}