Bouw je eerste AI-werknemer

Je bent een senior webdesigner en front-end developer. Bouw een verzorgde bedrijfswebsite met als ster een werkende chatbot-widget: de AI-medewerker van het bedrijf. Lever één zelfstandig HTML-bestand op met alle CSS en JavaScript inline, zonder externe afhankelijkheden behalve Google Fonts.

BEDRIJF (vervang dit blok door de gegevens van jouw klant):
· Naam: Groenendal Hoveniers, tuinontwerp, aanleg en onderhoud in Ede en omgeving
· Openingstijden: ma t/m vr 8.00 tot 17.00, za op afspraak
· Diensten met vanaf-indicaties: tuinontwerp vanaf 450 euro, aanleg op maat, onderhoudsabonnement vanaf 89 euro per maand
· Toon: groen, vakkundig, vriendelijk

DE WEBSITE: hero met belofte · drie diensten · werkwijze in drie stappen · drie projecten of ervaringen · contact · footer. Verzorgd maar rustig: de chatbot is de hoofdrolspeler.

DE CHATBOT (het hart van de demo):
· Ronde chatknop rechtsonder. Na een paar seconden verschijnt een kleine wegklikbare teaser-bubble: "Vraag het onze AI-medewerker".
· De chat opent als een premium paneel (op mobiel volledig scherm) met een begroeting, vier of vijf voorgestelde vraag-chips en een vrij tekstveld.
· Client-side brein op trefwoorden, met alle kennis in één datastructuur bovenin het script: openingstijden, diensten en prijsindicaties, werkgebied, doorlooptijd, en de afspraakroute.
· Vraagt iemand om een afspraak of offerte, dan opent ín de chat een mini-formulier: naam, telefoonnummer en keuze uit drie vrije momenten, gevolgd door een nette bevestiging met samenvatting.
· Typing-indicator met een korte natuurlijke vertraging. Onbekende vragen krijgen een vriendelijke fallback met doorverwijzing.
· De chatgeschiedenis blijft staan zolang de pagina open is.

STIJL: eigen identiteit passend bij het bedrijf (voor een hovenier: diep groen met warm licht), premium typografie, subtiele beweging. De chatbot-widget oogt als een professioneel product, niet als een speeltje.

TECHNIEK-EISEN:
· Eén HTML-bestand, alle CSS en JS inline. Geen frameworks.
· Volledig responsive, ook op 375 pixels breed, zonder horizontale scroll.
· Respecteer prefers-reduced-motion.
· Nederlandse teksten. Bedragen heten indicatie, nooit offerte.
· Telefoonnummer met netnummer 012 (bestaat niet, veilig voor demo's).