/* global React, lucide */
/* =======================================================================
   St Sampson Parish — Homepage mid sections: ledger, services, douzaine, notices
   ======================================================================= */

const NEWS_FEATURED = {
  day: '16', mon: 'Apr', cat: 'Parish',
  title: 'A Spring from the harbour wall: notes from the 2026 Parish Meeting.',
  snippet: "The Constables reported on the year's rates, the restoration of the Bulwer Avenue drains, and a vote on the replacement of three bornements lost during the winter storms.",
  byline: 'Adrian Dilcock, Senior Constable',
};

const NEWS_ITEMS = [
  { day: '09', mon: 'Apr', cat: 'Parish · Delancey', title: 'Vandalism at Delancey Park — update for parishioners.',
    snippet: 'Following the recent unauthorised excavation of ramps in the south field, the parish has engaged the States of Guernsey groundsmen to restore the turf by the first week of May.' },
  { day: '02', mon: 'Apr', cat: 'Refuse', title: 'A reminder on items that cannot be placed in the clear bag.',
    snippet: 'Parishioners are reminded that carrier bags, cling film, polythene, bubble wrap, plastic toys and crisp packets remain unsuitable for kerbside recycling.' },
  { day: '16', mon: 'Mar', cat: 'Meeting', title: 'Parish Surgery — Saturday 21 March, 10am at La Chambre.',
    snippet: 'Douzeniers will be available to meet parishioners to discuss any matters or queries which affect the parish, from hedges to planning.' },
  { day: '26', mon: 'Jan', cat: 'In memoriam', title: 'The passing of Douzenier John Randall.',
    snippet: 'It is with great sadness that the Constables and Douzaine of St Sampson must advise parishioners of the passing of serving Douzenier John Randall, who served the parish for eleven years.' },
];

function FeaturedSVG() {
  return (
    <svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="fSky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#E8E3D8" />
          <stop offset="100%" stopColor="#F6F1E6" />
        </linearGradient>
      </defs>
      <rect width="800" height="450" fill="url(#fSky)" />
      {/* granite building - town hall */}
      <rect x="200" y="180" width="400" height="210" fill="#7A7770" />
      <rect x="200" y="180" width="400" height="210" fill="none" stroke="#33332F" strokeOpacity="0.4" />
      {/* stone courses */}
      {Array.from({length:6}).map((_,i)=>(
        <line key={i} x1="200" y1={200+i*32} x2="600" y2={200+i*32} stroke="#33332F" strokeOpacity="0.25" />
      ))}
      {/* roof */}
      <polygon points="190,180 400,110 610,180" fill="#33332F" />
      <polygon points="190,180 400,110 610,180" fill="none" stroke="#1A1A1A" />
      {/* windows */}
      {[260, 340, 420, 500].map((x,i)=>(
        <g key={i}>
          <rect x={x} y="220" width="44" height="80" fill="#1F3A4D" stroke="#1A1A1A" />
          <line x1={x+22} y1="220" x2={x+22} y2="300" stroke="#F6F1E6" strokeWidth="2" />
          <line x1={x} y1="260" x2={x+44} y2="260" stroke="#F6F1E6" strokeWidth="2" />
        </g>
      ))}
      {/* door */}
      <rect x="380" y="310" width="40" height="80" fill="#9A6B2F" stroke="#1A1A1A" />
      <circle cx="410" cy="352" r="2" fill="#D9B472" />
      {/* clock */}
      <circle cx="400" cy="150" r="14" fill="#F6F1E6" stroke="#1A1A1A" />
      <line x1="400" y1="150" x2="400" y2="140" stroke="#1A1A1A" strokeWidth="1.5" />
      <line x1="400" y1="150" x2="406" y2="150" stroke="#1A1A1A" strokeWidth="1.5" />
      {/* ground */}
      <rect x="0" y="390" width="800" height="60" fill="#BFB9AC" />
      <line x1="0" y1="390" x2="800" y2="390" stroke="#7A7770" />
      {/* trees */}
      <g transform="translate(90 310)">
        <rect x="-4" y="50" width="8" height="36" fill="#33332F" />
        <circle cx="0" cy="40" r="46" fill="#4F6B3E" />
        <circle cx="-18" cy="48" r="34" fill="#4F6B3E" />
        <circle cx="22" cy="52" r="32" fill="#4F6B3E" />
      </g>
      <g transform="translate(710 320)">
        <rect x="-3" y="44" width="6" height="30" fill="#33332F" />
        <circle cx="0" cy="34" r="38" fill="#4F6B3E" />
        <circle cx="-14" cy="42" r="28" fill="#4F6B3E" />
      </g>
    </svg>
  );
}

