// Clear & Cart — single-file React app
// Moving · Clearance · Refuse Removal

const { useState, useEffect } = React;

const FB_URL = "https://www.facebook.com/clearandcart/";
// Internal lead-routing endpoint (FormSubmit free relay → test@joshuastone.co.uk)
// End user never sees this address. The "ajax" endpoint accepts JSON POSTs without redirect.
const LEAD_EMAIL = "test@joshuastone.co.uk";
const LEAD_ENDPOINT = "https://formsubmit.co/ajax/" + encodeURIComponent(LEAD_EMAIL);

async function sendLead(data) {
  try {
    await fetch(LEAD_ENDPOINT, {
      method: "POST",
      headers: { "Content-Type": "application/json", "Accept": "application/json" },
      body: JSON.stringify({
        _subject: "New Clear & Cart quote request",
        _template: "table",
        _captcha: "false",
        source: "clearandcart.website",
        ...data
      })
    });
  } catch (e) {
    // Silent — fall back to mailto on user-facing flow.
    console.log("Lead send failed", e);
  }
}

// ===== Icons =====
const Ic = {
  Messenger: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.1 2 11.2c0 2.9 1.4 5.4 3.7 7.1V22l3.4-1.9c.9.3 1.9.4 2.9.4 5.5 0 10-4.1 10-9.3S17.5 2 12 2zm1 12.5l-2.5-2.7-4.9 2.7 5.4-5.7 2.6 2.7 4.8-2.7-5.4 5.7z"/></svg>,
  Facebook: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.7-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.5 2.9h-2.4v7A10 10 0 0022 12z"/></svg>,
  Check: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg>,
  Truck: ({ s = 28 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M2 17h13V5H2v12z" /><path d="M15 8h4l3 4v5h-7" /><circle cx="6" cy="18" r="2" /><circle cx="18" cy="18" r="2" /></svg>,
  Box: ({ s = 28 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7l9-4 9 4v10l-9 4-9-4V7z" /><path d="M3 7l9 4 9-4M12 11v10" /></svg>,
  Building: ({ s = 28 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 21V5a1 1 0 011-1h10a1 1 0 011 1v16M16 9h3a1 1 0 011 1v11M8 8h2M8 12h2M8 16h2M12 8h.01M12 12h.01M12 16h.01" /></svg>,
  Van: ({ s = 28 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M2 16V7h11v9M13 10h4l4 3v3h-2" /><circle cx="6" cy="17" r="2" /><circle cx="18" cy="17" r="2" /></svg>,
  Tools: ({ s = 28 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a4 4 0 015.6 5.6l-9 9-5.6-5.6 9-9z" /><path d="M9 11l4 4" /></svg>,
  Sofa: ({ s = 28 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12v5h18v-5M5 12V8a2 2 0 012-2h10a2 2 0 012 2v4M3 12a2 2 0 012-2v0M21 12a2 2 0 00-2-2v0M6 17v2M18 17v2" /></svg>,
  Trash: ({ s = 28 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14M10 11v6M14 11v6"/></svg>,
  Broom: ({ s = 28 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4l6 6M19 5l-9 9M10 14l-6 6M10 14l4 4M4 20s2 0 4-2"/></svg>,
  Cap: ({ s = 28 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M2 9l10-5 10 5-10 5L2 9z" /><path d="M6 11v5c0 1 3 2 6 2s6-1 6-2v-5" /></svg>,
  Pin: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s7-7 7-13a7 7 0 10-14 0c0 6 7 13 7 13z" /><circle cx="12" cy="9" r="2.5" /></svg>,
  Tag: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13l-7 7-9-9V4h7l9 9z" /><circle cx="7.5" cy="7.5" r="1" /></svg>,
  Smile: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" /></svg>,
  Plus: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>,
  Arrow: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>,
  Clock: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  Leaf: ({ s = 16 }) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 21c0-9 7-16 16-16 0 9-7 16-16 16z"/><path d="M5 21c5-5 9-9 16-16"/></svg>
};

// ===== Top util bar =====
function UtilBar({ onQuote }) {
  return (
    <div className="utilbar">
      <div className="container utilbar-inner">
        <div className="left">
          <span className="pill"><span className="ic"><Ic.Check s={12} /></span> Reliable</span>
          <span className="pill"><span className="ic"><Ic.Check s={12} /></span> Professional</span>
          <span className="pill"><span className="ic"><Ic.Check s={12} /></span> Hassle-free</span>
        </div>
        <div className="right">
          <span>Need a quote today?</span>
          <a onClick={onQuote} style={{ cursor: 'pointer' }}>Get a free quote →</a>
        </div>
      </div>
    </div>);
}

// ===== Header =====
function Header({ ctaCopy, onQuote }) {
  return (
    <header className="hdr">
      <div className="container hdr-inner">
        <a className="brand">
          <img className="logo" src="assets/clear-cart-logo.png" alt="Clear & Cart" />
        </a>
        <nav>
          <ul className="nav-links">
            <li><button className="active">Home</button></li>
            <li><button>Services</button></li>
            <li><button>Areas Covered</button></li>
            <li><button>About</button></li>
            <li><button>Contact</button></li>
          </ul>
        </nav>
        <div className="hdr-cta">
          <a href={FB_URL} target="_blank" rel="noopener noreferrer" className="hdr-msg">
            <div className="ic"><Ic.Messenger s={18} /></div>
            <div>
              <div className="lbl">Message us on</div>
              <div className="num">Facebook</div>
            </div>
          </a>
          <button className="btn btn-teal" onClick={onQuote}>{ctaCopy}</button>
        </div>
      </div>
    </header>);
}

// ===== Hero =====
function Hero({ ctaCopy, onQuote, formData, setFormData }) {
  const update = (k, v) => setFormData((d) => ({ ...d, [k]: v }));
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="hero-eyebrow">
            <Ic.Truck s={14} /> Moving · Clearance · Refuse Removal
          </div>
          <h1>
            Moving <span className="underline">Made Easy</span><br />
            <span className="accent">Clearing Simplified.</span>
          </h1>
          <p className="hero-lede">
            From house moves to clearances, we've got you covered. <strong>Reliable, professional, hassle-free</strong> — a friendly local team you can rely on.
          </p>
          <div className="hero-cta-row">
            <button className="btn btn-teal btn-lg" onClick={onQuote}>{ctaCopy} →</button>
            <a href={FB_URL} target="_blank" rel="noopener noreferrer" className="btn btn-fb btn-lg">
              <Ic.Messenger s={16} /> Message on Facebook
            </a>
          </div>
          <div className="hero-trust">
            <div className="hero-trust-item"><div className="ic"><Ic.Check s={16} /></div>Reliable & professional</div>
            <div className="hero-trust-item"><div className="ic"><Ic.Check s={16} /></div>Affordable pricing</div>
            <div className="hero-trust-item"><div className="ic"><Ic.Check s={16} /></div>Friendly local team</div>
          </div>
        </div>

        <div className="quote-card">
          <h3>Get Your FREE Quote Now</h3>
          <p className="sub">Takes 30 seconds — we'll get back to you fast.</p>
          <div className="field-row">
            <div className="field">
              <label>Your name</label>
              <input type="text" placeholder="Sarah Jones" value={formData.name} onChange={(e) => update('name', e.target.value)} />
            </div>
            <div className="field">
              <label>Email or Phone</label>
              <input type="text" placeholder="hello@example.com" value={formData.contact} onChange={(e) => update('contact', e.target.value)} />
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>From (postcode)</label>
              <input type="text" placeholder="D02 XYZ" value={formData.from} onChange={(e) => update('from', e.target.value.toUpperCase())} />
            </div>
            <div className="field">
              <label>To (postcode)</label>
              <input type="text" placeholder="D04 ABC" value={formData.to} onChange={(e) => update('to', e.target.value.toUpperCase())} />
            </div>
          </div>
          <div className="field">
            <label>What do you need?</label>
            <select value={formData.type} onChange={(e) => update('type', e.target.value)}>
              <option value="">Choose a service…</option>
              <option>Home Move</option>
              <option>Office Move</option>
              <option>House Clearance</option>
              <option>Refuse Removal</option>
              <option>Furniture / single item</option>
              <option>Not sure — please advise</option>
            </select>
          </div>
          <button className="btn btn-teal" style={{ width: '100%', marginTop: 6 }} onClick={onQuote}>
            Get My FREE Quote →
          </button>
          <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--ink-faint)', marginTop: 12 }}>
            🔒 We never share your details. No spam, ever.
          </div>
        </div>
      </div>
    </section>);
}

// ===== Promo strip =====
function PromoStrip() {
  const items = [
    'MOVING MADE EASY',
    'CLEARING SIMPLIFIED',
    'RELIABLE · PROFESSIONAL · HASSLE-FREE',
    'HOUSE MOVES',
    'OFFICE MOVES',
    'HOUSE CLEARANCES',
    'REFUSE REMOVAL',
    'FRIENDLY LOCAL TEAM'];
  const all = [...items, ...items];
  return (
    <div className="promo-strip">
      <div className="promo-track">
        {all.map((it, i) =>
          <React.Fragment key={i}>
            <span>{it}</span>
            <span className="dot"></span>
          </React.Fragment>
        )}
      </div>
    </div>);
}

// ===== Services =====
function Services({ onQuote }) {
  const items = [
    { ic: <Ic.Truck />, title: 'Home Removals', body: 'Studios to large family homes. We pack, load, drive, unpack.' },
    { ic: <Ic.Building />, title: 'Office Moves', body: 'Out-of-hours moves so you\'re back trading on time.' },
    { ic: <Ic.Box />, title: 'House Clearances', body: 'Full or part clearances handled with care and respect.' },
    { ic: <Ic.Trash />, title: 'Refuse Removal', body: 'Rubbish removed and responsibly disposed of. Skip-free.' },
    { ic: <Ic.Sofa />, title: 'Furniture Logistics', body: 'Single sofa, table, fridge — across town or country.' },
    { ic: <Ic.Van />, title: 'Man & Van', body: 'Single items, small loads, last-minute jobs.' },
    { ic: <Ic.Tools />, title: 'Dismantling & Reassembly', body: 'Beds, wardrobes, flat-pack. We bring the tools.' },
    { ic: <Ic.Cap />, title: 'Student Moves', body: 'End-of-term moves at affordable rates.' }];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">What We Do</span>
          <h2>We Move It. We Clear It. <span className="accent">You Relax.</span></h2>
          <p className="lede">From a single sofa to a full house clearance — we handle the lot, with care.</p>
        </div>
        <div className="services-grid">
          {items.map((it, i) =>
            <div key={i} className="service-card" onClick={onQuote}>
              <div className="ic-wrap">{it.ic}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <button className="btn btn-teal btn-lg" onClick={onQuote}>Get a Free Quote for Any Service →</button>
        </div>
      </div>
    </section>);
}

// ===== Why choose us =====
function WhyUs({ onQuote }) {
  const reasons = [
    { ttl: 'Trusted Local Service', body: 'A friendly local team who answer the phone, turn up on time and treat your home with respect.' },
    { ttl: 'Affordable Pricing', body: 'Clear, honest quotes — what we quote is what you pay.' },
    { ttl: 'Fast & Efficient', body: 'We work hard, work safely, and get the job done without hanging about.' },
    { ttl: 'Reliable & Professional', body: 'Polite, careful and thorough — every move, every clearance, every time.' }];
  return (
    <section className="section section-soft why">
      <div className="container why-grid">
        <div className="why-img">
          <img src="assets/van-photo.png" alt="Clear & Cart van" />
          <div className="why-img-stamp">
            <div className="top">Local · Reliable</div>
            <div className="big">Moving<br/>Made Easy</div>
            <div className="bot">Clearing simplified.</div>
          </div>
        </div>
        <div>
          <span className="section-head" style={{ display: 'inline-block', textAlign: 'left' }}>
            <span className="eyebrow" style={{ background: 'var(--teal)' }}>Why Clear & Cart</span>
          </span>
          <h2>A Removal Company <span className="accent">You Can Rely On</span></h2>
          <p className="why-lede">We're just starting out, but we're not new to hard work. Sit back and relax — we'll do the heavy lifting, the careful packing and the responsible clearing.</p>
          <ul className="why-list">
            {reasons.map((r, i) =>
              <li key={i}>
                <div className="ic"><Ic.Check s={16} /></div>
                <div>
                  <div className="ttl">{r.ttl}</div>
                  <div className="body">{r.body}</div>
                </div>
              </li>
            )}
          </ul>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-teal" onClick={onQuote}>Get My Free Quote →</button>
            <a href={FB_URL} target="_blank" rel="noopener noreferrer" className="btn btn-white"><Ic.Messenger s={16} /> Message Us</a>
          </div>
        </div>
      </div>
    </section>);
}

// ===== Process =====
function Process() {
  const steps = [
    { n: 1, ttl: 'Get a Quote', body: 'Message us on Facebook or fill the form. Free, no-obligation quote — fast.' },
    { n: 2, ttl: 'We Plan It', body: 'Pick your date. We confirm the crew, the van and the price in writing.' },
    { n: 3, ttl: 'We Move It', body: 'On the day, we pack, load, drive and unload — carefully and quickly.' },
    { n: 4, ttl: 'We Clear It', body: 'Anything left over? We clear and dispose of it responsibly.' }];
  return (
    <section className="section section-band">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">How It Works</span>
          <h2>4 Simple Steps to a <span className="accent">Stress-Free Move</span></h2>
          <p className="lede">From the first message to the kettle in your new kitchen — we make it easy.</p>
        </div>
        <div className="process-grid">
          {steps.map((s) =>
            <div key={s.n} className="proc-card">
              <div className="proc-num">{s.n}</div>
              <h3>{s.ttl}</h3>
              <p>{s.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// ===== Ads strip ===== (replaces reviews)
function AdsStrip({ onQuote }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Our Services at a Glance</span>
          <h2>One Team. <span className="accent">Three Things Done Right.</span></h2>
          <p className="lede">Moving, clearing or clearing out the rubbish — we'll handle whichever you need.</p>
        </div>
        <div className="ads-grid">
          <div className="ad-card large">
            <div>
              <div className="ad-tag">Moving · Clearance · Refuse</div>
              <h3>We Move It.<br/>We Clear It.<br/>You Relax.</h3>
              <div className="ad-sub">Professional service you can rely on. From a single piece of furniture to a full house clearance, we've got you covered.</div>
            </div>
            <button className="ad-cta" onClick={onQuote}>Get a Free Quote <Ic.Arrow s={14}/></button>
          </div>
          <div className="ad-card teal">
            <div>
              <div className="ad-tag">Need Something Moved?</div>
              <h3>Moving<br/>Made Easy.</h3>
              <div className="ad-sub">Home & office moves. We pack, load, drive, unload — all of it.</div>
            </div>
            <button className="ad-cta" onClick={onQuote}>Quote My Move <Ic.Arrow s={14}/></button>
          </div>
          <div className="ad-card navy">
            <div>
              <div className="ad-tag">Need Something Cleared?</div>
              <h3>Clearing<br/>Simplified.</h3>
              <div className="ad-sub">House clearances and refuse removal — disposed of responsibly.</div>
            </div>
            <button className="ad-cta" onClick={onQuote}>Quote My Clearance <Ic.Arrow s={14}/></button>
          </div>
        </div>
      </div>
    </section>);
}

// ===== Areas =====
function Areas() {
  const areas = [
    'Bath', 'Bristol', 'Wells', 'Frome', 'Trowbridge', 'Chippenham', 'Salisbury', 'Swindon',
    'Glastonbury', 'Shepton Mallet', 'Warminster', 'Devizes', 'Yeovil', 'Bradford-on-Avon', 'Melksham', 'Westbury'];
  return (
    <section className="section section-soft">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Areas Covered</span>
          <h2>Serving <span className="accent">Wiltshire & Somerset</span></h2>
          <p className="lede">Local moves and clearances out of our yard, plus longer jobs anywhere in the UK. Just ask.</p>
        </div>
        <div className="areas-grid">
          {areas.map((a) =>
            <div key={a} className="area-pill">
              <div className="ic"><Ic.Pin s={16} /></div>
              {a}
            </div>
          )}
        </div>
        <p style={{ textAlign: 'center', marginTop: 28, color: 'var(--ink-soft)', fontSize: 15 }}>
          Don't see your area? <strong><a href={FB_URL} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--teal-darker)', textDecoration: 'none' }}>Message us on Facebook</a></strong> — we cover the whole UK for full house moves and clearances.
        </p>
      </div>
    </section>);
}

// ===== CTA Band =====
function CtaBand({ ctaCopy, onQuote }) {
  return (
    <section className="cta-band">
      <div className="container cta-inner">
        <div>
          <h2>Ready to Move? <span style={{ color: 'var(--teal)' }}>Let's Make It Easy.</span></h2>
          <div className="lede">Reliable. Professional. Hassle-free. <strong>That's the Clear & Cart promise.</strong></div>
        </div>
        <div className="cta-actions">
          <button className="btn btn-teal btn-xl" onClick={onQuote}>{ctaCopy} →</button>
          <a href={FB_URL} target="_blank" rel="noopener noreferrer" className="btn btn-fb btn-xl">
            <Ic.Messenger s={18} /> Message Us
          </a>
        </div>
      </div>
    </section>);
}

// ===== FAQ =====
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: 'How do I get a quote?', a: 'Easiest way: fill in the quote form at the top of the page, or message us on Facebook. We\'ll get back to you with a free, no-obligation quote — usually the same day.' },
    { q: 'What services do you offer?', a: 'Home moves, office moves, house clearances and refuse removal. From a single sofa to a full property — we\'ll handle the lot.' },
    { q: 'Do you provide packing materials?', a: 'Yes. If you\'d like us to handle the packing, we bring all the boxes, tape, bubble wrap and tissue. Or we can drop materials off in advance if you\'re packing yourself.' },
    { q: 'Do you take rubbish away?', a: 'Yes — refuse removal is one of our core services. We clear it from your property and dispose of it responsibly, so you don\'t need to hire a skip.' },
    { q: 'How far in advance should I book?', a: 'A couple of weeks\' notice is comfortable for a home move. For last-minute jobs, just message us — we often have same-week availability.' },
    { q: 'Can I message you instead of filling the form?', a: 'Yes — Facebook Messenger is the fastest way to reach us. Tap any "Message Us" button on the site and it\'ll open a chat with our team.' }];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">FAQs</span>
          <h2>Got Questions? <span className="accent">We've Got Answers</span></h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
            <div key={i} className={'faq-item ' + (open === i ? 'open' : '')}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="plus"><Ic.Plus s={16} /></span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// ===== Footer =====
function Footer({ onQuote }) {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div className="foot-brand">
            <img className="logo" src="assets/clear-cart-logo.png" alt="Clear & Cart" />
            <p>Clear & Cart provide moving, house clearances and refuse removal. Reliable. Professional. Hassle-free.</p>
            <div className="foot-badges">
              <span className="foot-badge">Moving</span>
              <span className="foot-badge">Clearance</span>
              <span className="foot-badge">Refuse</span>
            </div>
          </div>
          <div>
            <h4>Services</h4>
            <ul className="foot-list">
              <li><a onClick={onQuote}>Home Removals</a></li>
              <li><a onClick={onQuote}>Office Moves</a></li>
              <li><a onClick={onQuote}>House Clearances</a></li>
              <li><a onClick={onQuote}>Refuse Removal</a></li>
              <li><a onClick={onQuote}>Man & Van</a></li>
              <li><a onClick={onQuote}>Student Moves</a></li>
            </ul>
          </div>
          <div>
            <h4>Areas</h4>
            <ul className="foot-list">
              <li><a>Bath</a></li>
              <li><a>Bristol</a></li>
              <li><a>Wells</a></li>
              <li><a>Salisbury</a></li>
              <li><a>Swindon</a></li>
              <li><a>Trowbridge</a></li>
            </ul>
          </div>
          <div>
            <h4>Get in Touch</h4>
            <ul className="foot-list">
              <li><Ic.Messenger s={14} /> &nbsp;<a href={FB_URL} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--teal)', fontWeight: 700 }}>Message us on Facebook</a></li>
              <li><Ic.Facebook s={14} /> &nbsp;<a href={FB_URL} target="_blank" rel="noopener noreferrer">facebook.com/clearandcart</a></li>
              <li style={{ marginTop: 10 }}><Ic.Clock s={14} /> &nbsp;Mon–Sat · 7.30am – 8pm</li>
              <li style={{ paddingLeft: 22 }}>Sun · 9am – 5pm</li>
            </ul>
            <button className="btn btn-teal" style={{ marginTop: 16 }} onClick={onQuote}>Click for a Free Quote →</button>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 Clear & Cart · Moving · Clearance · Refuse Removal</div>
          <div>Built with care</div>
        </div>
      </div>
    </footer>);
}

// ===== Quote Modal =====
function QuoteModal({ open, onClose, formData, setFormData }) {
  if (!open) return null;
  const update = (k, v) => setFormData((d) => ({ ...d, [k]: v }));
  const submit = () => {
    if (formData.name && formData.contact) {
      sendLead(formData);
      alert(`Thanks ${formData.name.split(' ')[0]}! We'll be in touch via ${formData.contact} as soon as possible. — The Clear & Cart team`);
      onClose();
    } else {
      alert('Please fill in your name and contact details so we can get back to you.');
    }
  };
  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(15,44,79,0.6)',
      zIndex: 100, display: 'grid', placeItems: 'center', padding: 20
    }} onClick={onClose}>
      <div style={{ background: 'white', borderRadius: 16, padding: 32, maxWidth: 520, width: '100%', position: 'relative', boxShadow: '0 30px 80px rgba(0,0,0,0.4)' }} onClick={e => e.stopPropagation()}>
        <button onClick={onClose} style={{ position: 'absolute', top: 14, right: 14, background: 'none', border: 'none', fontSize: 24, cursor: 'pointer', color: 'var(--ink-faint)' }}>×</button>
        <h3 style={{ fontSize: 24, marginBottom: 6 }}>Get Your Free Quote</h3>
        <p style={{ color: 'var(--ink-soft)', fontSize: 14, marginBottom: 20 }}>Pop your details below or message us on Facebook — whichever's easier.</p>
        <div className="field">
          <label>Your name</label>
          <input type="text" placeholder="Sarah Jones" value={formData.name} onChange={e => update('name', e.target.value)} />
        </div>
        <div className="field">
          <label>Email or Phone</label>
          <input type="text" placeholder="hello@example.com" value={formData.contact} onChange={e => update('contact', e.target.value)} />
        </div>
        <div className="field">
          <label>What do you need?</label>
          <select value={formData.type} onChange={e => update('type', e.target.value)}>
            <option value="">Choose a service…</option>
            <option>Home Move</option>
            <option>Office Move</option>
            <option>House Clearance</option>
            <option>Refuse Removal</option>
            <option>Furniture / single item</option>
          </select>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 8, flexWrap: 'wrap' }}>
          <button className="btn btn-teal" style={{ flex: 1 }} onClick={submit}>Send My Quote Request →</button>
          <a href={FB_URL} target="_blank" rel="noopener noreferrer" className="btn btn-fb"><Ic.Messenger s={16} /> Message</a>
        </div>
      </div>
    </div>);
}

// ===== App =====
function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAKS_DEFAULTS);
  const [formData, setFormData] = useState({ name: '', contact: '', from: '', to: '', type: '' });
  const [modalOpen, setModalOpen] = useState(false);

  const onQuote = () => {
    // If hero form has data already, submit it; otherwise open the modal.
    if (formData.name && formData.contact) {
      sendLead(formData);
      alert(`Thanks ${formData.name.split(' ')[0]}! We'll be in touch via ${formData.contact} as soon as possible. — The Clear & Cart team`);
    } else {
      setModalOpen(true);
    }
  };

  const ctaCopy = tweaks.ctaCopy || 'Get a free quote';

  return (
    <div data-screen-label="01 Clear & Cart Home">
      <UtilBar onQuote={onQuote} />
      <Header ctaCopy={ctaCopy} onQuote={onQuote} />
      <Hero ctaCopy={ctaCopy} onQuote={onQuote} formData={formData} setFormData={setFormData} />
      <PromoStrip />
      <Services onQuote={onQuote} />
      <WhyUs onQuote={onQuote} />
      <Process />
      {tweaks.showAds && <AdsStrip onQuote={onQuote} />}
      <Areas />
      <CtaBand ctaCopy={ctaCopy} onQuote={onQuote} />
      <FAQ />
      <Footer onQuote={onQuote} />

      {tweaks.showSticky &&
        <button className="sticky-quote" onClick={onQuote}>
          <Ic.Tag s={16} /> Click for Quote
        </button>
      }

      <QuoteModal open={modalOpen} onClose={() => setModalOpen(false)} formData={formData} setFormData={setFormData} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="CTA copy">
          <TweakSelect
            label="Primary button"
            value={tweaks.ctaCopy}
            onChange={(v) => setTweak('ctaCopy', v)}
            options={[
              { value: 'Get a free quote', label: 'Get a free quote' },
              { value: 'Get my quote now', label: 'Get my quote now' },
              { value: 'Free quote in 30s', label: 'Free quote in 30s' },
              { value: 'Click for a quote', label: 'Click for a quote' }]
            } />
        </TweakSection>
        <TweakSection title="Sections">
          <TweakToggle
            label="Show ad strip section"
            value={tweaks.showAds}
            onChange={(v) => setTweak('showAds', v)} />
          <TweakToggle
            label="Sticky 'Click for Quote' button"
            value={tweaks.showSticky}
            onChange={(v) => setTweak('showSticky', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>);
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
