import type { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'
export const metadata: Metadata = { title: 'How to Measure Your Storeroom for an L-Shaped Rack', description: 'Step-by-step guide on how to measure your HDB BTO storeroom or bomb shelter to fit your L-shaped rack perfectly.' }
export default function HowToMeasure() {
  return (
    <>
      <section style={{ background: 'var(--dark-bg)', padding: '3.5rem 1.5rem 2.5rem' }}>
        <div style={{ maxWidth: 700, margin: '0 auto', textAlign: 'center' }}>
          <div className="eyebrow">BTO Guide</div>
          <h1 style={{ fontSize: 'clamp(1.5rem,3.5vw,2.2rem)', color: 'var(--cta-heading)', lineHeight: 1.22 }}>How to Measure Your Storeroom to Fit Your L-Shaped Rack</h1>
          <p style={{ fontSize: '0.9rem', color: 'var(--dark-muted)', lineHeight: 1.72, marginTop: '0.75rem' }}>Takes 5 minutes. All you need is a measuring tape and a phone.</p>
        </div>
      </section>
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-bg)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 900, margin: '0 auto' }}>
          {[
            { step: 1, title: 'Measure Wall A — the longer wall', body: 'Start with the wall directly opposite the door, or the longer of the two walls. Measure from corner to corner at floor level. Write this down as "Wall A". Also measure the height from floor to ceiling.' },
            { step: 2, title: 'Measure Wall B — the adjacent wall', body: 'Now measure the wall that connects to Wall A in the corner. Measure from the corner to where you want the rack to end (usually the door frame). Write this down as "Wall B".' },
            { step: 3, title: 'Note the door opening width', body: 'Measure the width of your storeroom door opening. This determines the maximum depth of your rack — typically we use 45cm depth, which fits most HDB storeroom doors.' },
            { step: 4, title: 'Check for obstacles', body: 'Look for power sockets, water pipes, electricity meters, or air vents on the walls. Take photos of each wall before ordering. If there are obstacles, note their position (height from floor, distance from corner).' },
            { step: 5, title: 'Take photos', body: 'Take 4 photos: one of each wall, plus one of the corner and one of the door opening. Share these with us when you request your quotation — it helps us recommend the best configuration.' },
          ].map((s, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '1.5rem', marginBottom: '2rem', alignItems: 'start' }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--nav-bg)', color: 'var(--gold)', fontSize: 18, fontWeight: 500, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{s.step}</div>
              <div>
                <h2 style={{ fontSize: '1rem', fontWeight: 500, marginBottom: 6 }}>{s.title}</h2>
                <p style={{ fontSize: '0.875rem', color: 'var(--body)', lineHeight: 1.75, margin: 0 }}>{s.body}</p>
              </div>
            </div>
          ))}
          <div style={{ borderRadius: 12, overflow: 'hidden', position: 'relative', aspectRatio: '16/9', background: 'var(--photo-bg)', marginTop: '2rem', marginBottom: '2rem' }}>
            <Image src="/images/l-shaped-rack/HDB-floor-plan.jpg" alt="HDB floor plan storeroom measurement" fill style={{ objectFit: 'cover' }} />
          </div>
          <div style={{ textAlign: 'center' }}>
            <p style={{ fontSize: '0.9rem', color: 'var(--body)', marginBottom: '1.25rem' }}>Ready to get your quotation?</p>
            <Link href="/quotation" className="btn-gold">Get a Free Quote →</Link>
          </div>
        </div>
      </section>
    </>
  )
}