function Ledger({ setRoute }) {
  return (
    <section className="ledger">
      <div className="section-head">
        <div className="section-head-title">
          <div className="sh-eyebrow">№ 01 — Parish Ledger</div>
          <h2>News & notices from <em>the Constables</em></h2>
        </div>
        <div className="section-head-side">
          Posted by the Office of the Constables. Serious notices are signed and sealed
          by the Senior Constable in the form of the Douzaine.
        </div>
      </div>

      <div className="ledger-grid">
        <article className="ledger-featured">
          <div className="ledger-featured-img"><FeaturedSVG /></div>
          <div className="ledger-featured-body">
            <div className="ledger-dateline">
              <span className="dot" />
              <span>{NEWS_FEATURED.mon} {NEWS_FEATURED.day}, 2026</span>
              <span className="tag">{NEWS_FEATURED.cat}</span>
            </div>
            <h3>{NEWS_FEATURED.title}</h3>
            <p>{NEWS_FEATURED.snippet}</p>
            <div className="byline">{NEWS_FEATURED.byline}</div>
          </div>
        </article>

        <div className="ledger-list">
          {NEWS_ITEMS.map((n, i) => (
            <article key={i} className="ledger-item" onClick={() => setRoute && setRoute('news')}>
              <div className="li-date">
                <span className="day">{n.day}</span>
                <span className="mon">{n.mon}</span>
              </div>
              <div className="li-body">
                <div className="li-cat">{n.cat}</div>
                <h4 className="li-title">{n.title}</h4>
                <p className="li-snippet">{n.snippet}</p>
                <span className="li-arrow">→</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  { num: '01', title: 'Parish rates', em: 'rates', desc: 'Annual parish rate, property list and assessment queries. Bills are issued each June.',
    qLabel: 'Current rate', qValue: '£0.78 / qtr', },
  { num: '02', title: 'Refuse & recycling', em: 'recycling', desc: 'Collection calendars by round, clear and blue bag guidance, and bulky-waste bookings.',
    qLabel: 'Your next collection', qValue: 'Tue 28 April', },
  { num: '03', title: 'Hedges & streams', em: 'streams', desc: 'The parishioner’s statutory duty to cut hedges and clear streams by 15 June each year.',
    qLabel: 'Deadline', qValue: '15 June 2026', },
  { num: '04', title: 'Bornements', em: 'Bornements', desc: 'Boundary stone inspections — a Douzenier accompanies any agreed marking or repair.',
    qLabel: 'Inspections', qValue: 'Biennial', },
  { num: '05', title: 'Dog tax & registration', em: 'Dog tax', desc: 'Annual dog tax registration at La Chambre de la Douzaine; badges issued on payment.',
    qLabel: 'Annual fee', qValue: '£7.00', },
  { num: '06', title: 'Planning & building', em: 'Planning', desc: 'Douzaine consultation responses on planning applications within the parish boundary.',
    qLabel: 'Consultation', qValue: 'Thu evenings', },
];

function Services() {
  return (
    <section className="services">
      <div className="section-head">
        <div className="section-head-title">
          <div className="sh-eyebrow">№ 02 — For Parishioners</div>
          <h2>A <em>register</em> of parish services</h2>
        </div>
        <div className="section-head-side">
          The Douzaine carries out a small number of statutory duties on behalf of
          parishioners. Use this register to find what you need.
        </div>
      </div>

      <div className="services-toc">
        {SERVICES.map((s) => (
          <a key={s.num} href="#" className="toc-row" onClick={(e)=>e.preventDefault()}>
            <div className="toc-num">№ {s.num}</div>
            <div className="toc-title">{s.title.replace(s.em, '')}<em>{s.em}</em></div>
            <div className="toc-desc">{s.desc}</div>
            <div className="toc-quick">
              <span>{s.qLabel}</span>
              <b>{s.qValue}</b>
            </div>
            <div className="toc-arrow">→</div>
          </a>
        ))}
      </div>
    </section>
  );
}

const PEOPLE = [
  { name: 'Brad Le Flock', role: 'Dean', initials: 'BL' },
  { name: 'Andrew Carre', role: 'Vice Dean', initials: 'AC' },
  { name: 'Michael Beaumont', role: 'Douzenier', initials: 'MB' },
  { name: 'Kim Abbotts', role: 'Douzenier', initials: 'KA' },
  { name: 'Anne Jacob', role: 'Douzenier', initials: 'AJ' },
  { name: 'Anna Shaw', role: 'Douzenier', initials: 'AS' },
  { name: 'Adrian Dilcock', role: 'Senior Constable', initials: 'AD' },
  { name: 'Joe Abbotts', role: 'Junior Constable', initials: 'JA' },
  { name: 'Paul Watts', role: 'Douzenier', initials: 'PW' },
  { name: 'David Hannah', role: 'Douzenier', initials: 'DH' },
  { name: 'Karl Guille', role: 'Douzenier', initials: 'KG' },
  { name: 'Jennifer Merrett', role: 'Douzenier', initials: 'JM' },
];

function DouzaineStrip({ setRoute }) {
  return (
    <section className="douzaine-strip">
      <div className="section-head">
        <div className="section-head-title">
          <div className="sh-eyebrow">№ 03 — Twelve Parishioners</div>
          <h2>Meet the <em>Douzaine</em></h2>
        </div>
        <div className="section-head-side">
          From the Norman-French <span className="norman">douze</span>, meaning twelve.
          Elected by the parish to serve terms of up to four years.
        </div>
      </div>

      <div className="douzaine-grid">
        <div className="douzaine-hero" onClick={() => setRoute('parish')} style={{cursor: 'pointer'}}>
          <div>
            <div className="eyebrow">The Douzaine · est. 1204</div>
            <h3>Twelve parishioners, <em>two Constables,</em> one parish.</h3>
            <p>
              Elections are held in November each year. Parishioners may serve
              up to four years in any single term. Meetings are held at
              La Chambre de la Douzaine, Le Murier.
            </p>
          </div>
          <a href="#" className="meet-link" onClick={(e)=>{e.preventDefault();setRoute('parish');}}>
            View the full Douzaine →
          </a>
        </div>

        {PEOPLE.map((p) => (
          <div key={p.name} className="person-card">
            <div className="portrait"><span>{p.initials}</span></div>
            <div>
              <div className="p-role">{p.role}</div>
              <div className="p-name">{p.name}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Noticeboard() {
  return (
    <section className="noticeboard">
      <div className="noticeboard-inner">
        <div className="section-head">
          <div className="section-head-title">
            <div className="sh-eyebrow">№ 04 — Notices & Reminders</div>
            <h2>On the <em>parish noticeboard</em></h2>
          </div>
          <div className="section-head-side">
            Reminders posted at La Chambre and on this page. Election and statutory
            notices are signed by the Constables.
          </div>
        </div>

        <div className="notices-grid">
          <article className="notice-card">
            <div className="tag urgent">Election notice</div>
            <h3>By-Election to elect one Douzenier of the parish.</h3>
            <p>
              Nominations are accepted at La Chambre de la Douzaine until 7pm on
              Tuesday 31 March. The election will commence immediately after
              the Spring Parish Meeting on Wednesday 1 April at 7.30pm.
            </p>
            <div className="footer-row">
              <span>Closing · 31 March 2026</span>
              <span className="action">Notice →</span>
            </div>
          </article>

          <article className="notice-card">
            <div className="tag">Refuse</div>
            <h3>Summer collection calendar now in effect.</h3>
            <p>
              From Monday 6 April, clear bags (recycling) are collected fortnightly
              on the round your black bag is put out. Food waste remains weekly.
              Bags may be collected from La Chambre during office hours.
            </p>
            <div className="footer-row">
              <span>Effective · 6 April 2026</span>
              <span className="action">Calendar →</span>
            </div>
          </article>

          <article className="notice-card">
            <div className="tag">Hedges & Streams</div>
            <h3>Annual hedge and stream cut — deadline 15 June.</h3>
            <p>
              Parishioners are reminded of the statutory duty to cut hedges
              bordering public roads to a height no greater than three metres,
              and to clear streams of obstruction, by 15 June.
            </p>
            <div className="footer-row">
              <span>Deadline · 15 June 2026</span>
              <span className="action">Guidance →</span>
            </div>
          </article>

          <article className="notice-card">
            <div className="tag">Parish Meeting</div>
            <h3>Spring Parish Meeting at the Church Community Hall.</h3>
            <p>
              All parishioners are warmly invited to the Spring Parish Meeting on
              Wednesday 1 April at 7.30pm. Agenda and last year’s minutes are
              available at La Chambre.
            </p>
            <div className="footer-row">
              <span>Wed 1 April · 7.30pm</span>
              <span className="action">Agenda →</span>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

function ContactBlock() {
  return (
    <section className="contact-block">
      <div className="contact-grid">
        <div className="contact-left">
          <div className="sh-eyebrow">№ 05 — Get in touch</div>
          <h2>La Chambre de <em>la Douzaine</em></h2>
          <p className="lede">
            The parish office is open weekday mornings — or write to us; a
            Douzenier will reply within two working days.
          </p>
          <div className="contact-address">
            <div className="lb">Parish Office · Open Mon–Fri · 9am–1pm</div>
            <div className="addr">
              La Chambre de la Douzaine<br/>
              Le Murier, St Sampson<br/>
              Guernsey
              <small>Postcode · GY2 4HQ</small>
            </div>
          </div>
        </div>

        <div className="contact-methods">
          <a className="contact-method" href="tel:+441481244130">
            <div className="cm-icon"><i data-lucide="phone" /></div>
            <div className="cm-body">
              <div className="label">By telephone</div>
              <div className="value">+44 (0) 1481 244130</div>
              <div className="sub">Office hours · Mon–Fri 9am–1pm</div>
            </div>
            <div className="cm-arrow">→</div>
          </a>
          <a className="contact-method" href="mailto:constables@stsampson.gg">
            <div className="cm-icon"><i data-lucide="mail" /></div>
            <div className="cm-body">
              <div className="label">By email</div>
              <div className="value">constables@stsampson.gg</div>
              <div className="sub">Replies within two working days</div>
            </div>
            <div className="cm-arrow">→</div>
          </a>
          <a className="contact-method" href="#">
            <div className="cm-icon"><i data-lucide="map-pin" /></div>
            <div className="cm-body">
              <div className="label">In person</div>
              <div className="value">Parish surgery</div>
              <div className="sub">Saturdays quarterly · 10am–12pm</div>
            </div>
            <div className="cm-arrow">→</div>
          </a>
          <a className="contact-method" href="#">
            <div className="cm-icon"><i data-lucide="file-text" /></div>
            <div className="cm-body">
              <div className="label">By letter</div>
              <div className="value">The Constables</div>
              <div className="sub">Le Murier, St Sampson · GY2 4HQ</div>
            </div>
            <div className="cm-arrow">→</div>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Ledger = Ledger;
window.Services = Services;
window.DouzaineStrip = DouzaineStrip;
window.Noticeboard = Noticeboard;
window.ContactBlock = ContactBlock;
window.NEWS_FEATURED = NEWS_FEATURED;
window.NEWS_ITEMS = NEWS_ITEMS;
window.PEOPLE = PEOPLE;
window.SERVICES = SERVICES;