// PAR GROUP — About, Contact (with file drop & service area), Footer, Lightbox

const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

// ─── About ─────────────────────────────────────────────────────────────────

function About() {
  const ref = useReveal();
  return (
    <section className="section" id="about" ref={ref}>
      <div className="container">
        <div className="section-head reveal">
          <div className="section-id">
            <span className="mono">— Section 04 · Studio</span>
          </div>
          <h2 className="section-title">
            Run by builders who <em>turn up.</em>
          </h2>
        </div>
        <div className="about-grid reveal">
          <div className="about-photo">
            <img src={window.__resources.imgRearExtensionSide} alt="On site" />
          </div>
          <div>
            <p className="lede">
              PAR Group is led by Alex Ciurtin &mdash; a hands-on builder who has spent the last
              decade specialising in the structural side of London residential. The work the
              other trades quote around. The work that has to be right.
            </p>
            <p className="body" style={{ fontSize: 16, marginTop: 16 }}>
              We are a small, directly-employed crew &mdash; not a subbie merry-go-round. The
              person who quotes you is the person who runs the job, on site, in boots. That
              means decisions made quickly, fewer hands in the till, and a programme that
              actually holds.
            </p>
            <div className="about-points">
              <div className="about-point">
                <h4>Directly employed crew</h4>
                <p>No churn of subcontractors. The same hands on day one and day one hundred.</p>
              </div>
              <div className="about-point">
                <h4>Engineer-coordinated</h4>
                <p>Every structural intervention is signed off by a structural engineer and inspected by Building Control.</p>
              </div>
              <div className="about-point">
                <h4>Fixed-price quotes</h4>
                <p>One sum, one programme, one contract. Variations only when scope genuinely changes.</p>
              </div>
              <div className="about-point">
                <h4>Insured & accredited</h4>
                <p>£5m public liability, CHAS accredited, 10-year structural workmanship warranty.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Service Area Map (simple SVG of M25 area) ────────────────────────────

function ServiceAreaMap() {
  // Stylized SVG silhouette of London's M25 ring with PAR HQ marker.
  // It's a simplified abstract shape — not geographically precise, but
  // reads as "Greater London" at a glance.
  return (
    <div className="service-area">
      <div className="head">
        <span className="mono">— Service area</span>
        <span className="mono" style={{ color: 'var(--fg)' }}>Inside the M25</span>
      </div>
      <svg viewBox="0 0 400 220" xmlns="http://www.w3.org/2000/svg" aria-label="Service area map">
        {/* grid */}
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--line)" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="400" height="220" fill="url(#grid)" />
        {/* Thames */}
        <path d="M 20 130 Q 80 100, 160 120 T 280 115 Q 340 110, 380 125"
              fill="none" stroke="var(--line-2)" strokeWidth="2" opacity="0.7"/>
        {/* M25 outer ring */}
        <ellipse cx="200" cy="115" rx="170" ry="85"
                 fill="none" stroke="var(--fg-3)" strokeWidth="1" strokeDasharray="4 3"/>
        {/* Inner ring (central London) */}
        <ellipse cx="195" cy="118" rx="60" ry="30"
                 fill="var(--bg-2)" stroke="var(--line-2)" strokeWidth="1"/>
        {/* Service area fill */}
        <ellipse cx="200" cy="115" rx="170" ry="85"
                 fill="var(--accent)" opacity="0.06"/>
        {/* Dots = recent jobs */}
        {[
          { x: 175, y: 138, l: 'SE22' },
          { x: 220, y: 105, l: 'N5' },
          { x: 150, y: 130, l: 'SW4' },
          { x: 135, y: 125, l: 'SW18' },
          { x: 195, y: 142, l: 'SE23' },
          { x: 215, y: 130, l: 'SE16' },
          { x: 270, y: 100, l: 'E5' },
        ].map((p, i) => (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r="3.5" fill="var(--accent)"/>
            <text x={p.x + 6} y={p.y + 3}
                  fontFamily="var(--mono)" fontSize="8"
                  fill="var(--fg-2)" letterSpacing="0.05em">{p.l}</text>
          </g>
        ))}
        {/* HQ marker */}
        <g>
          <rect x="192" y="155" width="16" height="16" fill="var(--accent)"/>
          <text x="200" y="167" textAnchor="middle"
                fontFamily="var(--display)" fontWeight="700"
                fontSize="11" fill="#fff">P</text>
          <text x="215" y="167"
                fontFamily="var(--mono)" fontSize="9"
                fill="var(--fg)" letterSpacing="0.06em">PAR · SE15</text>
        </g>
        {/* Cardinal labels */}
        <text x="200" y="20" textAnchor="middle"
              fontFamily="var(--mono)" fontSize="9"
              fill="var(--fg-3)" letterSpacing="0.1em">N</text>
        <text x="200" y="212" textAnchor="middle"
              fontFamily="var(--mono)" fontSize="9"
              fill="var(--fg-3)" letterSpacing="0.1em">S</text>
        <text x="15" y="118" textAnchor="middle"
              fontFamily="var(--mono)" fontSize="9"
              fill="var(--fg-3)" letterSpacing="0.1em">W</text>
        <text x="386" y="118" textAnchor="middle"
              fontFamily="var(--mono)" fontSize="9"
              fill="var(--fg-3)" letterSpacing="0.1em">E</text>
      </svg>
    </div>
  );
}

// ─── Contact ───────────────────────────────────────────────────────────────

function Contact() {
  const ref = useReveal();
  const types = ['Structural steel', 'Basement', 'Loft conversion', 'Extension', 'Full renovation', 'Not sure yet'];
  const [type, setType] = useStateB('Structural steel');
  const [sent, setSent] = useStateB(false);
  const [form, setForm] = useStateB({ name: '', email: '', phone: '', postcode: '', message: '' });
  const [files, setFiles] = useStateB([]);
  const [dragOver, setDragOver] = useStateB(false);
  const [errors, setErrors] = useStateB({});

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!form.email.trim()) e.email = 'Required';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 'Invalid email';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const onSub = (e) => {
    e.preventDefault();
    if (!validate()) return;
    setSent(true);
  };

  const onDrop = (e) => {
    e.preventDefault();
    setDragOver(false);
    const dropped = Array.from(e.dataTransfer.files || []);
    setFiles((f) => [...f, ...dropped]);
  };
  const onPick = (e) => {
    const picked = Array.from(e.target.files || []);
    setFiles((f) => [...f, ...picked]);
  };
  const removeFile = (i) => setFiles((f) => f.filter((_, j) => j !== i));

  return (
    <section className="section" id="contact" style={{ background: 'var(--bg-2)' }} ref={ref}>
      <div className="container">
        <div className="section-head reveal">
          <div className="section-id">
            <span className="mono">— Section 05 · Enquire</span>
          </div>
          <h2 className="section-title">
            Tell us about the job. <em>We&rsquo;ll come and look.</em>
          </h2>
        </div>
        <div className="contact reveal">
          <div className="contact-left">
            <p className="lede">
              Free site visit across London and the South East. We&rsquo;ll walk the property with
              you, talk you through what&rsquo;s structurally possible, and put a fixed
              quote in your inbox within a week.
            </p>
            <div className="info">
              <div className="row">
                <span className="mono">Email</span>
                <span className="v">mada@pargroupuk.com</span>
              </div>
              <div className="row">
                <span className="mono">Office</span>
                <span className="v">Passfield Business Park, Liphook, GU30 7RS</span>
              </div>
              <div className="row">
                <span className="mono">Working area</span>
                <span className="v">London &amp; the South East</span>
              </div>
              <div className="row">
                <span className="mono">Hours</span>
                <span className="v">Mon &mdash; Fri · 08:00 to 17:00</span>
              </div>
            </div>
          </div>

          {!sent ? (
            <form className="form" onSubmit={onSub}>
              <div className="row">
                <label>Project type</label>
                <div className="chip-group">
                  {types.map((t) => (
                    <button type="button" key={t}
                            className={'chip ' + (type === t ? 'active' : '')}
                            onClick={() => setType(t)}>{t}</button>
                  ))}
                </div>
              </div>
              <div className="row two">
                <div className="row">
                  <label>Name {errors.name && <span className="err">· {errors.name}</span>}</label>
                  <input type="text" className={errors.name ? 'error' : ''}
                         value={form.name}
                         onChange={(e)=>setForm({...form, name: e.target.value})} />
                </div>
                <div className="row">
                  <label>Postcode</label>
                  <input type="text" placeholder="SE15 4..." value={form.postcode}
                         onChange={(e)=>setForm({...form, postcode: e.target.value})} />
                </div>
              </div>
              <div className="row two">
                <div className="row">
                  <label>Email {errors.email && <span className="err">· {errors.email}</span>}</label>
                  <input type="email" className={errors.email ? 'error' : ''}
                         value={form.email}
                         onChange={(e)=>setForm({...form, email: e.target.value})} />
                </div>
                <div className="row">
                  <label>Phone</label>
                  <input type="tel" value={form.phone}
                         onChange={(e)=>setForm({...form, phone: e.target.value})} />
                </div>
              </div>
              <div className="row">
                <label>Tell us about the project</label>
                <textarea placeholder="Property type, the work you&rsquo;re considering, target start date, anything else useful…"
                          value={form.message}
                          onChange={(e)=>setForm({...form, message: e.target.value})} />
              </div>
              <div className="row">
                <label>Drawings or photos (optional)</label>
                <label
                  className={'file-drop' + (dragOver ? ' over' : '')}
                  onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
                  onDragLeave={() => setDragOver(false)}
                  onDrop={onDrop}>
                  <input type="file" multiple onChange={onPick}
                         accept="image/*,.pdf,.dwg" />
                  <span>{dragOver ? 'Drop to attach' : 'Drag in plans, or click to browse · PDF / DWG / IMG'}</span>
                  {files.length > 0 && (
                    <div className="files">
                      {files.map((f, i) => (
                        <span className="pill" key={i}
                              onClick={(e) => { e.preventDefault(); removeFile(i); }}>
                          {f.name} · ✕
                        </span>
                      ))}
                    </div>
                  )}
                </label>
              </div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 8, flexWrap: 'wrap', gap: 12 }}>
                <span className="mono" style={{ color: 'var(--fg-3)' }}>
                  We reply within one working day.
                </span>
                <button type="submit" className="btn primary">
                  Send enquiry
                  <span className="arrow">→</span>
                </button>
              </div>
            </form>
          ) : (
            <div style={{ padding: 32, border: '1px solid var(--line-2)', display: 'flex', flexDirection: 'column', gap: 18 }}>
              <span className="mono" style={{ color: 'var(--accent)' }}>● Enquiry received</span>
              <h3 className="h-large">Thanks &mdash; we&rsquo;ll be in touch.</h3>
              <p className="body" style={{ fontSize: 16 }}>
                Your enquiry is in. Alex or someone from the team will reply within one working
                day to arrange a site visit. If it&rsquo;s urgent, give the office a call.
              </p>
              <div style={{ padding: 14, border: '1px solid var(--line)', background: 'var(--bg)', display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span className="mono" style={{ color: 'var(--fg-3)' }}>Submitted</span>
                <span className="mono" style={{ color: 'var(--fg)' }}>{form.name || '—'} · {form.email || '—'}</span>
                <span className="mono" style={{ color: 'var(--fg-2)' }}>{type} · {form.postcode || 'no postcode'} · {files.length} file(s)</span>
              </div>
              <button type="button" className="btn"
                      onClick={() => { setSent(false); setForm({ name: '', email: '', phone: '', postcode: '', message: '' }); setFiles([]); }}>
                Send another
              </button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── Footer (expanded) ─────────────────────────────────────────────────────

function Foot() {
  return (
    <footer className="foot">
      <div className="col big">
        <div className="nav-brand">
          <span className="mark">P</span>
          <span>PAR GROUP</span>
        </div>
        <p>
          Structural builds for London &amp; the South East.
          Steel, basements, lofts, full renovations &mdash; engineered properly,
          finished cleanly, signed off first time.
        </p>
      </div>
      <div className="col">
        <h5>Sections</h5>
        <a href="#work">Services</a>
        <a href="#case">Project</a>
        <a href="#process">Process</a>
        <a href="#about">Studio</a>
        <a href="#contact">Enquire</a>
      </div>
      <div className="col">
        <h5>Contact</h5>
        <a href="mailto:mada@pargroupuk.com">mada@pargroupuk.com</a>
        <span>Passfield Business Park,<br/>Liphook, GU30 7RS</span>
      </div>
      <div className="col">
        <h5>Accreditations</h5>
        <span>CHAS approved</span>
        <span>Building Control</span>
        <span>£5m PL insured</span>
        <span>10yr structural warranty</span>
      </div>
      <div className="credits">
        <span>© {new Date().getFullYear()} PAR Group Ltd · Company No. 16491241</span>
        <span>Made on a wet site, with brick dust on the keyboard.</span>
      </div>
    </footer>
  );
}

// ─── Lightbox ──────────────────────────────────────────────────────────────

function Lightbox({ open, items, idx, onClose, onNav }) {
  useEffectB(() => {
    const onKey = (e) => {
      if (!open) return;
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onNav(-1);
      if (e.key === 'ArrowRight') onNav(1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose, onNav]);
  if (!items || items.length === 0) return null;
  const item = items[idx];
  return (
    <div className={'lb ' + (open ? 'open' : '')} onClick={onClose}>
      {item && <img src={item.src} alt={item.tag} onClick={(e)=>e.stopPropagation()} />}
      <button className="lb-close" onClick={onClose}>Close · esc</button>
      <button className="lb-nav prev" onClick={(e)=>{e.stopPropagation(); onNav(-1);}}>←</button>
      <button className="lb-nav next" onClick={(e)=>{e.stopPropagation(); onNav(1);}}>→</button>
      {item && <div className="lb-meta">{String(idx+1).padStart(2,'0')} / {String(items.length).padStart(2,'0')} · {item.tag}</div>}
    </div>
  );
}

Object.assign(window, { About, Contact, Foot, Lightbox, ServiceAreaMap, WhatsAppFab });

// ─── WhatsApp floating button ──────────────────────────────────────────────

function WhatsAppFab() {
  return (
    <a
      className="wa-fab"
      href="https://wa.me/447552197776"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Message us on WhatsApp">
      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path fill="currentColor" d="M16.04 4C9.96 4 5 8.95 5 15.02c0 2.13.6 4.1 1.64 5.79L5 28l7.36-1.6a11.07 11.07 0 0 0 3.68.63h.01c6.07 0 11.03-4.95 11.03-11.02C27.08 8.95 22.12 4 16.04 4zm0 20.2h-.01c-1.16 0-2.3-.31-3.29-.9l-.24-.14-3.95.86.84-3.85-.16-.25a8.96 8.96 0 0 1-1.37-4.8c0-5.05 4.12-9.16 9.18-9.16 2.45 0 4.75.96 6.48 2.69a9.11 9.11 0 0 1 2.69 6.48c0 5.05-4.12 9.16-9.17 9.16zm5.03-6.86c-.28-.14-1.63-.8-1.88-.9-.25-.09-.43-.14-.62.14-.18.27-.71.89-.87 1.07-.16.18-.32.2-.6.07-.27-.14-1.16-.43-2.21-1.36-.82-.73-1.37-1.63-1.53-1.9-.16-.28-.02-.43.12-.56.12-.12.27-.32.41-.48.14-.16.18-.27.27-.46.09-.18.05-.34-.02-.48-.07-.14-.62-1.5-.85-2.05-.22-.53-.45-.46-.62-.47l-.53-.01c-.18 0-.48.07-.73.34-.25.27-.96.94-.96 2.3 0 1.36.98 2.66 1.12 2.85.14.18 1.93 2.94 4.68 4.12.65.28 1.16.45 1.56.58.65.21 1.25.18 1.72.11.52-.08 1.63-.67 1.86-1.31.23-.64.23-1.19.16-1.31-.07-.12-.25-.18-.53-.32z"/>
      </svg>
      <span className="wa-label">Message us</span>
    </a>
  );
}