// Things to do — Exmoor walks, pubs, Dunster, Tarr Steps.
// A list-of-cards layout with distance, type, and a one-line write-up.
const ThingsToDo = () => {
  const items = [
    { type: 'Walk',     name: 'Tarr Steps',          mins: 18, copy: "An ancient clapper bridge over the River Barle. Walk the woods upstream; pub at the end.", img: 'assets/farm/lane-trees.jpg' },
    { type: 'Village',  name: 'Dunster',             mins: 22, copy: "Cobbled high street, a yarn market, and a castle on the hill. The bakery does a proper saffron bun.", img: 'assets/farm/lane.jpg' },
    { type: 'Walk',     name: 'Dunkery Beacon',      mins: 12, copy: "The highest point in Somerset. Heather, ponies, and a long view to the Bristol Channel.", img: 'assets/farm/hills.jpg' },
    { type: 'Pub',      name: 'The Royal Oak, Winsford', mins: 10, copy: "A 12th-century thatched pub. Sit by the fire with a pint of Exmoor Ale.", img: 'assets/buttercup/fireplace.jpg' },
    { type: 'Wood',     name: 'Horner Wood',         mins: 25, copy: "Ancient oak woodland; bluebells in May, fungi in autumn. Park at Horner Tea Garden.", img: 'assets/farm/bluebell-path.jpg' },
    { type: 'Coast',    name: 'Porlock Weir',        mins: 30, copy: "A pebble beach, a small harbour, oysters at the Ship. Drive Porlock Hill on the way down.", img: 'assets/farm/foxgloves.jpg' },
  ];

  const typeColor = (t) => ({
    Walk: 'var(--sage-deep)',
    Village: 'var(--terracotta-deep)',
    Pub: 'var(--rust)',
    Wood: 'var(--moss)',
    Coast: 'var(--bluebell)',
  })[t] || 'var(--slate-2)';

  return (
    <section id="things-to-do" style={{ padding: '120px 56px', background: 'var(--bg)' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Things to do</div>
          <h2 style={{ fontSize: 'var(--fs-h2)', margin: 0 }}>An hour from anywhere worth going.</h2>
          <p className="lead" style={{ marginTop: 18 }}>
            We've drawn up a longer list and left it on the kitchen table. These are the ones we'd send you to first.
          </p>
        </div>

        <ul className="slf-todo-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
          listStyle: 'none', padding: 0, margin: 0,
        }}>
          {items.map((it) => (
            <li key={it.name} style={{
              background: 'var(--bg-2)', border: '1px solid var(--border)',
              borderRadius: 'var(--radius-md)', overflow: 'hidden',
              display: 'flex', flexDirection: 'column',
              transition: 'transform var(--dur-mid) var(--ease-out)',
            }}>
              <div className="slf-zoom" style={{ aspectRatio: '5 / 3' }}>
                <img src={it.img} alt={it.name} loading="lazy"/>
              </div>
              <div style={{ padding: '20px 22px 22px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{
                    fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 700,
                    letterSpacing: '0.18em', textTransform: 'uppercase',
                    color: typeColor(it.type),
                  }}>{it.type}</span>
                  <span style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--border-strong)' }}/>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--fg-3)' }}>
                    {it.mins} min&nbsp;drive
                  </span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500, color: 'var(--fg)', margin: 0 }}>
                  {it.name}
                </h3>
                <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0 }}>
                  {it.copy}
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

window.ThingsToDo = ThingsToDo;