import type { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'

export const metadata: Metadata = {
  title: 'About Us',
  description: 'We are Singapore\'s specialist in custom L-shaped racks for HDB BTO storerooms and bomb shelters. Learn our story and mission.',
}

const values = [
  { icon: '📐', title: 'Measured to fit', desc: 'Every rack is built to your exact storeroom dimensions — not a generic size that leaves gaps.' },
  { icon: '🚫', title: 'No centre pole', desc: 'Our signature L-shaped design eliminates the corner pole, giving you full walk-in access to every shelf.' },
  { icon: '🏠', title: 'BTO specialists', desc: 'We\'ve installed in 28+ BTO estates across Singapore. We know the floor plans, the quirks, the pipe positions.' },
  { icon: '⭐', title: '4.9-star rated', desc: 'Over 128 Google reviews from real BTO couples who set up their storeroom right, from day one.' },
]

export default function About() {
  return (
    <>
      {/* Hero */}
      <section style={{ background: 'var(--dark-bg)', padding: '4rem 1.5rem' }}>
        <div style={{ maxWidth: 700, margin: '0 auto', textAlign: 'center' }}>
          <div className="eyebrow">Our Story</div>
          <h1 style={{ fontSize: 'clamp(1.8rem, 4vw, 2.8rem)', color: 'var(--cta-heading)', marginBottom: '1rem', lineHeight: 1.2 }}>
            Singapore's Specialist in<br /><span style={{ color: 'var(--gold)' }}>L-Shaped Storage Racks</span>
          </h1>
          <p style={{ fontSize: '1rem', color: 'var(--dark-muted)', lineHeight: 1.75 }}>
            We started with one simple observation: HDB storerooms are small, but corners are almost always wasted. We built a rack that fixes that — and BTO couples across Singapore haven't looked back.
          </p>
        </div>
      </section>

      {/* Mission */}
      <section style={{ padding: '3.5rem 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>
            <div className="eyebrow">Our Mission</div>
            <h2 style={{ fontSize: '1.6rem', marginBottom: '1rem' }}>Every square foot of your new home should work hard for you</h2>
            <p style={{ fontSize: '0.9rem', lineHeight: 1.78, marginBottom: '1rem' }}>
              When a couple gets their BTO keys, they invest months planning the living room, the bedroom, the kitchen — every space is thoughtfully designed. Then the storeroom gets left as an afterthought, and within months it becomes a chaotic pile.
            </p>
            <p style={{ fontSize: '0.9rem', lineHeight: 1.78, marginBottom: '1.5rem' }}>
              Our mission is to change that. We build custom L-shaped racks that turn your storeroom into the most organised room in the house — measured precisely, installed cleanly, and built to last for years.
            </p>
            <Link href="/quotation" className="btn-primary">Get a Free Quotation</Link>
          </div>
          <div style={{ borderRadius: 12, overflow: 'hidden', position: 'relative', aspectRatio: '4/3' }}>
            <Image src="/images/l-shaped-rack/L-Shaped-Rack.jpg" alt="L-shaped rack Singapore" fill style={{ objectFit: 'cover' }} />
          </div>
        </div>
      </section>

      {/* Values */}
      <section style={{ padding: '3.5rem 1.5rem', background: 'var(--section-alt)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div className="eyebrow">What Sets Us Apart</div>
          <h2 style={{ fontSize: '1.5rem', marginBottom: '2rem' }}>Why BTO couples choose us</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
            {values.map((v, i) => (
              <div key={i} className="card" style={{ padding: '1.5rem' }}>
                <div style={{ fontSize: 32, marginBottom: 12 }}>{v.icon}</div>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--heading)', marginBottom: 6 }}>{v.title}</div>
                <p style={{ fontSize: 13, color: 'var(--body)', lineHeight: 1.65, margin: 0 }}>{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: 'var(--dark-bg)', padding: '2.5rem 1.5rem', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 700, margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{ fontSize: '1.4rem', color: 'var(--cta-heading)', marginBottom: 10 }}>Ready to set up your storeroom right?</h2>
          <p style={{ fontSize: '0.875rem', color: 'var(--gold)', marginBottom: '1.5rem', opacity: 0.9 }}>Free quotation in 24 hours. No hard sell.</p>
          <Link href="/quotation" className="btn-gold">Plan My Storeroom →</Link>
        </div>
      </section>
    </>
  )
}