/* global React, lucide, NEWS_FEATURED, NEWS_ITEMS, PEOPLE */
/* =======================================================================
   St Sampson Parish — Inner pages: Parish (Douzaine), News, Information
   ======================================================================= */

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

function ParishPage() {
  return (
    <main className="route">
      <section className="page-hero">
        <div className="page-hero-inner">
          <div>
            <div className="crumb">The Parish · The Douzaine</div>
            <h1>The <em>Douzaine</em> of<br/>St Sampson.</h1>
          </div>
          <p className="intro">
            Twelve parishioners and two Constables, elected by the parish,
            meeting monthly at La Chambre de la Douzaine.
          </p>
        </div>
      </section>

      <section className="people-page">
        <div className="people-page-inner">
          <div className="section-head" style={{padding:0, margin:'0 0 28px'}}>
            <div className="section-head-title">
              <div className="sh-eyebrow">The Constables</div>
              <h2 style={{fontSize: 38}}>Two elected leaders of the parish</h2>
            </div>
            <div className="section-head-side">
              The Senior and Junior Constable are elected for terms of up to three years
              and lead the work of the Douzaine.
            </div>
          </div>

          <div className="constables-grid">
            <article className="constable-card">
              <div className="portrait">AD</div>
              <div>
                <div className="role">Senior Constable · 2024—</div>
                <h3>Adrian Dilcock</h3>
                <div className="contact-line">
                  247020<br/>
                  <a href="mailto:ADilcock@stsampson.gg">ADilcock@stsampson.gg</a>
                </div>
              </div>
            </article>
            <article className="constable-card">
              <div className="portrait">JA</div>
              <div>
                <div className="role">Junior Constable · 2025—</div>
                <h3>Joe Abbotts</h3>
                <div className="contact-line">
                  07781 143586<br/>
                  <a href="mailto:jabbotts@stsampson.gg">jabbotts@stsampson.gg</a>
                </div>
              </div>
            </article>
          </div>

          <div className="douzeniers-header">
            <div>
              <div className="sh-eyebrow" style={{color:'var(--accent)', fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.22em', textTransform:'uppercase'}}>The Douzeniers</div>
              <h2 style={{fontSize: 38, color:'var(--harbour-deep)', fontFamily:'var(--font-display)', fontWeight:500, margin:'8px 0 0'}}>Twelve serving parishioners</h2>
            </div>
            <div className="section-head-side" style={{textAlign:'right'}}>
              Elections held each November. Next election: 17 November 2026.
            </div>
          </div>

          <div className="douzeniers-grid">
            {ALL_DOUZENIERS.map((p) => (
              <div key={p.name} className="person-card">
                <div className="portrait"><span>{p.initials}</span></div>
                <div>
                  <div className="p-role">{p.role} · {p.years}</div>
                  <div className="p-name">{p.name}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function NewsPage() {
  const items = [window.NEWS_FEATURED, ...window.NEWS_ITEMS,
    { day: '12', mon: 'Jan', cat: 'Parish', title: 'New lighting on the Bridge footpath now in operation.',
      snippet: 'Replacing the aged sodium lamps with warm LED fittings, as agreed at the 2024 autumn meeting.' },
    { day: '04', mon: 'Dec', cat: 'Accounts', title: 'Draft parish accounts published for inspection.',
      snippet: 'The draft accounts for the year ending September are available at La Chambre until 31 January.' },
  ];
  return (
    <main className="route">
      <section className="page-hero">
        <div className="page-hero-inner">
          <div>
            <div className="crumb">Parish · News & Notices</div>
            <h1>News from <em>St Sampson.</em></h1>
          </div>
          <p className="intro">
            A running record of the Constables’ and Douzaine’s announcements,
            reminders and public notices.
          </p>
        </div>
      </section>

      <section className="news-page">
        <div className="news-page-grid">
          <aside className="news-filters">
            <h4>Category</h4>
            <ul>
              <li><a href="#" className="active">All notices <span className="count">24</span></a></li>
              <li><a href="#">Parish meetings <span className="count">6</span></a></li>
              <li><a href="#">Refuse <span className="count">5</span></a></li>
              <li><a href="#">Elections <span className="count">3</span></a></li>
              <li><a href="#">Hedges & Streams <span className="count">4</span></a></li>
              <li><a href="#">In memoriam <span className="count">2</span></a></li>
              <li><a href="#">Other <span className="count">4</span></a></li>
            </ul>
            <h4>Archive</h4>
            <ul>
              <li><a href="#" className="active">2026 <span className="count">8</span></a></li>
              <li><a href="#">2025 <span className="count">11</span></a></li>
              <li><a href="#">2024 <span className="count">5</span></a></li>
            </ul>
          </aside>

          <div className="news-feed">
            {items.map((n, i) => (
              <article key={i} className="ledger-item">
                <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>
    </main>
  );
}

const INFO_CARDS = [
  { icon: 'scroll-text', title: 'Parish rates', desc: 'Annual parish rate, property assessments, and how to pay your rate bill online or at La Chambre.', link: 'View rate guide' },
  { icon: 'trash-2', title: 'Refuse & recycling', desc: 'Collection calendars, clear and blue bag guidance, and how to arrange bulky-waste collection.', link: 'Find your bin night' },
  { icon: 'leaf', title: 'Hedges & streams', desc: 'The parishioner’s statutory duty to cut hedges and clear watercourses by 15 June each year.', link: 'Read the guidance' },
  { icon: 'dog', title: 'Dog tax', desc: 'Annual registration and badge collection for dogs resident in the parish of St Sampson.', link: 'Register your dog' },
  { icon: 'map-pin', title: 'Bornements', desc: 'Parish boundary stones — inspections, repairs and the traditional perambulation.', link: 'View boundary map' },
  { icon: 'landmark', title: 'Planning & building', desc: 'How the Douzaine responds to planning applications, and how to raise a concern.', link: 'See applications' },
  { icon: 'users', title: 'Elections', desc: 'Election of Constables and Douzeniers — nominations, dates, and how to stand.', link: 'View election rules' },
  { icon: 'file-text', title: 'Minutes & accounts', desc: 'Published minutes of Douzaine meetings and the parish’s annual accounts.', link: 'Open archive' },
  { icon: 'heart-handshake', title: 'Community grants', desc: 'Small grants awarded each year to parish clubs, charities and community groups.', link: 'Apply for a grant' },
];

function InfoPage() {
  return (
    <main className="route">
      <section className="page-hero">
        <div className="page-hero-inner">
          <div>
            <div className="crumb">Parish · Information</div>
            <h1>For the <em>parishioner.</em></h1>
          </div>
          <p className="intro">
            Everything the parish does on your behalf — and what you may need to do in turn.
          </p>
        </div>
      </section>

      <section className="info-page">
        <div className="info-page-grid">
          {INFO_CARDS.map((c) => (
            <a key={c.title} href="#" className="info-card">
              <div className="icon-wrap"><i data-lucide={c.icon} /></div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <div className="link">{c.link} →</div>
            </a>
          ))}
        </div>
      </section>
    </main>
  );
}

function ContactPage() {
  return (
    <main className="route">
      <section className="page-hero">
        <div className="page-hero-inner">
          <div>
            <div className="crumb">Parish · Contact</div>
            <h1>Write to the <em>Douzaine.</em></h1>
          </div>
          <p className="intro">
            The Constables and the office of the Douzaine welcome your letters,
            messages and visits.
          </p>
        </div>
      </section>
      <ContactBlock />
    </main>
  );
}

window.ParishPage = ParishPage;
window.NewsPage = NewsPage;
window.InfoPage = InfoPage;
window.ContactPage = ContactPage;