@aws505/sheetsite 1.0.0

package/src/components/sections/Hero.tsx

@@ -0,0 +1,202 @@
+/**
+ * Hero Section Component
+ *
+ * A prominent hero section for the top of pages.
+ * Supports various layouts and customization options.
+ */
+
+'use client';
+
+import React from 'react';
+import type { BusinessInfo } from '../../data/types';
+import { PhoneIcon, MapPinIcon, ClockIcon } from '../ui/Icons';
+
+export interface HeroProps {
+  business: BusinessInfo;
+  variant?: 'centered' | 'left' | 'split';
+  showOpenStatus?: boolean;
+  isOpen?: boolean;
+  todayHours?: string;
+  backgroundImage?: string;
+  overlay?: boolean;
+  className?: string;
+}
+
+/**
+ * Hero section component.
+ */
+export function Hero({
+  business,
+  variant = 'centered',
+  showOpenStatus = true,
+  isOpen,
+  todayHours,
+  backgroundImage,
+  overlay = true,
+  className = '',
+}: HeroProps) {
+  const bgStyle = backgroundImage
+    ? { backgroundImage: `url(${backgroundImage})` }
+    : undefined;
+
+  const handleCallClick = () => {
+    if (business.phone) {
+      window.location.href = `tel:${business.phone.replace(/\D/g, '')}`;
+    }
+  };
+
+  const handleDirectionsClick = () => {
+    if (business.googleMapsUrl) {
+      window.open(business.googleMapsUrl, '_blank');
+    } else {
+      const address = [
+        business.addressLine1,
+        business.city,
+        business.state,
+        business.zip,
+      ]
+        .filter(Boolean)
+        .join(', ');
+      window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`, '_blank');
+    }
+  };
+
+  const handlePrimaryClick = () => {
+    if (business.primaryCtaUrl) {
+      if (business.primaryCtaUrl.startsWith('http')) {
+        window.open(business.primaryCtaUrl, '_blank');
+      } else if (business.primaryCtaUrl.startsWith('mailto:')) {
+        window.location.href = business.primaryCtaUrl;
+      } else {
+        window.location.href = business.primaryCtaUrl;
+      }
+    } else if (business.bookingUrl) {
+      window.open(business.bookingUrl, '_blank');
+    } else if (business.email) {
+      window.location.href = `mailto:${business.email}`;
+    }
+  };
+
+  return (
+    <section
+      className={`
+        relative min-h-[500px] flex items-center
+        ${backgroundImage ? 'bg-cover bg-center' : 'bg-gradient-to-br from-primary-600 to-primary-800'}
+        ${className}
+      `}
+      style={bgStyle}
+    >
+      {/* Overlay */}
+      {overlay && backgroundImage && (
+        <div className="absolute inset-0 bg-black/50" />
+      )}
+
+      {/* Content */}
+      <div className="relative z-10 container mx-auto px-4 py-16">
+        <div
+          className={`
+            ${variant === 'centered' ? 'text-center max-w-3xl mx-auto' : ''}
+            ${variant === 'left' ? 'max-w-2xl' : ''}
+            ${variant === 'split' ? 'grid md:grid-cols-2 gap-8 items-center' : ''}
+          `}
+        >
+          <div>
+            {/* Open Status */}
+            {showOpenStatus && isOpen !== undefined && (
+              <div className="mb-4">
+                <span
+                  className={`
+                    inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
+                    ${isOpen ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}
+                  `}
+                >
+                  <span
+                    className={`w-2 h-2 rounded-full mr-2 ${isOpen ? 'bg-green-500' : 'bg-red-500'}`}
+                  />
+                  {isOpen ? 'Open Now' : 'Closed'}
+                  {todayHours && <span className="ml-2 opacity-75">· {todayHours}</span>}
+                </span>
+              </div>
+            )}
+
+            {/* Business Name */}
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">
+              {business.name}
+            </h1>
+
+            {/* Tagline */}
+            {business.tagline && (
+              <p className="text-xl md:text-2xl text-white/90 mb-6">
+                {business.tagline}
+              </p>
+            )}
+
+            {/* Description */}
+            {business.aboutShort && (
+              <p className="text-lg text-white/80 mb-8 max-w-xl">
+                {business.aboutShort}
+              </p>
+            )}
+
+            {/* Trust Signals */}
+            <div className="flex flex-wrap justify-center gap-4 mb-8">
+              {['Quality Work', 'Fair Prices', 'Fast Service'].map((signal) => (
+                <div key={signal} className="flex items-center text-white/90">
+                  <svg className="w-5 h-5 text-accent-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <span className="text-sm font-medium">{signal}</span>
+                </div>
+              ))}
+            </div>
+
+            {/* CTA Buttons */}
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              {business.phone && (
+                <button
+                  onClick={handleCallClick}
+                  className="inline-flex items-center justify-center px-6 py-3 bg-white text-primary-700 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
+                >
+                  <PhoneIcon size={20} className="mr-2" />
+                  Call Now
+                </button>
+              )}
+
+              {(business.addressLine1 || business.googleMapsUrl) && (
+                <button
+                  onClick={handleDirectionsClick}
+                  className="inline-flex items-center justify-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-colors"
+                >
+                  <MapPinIcon size={20} className="mr-2" />
+                  Get Directions
+                </button>
+              )}
+
+              {(business.primaryCtaUrl || business.bookingUrl || business.email) && (
+                <button
+                  onClick={handlePrimaryClick}
+                  className="inline-flex items-center justify-center px-6 py-3 bg-accent-500 text-white font-semibold rounded-lg hover:bg-accent-600 transition-colors"
+                >
+                  {business.primaryCtaText || 'Contact Us'}
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Split layout - right side could show an image or additional content */}
+          {variant === 'split' && (
+            <div className="hidden md:block">
+              {/* Placeholder for hero image or additional content */}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Hero;

package/src/components/sections/Hours.tsx

@@ -0,0 +1,225 @@
+/**
+ * Hours Section Component
+ *
+ * Displays business hours with today highlighted.
+ */
+
+import React from 'react';
+import type { HoursEntry, DayOfWeek } from '../../data/types';
+import { ClockIcon } from '../ui/Icons';
+
+export interface HoursProps {
+  hours: HoursEntry[];
+  title?: string;
+  highlightToday?: boolean;
+  variant?: 'card' | 'inline' | 'minimal';
+  timezone?: string;
+  className?: string;
+}
+
+const dayOrder: DayOfWeek[] = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+
+const dayNames: Record<DayOfWeek, string> = {
+  monday: 'Monday',
+  tuesday: 'Tuesday',
+  wednesday: 'Wednesday',
+  thursday: 'Thursday',
+  friday: 'Friday',
+  saturday: 'Saturday',
+  sunday: 'Sunday',
+};
+
+const dayAbbrev: Record<DayOfWeek, string> = {
+  monday: 'Mon',
+  tuesday: 'Tue',
+  wednesday: 'Wed',
+  thursday: 'Thu',
+  friday: 'Fri',
+  saturday: 'Sat',
+  sunday: 'Sun',
+};
+
+/**
+ * Get today's day of week.
+ */
+function getTodayDay(timezone?: string): DayOfWeek {
+  const now = timezone
+    ? new Date(new Date().toLocaleString('en-US', { timeZone: timezone }))
+    : new Date();
+  const jsDay = now.getDay();
+  // JavaScript: 0 = Sunday, 1 = Monday, etc.
+  return dayOrder[(jsDay + 6) % 7];
+}
+
+/**
+ * Hours section component.
+ */
+export function Hours({
+  hours,
+  title = 'Hours',
+  highlightToday = true,
+  variant = 'card',
+  timezone,
+  className = '',
+}: HoursProps) {
+  const todayDay = getTodayDay(timezone);
+
+  // Sort hours by day order
+  const sortedHours = [...hours].sort(
+    (a, b) => dayOrder.indexOf(a.day) - dayOrder.indexOf(b.day)
+  );
+
+  if (variant === 'inline') {
+    return (
+      <div className={`flex flex-wrap gap-4 ${className}`}>
+        {sortedHours.map((entry) => (
+          <HoursInlineItem
+            key={entry.day}
+            entry={entry}
+            isToday={highlightToday && entry.day === todayDay}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (variant === 'minimal') {
+    return (
+      <div className={`space-y-1 ${className}`}>
+        {sortedHours.map((entry) => (
+          <HoursMinimalItem
+            key={entry.day}
+            entry={entry}
+            isToday={highlightToday && entry.day === todayDay}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  // Default: card variant
+  return (
+    <div className={`bg-white rounded-lg shadow p-6 ${className}`}>
+      <div className="flex items-center mb-4">
+        <ClockIcon size={24} className="text-primary-600 mr-2" />
+        <h3 className="text-xl font-semibold text-gray-900">{title}</h3>
+      </div>
+      <div className="space-y-2">
+        {sortedHours.map((entry) => (
+          <HoursCardItem
+            key={entry.day}
+            entry={entry}
+            isToday={highlightToday && entry.day === todayDay}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Card variant item.
+ */
+function HoursCardItem({ entry, isToday }: { entry: HoursEntry; isToday: boolean }) {
+  return (
+    <div
+      className={`flex justify-between py-1 ${
+        isToday ? 'bg-primary-50 -mx-2 px-2 rounded font-medium' : ''
+      }`}
+    >
+      <span className={isToday ? 'text-primary-700' : 'text-gray-600'}>
+        {dayNames[entry.day]}
+        {isToday && <span className="ml-2 text-xs">(Today)</span>}
+      </span>
+      <span className={isToday ? 'text-primary-700' : 'text-gray-900'}>
+        {entry.closed ? 'Closed' : `${entry.open} - ${entry.close}`}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Inline variant item.
+ */
+function HoursInlineItem({ entry, isToday }: { entry: HoursEntry; isToday: boolean }) {
+  return (
+    <div
+      className={`text-center px-3 py-2 rounded ${
+        isToday ? 'bg-primary-100 ring-2 ring-primary-500' : 'bg-gray-100'
+      }`}
+    >
+      <div className={`text-sm font-medium ${isToday ? 'text-primary-700' : 'text-gray-500'}`}>
+        {dayAbbrev[entry.day]}
+      </div>
+      <div className={`text-sm ${isToday ? 'text-primary-900' : 'text-gray-900'}`}>
+        {entry.closed ? 'Closed' : `${entry.open?.split(' ')[0]}-${entry.close?.split(' ')[0]}`}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Minimal variant item.
+ */
+function HoursMinimalItem({ entry, isToday }: { entry: HoursEntry; isToday: boolean }) {
+  return (
+    <div className={`text-sm ${isToday ? 'font-semibold text-primary-600' : 'text-gray-600'}`}>
+      <span className="inline-block w-20">{dayAbbrev[entry.day]}</span>
+      <span>{entry.closed ? 'Closed' : `${entry.open} - ${entry.close}`}</span>
+    </div>
+  );
+}
+
+/**
+ * Get today's hours text.
+ */
+export function getTodayHours(hours: HoursEntry[], timezone?: string): string | null {
+  const todayDay = getTodayDay(timezone);
+  const todayHours = hours.find((h) => h.day === todayDay);
+
+  if (!todayHours) return null;
+  if (todayHours.closed) return 'Closed today';
+  return `${todayHours.open} - ${todayHours.close}`;
+}
+
+/**
+ * Check if currently open.
+ */
+export function isCurrentlyOpen(hours: HoursEntry[], timezone?: string): boolean {
+  const todayDay = getTodayDay(timezone);
+  const todayHours = hours.find((h) => h.day === todayDay);
+
+  if (!todayHours || todayHours.closed) return false;
+  if (!todayHours.open || !todayHours.close) return false;
+
+  const now = timezone
+    ? new Date(new Date().toLocaleString('en-US', { timeZone: timezone }))
+    : new Date();
+
+  const currentMinutes = now.getHours() * 60 + now.getMinutes();
+  const openMinutes = parseTimeToMinutes(todayHours.open);
+  const closeMinutes = parseTimeToMinutes(todayHours.close);
+
+  if (openMinutes === null || closeMinutes === null) return false;
+
+  return currentMinutes >= openMinutes && currentMinutes < closeMinutes;
+}
+
+/**
+ * Parse time string to minutes since midnight.
+ */
+function parseTimeToMinutes(time: string): number | null {
+  const match = time.match(/(\d{1,2}):?(\d{2})?\s*(AM|PM)?/i);
+  if (!match) return null;
+
+  let hours = parseInt(match[1], 10);
+  const minutes = parseInt(match[2] || '0', 10);
+  const period = match[3]?.toUpperCase();
+
+  if (period === 'PM' && hours !== 12) hours += 12;
+  if (period === 'AM' && hours === 12) hours = 0;
+
+  return hours * 60 + minutes;
+}
+
+export default Hours;

package/src/components/sections/Services.tsx

@@ -0,0 +1,216 @@
+/**
+ * Services Section Component
+ *
+ * Displays a grid of services offered by the business.
+ */
+
+import React from 'react';
+import type { Service } from '../../data/types';
+import { Icon } from '../ui/Icons';
+
+export interface ServicesProps {
+  services: Service[];
+  title?: string;
+  subtitle?: string;
+  columns?: 2 | 3 | 4;
+  showPrices?: boolean;
+  showIcons?: boolean;
+  variant?: 'cards' | 'list' | 'minimal';
+  limit?: number;
+  className?: string;
+}
+
+/**
+ * Services section component.
+ */
+export function Services({
+  services,
+  title = 'Our Services',
+  subtitle,
+  columns = 3,
+  showPrices = true,
+  showIcons = true,
+  variant = 'cards',
+  limit,
+  className = '',
+}: ServicesProps) {
+  const displayedServices = limit ? services.slice(0, limit) : services;
+
+  const gridCols = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-2 lg:grid-cols-3',
+    4: 'md:grid-cols-2 lg:grid-cols-4',
+  };
+
+  if (variant === 'list') {
+    return (
+      <section className={`py-16 ${className}`}>
+        <div className="container mx-auto px-4">
+          <SectionHeader title={title} subtitle={subtitle} />
+          <div className="max-w-3xl mx-auto divide-y divide-gray-200">
+            {displayedServices.map((service) => (
+              <ServiceListItem
+                key={service.id || service.title}
+                service={service}
+                showPrice={showPrices}
+                showIcon={showIcons}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (variant === 'minimal') {
+    return (
+      <section className={`py-16 ${className}`}>
+        <div className="container mx-auto px-4">
+          <SectionHeader title={title} subtitle={subtitle} />
+          <div className={`grid gap-6 ${gridCols[columns]}`}>
+            {displayedServices.map((service) => (
+              <ServiceMinimalCard
+                key={service.id || service.title}
+                service={service}
+                showPrice={showPrices}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // Default: cards variant
+  return (
+    <section className={`py-16 bg-gray-50 ${className}`}>
+      <div className="container mx-auto px-4">
+        <SectionHeader title={title} subtitle={subtitle} />
+        <div className={`grid gap-6 ${gridCols[columns]}`}>
+          {displayedServices.map((service) => (
+            <ServiceCard
+              key={service.id || service.title}
+              service={service}
+              showPrice={showPrices}
+              showIcon={showIcons}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/**
+ * Section header.
+ */
+function SectionHeader({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <div className="text-center mb-12">
+      <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{title}</h2>
+      {subtitle && (
+        <p className="text-lg text-gray-600 max-w-2xl mx-auto">{subtitle}</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Service card component.
+ */
+function ServiceCard({
+  service,
+  showPrice,
+  showIcon,
+}: {
+  service: Service;
+  showPrice: boolean;
+  showIcon: boolean;
+}) {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
+      {showIcon && service.icon && (
+        <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
+          <Icon name={service.icon} size={24} className="text-primary-600" />
+        </div>
+      )}
+      <h3 className="text-xl font-semibold text-gray-900 mb-2">{service.title}</h3>
+      {service.description && (
+        <p className="text-gray-600 mb-4">{service.description}</p>
+      )}
+      {showPrice && service.priceNote && (
+        <p className="text-primary-600 font-medium">{service.priceNote}</p>
+      )}
+      {showPrice && service.price && !service.priceNote && (
+        <p className="text-primary-600 font-medium">${service.price.toFixed(2)}</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Service list item component.
+ */
+function ServiceListItem({
+  service,
+  showPrice,
+  showIcon,
+}: {
+  service: Service;
+  showPrice: boolean;
+  showIcon: boolean;
+}) {
+  return (
+    <div className="py-4 flex items-start justify-between">
+      <div className="flex items-start">
+        {showIcon && service.icon && (
+          <div className="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
+            <Icon name={service.icon} size={20} className="text-primary-600" />
+          </div>
+        )}
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900">{service.title}</h3>
+          {service.description && (
+            <p className="text-gray-600 text-sm mt-1">{service.description}</p>
+          )}
+        </div>
+      </div>
+      {showPrice && (service.priceNote || service.price) && (
+        <div className="text-right ml-4 flex-shrink-0">
+          <p className="text-primary-600 font-medium">
+            {service.priceNote || `$${service.price?.toFixed(2)}`}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Minimal service card component.
+ */
+function ServiceMinimalCard({
+  service,
+  showPrice,
+}: {
+  service: Service;
+  showPrice: boolean;
+}) {
+  return (
+    <div className="p-4 border border-gray-200 rounded-lg hover:border-primary-300 transition-colors">
+      <div className="flex items-center justify-between">
+        <h3 className="font-semibold text-gray-900">{service.title}</h3>
+        {showPrice && (service.priceNote || service.price) && (
+          <span className="text-primary-600 text-sm font-medium">
+            {service.priceNote || `$${service.price?.toFixed(2)}`}
+          </span>
+        )}
+      </div>
+      {service.description && (
+        <p className="text-gray-600 text-sm mt-2">{service.description}</p>
+      )}
+    </div>
+  );
+}
+
+export default Services;