/* global React */
// Offers
const NS_O = window.GamekeepersCottageDesignSystem_070bc7;
const { Eyebrow, Button, Card, Badge } = NS_O;
const Photo = window.GKPhoto;
const useShell = window.GKuseShell;
const IMG = window.GK_IMG;

const OFFERS = [
  ['Second week half price', 'Off-season', IMG.woodDen, 'Book two consecutive weeks outside the peak season and the second week is half price. Perfect for a proper, unhurried woodland retreat — settle in and let the days slow right down.', 'Subject to availability · off-peak dates'],
  ['Midweek woodland breaks', 'Short stays', IMG.living1, 'Three- and four-night midweek breaks from £130 per night. Ideal for a quiet escape between the weekends, with the whole wood to yourselves.', 'From £130/night · Mon–Thu'],
  ['Last-minute availability', 'This month', IMG.garden2, 'Free dates in the next few weeks at our best rates. If you can be flexible, get in touch and we’ll see what we can do for you.', 'Ask us about current gaps'],
  ['Christmas & New Year', 'Seasonal', IMG.stroll, 'Spend the festive season in the wood — a log burner, frosty walks and complete peace. Limited dates, available on request.', 'On request · books up early'],
];

function OffersContent() {
  const { openBooking } = useShell();
  return (
    <React.Fragment>
      <section className="section--tight" style={{ paddingTop: 56 }}>
        <div className="container">
          <Eyebrow>Special offers</Eyebrow>
          <h1 className="h1" style={{ margin: '14px 0 14px' }}>Ways to make your stay go further</h1>
          <p className="lead muted" style={{ maxWidth: 600 }}>A few honest offers from us — no gimmicks. If your dates are flexible, do ask; we'd always rather the cottage was enjoyed than empty.</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container">
          <div className="grid grid-2">
            {OFFERS.map(([title, tag, img, body, fine]) => (
              <Card key={title} padding="none">
                <div className="offer-card" style={{ display: 'grid', gridTemplateColumns: '180px 1fr' }}>
                  <Photo src={img} ratio="auto" style={{ height: '100%', aspectRatio: 'auto', minHeight: 220 }} />
                  <div style={{ padding: 'var(--space-7, 28px)', paddingLeft: 28, paddingRight: 28, paddingTop: 26, paddingBottom: 26, display: 'flex', flexDirection: 'column' }}>
                    <div style={{ marginBottom: 10 }}><Badge tone="gold">{tag}</Badge></div>
                    <h2 className="h3" style={{ marginBottom: 10 }}>{title}</h2>
                    <p className="muted" style={{ margin: '0 0 16px', fontSize: 15.5, lineHeight: 1.6, flex: 1 }}>{body}</p>
                    <div style={{ fontSize: 13, color: 'var(--text-soft)', marginBottom: 14 }}>{fine}</div>
                    <div><Button variant="primary" size="md" onClick={openBooking}>Check availability</Button></div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--soft" style={{ textAlign: 'center' }}>
        <div className="container container--narrow">
          <h2 className="h2" style={{ marginBottom: 12 }}>Not sure which dates work?</h2>
          <p className="lead muted" style={{ marginBottom: 26 }}>Tell us roughly when you'd like to come and how many of you there are — Nick will come back with options and the best price.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" onClick={openBooking}>Check rates &amp; reserve</Button>
            <Button variant="secondary" size="lg" as="a" href="contact">Contact us</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.GKmount('offers', OffersContent);