// A small handwritten welcome from the host. Sits between the picker and
// the first cottage section. Uses the chalkboard / parchment motif.
const HostNote = () => (
  <section style={{
    padding: '64px 56px',
    background: `linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%)`,
  }}>
    <div className="slf-hostnote-grid" style={{
      maxWidth: 880, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 40, alignItems: 'center',
    }}>
      <div className="slf-zoom slf-hostnote-photo" style={{
        borderRadius: 999, aspectRatio: '1 / 1',
        boxShadow: 'var(--shadow-2)',
      }}>
        <img src="assets/buttercup/dog.jpg" alt="Harriet and Richard — Slowley Farm"/>
      </div>
      <div>
        <div className="eyebrow" style={{ color: 'var(--terracotta-deep)', marginBottom: 14 }}>A note from us</div>
        <p style={{
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 'clamp(20px, 1.7vw, 26px)', lineHeight: 1.55,
          color: 'var(--fg)', margin: 0,
        }}>
          “Slowley has been in the family for three generations. Richard's grandparents
          bought the farm after the war; his parents raised four children here; and now
          we're raising ours among the same hedgerows. The two cottages were once part of
          the working yard — we've put them back together slowly, with our own hands,
          and opened them up so others can share what we love about this corner of Exmoor.
          The kettle goes on for you on the night you arrive.”
        </p>
        <p style={{
          fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--fg-3)', marginTop: 18,
        }}>
          — Harriet &amp; Richard · Slowley Farm
        </p>
      </div>
    </div>
  </section>
);

window.HostNote = HostNote;