# 1. Create feature branch (run from host machine)
./scripts/prp-to-feature.sh countdown-timer 016

# 2. Generate SpecKit spec (Claude Code slash command - tell Claude in the CLI)
/specify New Year's countdown banner with $321/year offer

# 3. Generate implementation plan (Claude Code slash command)
/plan Use native Date, localStorage, integrate into layout

# 4. Generate task list (Claude Code slash command)
/tasks Focus on Test-Driven Development (TDD) approach

# 5. Generate component scaffold (run in Docker container - interactive prompts)
docker compose exec scripthammer pnpm run generate:component
# You'll be prompted for:
#   - Component name: CountdownBanner
#   - Category: atomic
#   - Has props? Y
#   - Include hooks? N

CountdownBanner/
├── index.tsx                             # Barrel export (re-exports component)
├── CountdownBanner.tsx                   # Main component (implement below)
├── CountdownBanner.test.tsx              # Unit tests (see test code below)
├── CountdownBanner.stories.tsx           # Storybook stories (update after implementation)
└── CountdownBanner.accessibility.test.tsx # A11y tests (update after implementation)

import type { Meta, StoryObj } from '@storybook/nextjs'; // Not @storybook/react

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';

// Mock Next.js router (required for useRouter hook)
vi.mock('next/navigation', () => ({
  useRouter: () => ({
    push: vi.fn(),
  }),
}));

import { CountdownBanner } from './CountdownBanner';

describe('CountdownBanner', () => {
  beforeEach(() => {
    localStorage.clear();
  });

  it('renders countdown timer', () => {
    const { container } = render(<CountdownBanner />);
    // Verify timer displays format like "92d 8h 10m 35s"
    const timerText = container.textContent;
    expect(timerText).toMatch(/\d+d\s+\d+h\s+\d+m\s+\d+s/);
  });

  it('renders promotional content', () => {
    render(<CountdownBanner />);
    expect(screen.getByText('$321/year')).toBeInTheDocument();
    expect(screen.getByText('Book Now')).toBeInTheDocument();
  });

  it('persists dismissal with timestamp', () => {
    render(<CountdownBanner />);
    const dismissButton = screen.getByLabelText(/dismiss/i);
    fireEvent.click(dismissButton);
    const dismissedAt = localStorage.getItem('countdown-dismissed');
    expect(dismissedAt).toBeTruthy();
    expect(parseInt(dismissedAt!, 10)).toBeGreaterThan(Date.now() - 1000);
  });
});

'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Button from '@/components/atomic/Button';

const DISMISS_KEY = 'countdown-dismissed';
const DISMISS_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds

export const CountdownBanner = () => {
  const router = useRouter();
  const [mounted, setMounted] = useState(false); // Avoid SSR hydration mismatch
  const [isDismissed, setIsDismissed] = useState(false);
  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
    isExpired: false,
  });

  // Check dismissal on mount
  useEffect(() => {
    setMounted(true);
    try {
      const dismissedAt = localStorage.getItem(DISMISS_KEY);
      if (dismissedAt) {
        const timeSinceDismissal = Date.now() - parseInt(dismissedAt, 10);
        setIsDismissed(timeSinceDismissal < DISMISS_DURATION);
      }
    } catch (e) {
      // Safari private mode - user will see banner every time
      setIsDismissed(false);
    }
  }, []);

  // Calculate and update countdown
  useEffect(() => {
    if (!mounted || isDismissed) return;

    const calculateTimeLeft = () => {
      const targetDate = new Date(new Date().getFullYear() + 1, 0, 1); // Jan 1 local time
      const difference = targetDate.getTime() - new Date().getTime();

      if (difference <= 0) {
        return { days: 0, hours: 0, minutes: 0, seconds: 0, isExpired: true };
      }

      return {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24), // Modulo extracts remainder
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
        isExpired: false,
      };
    };

    setTimeLeft(calculateTimeLeft());
    const timer = setInterval(() => setTimeLeft(calculateTimeLeft()), 1000);
    return () => clearInterval(timer); // Cleanup prevents memory leaks
  }, [mounted, isDismissed]);

  if (!mounted || isDismissed || timeLeft.isExpired) return null;

  return (
    <div
      className="bg-warning text-warning-content fixed top-40 right-4 z-50 max-w-xs rounded-lg p-3 shadow-xl max-sm:top-56 max-sm:right-4 max-sm:left-4 max-sm:max-w-full"
      role="banner"
      aria-live="polite"
    >
      <div className="flex flex-col gap-3">
        <div className="flex items-center gap-2">
          <span className="text-2xl">⏰</span>
          <div>
            <span className="font-bold">New Year Special</span>
            <div className="font-mono text-lg">
              {timeLeft.days}d {timeLeft.hours}h {timeLeft.minutes}m{' '}
              {timeLeft.seconds}s
            </div>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="text-center">
            <div className="text-2xl font-bold">$321/year</div>
            <div className="text-sm">Custom ScriptHammer Setup</div>
          </div>
          <Button variant="accent" onClick={() => router.push('/schedule')}>
            Book Now
          </Button>
        </div>

        <button
          className="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
          onClick={() => {
            try {
              localStorage.setItem(DISMISS_KEY, Date.now().toString());
              setIsDismissed(true);
            } catch (e) {
              // Safari private mode - just hide for session
              setIsDismissed(true);
            }
          }}
          aria-label="Dismiss countdown banner"
        >
          ✕
        </button>
      </div>
    </div>
  );
};

import { CountdownBanner } from '@/components/atomic/CountdownBanner';
import { GlobalNav } from '@/components/GlobalNav';
import { Footer } from '@/components/Footer';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GlobalNav />
        <CountdownBanner /> {/* Appears on all pages */}
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

# Format code to match project style
docker compose exec scripthammer pnpm run format

# Run full test suite and build
docker compose exec scripthammer sh -c "pnpm run test:suite && pnpm run build"