/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;

// ---------- Tweaks defaults ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "lilac",
  "heroLayout": "single",
  "parallax": true
}/*EDITMODE-END*/;

const ACCENTS = {
  lilac:    { plum: '#8a6fb1', plumDeep: '#6b5491', lilac: '#c9b8e6', lilacSoft: '#e8def5', lilacMist: '#f4eefb' },
  rose:     { plum: '#b07088', plumDeep: '#8a5469', lilac: '#e6c8d4', lilacSoft: '#f4dde6', lilacMist: '#fbeff3' },
  sage:     { plum: '#6f9b7e', plumDeep: '#547a60', lilac: '#c8d6c3', lilacSoft: '#dde8d6', lilacMist: '#eef4ea' },
  champagne:{ plum: '#a08653', plumDeep: '#7a6440', lilac: '#e0c8a4', lilacSoft: '#efe0c4', lilacMist: '#f7eedb' },
  sky:      { plum: '#6f8db1', plumDeep: '#536c8a', lilac: '#bccfe2', lilacSoft: '#d6e3ef', lilacMist: '#eaf1f8' },
};

function applyAccent(name) {
  const a = ACCENTS[name] || ACCENTS.lilac;
  const r = document.documentElement.style;
  r.setProperty('--plum', a.plum);
  r.setProperty('--plum-deep', a.plumDeep);
  r.setProperty('--lilac', a.lilac);
  r.setProperty('--lilac-soft', a.lilacSoft);
  r.setProperty('--lilac-mist', a.lilacMist);
}

// ---------- Helpers ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -10% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useParallax(enabled) {
  useEffect(() => {
    if (!enabled) {
      document.querySelectorAll('[data-parallax]').forEach(el => { el.style.transform = ''; });
      return;
    }
    let raf = 0;
    const update = () => {
      const els = document.querySelectorAll('[data-parallax]');
      els.forEach(el => {
        const speed = parseFloat(el.dataset.parallax) || 0.15;
        const r = el.getBoundingClientRect();
        const center = r.top + r.height / 2 - window.innerHeight / 2;
        const offset = -center * speed;
        el.style.transform = `translate3d(0, ${offset.toFixed(1)}px, 0)`;
      });
      raf = 0;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [enabled]);
}

// ---------- Icons ----------
const IconArrow = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
);
const IconSun = () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>);
const IconMoon = () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>);
const IconInsta = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg>);
const IconFb = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>);

// ---------- Nav ----------
function Nav({ theme, onToggleTheme }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = ['Services', 'Process', 'Pricing', 'Gallery', 'Locations', 'Journal', 'Contact'];
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-row">
        <a className="nav-logo" href="#top">
          <img src="assets/logo.png" alt="Improve Your Space" />
        </a>
        <div className="nav-links">
          {links.map(l => <a key={l} href={`#${l.toLowerCase()}`}>{l}</a>)}
        </div>
        <div className="nav-cta">
          <button className="theme-toggle" onClick={onToggleTheme} aria-label="Toggle theme">
            {theme === 'light' ? <IconMoon /> : <IconSun />}
          </button>
          <a className="nav-phone" href={`tel:${SITE.brand.phone.replace(/\s/g,'')}`}>
            <span>Call </span>{SITE.brand.phone}
          </a>
        </div>
      </div>
    </nav>
  );
}

