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

export const metadata: Metadata = {
  title: 'L-Shaped Rack Singapore — Custom HDB BTO Storeroom Racks',
  description: 'Custom L-shaped racks for HDB BTO storerooms and bomb shelters. No centre pole design, measured to fit your exact space, installed before your move-in day.',
}

const stats = [
  { n: '600+', l: 'BTO projects completed' },
  { n: '28',   l: 'BTO estates served' },
  { n: '4.9★', l: 'Google Reviews rating' },
  { n: '1 day', l: 'delivery & installation' },
]

const photos = [
  { src: '/images/l-shaped-rack/L-shaped-rack-banner.jpg',   loc: 'Tengah',    typ: '5-tier bomb shelter' },
  { src: '/images/l-shaped-rack/L-shaped-rack-banner1.jpg',  loc: 'Punggol',   typ: '4-tier storeroom' },
  { src: '/images/l-shaped-rack/L-shaped-rack-banner3.jpg',  loc: 'Woodlands', typ: '6-tier max config' },
  { src: '/images/l-shaped-rack/L-shaped-rack-banner4.jpg',  loc: 'Canberra',  typ: '5+3-tier mixed' },
]

const btoLocations = [
  { name: 'Tengah',          detail: 'Plantation Creek · 14 installs', isNew: true },
  { name: 'Punggol',         detail: 'Northshore Edge · 11 installs',  isNew: true },
  { name: 'Woodlands',       detail: 'Lakeside View · 9 installs' },
  { name: 'Yishun',          detail: 'Valley Spring · 8 installs' },
  { name: 'Tampines',        detail: 'GreenRidges · 12 installs' },
  { name: 'Canberra',        detail: 'Canberra Link · 10 installs',    isNew: true },
  { name: 'Sengkang',        detail: 'Rivervale Shores · 9 installs' },
  { name: 'Sembawang',       detail: 'Sun Plaza Spring · 8 installs',  isNew: true },
  { name: 'Bukit Batok',     detail: 'West Hill · 7 installs' },
  { name: 'Hougang',         detail: 'Kovan Wellspring · 6 installs' },
  { name: 'Kallang/Whampoa', detail: '6 installs' },
  { name: 'Queenstown',      detail: 'Stirling Crescent · 5 installs' },
  { name: 'Toa Payoh',       detail: 'Bidadari · 5 installs' },
  { name: 'Bishan',          detail: '4 installs' },
  { name: 'Ang Mo Kio',      detail: '5 installs' },
  { name: 'Jurong West',     detail: '7 installs' },
]

const reviews = [
  { initials: 'JW', name: 'Jasmine & Wei Ming', meta: '4-room BTO · Tengah',   when: '2 weeks ago',  avBg: '#dbeafe', avTxt: '#1e3a5f', text: '"Got our rack installed before we even moved in — best decision we made for our BTO. The team measured everything precisely and the rack fits like it was built into the wall. Storeroom sorted from day one."' },
  { initials: 'DA', name: 'Derrick & Alicia',   meta: '5-room BTO · Punggol',  when: '1 month ago',  avBg: '#dcfce7', avTxt: '#166534', text: '"The no-centre-pole design is a game changer — you can actually walk in and access everything easily. We planned everything else for our new flat but forgot the storeroom. So glad we found this company."' },
  { initials: 'FI', name: 'Farah & Iqbal',      meta: '3-room BTO · Canberra', when: '3 weeks ago',  avBg: '#fef3c7', avTxt: '#92400e', text: '"Bomb shelter is tiny and we were worried nothing would fit. They came to measure in person and showed us exactly what the rack would look like. Final installation was perfect — every cm of the L is used."' },
]

