import type { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'
export const metadata: Metadata = { title: 'Transform Your HDB Bomb Shelter With an L-Shaped Rack', description: 'Turn your HDB bomb shelter into a smart, organised storage space with a custom L-shaped rack. No centre pole. Built to fit your exact shelter dimensions.' }
export default function BombShelter() {
  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">HDB Bomb Shelter Storage</div>
          <h1 style={{ fontSize: 'clamp(1.5rem,4vw,2.3rem)', color: 'var(--cta-heading)', lineHeight: 1.22, marginBottom: '0.75rem' }}>Transform Your HDB Bomb Shelter With Our L-Shaped Rack</h1>
          <p style={{ fontSize: '0.9rem', color: 'var(--dark-muted)', lineHeight: 1.75 }}>The bomb shelter is one of the most underutilised spaces in an HDB flat. With the right rack, it becomes the most organised room in your home.</p>
        </div>
      </section>
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-bg)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '3rem', alignItems: 'center', marginBottom: '3rem' }}>
            <div>
              <h2 style={{ fontSize: '1.4rem', marginBottom: '1rem' }}>Why bomb shelters are perfect for L-shaped racks</h2>
              <p style={{ fontSize: '0.875rem', color: 'var(--body)', lineHeight: 1.78, marginBottom: '1rem' }}>HDB bomb shelters typically have two usable walls that meet at a right angle — which is exactly what an L-shaped rack is designed for. The thick reinforced walls go floor to ceiling, giving you maximum vertical height for shelves.</p>
              <p style={{ fontSize: '0.875rem', color: 'var(--body)', lineHeight: 1.78 }}>The challenge is the door — bomb shelter doors are thick and open inward, which limits the depth of rack you can use. We design every rack with this in mind, ensuring full door clearance on every installation.</p>
            </div>
            <div style={{ borderRadius: 12, overflow: 'hidden', position: 'relative', aspectRatio: '3/4', background: 'var(--photo-bg)' }}>
              <Image src="/images/l-shaped-rack/3D-Bomb-Shelter-Layout.jpg" alt="3D bomb shelter L-shaped rack layout" fill style={{ objectFit: 'cover' }} />
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
            {[
              { icon: '📐', t: 'Measured to your shelter', d: 'Every bomb shelter is different. We visit, measure precisely, and build to fit — including around pipes and meters.' },
              { icon: '🚪', t: 'Door clearance guaranteed', d: 'Bomb shelter doors open inward. We design racks with the exact clearance your door needs.' },
              { icon: '📦', t: 'Up to 6 tiers high', d: 'Bomb shelters have high ceilings. We maximise every vertical centimetre with up to 6 shelf tiers.' },
              { icon: '🔩', t: 'No wall drilling', d: 'Our racks are freestanding — no drilling into your reinforced shelter walls required.' },
            ].map((c, i) => (
              <div key={i} className="card" style={{ padding: '1.25rem' }}>
                <div style={{ fontSize: 28, marginBottom: 10 }}>{c.icon}</div>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--heading)', marginBottom: 5 }}>{c.t}</div>
                <p style={{ fontSize: 12, color: 'var(--body)', lineHeight: 1.65, margin: 0 }}>{c.d}</p>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: '2.5rem' }}>
            <Link href="/quotation" className="btn-gold">Plan My Bomb Shelter Rack →</Link>
          </div>
        </div>
      </section>
    </>
  )
}