# Technical Implementation: AutoBooking Landing Page

Build a high-conversion B2B SaaS landing page for 'AutoBooking' using React, Vite, Tailwind CSS, and shadcn/ui components. The design must follow a 'Logistics/Healthcare' theme: operational, robust, and secure.

## Design Tokens (CSS Variables)
Apply these exact HEX values to your Tailwind config/globals.css:
- `--color-primary`: #191919 (Hero bg, nav, dark sections)
- `--color-primary-mid`: #2C2C2C (Hovers)
- `--color-text-primary`: #191919 (Headings on light bg)
- `--color-text-secondary`: #535353 (Body text)
- `--color-muted`: #8A8680 (Labels/captions)
- `--color-background`: #FFFFFF (Main background)
- `--color-surface`: #F5F4F2 (Card backgrounds)
- `--color-border`: #E2E0DC (Dividers)
- `--color-accent`: #D97B2A (CTAs, stat highlights)
- `--color-accent-hover`: #B85F14
- `--color-accent-light`: #FBF0E4
- `--color-success`: #2D6A4F

**Typography Constraints:**
- Style: Sans-serif.
- H1: Extra Bold (800), 56-72px, -0.025em tracking.
- H2: 36-44px, -0.01em tracking.
- Body: 16-18px, 1.7 line-height.
- Labels: 11-13px uppercase, +0.10em letter-spacing.
- **Design constraints:** AAA contrast for primary text. Accent button text (#FFFFFF on #D97B2A) must be 18px+ and bold to meet AA standards.

## Section 1: Hero (Animated)
- **Layout:** Full-viewport, background: `--color-primary`, text: white.
- **Headline Animation:** Implement a character-by-character typewriter effect for the rotating part.
  - Static Prefix: "AI Auto-Booking: Turn Every Request Into a "
  - Rotating Words: ["Confirmed Slot", "Revenue Source", "Resource Lock", "Direct Booking"]
  - Static Suffix: " 24/7"
  - Timing: 80ms per char typing, 1800ms pause when full, 50ms per char deleting. Cursor (|) blinks at 530ms (hidden during pause).
- **Subheadline:** "A multichannel AI-agent microservice that automates the full booking cycle across voice, chat, and UI—directly into your TMS, WMS, or ERP system."
- **CTAs:** 
  - Primary: "Request a Pilot" (Accent color)
  - Soft: "View Demo UI" (Outline style)

## Section 2: Problem (Stat Grid)
- **Background:** `--color-background`.
- **Grid:** 4 cards.
- **Interaction:** Stat values animate counting up from zero on scroll entry.
  - Card 1: Value: "Manual", Label: "Coordination Chaos", Context: "Dispatchers waste hours on phones, email, and Excel, leading to double bookings and idle dock slots."
  - Card 2: Value: "30%", Label: "Revenue Leakage", Context: "Up to 30% of medical and transport inquiries are lost because bookings aren't available outside office hours."
  - Card 3: Value: "Hours", Label: "Waiting Time", Context: "Drivers wait for hours at checkpoints because time-slot scheduling is still handled manually by phone."
  - Card 4: Value: "Linear", Label: "Scaling Constraints", Context: "Back-office costs grow linearly with volume, making it impossible to scale without massive hiring."

## Section 3: Solution (Alternating Features)
- **Intro:** "AutoBooking is an AI-powered engine that automates the entire scheduling cycle: from parsing unstructured requests via voice or chat to checking availability and executing the final booking in your backend. It works in real-time, supports any language, and integrates seamlessly with your existing infrastructure."
- **Rows (Alternate Left/Right):**
  - 1: "Multichannel by Design" - "A single core handles Voice (SIP), Chat, and UI forms, providing a unified booking experience across all customer touchpoints."
  - 2: "Adapter-Based Architecture" - "Connect to any LLM provider or run local models on-premises to ensure total data privacy for regulated industries."
  - 3: "Autonomous Execution" - "The system doesn't just 'talk'—it validates capacity, locks slots against double-booking, and generates immediate confirmations."

## Section 4: How It Works (Step Flow)
- **Steps:**
  1. Trigger: A booking request arrives via voice, chat message, or UI form.
  2. Parsing: AI extracts parameters (date, time, resource) into a structured JSON.
  3. Availability: The engine checks your TMS/WMS for real-time slot capacity.
  4. Confirmation: The booking is executed in your system and confirmed to the client.
- **Layout:** Horizontal flow with connecting lines on desktop, vertical stack on mobile.

## Section 5: Benefits (Stat Grid)
- **Style:** Different visual treatment from Problem section (use `--color-surface` background).
- **Items:**
  - "70%" - Reduction in dispatcher workload by automating routine coordination.
  - "24/7" - Availability to capture leads and confirm bookings around the clock.
  - "20%" - Increase in resource utilization through optimized slot management.

## Section 6: Trial CTA
- **Container:** High-contrast background (Accent color).
- **Content:** "Start Your 30-Day Automated Booking Trial. An invitation to try a free trial up to 30 days."
- **CTA:** Button "Get a Free Trial".

## Section 7: For Whom (Persona Cards)
- **Grid:** 3 cards.
  - 1: "Logistics & Warehouse Operators" - "Automate dock scheduling and checkpoint time-slots to eliminate queues and dispatcher errors."
  - 2: "Equipment & Fleet Rental" - "Coordinate the rental of machinery and vehicles without manual chat or phone management."
  - 3: "Healthcare & Medical Clinics" - "Enable patients to book appointments 24/7 directly into your medical information system."

## Section 8: Differentiators (Comparison Table)
- **Table:**
  | Criterion | AutoBooking | Competitors |
  | :--- | :--- | :--- |
  | Deployment | Self-hosted microservice (On-Premise) | Public cloud SaaS only |
  | Channel Support | Native Voice, Chat, and UI in one engine | Chat-only or separate voice bots |
  | Industry Focus | Built for complex TMS/WMS/ERP | Generic retail or restaurant bots |
  | Data Control | Local LLM support (No data leaks) | External processing of sensitive data |
- **Style:** Highlight the 'AutoBooking' column with `--color-accent-light`.

## Section 9: FAQ (Accordion)
- Use shadcn/ui Accordion component.
- Q1: "What systems can AutoBooking integrate with?" A: "AutoBooking is designed to integrate deeply with specialized backend systems like TMS, WMS, ERP, and EHR platforms via REST API or webhooks."
- Q2: "How does it handle complex scheduling rules?" A: "The Availability Engine can be customized with your specific domain rules, resource capacities, and slot constraints, ensuring the AI only offers valid options."
- Q3: "Can it run entirely on our own servers?" A: "Yes. Our self-hosted architecture allows for local deployment of the service and LLM models, keeping your commercial and personal data within your network."
- Q4: "What happens if a request is unclear?" A: "The Conversation Loop identifies missing parameters and asks clarifying questions via voice or chat until all required booking data is gathered."
- Q5: "How does it prevent double-bookings?" A: "The Booking Executor performs a real-time lock on the slot in your system at the moment of confirmation, with built-in retry and fallback logic."
- Q6: "Is the voice quality natural?" A: "Yes, we use the proven Voice Loop core from AutoConfirm, featuring low-latency STT/TTS for human-like conversational experiences."

## Section 10: Final CTA (Lead Form)
- **Layout:** Dark section (`--color-primary`).
- **Form:** Inline fields for Name, Company, Work Email.
- **Action:** Submit button "Request a Pilot". console.log data on submit.

## Sticky Nav & Exit Intent
- **Sticky Bar:** Appears after Hero. Left: "AutoBooking" (Brand). Right: "Book a Demo" (Accent Button).
- **Exit Intent:** Desktop trigger. Modal: "Stop losing 30% of after-hours bookings. Automate your schedule today." with primary CTA button.

## Footer
- Title: "AutoBooking | AI-Powered Multichannel Booking Engine"
- Description: "Automate resource scheduling 24/7 across voice and chat. Secure, self-hosted AI integration for logistics, transport, and healthcare."

Deliver a single scrollable, production-ready landing page.