// ---------- Hero ----------
function Hero({ layout }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <div className="blob b1" data-parallax="0.08"></div>
        <div className="blob b2" data-parallax="-0.06"></div>
      </div>
      <div className="container hero-grid">
        <div className="hero-text reveal">
          <div className="hero-eyebrow"><span className="dot"></span>{SITE.hero.eyebrow}</div>
          <h1>
            {SITE.hero.h1_pre}<br/>
            <em className="accent">{SITE.hero.h1_accent}</em>
          </h1>
          <p className="lede">{SITE.hero.lede}</p>
          <div className="hero-actions">
            <a className="btn btn-primary" href="#contact">Begin a project <IconArrow /></a>
            <a className="btn-link" href="#gallery">See the work <IconArrow /></a>
          </div>
          <div className="hero-stats">
            <div className="stat"><strong>120+</strong><span>Homes restored</span></div>
            <div className="stat"><strong>5.0</strong><span>Average rating</span></div>
            <div className="stat"><strong>9 yrs</strong><span>Quietly perfecting</span></div>
          </div>
        </div>
        <div className="hero-visual-wrap reveal">
          {layout === 'stack' ? (
            <div className="hero-visual layout-stack">
              <div className="tile tile-1" data-parallax="0.05"><img src="assets/g05.jpg" alt="Organised vanity"/></div>
              <div className="tile"><img src="assets/g14.jpg" alt="Linen cupboard"/></div>
              <div className="tile tile-quote">
                <div className="q">"Quietly life-changing."</div>
                <small>— Priya L., The Ponds</small>
              </div>
            </div>
          ) : (
            <div className="hero-visual" data-parallax="0.06">
              <img src="assets/g05.jpg" alt="Calm bathroom vanity" />
              <div className="hero-card tl">
                <div className="stars">★★★★★</div>
                <div><strong>5.0 on Google</strong><small>120+ reviews</small></div>
              </div>
              <div className="hero-card br">
                <div><strong>{SITE.brand.suburb}</strong><small>Servicing Greater Sydney</small></div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ---------- About ----------
function About() {
  return (
    <section id="about">
      <div className="container about-grid">
        <div className="about-portrait reveal" data-parallax="0.04">
          <img src="assets/g29.jpg" alt="A calmer home" />
        </div>
        <div className="about-text reveal">
          <div className="eyebrow">— About</div>
          <h2 style={{marginTop: 20}}>I'm Elizabeth.<br/><em>And I believe in calmer rooms.</em></h2>
          <div className="about-body">
            <p>For nearly a decade I've been quietly walking into homes across north-west Sydney and helping the people who live there breathe a little easier. The work is rarely about the cupboards. It's about the way a room makes you feel when you walk into it on a Tuesday at 6pm.</p>
            <p>I work alone, by design. Every project is mine from the first conversation to the last basket. The hours are long, the donations are heavy, and the result — every single time — is the kind of quiet I think every home deserves.</p>
          </div>
          <div className="about-signature">— Elizabeth Price</div>
          <div className="about-meta">
            <div className="item"><small>Based</small><strong>Colebee, NSW</strong></div>
            <div className="item"><small>Servicing</small><strong>Greater Sydney</strong></div>
            <div className="item"><small>Established</small><strong>2017</strong></div>
            <div className="item"><small>Approach</small><strong>One project at a time</strong></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Services ----------
function Services() {
  return (
    <section id="services">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">— Services</div>
          <h2>A small, considered<br/><em>set of services.</em></h2>
          <p style={{maxWidth: 540, fontSize: 17}}>I keep the menu deliberately short. Each project gets the time it actually needs — no rushed afternoons, no cookie-cutter checklists.</p>
        </div>
        <div className="services-grid reveal">
          {SITE.services.map(s => (
            <div key={s.num} className="service-row">
              <div className="num">{s.num}</div>
              <div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
              <div className="arrow-cell"><IconArrow size={20} /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Process ----------
function Process() {
  return (
    <section id="process" className="process-wrap">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">— Process</div>
          <h2>Four quiet steps,<br/><em>nothing rushed.</em></h2>
        </div>
        <div className="process-grid reveal">
          {SITE.process.map(s => (
            <div key={s.num} className="process-step">
              <span className="num">{s.num}</span>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Pricing ----------
function Pricing() {
  return (
    <section id="pricing">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">— Investment</div>
          <h2>Honest, transparent<br/><em>pricing.</em></h2>
          <p style={{maxWidth: 540, fontSize: 17}}>Choose a single visit, a full reset, or a move. Every project is quoted in writing — no surprises, no upselling.</p>
        </div>
        <div className="pricing-grid reveal">
          {SITE.pricing.map(p => (
            <div key={p.name} className={`price-card ${p.featured ? 'featured' : ''}`}>
              {p.featured && <div className="badge">Most loved</div>}
              <h3>{p.name}</h3>
              <div className="price">
                {p.price !== 'On enquiry' ? (
                  <>
                    <span className="currency">$</span>
                    <strong>{p.price}</strong>
                    <small>{p.unit}</small>
                  </>
                ) : (
                  <strong style={{fontSize: 36}}>{p.price}</strong>
                )}
              </div>
              <p>{p.blurb}</p>
              <ul>{p.features.map(f => <li key={f}>{f}</li>)}</ul>
              <a className={`btn ${p.featured ? 'btn-primary' : 'btn-ghost'}`} href="#contact">{p.cta} <IconArrow /></a>
            </div>
          ))}
        </div>
        <div className="price-note reveal">— All visits include sorting, donation drop-off and a written reset plan —</div>
      </div>
    </section>
  );
}

// ---------- Before/After ----------
function BeforeAfter({ before, after }) {
  const [pos, setPos] = useState(50);
  const ref = useRef(null);
  const dragging = useRef(false);
  const onMove = (clientX) => {
    const r = ref.current.getBoundingClientRect();
    const p = Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100));
    setPos(p);
  };
  const onDown = (e) => {
    dragging.current = true;
    onMove(e.touches ? e.touches[0].clientX : e.clientX);
  };
  useEffect(() => {
    const mm = (e) => { if (dragging.current) onMove(e.clientX); };
    const tm = (e) => { if (dragging.current) onMove(e.touches[0].clientX); };
    const up = () => { dragging.current = false; };
    window.addEventListener('mousemove', mm);
    window.addEventListener('touchmove', tm, { passive: true });
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    return () => {
      window.removeEventListener('mousemove', mm);
      window.removeEventListener('touchmove', tm);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
    };
  }, []);
  return (
    <div className="ba" ref={ref} onMouseDown={onDown} onTouchStart={onDown} style={{'--pos': `${pos}%`}}>
      <div className="layer"><img src={before} alt="Before"/></div>
      <div className="layer after"><img src={after} alt="After"/></div>
      <div className="handle"></div>
      <div className="knob"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M9 6l-6 6 6 6M15 6l6 6-6 6"/></svg></div>
      <div className="tag left">Before</div>
      <div className="tag right">After</div>
    </div>
  );
}

function Gallery() {
  return (
    <section id="gallery">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">— Before & After</div>
          <h2>Quiet rooms,<br/><em>brought back to life.</em></h2>
          <p style={{maxWidth: 540, fontSize: 17}}>Drag the handle to compare. Every photo is real client work — never staged for the camera.</p>
        </div>
        <div className="gallery-grid reveal">
          {SITE.galleryPairs.map(p => (
            <div key={p.title} className="gallery-item">
              <BeforeAfter before={p.before} after={p.after} />
              <h4>{p.title}</h4>
              <small>{p.area}</small>
            </div>
          ))}
        </div>
        <div className="gallery-strip reveal">
          {SITE.galleryStrip.map((src, i) => (
            <div className="cell" key={i}><img src={src} alt={`Project ${i+1}`} loading="lazy" /></div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Testimonials ----------
function Testimonials() {
  return (
    <section id="reviews">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">— Words from clients</div>
          <h2>The kindest part<br/><em>of the work.</em></h2>
        </div>
        <div className="testimonial-grid reveal">
          {SITE.testimonials.map((t, i) => (
            <div key={i} className="testimonial">
              <div className="quote-mark">"</div>
              <blockquote>{t.q}</blockquote>
              <div className="who">
                <div><strong>{t.who}</strong><small>{t.where}</small></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Locations ----------
function Locations() {
  return (
    <section id="locations">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">— Service area</div>
          <h2>Quietly working across<br/><em>north-west Sydney.</em></h2>
          <p style={{maxWidth: 540, fontSize: 17}}>Based in Colebee, with regular projects across the Hills and Hawkesbury. Travelling further across Greater Sydney for full-home and move projects.</p>
        </div>
        <div className="locations-grid reveal">
          {SITE.locations.map(l => (
            <div key={l.name} className="location-cell">
              <div className={`name ${l.primary ? 'primary' : ''}`}>{l.name}</div>
              <small>{l.state}</small>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Blog ----------
function Blog({ onOpen }) {
  const featured = SITE.posts.slice(0, 3);
  const more = SITE.posts.slice(3);
  return (
    <section id="journal">
      <div className="container">
        <div className="section-head reveal" style={{flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', maxWidth: 'none', width: '100%'}}>
          <div>
            <div className="eyebrow">— The journal</div>
            <h2 style={{marginTop: 20}}>Notes from the field,<br/><em>between projects.</em></h2>
          </div>
          <a className="btn-link" href="#">All entries <IconArrow /></a>
        </div>
        <div className="blog-grid reveal">
          {featured.map(p => (
            <article key={p.id} className="blog-card" onClick={() => onOpen(p)}>
              <div className="blog-thumb"><img src={p.thumb} alt={p.title} /></div>
              <div className="blog-meta">
                <span className="cat">{p.cat}</span>
                <span className="dot"></span>
                <span>{p.date}</span>
                <span className="dot"></span>
                <span>{p.read}</span>
              </div>
              <h3>{p.title}</h3>
              <p>{p.excerpt}</p>
            </article>
          ))}
        </div>
        <div className="blog-more reveal">
          {more.map(p => (
            <div key={p.id} className="blog-more-item" onClick={() => onOpen(p)}>
              <div className="left">
                <span className="cat">{p.cat} · {p.date}</span>
                <span className="ttl">{p.title}</span>
              </div>
              <span className="arr"><IconArrow /></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PostModal({ post, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);
  if (!post) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        <div className="modal-content">
          <div className="meta">
            <span className="cat">{post.cat}</span>
            <span>{post.date}</span>
            <span>{post.read} read</span>
          </div>
          <h2>{post.title}</h2>
          <div className="modal-thumb"><img src={post.thumb} alt={post.title} /></div>
          {post.body.map((b, i) => b.h ? <h3 key={i}>{b.h}</h3> : <p key={i}>{b.p}</p>)}
        </div>
      </div>
    </div>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container faq-grid">
        <div className="reveal">
          <div className="eyebrow">— Questions</div>
          <h2 style={{marginTop: 20}}>Things people<br/><em>quietly wonder.</em></h2>
          <p style={{marginTop: 24, fontSize: 16}}>If yours isn't here, ask me directly — I read every message myself.</p>
        </div>
        <div className="faq-list reveal">
          {SITE.faqs.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span><span className="icon">+</span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Contact ----------
function Contact() {
  const [service, setService] = useState('Full Reset');
  const [form, setForm] = useState({ name: '', email: '', phone: '', message: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = true;
    if (!/.+@.+\..+/.test(form.email)) errs.email = true;
    if (!form.message.trim()) errs.message = true;
    setErrors(errs);
    if (!Object.keys(errs).length) setSent(true);
  };
  return (
    <section id="contact">
      <div className="container contact-grid">
        <div className="reveal">
          <div className="eyebrow">— Begin</div>
          <h2 style={{marginTop: 20}}>Let's talk about<br/><em>your home.</em></h2>
          <p style={{marginTop: 24, fontSize: 16, maxWidth: 380}}>Tell me a little about the rooms on your mind. I'll reply within a day with thoughts and a soft proposal.</p>
          <div className="contact-info" style={{marginTop: 48}}>
            <div className="contact-row"><small>By phone</small><a className="v" href={`tel:${SITE.brand.phone.replace(/\s/g,'')}`}>{SITE.brand.phone}</a></div>
            <div className="contact-row"><small>By email</small><a className="v" href={`mailto:${SITE.brand.email}`}>{SITE.brand.email}</a></div>
            <div className="contact-row"><small>Studio hours</small><span className="v">Tue – Sat · 8am – 5pm</span></div>
            <div className="contact-row"><small>Based in</small><span className="v">Colebee, NSW 2761</span></div>
          </div>
        </div>
        <div className="reveal">
          {sent ? (
            <div className="form-success">
              <strong>Thank you, {form.name.split(' ')[0] || 'friend'}.</strong>
              <p>Your note has landed gently in my inbox. I'll write back within a day with a few thoughts.</p>
            </div>
          ) : (
            <form className="form" onSubmit={submit} noValidate>
              <div className="field">
                <label>Service of interest</label>
                <div className="chips">
                  {['Single Visit', 'Full Reset', 'Move & Unpack', 'Bespoke'].map(c => (
                    <button type="button" key={c} className={`chip ${service === c ? 'on' : ''}`} onClick={() => setService(c)}>{c}</button>
                  ))}
                </div>
              </div>
              <div className="form-row">
                <div className="field">
                  <label>Your name {errors.name && <span style={{color: '#c0526b', textTransform: 'none', letterSpacing: 0}}>— required</span>}</label>
                  <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="First and last" />
                </div>
                <div className="field">
                  <label>Email {errors.email && <span style={{color: '#c0526b', textTransform: 'none', letterSpacing: 0}}>— invalid</span>}</label>
                  <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="you@home.com" />
                </div>
              </div>
              <div className="field">
                <label>Phone (optional)</label>
                <input value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="0400 000 000" />
              </div>
              <div className="field">
                <label>The rooms on your mind {errors.message && <span style={{color: '#c0526b', textTransform: 'none', letterSpacing: 0}}>— a few words please</span>}</label>
                <textarea value={form.message} onChange={e => setForm({...form, message: e.target.value})} placeholder="The pantry has been on my mind for a year..."></textarea>
              </div>
              <button type="submit" className="btn btn-primary" style={{alignSelf: 'flex-start'}}>Send a soft enquiry <IconArrow /></button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <img src="assets/logo.png" alt="Improve Your Space" />
            <p>Boutique decluttering and home organising. Quietly serving Sydney since 2017.</p>
          </div>
          <div>
            <h4>Visit</h4>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#gallery">Gallery</a></li>
              <li><a href="#journal">Journal</a></li>
            </ul>
          </div>
          <div>
            <h4>Reach</h4>
            <ul>
              <li><a href={`tel:${SITE.brand.phone.replace(/\s/g,'')}`}>{SITE.brand.phone}</a></li>
              <li><a href={`mailto:${SITE.brand.email}`}>{SITE.brand.email}</a></li>
              <li><span>Colebee, NSW</span></li>
            </ul>
          </div>
          <div>
            <h4>Follow</h4>
            <ul>
              <li><a href="#"><IconInsta /> &nbsp; Instagram</a></li>
              <li><a href="#"><IconFb /> &nbsp; Facebook</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Improve Your Space</span>
          <span>Designed quietly · Sydney</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Tweaks Panel ----------
function Panel({ tweak, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Mood">
        <TweakRadio label="Theme" value={tweak.theme} onChange={v => setTweak('theme', v)}
          options={[{label: 'Light', value: 'light'}, {label: 'Dark', value: 'dark'}]} />
        <TweakRadio label="Hero layout" value={tweak.heroLayout} onChange={v => setTweak('heroLayout', v)}
          options={[{label: 'Single image', value: 'single'}, {label: 'Stacked tiles', value: 'stack'}]} />
      </TweakSection>
      <TweakSection title="Accent">
        <TweakSelect label="Pastel palette" value={tweak.accent} onChange={v => setTweak('accent', v)}
          options={[
            {label: 'Lilac (default)', value: 'lilac'},
            {label: 'Rose', value: 'rose'},
            {label: 'Sage', value: 'sage'},
            {label: 'Champagne', value: 'champagne'},
            {label: 'Sky', value: 'sky'},
          ]} />
      </TweakSection>
      <TweakSection title="Motion">
        <TweakToggle label="Parallax on scroll" value={tweak.parallax} onChange={v => setTweak('parallax', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// ---------- App ----------
function App() {
  const [tweak, setTweakState] = useTweaks(TWEAK_DEFAULTS);
  const setTweak = (k, v) => setTweakState(typeof k === 'object' ? k : { [k]: v });
  const [post, setPost] = useState(null);

  useEffect(() => { document.documentElement.dataset.theme = tweak.theme; }, [tweak.theme]);
  useEffect(() => { applyAccent(tweak.accent); }, [tweak.accent]);
  useReveal();
  useParallax(tweak.parallax);

  const toggleTheme = () => setTweak('theme', tweak.theme === 'light' ? 'dark' : 'light');

  return (
    <>
      <Nav theme={tweak.theme} onToggleTheme={toggleTheme} />
      <main>
        <Hero layout={tweak.heroLayout} />
        <About />
        <Services />
        <Process />
        <Pricing />
        <Gallery />
        <Testimonials />
        <Locations />
        <Blog onOpen={setPost} />
        <FAQ />
        <Contact />
      </main>
      <Footer />
      {post && <PostModal post={post} onClose={() => setPost(null)} />}
      <Panel tweak={tweak} setTweak={setTweak} />
    </>
  );
}

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