/* global React, lucide */
/* =======================================================================
   St Sampson Parish — Homepage sections
   ======================================================================= */

function HarbourSVG() {
  return (
    <svg viewBox="0 0 600 450" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="hSky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#DCE4EA" />
          <stop offset="60%" stopColor="#E8E3D8" />
          <stop offset="100%" stopColor="#F6F1E6" />
        </linearGradient>
        <linearGradient id="hSea" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5A7B8E" />
          <stop offset="100%" stopColor="#1F3A4D" />
        </linearGradient>
        <linearGradient id="hStone" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#8A857B" />
          <stop offset="100%" stopColor="#5E5C55" />
        </linearGradient>
      </defs>
      <rect width="600" height="270" fill="url(#hSky)" />
      {/* distant hill */}
      <path d="M 0 220 Q 150 190 300 210 T 600 200 L 600 270 L 0 270 Z" fill="#7A7770" opacity="0.45" />
      {/* sea */}
      <rect y="270" width="600" height="180" fill="url(#hSea)" />
      {/* harbour wall */}
      <rect x="0" y="240" width="420" height="50" fill="url(#hStone)" />
      <rect x="0" y="240" width="420" height="6" fill="#3A3934" opacity="0.6" />
      {/* granite blocks */}
      {Array.from({length:14}).map((_,i)=>(
        <line key={i} x1={30+i*30} y1="246" x2={30+i*30} y2="290" stroke="#3A3934" strokeOpacity="0.35" />
      ))}
      <line x1="0" y1="266" x2="420" y2="266" stroke="#3A3934" strokeOpacity="0.35" />
      {/* lighthouse */}
      <rect x="380" y="180" width="18" height="60" fill="#F6F1E6" />
      <rect x="380" y="180" width="18" height="8" fill="#B23A2E" />
      <polygon points="380,180 398,180 389,168" fill="#3A3934" />
      <rect x="386" y="173" width="6" height="8" fill="#D9B472" />
      {/* boats */}
      <g opacity="0.9">
        <path d="M 60 300 L 120 300 L 110 316 L 70 316 Z" fill="#1A1A1A" />
        <rect x="85" y="270" width="2" height="30" fill="#1A1A1A" />
        <path d="M 87 272 L 105 298 L 87 298 Z" fill="#F6F1E6" />
      </g>
      <g opacity="0.85">
        <path d="M 180 310 L 240 310 L 230 328 L 190 328 Z" fill="#33332F" />
        <rect x="208" y="275" width="2" height="35" fill="#33332F" />
        <path d="M 210 278 L 232 308 L 210 308 Z" fill="#F6F1E6" />
      </g>
      <g opacity="0.75">
        <path d="M 470 330 L 540 330 L 530 348 L 480 348 Z" fill="#1A1A1A" />
        <rect x="502" y="298" width="2" height="32" fill="#1A1A1A" />
        <path d="M 504 300 L 525 328 L 504 328 Z" fill="#E8E3D8" />
      </g>
      {/* seagulls */}
      <g stroke="#1A1A1A" strokeWidth="1.5" fill="none" strokeLinecap="round">
        <path d="M 120 130 q 6 -6 12 0 q 6 -6 12 0" />
        <path d="M 210 100 q 5 -5 10 0 q 5 -5 10 0" />
        <path d="M 450 120 q 5 -5 10 0 q 5 -5 10 0" />
      </g>
      {/* horizon line */}
      <line x1="0" y1="270" x2="600" y2="270" stroke="#33332F" strokeOpacity="0.25" />
    </svg>
  );
}

