import type { Metadata } from 'next'
import Image from 'next/image'
export const metadata: Metadata = { title: 'Customer Reviews', description: 'Real Google reviews from HDB BTO homeowners who chose L-Shaped Rack Singapore.' }

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. Highly recommend for all BTO owners.' },
  { 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. Final installation was perfect — every cm of the L is used. Very professional team.' },
  { initials:'KL', name:'Ken & Lily',            meta:'4-room BTO · Tampines',        when:'2 months ago', avBg:'#ede9fe', avTxt:'#4c1d95', text:'Fast delivery, clean installation. The team arrived on time, finished in 3 hours and cleared up everything before leaving. Very impressed.' },
  { initials:'RC', name:'Ryan & Clara',          meta:'5-room BTO · Sengkang',        when:'6 weeks ago',  avBg:'#fce7f3', avTxt:'#831843', text:'Called 3 different companies. This one was most responsive, most professional, and the finished rack looks amazing. Worth every dollar.' },
  { initials:'SH', name:'Samuel & Hannah',       meta:'4-room BTO · Woodlands',       when:'5 weeks ago',  avBg:'#ecfdf5', avTxt:'#064e3b', text:'We got the 5-tier configuration on one arm and 3-tier raised on the other. Gives us floor space for the vacuum and still maximum shelf storage.' },
  { initials:'BT', name:'Bryan & Tricia',        meta:'3-room BTO · Bukit Batok',     when:'3 months ago', avBg:'#fff7ed', avTxt:'#7c2d12', text:'Really appreciated that they recommended the best layout for our oddly-shaped storeroom. The final result is exactly what we hoped for.' },
  { initials:'MW', name:'Marcus & Wendy',        meta:'5-room BTO · Sembawang',       when:'1 month ago',  avBg:'#f0f9ff', avTxt:'#0c4a6e', text:'Second time ordering — got one for the storeroom when we first moved in, and now a second one for the bomb shelter. Both excellent.' },
  { initials:'JT', name:'Joel & Tiffany',        meta:'4-room BTO · Hougang',         when:'7 weeks ago',  avBg:'#fdf4ff', avTxt:'#581c87', text:'WhatsApp response was very fast. They explained everything clearly and the measurement visit was quick. Rack delivered in 6 days.' },
]

function GLogo({ s=12 }:{s?:number}) {
  return <span style={{display:'inline-flex',gap:1}}>{[['#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>
}

export default function Reviews() {
  return (
    <>
      <section style={{ background: 'var(--dark-bg)', padding: '3.5rem 1.5rem 2.5rem' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '2rem', flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow">Customer Reviews</div>
            <h1 style={{ fontSize: 'clamp(1.6rem,3.5vw,2.4rem)', color: 'var(--cta-heading)', marginBottom: '0.75rem' }}>What BTO homeowners say about us</h1>
            <p style={{ fontSize: '0.9rem', color: 'var(--dark-muted)', lineHeight: 1.72 }}>Real reviews from Google — unfiltered, from real neighbours across Singapore.</p>
          </div>
          <div style={{ background: 'rgba(255,255,255,0.06)', border: '0.5px solid rgba(255,255,255,0.1)', borderRadius: 12, padding: '1.25rem 1.75rem', textAlign: 'center', flexShrink: 0 }}>
            <GLogo s={13} />
            <div style={{ fontSize: 32, fontWeight: 500, color: 'var(--cta-heading)', margin: '4px 0 2px' }}>4.9</div>
            <div style={{ color: '#f5a623', fontSize: 16 }}>★★★★★</div>
            <div style={{ fontSize: 11, color: 'var(--dark-muted)', marginTop: 4 }}>128 verified reviews</div>
          </div>
        </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: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 14, marginBottom: '2rem' }}>
            {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>
                  <GLogo s={10} />
                </div>
                <div style={{ fontSize:12, marginBottom:7 }}>
                  <span style={{ color:'#f5a623' }}>★★★★★</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 style={{ textAlign:'center' }}>
            <a href="https://g.page/r/your-google-review-link" target="_blank" rel="noopener noreferrer" className="btn-primary">
              Read all 128 reviews on Google ↗
            </a>
          </div>
        </div>
      </section>
      {/* Photo gallery */}
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-alt)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div className="eyebrow">Installation Gallery</div>
          <h2 style={{ fontSize: '1.4rem', marginBottom: '1.25rem' }}>Real storerooms we've transformed</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 10 }}>
            {['L-Shaped-3-Tier-Raise-Shelves','L-Shaped-4-Tier-Raise-Shelves','L-Shaped-4-Tier-Shelves','L-Shaped-5-Tier-Shelves','L-Shaped-6-Tier-Shelves','L-Shaped-4-Tier-With-3-Tier-Shelves'].map((img,i) => (
              <div key={i} style={{ borderRadius:10, overflow:'hidden', position:'relative', aspectRatio:'3/4', background:'var(--photo-bg)' }}>
                <Image src={`/images/l-shaped-rack/${img}.jpg`} alt={img.replace(/-/g,' ')} fill style={{ objectFit:'cover' }} />
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  )
}