import { useFocusTrap } from '@tour-kit/core'

function TourCard({ isActive }) {
  const { containerRef, activate, deactivate } = useFocusTrap(isActive)

  useEffect(() => {
    if (isActive) {
      activate()
    } else {
      deactivate()
    }
  }, [isActive, activate, deactivate])

  return (
    <div ref={containerRef} role="dialog" aria-modal="true">
      {/* Tour content */}
    </div>
  )
}

const FOCUSABLE_SELECTOR = [
  'a[href]:not([tabindex="-1"])',
  'button:not([disabled]):not([tabindex="-1"])',
  'textarea:not([disabled]):not([tabindex="-1"])',
  'input:not([disabled]):not([tabindex="-1"])',
  'select:not([disabled]):not([tabindex="-1"])',
  '[tabindex]:not([tabindex="-1"])',
].join(', ')

import { useFocusTrap } from '@tour-kit/core'

function MyCustomCard({ isActive, children }) {
  const { containerRef, activate, deactivate } = useFocusTrap(isActive)

  useEffect(() => {
    if (isActive) {
      // Small delay ensures DOM is ready
      requestAnimationFrame(() => activate())
    }
    return () => deactivate()
  }, [isActive, activate, deactivate])

  return (
    <div
      ref={containerRef}
      role="dialog"
      aria-modal="true"
      aria-labelledby="tour-title"
    >
      <h2 id="tour-title">Welcome</h2>
      {children}
      <button>Next</button>
      <button>Close</button>
    </div>
  )
}

// Internal logic - keyboard events are ignored when focus is in:
// - <input> elements
// - <textarea> elements
// This prevents arrow keys from interfering with text editing

import { TourProvider } from '@tour-kit/react'

function App() {
  return (
    <TourProvider
      tour={myTour}
      keyboardConfig={{
        enabled: true,
        nextKeys: ['ArrowRight', 'Enter', 'Space'],
        prevKeys: ['ArrowLeft', 'Backspace'],
        exitKeys: ['Escape', 'q'],
      }}
    >
      {children}
    </TourProvider>
  )
}

<TourProvider
  tour={formTour}
  keyboardConfig={{
    enabled: true,
    nextKeys: ['Enter'], // Only Enter advances
    prevKeys: [],        // Disable going back
    exitKeys: ['Escape'],
  }}
>

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="tour-step-title-welcome"
>
  <h3 id="tour-step-title-welcome">Welcome to the App</h3>
  <p>Let's get you started...</p>
</div>

import { announce, getStepAnnouncement } from '@tour-kit/core'

// When step changes:
const message = getStepAnnouncement(step.title, currentIndex + 1, totalSteps)
// Returns: "Step 2 of 5: Feature Overview"

announce(message, 'polite')

// Created dynamically, visually hidden but announced
<div
  role="status"
  aria-live="polite"
  aria-atomic="true"
  style={{
    position: 'absolute',
    width: '1px',
    height: '1px',
    overflow: 'hidden',
    clip: 'rect(0, 0, 0, 0)',
  }}
>
  Step 2 of 5: Feature Overview
</div>

<button type="button" aria-label="Close tour">
  <svg aria-hidden="true">
    {/* X icon */}
  </svg>
</button>

import { usePrefersReducedMotion } from '@tour-kit/core'

function MyComponent() {
  const prefersReducedMotion = usePrefersReducedMotion()

  return (
    <div style={{
      transition: prefersReducedMotion ? 'none' : 'all 0.3s ease'
    }}>
      Content
    </div>
  )
}

import { TourMedia } from '@tour-kit/media'

<TourMedia
  src="/videos/feature-demo.mp4"
  alt="Feature demonstration"
  poster="/images/feature-poster.jpg"
  reducedMotionFallback="/images/feature-static.jpg"
/>

// GIF respects reduced motion preference
<GifPlayer
  src="/animations/loading.gif"
  alt="Loading indicator"
  poster="/images/loading-frame.png"
  autoplay={true} // Ignored if reduced motion is preferred
/>

<button
  aria-label={isPlaying ? "Pause Loading indicator" : "Play Loading indicator"}
  aria-pressed={isPlaying}
>
  {/* Play/Pause icon */}
</button>

/* Minimum 44x44px touch target for buttons */
.tour-button {
  min-width: 44px;
  min-height: 44px;
}

/* Focus ring styling */
.tour-button:focus-visible {
  outline: 2px solid var(--tour-focus-ring);
  outline-offset: 2px;
}

:root {
  --tour-card-background: hsl(0 0% 100%);
  --tour-card-foreground: hsl(222 47% 11%);
  --tour-overlay-background: hsl(0 0% 0% / 0.5);
}

.tour-overlay {
  background: hsl(0 0% 0% / 0.5); /* Max 50% opacity */
}

import { render } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'
import { TourCard } from '@tour-kit/react'

expect.extend(toHaveNoViolations)

test('TourCard has no accessibility violations', async () => {
  const { container } = render(
    <TourCard
      title="Welcome"
      description="Let's get started"
      isActive={true}
    />
  )

  const results = await axe(container)
  expect(results).toHaveNoViolations()
})