function BinDaySVG() {
  return (
    <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
      <rect width="400" height="300" fill="#EDE5D0" />
      <rect x="0" y="220" width="400" height="80" fill="#BFB9AC" />
      <line x1="0" y1="220" x2="400" y2="220" stroke="#7A7770" strokeWidth="1" opacity="0.5" />
      {/* wall */}
      <rect x="0" y="180" width="400" height="42" fill="#E8E3D8" stroke="#7A7770" strokeOpacity="0.3" />
      {/* three bags/bins */}
      <g transform="translate(80 160)">
        <path d="M -24 60 L 24 60 L 20 0 L -20 0 Z" fill="#1F3A4D" />
        <path d="M -20 0 L 20 0 L 22 -4 L -22 -4 Z" fill="#2E5971" />
        <text x="0" y="38" textAnchor="middle" fontSize="11" fill="#F6F1E6" fontFamily="monospace" letterSpacing="2">BLACK</text>
      </g>
      <g transform="translate(200 160)">
        <path d="M -24 60 L 24 60 L 20 0 L -20 0 Z" fill="#2E5971" />
        <path d="M -20 0 L 20 0 L 22 -4 L -22 -4 Z" fill="#5A7B8E" />
        <text x="0" y="38" textAnchor="middle" fontSize="11" fill="#F6F1E6" fontFamily="monospace" letterSpacing="2">BLUE</text>
      </g>
      <g transform="translate(320 160)">
        <path d="M -24 60 L 24 60 L 20 0 L -20 0 Z" fill="#E8E3D8" stroke="#7A7770" />
        <path d="M -20 0 L 20 0 L 22 -4 L -22 -4 Z" fill="#BFB9AC" />
        <text x="0" y="38" textAnchor="middle" fontSize="11" fill="#33332F" fontFamily="monospace" letterSpacing="2">CLEAR</text>
      </g>
    </svg>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-grid">
        <div>
          <div className="hero-eyebrow">Bienvenue · Welcome</div>
          <h1>
            The parish<br/>
            of <em>St Sampson,</em><br/>
            in Guernsey.
          </h1>
          <p className="hero-lede">
            Administered by the <span className="norman">Douzaine</span> —
            twelve elected parishioners who have served the north of the
            island, its harbour and its people, since the thirteenth century.
          </p>

          <div className="hero-meta">
            <div className="stat">
              <span className="n">8,592</span>
              <span className="l">Parishioners</span>
            </div>
            <div className="divider" />
            <div className="stat">
              <span className="n">XII</span>
              <span className="l">Douzeniers</span>
            </div>
            <div className="divider" />
            <div className="stat">
              <span className="n">1204</span>
              <span className="l">Douzaine est.</span>
            </div>
          </div>
        </div>

        <aside className="hero-feature">
          <div className="hero-feature-img">
            <HarbourSVG />
          </div>
          <div className="hero-feature-body">
            <div className="hero-feature-tag">Notice · Election</div>
            <h3>St Sampson’s By-Election to elect one Douzenier.</h3>
            <p>
              The election will commence immediately after the Spring Parish Meeting,
              by the electors only, at St Sampson’s Church Community Hall.
            </p>
            <div className="row">
              <span>7.30pm · Wed 1 April 2026</span>
              <a href="#">Read notice →</a>
            </div>
          </div>
        </aside>
      </div>
    </section>
  );
}

function Glance() {
  return (
    <section className="glance">
      <div className="glance-inner">
        <div className="glance-title">
          <b>This week</b>
          in the parish
        </div>
        <div className="glance-item">
          <div className="label"><i data-lucide="trash-2" /> Bin night</div>
          <div className="value">Tuesday</div>
          <div className="sub">Clear · Food · Black</div>
        </div>
        <div className="glance-item">
          <div className="label"><i data-lucide="users" /> Parish surgery</div>
          <div className="value">Sat 25 April</div>
          <div className="sub">10am · La Chambre</div>
        </div>
        <div className="glance-item">
          <div className="label"><i data-lucide="landmark" /> Douzaine meeting</div>
          <div className="value">Thu 30 April</div>
          <div className="sub">7.30pm · Closed session</div>
        </div>
        <div className="glance-item">
          <div className="label"><i data-lucide="leaf" /> Hedge cutting</div>
          <div className="value">By 15 June</div>
          <div className="sub">Statutory duty</div>
        </div>
        <a href="#" className="glance-link">Full diary →</a>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.Glance = Glance;
window.HarbourSVG = HarbourSVG;
window.BinDaySVG = BinDaySVG;