'use client'
import { useState } from 'react'

const steps = [
  {
    title: 'Measure your space',
    icon: '📐',
    detail: 'Step 1: How to measure your storeroom',
    items: [
      'Measure wall A (left wall) — full length & height',
      'Measure wall B (back wall) — full length',
      'Note the door opening width — this affects rack depth',
      'Check for pipes, meters, or switches on all walls',
      'Take photos of all 4 corners before ordering',
    ],
  },
  {
    title: 'Choose your layout',
    icon: '📏',
    detail: 'Step 2: Choose your L-shaped layout',
    items: [
      'Standard L — two walls, equal arm lengths',
      'Extended L — one arm longer (most popular for BTOs)',
      'L with raised bottom shelf — under-rack storage space',
      'Full corner U — three walls for larger bomb shelters',
      'We recommend the best layout based on your room shape',
    ],
  },
  {
    title: 'Pick your tier system',
    icon: '🗂️',
    detail: 'Step 3: Pick your tier system',
    items: [
      '3-tier — for low ceilings or kids\' accessible shelves',
      '4-tier standard — most versatile for mixed storage',
      '5-tier — maximises vertical space, our most popular',
      '6-tier — for bomb shelters with high ceilings',
      'Mixed arms — e.g. 5-tier on wall A, 3-tier on wall B',
    ],
  },
  {
    title: 'Get your quotation',
    icon: '📋',
    detail: 'Step 4: Get your free quotation',
    items: [
      'Submit your measurements via our simple online form',
      'We confirm configuration & price within 24 hours',
      'No obligation — compare and decide at your own pace',
      'Fabrication takes 5–7 working days once confirmed',
      'We deliver and install island-wide, including new BTOs',
    ],
  },
]

export default function PlanningGuide() {
  const [active, setActive] = useState(0)
  const s = steps[active]

  return (
    <div>
      {/* Step tabs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: '1rem' }}>
        {steps.map((step, i) => (
          <button
            key={i}
            onClick={() => setActive(i)}
            style={{
              background: active === i ? 'var(--tag-bg)' : 'var(--card-bg)',
              border: active === i ? '1.5px solid var(--nav-bg)' : '0.5px solid var(--border)',
              borderRadius: 10,
              padding: '13px',
              cursor: 'pointer',
              textAlign: 'left',
              transition: 'border-color 0.12s',
            }}
          >
            <div style={{
              width: 26, height: 26, borderRadius: '50%',
              background: active === i ? 'var(--nav-bg)' : 'var(--tag-bg)',
              color: active === i ? 'var(--gold)' : 'var(--nav-bg)',
              fontSize: 11, fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 8,
            }}>
              {i + 1}
            </div>
            <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--heading)', marginBottom: 3 }}>{step.title}</div>
            <div style={{ fontSize: 10.5, color: 'var(--body)', lineHeight: 1.5 }}>
              {['Get the right dimensions for your storeroom or bomb shelter', 'L-shape, extended arm, or full corner — we help you decide', '3-tier to 6-tier, raised or standard, mixed configurations', 'Instant price based on your exact measurements and config'][i]}
            </div>
          </button>
        ))}
      </div>

      {/* Detail panel */}
      <div style={{ background: 'var(--card-bg)', border: '0.5px solid var(--border)', borderRadius: 10, padding: '1.25rem' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '1.5rem', alignItems: 'start' }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--heading)', marginBottom: 10 }}>{s.detail}</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 7 }}>
              {s.items.map((item, i) => (
                <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12, color: 'var(--body)', lineHeight: 1.55 }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" strokeWidth="2.5" strokeLinecap="round" style={{ flexShrink: 0, marginTop: 2 }}>
                    <polyline points="20,6 9,17 4,12"/>
                  </svg>
                  {item}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ fontSize: 48, lineHeight: 1, flexShrink: 0, marginTop: 4 }}>{s.icon}</div>
        </div>
      </div>
    </div>
  )
}