import type { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'
export const metadata: Metadata = { title: 'L-Shaped Rack With No Centre Pole', description: 'Our L-shaped rack with no centre pole design gives you full corner access. No obstructions, maximum storage, built for HDB storerooms.' }
export default function NoCentrePole() {
  return (
    <>
      <section style={{ background: 'var(--dark-bg)', padding: '3.5rem 1.5rem 2.5rem' }}>
        <div style={{ maxWidth: 700, margin: '0 auto', textAlign: 'center' }}>
          <span className="tag" style={{ marginBottom: '1rem', display: 'inline-flex' }}>Our signature design</span>
          <h1 style={{ fontSize: 'clamp(1.5rem,4vw,2.4rem)', color: 'var(--cta-heading)', lineHeight: 1.22, marginBottom: '0.75rem' }}>L-Shaped Rack With No Centre Pole</h1>
          <p style={{ fontSize: '0.9rem', color: 'var(--dark-muted)', lineHeight: 1.75 }}>Most L-shaped racks have an ugly vertical pole in the corner. Ours doesn't. Full corner access. No obstructions. Just clean, usable storage on every shelf.</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', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '3rem', alignItems: 'center' }}>
          <div>
            <h2 style={{ fontSize: '1.4rem', marginBottom: '1rem' }}>Why the corner pole is a problem</h2>
            <p style={{ fontSize: '0.875rem', color: 'var(--body)', lineHeight: 1.78, marginBottom: '1rem' }}>Traditional L-shaped racks require a vertical pole at the corner junction to provide structural support. This pole sits right in the middle of your most valuable corner space — blocking access, reducing usable shelf area, and making it harder to reach items stored at the back.</p>
            <p style={{ fontSize: '0.875rem', color: 'var(--body)', lineHeight: 1.78 }}>In a small HDB storeroom or bomb shelter, that corner pole makes a significant difference. Items get pushed behind it, cleaning around it is awkward, and the visual clutter makes the space feel smaller.</p>
          </div>
          <div style={{ borderRadius: 12, overflow: 'hidden', position: 'relative', aspectRatio: '3/4', background: 'var(--photo-bg)' }}>
            <Image src="/images/l-shaped-rack/L-Shaped-4-Tier-Shelves.jpg" alt="L-shaped rack no centre pole" fill style={{ objectFit: 'cover' }} />
          </div>
        </div>
      </section>
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-alt)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '3rem', alignItems: 'center' }}>
          <div style={{ borderRadius: 12, overflow: 'hidden', position: 'relative', aspectRatio: '3/4', background: 'var(--photo-bg)' }}>
            <Image src="/images/l-shaped-rack/L-Shaped-5-Tier-Shelves.jpg" alt="Open corner access L-shaped rack" fill style={{ objectFit: 'cover' }} />
          </div>
          <div>
            <h2 style={{ fontSize: '1.4rem', marginBottom: '1rem' }}>Our no-centre-pole solution</h2>
            <p style={{ fontSize: '0.875rem', color: 'var(--body)', lineHeight: 1.78, marginBottom: '1rem' }}>We use a specially engineered corner bracket system that transfers the structural load through the shelf panels themselves — no corner pole required. The result is a completely open corner with full access to every part of every shelf.</p>
            {['Walk in freely to access the full corner', 'No pole to bump into or work around', 'Cleaner, more professional look', 'Same structural strength as pole-supported designs', 'Full shelf width on both arms right to the corner'].map((b, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, marginBottom: 8, fontSize: '0.875rem', color: 'var(--body)', alignItems: 'flex-start' }}>
                <span style={{ color: 'var(--gold)', fontWeight: 500, flexShrink: 0 }}>✓</span>{b}
              </div>
            ))}
            <Link href="/quotation" className="btn-primary" style={{ marginTop: '1.25rem', display: 'inline-block' }}>Get a Free Quotation</Link>
          </div>
        </div>
      </section>
    </>
  )
}