import type { Metadata } from 'next'
export const metadata: Metadata = { title: 'Return & Refund Policy' }
export default function ReturnRefund() {
  return (
    <PolicyPage title="Return & Refund Policy" updated="1 June 2025">
      <h2>Custom-Built Products</h2>
      <p>All L-shaped racks are custom-built to your confirmed measurements and specifications. As such, we are <strong>unable to accept returns or exchanges for change of mind</strong> once fabrication has commenced.</p>
      <h2>Manufacturing Defects</h2>
      <p>If your rack arrives with a manufacturing defect — including structural issues, incorrect dimensions compared to your confirmed order, or damaged parts — we will rectify the issue at no charge. Please contact us within 7 days of installation with photos of the defect.</p>
      <h2>Order Cancellation</h2>
      <p>Orders may be cancelled within 24 hours of placement for a full refund. After 24 hours, fabrication may have commenced and cancellations cannot be processed.</p>
      <h2>How to Raise a Claim</h2>
      <p>Email us at hello@lshapedrack.sg or WhatsApp us with your order number and photos. We aim to respond within 1 business day.</p>
    </PolicyPage>
  )
}
function PolicyPage({ title, updated, children }: { title: string; updated: string; children: React.ReactNode }) {
  return (
    <>
      <section style={{ background: 'var(--dark-bg)', padding: '3rem 1.5rem 2rem' }}>
        <div style={{ maxWidth: 700, margin: '0 auto' }}>
          <div className="eyebrow">Legal</div>
          <h1 style={{ fontSize: '2rem', color: 'var(--cta-heading)', marginBottom: 8 }}>{title}</h1>
          <p style={{ fontSize: 12, color: 'var(--dark-muted)' }}>Last updated: {updated}</p>
        </div>
      </section>
      <section style={{ padding: '2.5rem 1.5rem', background: 'var(--section-bg)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 700, margin: '0 auto' }} className="policy-body">
          {children}
        </div>
      </section>
      <style>{`
        .policy-body h2 { font-size: 1rem; font-weight: 600; color: var(--heading); margin: 1.75rem 0 0.5rem; }
        .policy-body p { font-size: 0.9rem; color: var(--body); line-height: 1.78; margin: 0 0 0.75rem; }
        .policy-body ul { padding-left: 1.25rem; color: var(--body); font-size: 0.9rem; line-height: 1.78; }
      `}</style>
    </>
  )
}