export default function Home() {
  return (
    <>
      {/* ── HERO ── */}
      <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 520, background: 'var(--page-bg)' }}>
        <div style={{ padding: 'clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: '1.25rem', maxWidth: 560 }}>
          <span className="tag" style={{ width: 'fit-content' }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
            For new HDB BTO homeowners
          </span>
          <h1 style={{ fontSize: 'clamp(1.6rem, 3.5vw, 2.4rem)', fontWeight: 500, lineHeight: 1.2 }}>
            Your New Home Deserves a Storeroom That{' '}
            <em style={{ color: 'var(--gold)', fontStyle: 'normal' }}>Works From Day One</em>
          </h1>
          <p style={{ fontSize: '0.9rem', lineHeight: 1.78, color: 'var(--body)' }}>
            Most BTO couples plan every room beautifully — then the storeroom becomes an afterthought on move-in day. We make sure that never happens. Custom L-shaped racks, measured and installed before you move in.
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: '0.25rem' }}>
            <Link href="/quotation" className="btn-primary">Start Planning My Rack</Link>
            <Link href="/reviews" className="btn-ghost">See installed projects →</Link>
          </div>
        </div>

        {/* Hero image */}
        <div style={{ position: 'relative', minHeight: 360, background: 'var(--photo-bg)' }}>
          <Image
            src="/images/l-shaped-rack/L-Shaped-Rack.jpg"
            alt="L-shaped rack installed in HDB storeroom"
            fill
            style={{ objectFit: 'cover' }}
            priority
          />
          {/* Live badge */}
          <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16, background: 'var(--badge-bg)', borderRadius: 9, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, backdropFilter: 'blur(4px)' }}>
            <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#22c55e', flexShrink: 0, display: 'block' }} />
            <div>
              <strong style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--heading)' }}>Tengah BTO — Installed last week</strong>
              <span style={{ fontSize: 10.5, color: 'var(--body)' }}>5-tier L-shaped rack · Bomb shelter</span>
            </div>
          </div>
        </div>
      </section>

      {/* ── STATS ── */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', background: 'var(--dark-bg)' }}>
        {stats.map((s, i) => (
          <div key={i} style={{ padding: '1.1rem 1.25rem', textAlign: 'center', borderRight: i < stats.length - 1 ? '0.5px solid var(--dark-border)' : 'none' }}>
            <div style={{ fontSize: 22, fontWeight: 500, color: 'var(--gold)' }}>{s.n}</div>
            <div style={{ fontSize: 10.5, color: 'var(--dark-muted)', marginTop: 3 }}>{s.l}</div>
          </div>
        ))}
      </div>

      {/* ── PLANNING GUIDE ── */}
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-bg)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="eyebrow">Planning Guide</div>
          <h2 style={{ fontSize: '1.4rem', marginBottom: 4 }}>Not sure where to start? We'll guide you.</h2>
          <p style={{ fontSize: '0.875rem', color: 'var(--body)', marginBottom: '1.75rem' }}>
            Follow these 4 steps — from measuring your storeroom to choosing the right rack configuration.
          </p>
          <PlanningGuide />
        </div>
      </section>

      {/* ── PHOTO GALLERY ── */}
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-alt)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="eyebrow">Real Installations</div>
          <h2 style={{ fontSize: '1.4rem', marginBottom: 4 }}>See what we've built for BTO homeowners like you</h2>
          <p style={{ fontSize: '0.875rem', color: 'var(--body)', marginBottom: '1.5rem' }}>
            Every photo is a real customer's storeroom — no staging, no mockups.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {photos.map((p, i) => (
              <div key={i} style={{ borderRadius: 10, overflow: 'hidden', position: 'relative', aspectRatio: '3/4', background: 'var(--photo-bg)' }}>
                <Image src={p.src} alt={`L-shaped rack installed in ${p.loc}`} fill style={{ objectFit: 'cover' }} />
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'var(--photo-overlay)', padding: '9px 12px' }}>
                  <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--gold)' }}>{p.loc}</div>
                  <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)' }}>{p.typ}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: '1.75rem' }}>
            <Link href="/reviews" className="btn-ghost">View all installations →</Link>
          </div>
        </div>
      </section>

      {/* ── BTO LOCATIONS ── */}
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-bg)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="eyebrow">Recent BTO Projects</div>
          <h2 style={{ fontSize: '1.4rem', marginBottom: 4 }}>We've installed racks across these BTO estates in the last 6 months</h2>
          <p style={{ fontSize: '0.875rem', color: 'var(--body)', marginBottom: '1.5rem' }}>
            Neighbours who got their keys recently — we were there too.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 8 }}>
            {btoLocations.map((b, i) => (
              <div key={i} className="card" style={{ padding: '9px 12px', display: 'flex', alignItems: 'center', gap: 9 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
                </svg>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--heading)', display: 'flex', alignItems: 'center', gap: 5 }}>
                    {b.name}
                    {b.isNew && <span style={{ fontSize: 9, background: 'var(--tag-bg)', color: 'var(--tag-txt)', padding: '1px 6px', borderRadius: 100, fontWeight: 500 }}>New</span>}
                  </div>
                  <div style={{ fontSize: 10, color: 'var(--body)' }}>{b.detail}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── GOOGLE TESTIMONIALS ── */}
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-alt)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '1.5rem', gap: '1rem', flexWrap: 'wrap' }}>
            <div>
              <div className="eyebrow">Customer Reviews</div>
              <h2 style={{ fontSize: '1.4rem', marginBottom: 4 }}>What BTO homeowners say about us</h2>
              <p style={{ fontSize: '0.875rem', color: 'var(--body)' }}>Real reviews from Google — unfiltered, from real neighbours.</p>
            </div>
            <div className="card" style={{ padding: '12px 18px', textAlign: 'center', flexShrink: 0 }}>
              <GoogleLogo size={13} />
              <div style={{ fontSize: 24, fontWeight: 500, color: 'var(--heading)', marginTop: 4 }}>4.9</div>
              <div className="g-stars" style={{ fontSize: 14 }}>★★★★★</div>
              <div style={{ fontSize: 10.5, color: 'var(--body)', marginTop: 2 }}>Based on 128 reviews</div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12, marginBottom: '1rem' }}>
            {reviews.map((r, i) => (
              <div key={i} className="card" style={{ padding: '1.1rem' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', background: r.avBg, color: r.avTxt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 500, flexShrink: 0 }}>{r.initials}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--heading)' }}>{r.name}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--body)' }}>{r.meta}</div>
                  </div>
                  <GoogleLogo size={11} />
                </div>
                <div style={{ fontSize: 12, marginBottom: 7 }}>
                  <span className="g-stars">★★★★★</span>
                  <span style={{ fontSize: 10, color: 'var(--body)', marginLeft: 7 }}>{r.when}</span>
                </div>
                <p style={{ fontSize: 12, fontStyle: 'italic', color: 'var(--body)', lineHeight: 1.68, margin: 0 }}>{r.text}</p>
              </div>
            ))}
          </div>

          <div className="card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '11px', cursor: 'pointer' }}>
            <GoogleLogo size={12} />
            <span style={{ fontSize: 12, color: 'var(--body)' }}>Read all 128 reviews on Google</span>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--body)" strokeWidth="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15,3 21,3 21,9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
          </div>
        </div>
      </section>

      {/* ── CTA BANNER ── */}
      <section style={{ background: 'var(--dark-bg)', padding: '2rem 1.5rem', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ background: 'var(--cta-inner)', borderRadius: 12, padding: '2.25rem', display: 'grid', gridTemplateColumns: '1fr auto', gap: '2rem', alignItems: 'center' }}>
            <div>
              <h2 style={{ fontSize: '1.25rem', fontWeight: 500, color: 'var(--cta-heading)', marginBottom: 7 }}>
                Ready to plan your storeroom before move-in day?
              </h2>
              <p style={{ fontSize: '0.875rem', color: 'var(--gold)', lineHeight: 1.65, margin: 0, opacity: 0.9 }}>
                Tell us your room size → we recommend the right rack → free quotation in 24 hours.<br />
                No hard sell. Hundreds of BTO neighbours have done this already.
              </p>
            </div>
            <Link href="/quotation" className="btn-gold" style={{ whiteSpace: 'nowrap', fontSize: 13 }}>
              Start Planning →
            </Link>
          </div>
        </div>
      </section>
    </>
  )
}

function GoogleLogo({ size = 12 }: { size?: number }) {
  const s = size
  return (
    <span style={{ display: 'inline-flex', gap: 1, alignItems: 'center' }}>
      {[['#4285F4','G'],['#EA4335','o'],['#FBBC05','o'],['#4285F4','g'],['#34A853','l'],['#EA4335','e']].map(([c,l],i) => (
        <span key={i} style={{ fontSize: s, fontWeight: 500, color: c, lineHeight: 1 }}>{l}</span>
      ))}
    </span>
  )
}