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

// ===== Icons =====
const IconArrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="12 5 19 12 12 19" />
  </svg>
);
const IconLeaf = () => (
  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 30 Q 18 30 24 24 T 30 6 Q 18 6 12 12 T 6 30 Z" />
    <path d="M6 30 L 22 14" />
  </svg>
);
const IconPath = () => (
  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M8 32 Q 14 24 18 18 T 28 4" />
    <circle cx="9" cy="28" r="1.2" fill="currentColor" />
    <circle cx="14" cy="22" r="1.2" fill="currentColor" />
    <circle cx="18" cy="16" r="1.2" fill="currentColor" />
    <circle cx="22" cy="12" r="1.2" fill="currentColor" />
    <circle cx="26" cy="7" r="1.2" fill="currentColor" />
  </svg>
);
const IconHouse = () => (
  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 18 L 18 6 L 32 18" />
    <path d="M7 16 L 7 30 L 29 30 L 29 16" />
    <rect x="15" y="22" width="6" height="8" />
  </svg>
);

// ===== Hero scene — pure SVG so day/night truly transforms =====
function HeroScene({ mode }) {
  // Coordinates roughly tuned for a 1600x900 viewBox
  return (
    <svg className="hero-scene" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        {/* Sky gradients */}
        <linearGradient id="sky-day" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#a9c4d6" />
          <stop offset="55%" stopColor="#cfd9d2" />
          <stop offset="100%" stopColor="#e7e0cf" />
        </linearGradient>
        <linearGradient id="sky-night" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#0a1018" />
          <stop offset="45%" stopColor="#16202b" />
          <stop offset="100%" stopColor="#1a2620" />
        </linearGradient>

        {/* Ground gradients */}
        <linearGradient id="ground-day" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#7d8a72" />
          <stop offset="100%" stopColor="#4d5a48" />
        </linearGradient>
        <linearGradient id="ground-night" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1a2218" />
          <stop offset="100%" stopColor="#0a0e0a" />
        </linearGradient>

        {/* House body */}
        <linearGradient id="house-day" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#e8e0d0" />
          <stop offset="100%" stopColor="#c8bfa9" />
        </linearGradient>
        <linearGradient id="house-night" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3a352a" />
          <stop offset="100%" stopColor="#1f1c16" />
        </linearGradient>

        {/* Roof */}
        <linearGradient id="roof-day" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5a5e60" />
          <stop offset="100%" stopColor="#3e4244" />
        </linearGradient>
        <linearGradient id="roof-night" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1a1c1d" />
          <stop offset="100%" stopColor="#0a0c0d" />
        </linearGradient>

        {/* Bollard glow filter */}
        <radialGradient id="bollard-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#fbe5b3" stopOpacity="0.95" />
          <stop offset="40%" stopColor="#f4c976" stopOpacity="0.55" />
          <stop offset="100%" stopColor="#f4c976" stopOpacity="0" />
        </radialGradient>

        {/* Window glow */}
        <radialGradient id="window-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#ffe4a8" stopOpacity="0.7" />
          <stop offset="100%" stopColor="#ffe4a8" stopOpacity="0" />
        </radialGradient>

        {/* Façade wash glow */}
        <radialGradient id="facade-wash" cx="50%" cy="100%" r="60%">
          <stop offset="0%" stopColor="#f4c976" stopOpacity="0.45" />
          <stop offset="100%" stopColor="#f4c976" stopOpacity="0" />
        </radialGradient>

        {/* Tree uplight */}
        <radialGradient id="tree-uplight" cx="50%" cy="100%" r="70%">
          <stop offset="0%" stopColor="#f4c976" stopOpacity="0.55" />
          <stop offset="100%" stopColor="#f4c976" stopOpacity="0" />
        </radialGradient>

        <filter id="soft-blur"><feGaussianBlur stdDeviation="1.2" /></filter>
      </defs>

      {/* === Sky === */}
      <rect className="layer sky-day" width="1600" height="560" fill="url(#sky-day)" />
      <rect className="layer sky-night" width="1600" height="560" fill="url(#sky-night)" />

      {/* Stars (night only) */}
      <g className="layer stars">
        {Array.from({ length: 40 }).map((_, i) => {
          const x = (i * 137) % 1600;
          const y = (i * 53) % 380;
          const r = 0.6 + ((i * 7) % 10) / 12;
          return <circle key={i} cx={x} cy={y} r={r} fill="#e8e2d4" opacity={0.4 + ((i * 3) % 6) / 10} />;
        })}
      </g>

      {/* Distant tree line */}
      <path d="M0 540 Q 100 480 200 510 T 400 490 T 600 500 T 800 480 T 1000 495 T 1200 485 T 1400 500 T 1600 490 L 1600 600 L 0 600 Z"
            className="treeline" />

      {/* Ground / lawn */}
      <rect className="layer ground-day" y="540" width="1600" height="360" fill="url(#ground-day)" />
      <rect className="layer ground-night" y="540" width="1600" height="360" fill="url(#ground-night)" />

      {/* Driveway curve */}
      <path d="M 200 900 Q 400 760 700 700 L 1100 700 Q 1400 760 1600 900 Z"
            className="driveway" />

      {/* === Tree (left) === */}
      <g transform="translate(220, 540)">
        {/* Tree uplight pool — visible only at night */}
        <ellipse className="layer light-pool" cx="0" cy="20" rx="120" ry="30" fill="url(#tree-uplight)" />
        <path className="tree-trunk" d="M -8 0 L -10 -180 L 8 -180 L 10 0 Z" />
        <circle className="tree-canopy" cx="0" cy="-220" r="120" />
        <circle className="tree-canopy" cx="-50" cy="-180" r="80" />
        <circle className="tree-canopy" cx="55" cy="-180" r="85" />
        <circle className="tree-canopy" cx="0" cy="-280" r="70" />
        {/* Uplight glow on tree foliage at night */}
        <circle className="layer tree-glow" cx="0" cy="-200" r="140" fill="url(#tree-uplight)" opacity="0.6" />
      </g>

      {/* === House === */}
      <g transform="translate(560, 280)">
        {/* Façade wash pools at base */}
        <ellipse className="layer light-pool" cx="240" cy="280" rx="320" ry="40" fill="url(#facade-wash)" />

        {/* Main body */}
        <rect className="house-body" x="60" y="80" width="360" height="200" />
        {/* Stone base */}
        <rect className="house-stone" x="60" y="240" width="360" height="40" />
        {/* Right wing */}
        <rect className="house-body" x="380" y="120" width="120" height="160" />
        <rect className="house-stone" x="380" y="240" width="120" height="40" />
        {/* Left wing */}
        <rect className="house-body" x="0" y="140" width="80" height="140" />

        {/* Main roof gable */}
        <polygon className="house-roof" points="40,80 240,0 440,80" />
        {/* Right wing roof */}
        <polygon className="house-roof" points="370,120 440,60 510,120" />
        {/* Left wing roof */}
        <polygon className="house-roof" points="-10,140 40,100 90,140" />
        {/* Center dormer */}
        <polygon className="house-roof-accent" points="200,80 240,40 280,80" />

        {/* Windows */}
        {[
          { x: 90, y: 110, w: 30, h: 50 },
          { x: 140, y: 110, w: 30, h: 50 },
          { x: 320, y: 110, w: 30, h: 50 },
          { x: 370, y: 110, w: 30, h: 50 },
          { x: 90, y: 180, w: 30, h: 50 },
          { x: 140, y: 180, w: 30, h: 50 },
          { x: 320, y: 180, w: 30, h: 50 },
          { x: 370, y: 180, w: 30, h: 50 },
          { x: 410, y: 160, w: 24, h: 44 },
          { x: 450, y: 160, w: 24, h: 44 },
          { x: 15, y: 170, w: 24, h: 44 },
          { x: 50, y: 170, w: 24, h: 44 },
        ].map((w, i) => (
          <g key={i}>
            <rect className="window-frame" x={w.x} y={w.y} width={w.w} height={w.h} />
            <rect className="window-lit" x={w.x + 2} y={w.y + 2} width={w.w - 4} height={w.h - 4} />
          </g>
        ))}

        {/* Front door */}
        <rect className="house-door" x="225" y="200" width="30" height="80" />
        <rect className="window-lit door-lit" x="227" y="202" width="26" height="76" />

        {/* Window glow halos at night */}
        {[100, 150, 330, 380].map((x) => (
          <ellipse key={x} className="layer window-halo" cx={x + 15} cy={140} rx={32} ry={20} fill="url(#window-glow)" />
        ))}
      </g>

      {/* === Driveway bollards (path lights) === */}
      {[
        { x: 240, y: 840, scale: 1.2 },
        { x: 360, y: 800, scale: 1.1 },
        { x: 480, y: 770, scale: 1.0 },
        { x: 600, y: 740, scale: 0.95 },
        { x: 1000, y: 740, scale: 0.95 },
        { x: 1120, y: 770, scale: 1.0 },
        { x: 1240, y: 800, scale: 1.1 },
        { x: 1360, y: 840, scale: 1.2 },
      ].map((b, i) => (
        <g key={i} transform={`translate(${b.x}, ${b.y}) scale(${b.scale})`}>
          {/* Light pool on ground */}
          <ellipse className="layer light-pool" cx="0" cy="20" rx="60" ry="14" fill="url(#bollard-glow)" />
          {/* Bollard post */}
          <rect className="bollard-post" x="-3" y="-30" width="6" height="30" />
          {/* Bollard head */}
          <rect className="bollard-head" x="-6" y="-36" width="12" height="8" />
          {/* Glow point */}
          <circle className="layer bollard-light" cx="0" cy="-32" r="3" fill="#fde2a8" />
        </g>
      ))}

      {/* === Walkway lights to door === */}
      {[
        { x: 700, y: 600 },
        { x: 740, y: 580 },
        { x: 780, y: 565 },
        { x: 880, y: 565 },
        { x: 920, y: 580 },
        { x: 960, y: 600 },
      ].map((b, i) => (
        <g key={i} transform={`translate(${b.x}, ${b.y})`}>
          <ellipse className="layer light-pool" cx="0" cy="10" rx="40" ry="10" fill="url(#bollard-glow)" />
          <rect className="bollard-post" x="-2" y="-18" width="4" height="18" />
          <circle className="layer bollard-light" cx="0" cy="-18" r="2.4" fill="#fde2a8" />
        </g>
      ))}

      {/* Hedges */}
      {[
        { x: 530, y: 555, w: 360, h: 26 },
        { x: 920, y: 558, w: 100, h: 22 },
      ].map((h, i) => (
        <rect key={i} className="hedge" x={h.x} y={h.y} width={h.w} height={h.h} rx="10" />
      ))}

      {/* Atmospheric vignette layer */}
      <rect className="layer vignette-night" width="1600" height="900" fill="url(#sky-night)" opacity="0" />
    </svg>
  );
}

// ===== Nav =====
function Nav({ lightsOn, setLightsOn }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // Lock body scroll when mobile menu is open
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const closeMenu = () => setMenuOpen(false);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${menuOpen ? "menu-open" : ""}`}>
      <a href="#top" className="nav-brand">
        <div className="nav-brand-text">
          <span className="name">Ridge</span>
          <span className="tag">Outdoor Lighting</span>
        </div>
      </a>

      <div className="nav-right">
        {/* Lights toggle — always visible in nav */}
        <div className={`dn-toggle ${lightsOn ? "is-on" : "is-off"}`} onClick={() => setLightsOn(!lightsOn)} role="button" aria-pressed={lightsOn}>
          <span className="dn-toggle-label">{lightsOn ? "Lights On" : "Lights Off"}</span>
          <div className="dn-switch" />
        </div>

        {/* Hamburger button (mobile only) */}
        <button className="nav-hamburger" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu" aria-expanded={menuOpen}>
          <span className="hamburger-line" />
          <span className="hamburger-line" />
          <span className="hamburger-line" />
        </button>

        {/* Desktop links + mobile drawer */}
        <div className={`nav-links ${menuOpen ? "open" : ""}`}>
          <a href="#services" onClick={closeMenu}>Services</a>
          <a href="#process" onClick={closeMenu}>Process</a>
          <a href="#about" onClick={closeMenu}>About</a>
          <a href="#contact" className="nav-cta" onClick={closeMenu}>Request a Consultation</a>
        </div>
      </div>

      {/* Mobile menu backdrop */}
      {menuOpen && <div className="nav-backdrop" onClick={closeMenu} />}
    </nav>
  );
}

// ===== Hero =====
function Hero({ headline, sub, lightsOn, setLightsOn }) {
  return (
    <section id="top" className={`hero ${lightsOn ? "is-on" : "is-off"}`}>
      <div className="hero-img-wrap">
        <img src="assets/hero-off.png" alt="" className="hero-photo hero-photo-off" />
        <img src="assets/hero.png" alt="Estate at sunset illuminated by Ridge" className="hero-photo hero-photo-on" />
        <div className="hero-vignette" />
      </div>

      <div className="hero-content">
        <img src="assets/logo.png" alt="Ridge Outdoor Lighting · Beauty After Dark" className="hero-logo" />
        <div className="eyebrow">Bespoke Outdoor Lighting · Greater DFW Area</div>
        <h1 className="serif" dangerouslySetInnerHTML={{ __html: headline }} />
        <p className="hero-sub">{sub}</p>
        <div className="hero-actions">
          <a href="#contact" className="btn btn-primary">
            Request a Consultation <IconArrow />
          </a>
          <a href="#services" className="btn btn-ghost">Explore Services</a>
        </div>
      </div>

      <div className="hero-scroll">
        <span>Scroll</span>
        <div className="hero-scroll-line" />
      </div>
    </section>
  );
}

// ===== Marquee =====
function Marquee() {
  const items = [
    "Accent & Façade Lighting",
    "Garden & Landscape",
    "Path & Driveway",
    "Smart Controls",
    "Service & Maintenance",
    "Hand-aimed After Dark",
  ];
  const all = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((item, i) => (
          <span className="marquee-item" key={i}>
            {item} <span className="marquee-dot">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ===== Services =====
function Services() {
  const services = [
    {
      num: "01",
      icon: <IconHouse />,
      title: "Accent & Façade Lighting",
      desc: "Reveal the craftsmanship of your home's exterior — stone, siding, entryways, and architectural details — with restraint and intention.",
      tags: ["Up-lighting", "Façade wash", "Well lights", "Accent spots"],
    },
    {
      num: "02",
      icon: <IconLeaf />,
      title: "Landscape & Garden",
      desc: "Sculpt evening light through specimen trees, ornamental beds, and planted borders. Soft, layered, and tuned to the seasons.",
      tags: ["Ground spots", "Garden bed", "Specimen", "Seasonal scenes"],
    },
    {
      num: "03",
      icon: <IconPath />,
      title: "Path & Driveway",
      desc: "Discreet bollards and flush pavers guide the approach without drawing the eye — safe footing, gracious arrival.",
      tags: ["Bollards", "Step lights", "Driveway markers", "Wayfinding"],
    },
  ];

  return (
    <section id="services" className="section">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="sec-num">— 01 / Disciplines</div>
            <h2 className="serif" style={{ marginTop: 24 }}>
              Three disciplines.<br /><em style={{ color: "var(--brass)", fontStyle: "italic" }}>One quiet hand.</em>
            </h2>
          </div>
          <div className="sec-head-r">
            <p>
              Every Ridge installation begins with a property walk. We design with the eye, not the spreadsheet — pairing fixtures, beam spreads,
              and color temperatures to flatter what's already beautiful about your home.
            </p>
          </div>
        </div>
        <div className="services-grid">
          {services.map((s) => (
            <div className="service" key={s.num}>
              <div className="service-num">— {s.num}</div>
              <div className="service-icon">{s.icon}</div>
              <h3 className="serif">{s.title}</h3>
              <p>{s.desc}</p>
              <div className="service-tags">
                {s.tags.map((t) => <span className="service-tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== About / Editorial =====
function About() {
  return (
    <section id="about" className="section section-cream dark-section">
      <div className="container">
        <div className="about-narrow">
          <div className="eyebrow dark">— 02 / On the House</div>
          <h2 className="serif" style={{ marginTop: 24 }}>
            We light homes<br/><em className="accent">we'd want to live in.</em>
          </h2>
          <p style={{ marginTop: 32, fontSize: 18, maxWidth: "60ch" }}>
            Ridge was founded on a simple conviction: a beautifully built home deserves to be seen from the moment the sun sets. Our work is
            quiet, professional, and made to last — designed to transform your property after dark.
          </p>
          <p style={{ marginTop: 20, fontSize: 18, maxWidth: "60ch" }}>
            We work directly with homeowners throughout the Greater DFW area. Every
            system is custom designed, hand-aimed on site, and supported for the life of the install.
          </p>
          <div className="editorial-stats">
            <div>
              <div className="stat-num">DFW</div>
              <div className="stat-label">Service Area</div>
            </div>
            <div>
              <div className="stat-num">15<span style={{ fontSize: 32 }}>yr</span></div>
              <div className="stat-label">Fixture Warranty</div>
            </div>
            <div>
              <div className="stat-num">1<span style={{ fontSize: 32 }}>:1</span></div>
              <div className="stat-label">Owner-led Design</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Process =====
function Process() {
  const steps = [
    { num: "i", title: "Walk the Property", desc: "We meet on site — camera, sketchpad, no quoting yet. Just looking, listening, and learning your home." },
    { num: "ii", title: "Design the Scenes", desc: "A custom plan: fixtures, optics, color temperature, zones, and a controls strategy tailored to your property." },
    { num: "iii", title: "Hand-aim After Dark", desc: "Every fixture is positioned and aimed in person, the night of install. Nothing is set-and-forget." },
    { num: "iv", title: "Tend Year-Round", desc: "Seasonal re-aiming, lamp swaps, and a service line you can actually call. Lifetime relationship." },
  ];
  return (
    <section id="process" className="section process">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="sec-num">— 03 / How We Work</div>
            <h2 className="serif" style={{ marginTop: 24 }}>
              The Ridge<br/><em style={{ color: "var(--brass)", fontStyle: "italic" }}>method.</em>
            </h2>
          </div>
          <div className="sec-head-r">
            <p>
              No catalog systems. No subcontracted installers. Four steps, the same on every property — small enough to feel personal, structured
              enough to scale to a thirty-acre estate.
            </p>
          </div>
        </div>
        <div className="process-grid">
          {steps.map((s) => (
            <div className="process-step" key={s.num}>
              <div className="process-num">{s.num}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Contact =====
function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(null);
  const [form, setForm] = useState({ name: "", email: "", phone: "", scope: "", message: "" });
  const onSubmit = (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    fetch("https://formspree.io/f/tony@ridgeoutdoorlighting.com", {
      method: "POST",
      headers: { "Content-Type": "application/json", "Accept": "application/json" },
      body: JSON.stringify({
        name: form.name,
        email: form.email,
        phone: form.phone,
        scope: form.scope,
        message: form.message,
        _subject: "New consultation request from " + form.name,
      }),
    })
      .then((res) => {
        if (res.ok) {
          setSubmitted(true);
        } else {
          setError("Something went wrong — please try again or call us directly.");
        }
      })
      .catch(() => {
        setError("Something went wrong — please try again or call us directly.");
      })
      .finally(() => setSending(false));
  };
  const setField = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <section id="contact" className="section contact">
      <div className="contact-glow" />
      <div className="container">
        <div className="contact-grid">
          <div>
            <div className="sec-num">— 04 / Begin a Project</div>
            <h2 className="serif" style={{ marginTop: 24 }}>
              Tell us about<br/><em className="accent">your home.</em>
            </h2>
            <p style={{ marginTop: 24, maxWidth: "44ch" }}>
              We accept a small number of new commissions each season. Share a few details and we'll be in touch within two business days to
              schedule a property walk.
            </p>
            <div className="contact-info">
              <div className="contact-row">
                <div className="contact-row-label">Phone</div>
                <div className="contact-row-value"><a href="tel:8439013508">(843) 901-3508</a></div>
              </div>
              <div className="contact-row">
                <div className="contact-row-label">Email</div>
                <div className="contact-row-value"><a href="mailto:tony@ridgeoutdoorlighting.com">tony@ridgeoutdoorlighting.com</a></div>
              </div>
              <div className="contact-row">
                <div className="contact-row-label">Web</div>
                <div className="contact-row-value">ridgeoutdoorlighting.com</div>
              </div>
              <div className="contact-row">
                <div className="contact-row-label">Service</div>
                <div className="contact-row-value">Greater DFW Area · Private Estates</div>
              </div>
            </div>
          </div>

          <div>
            {submitted ? (
              <div className="form-success">
                <h4 className="serif">Thank you.</h4>
                <p style={{ marginTop: 12 }}>We've received your inquiry and will be in touch within two business days. In the meantime, please feel free to reach Tony directly.</p>
              </div>
            ) : (
              <form className="form" onSubmit={onSubmit}>
                <div className="form-row">
                  <div className="field">
                    <label>Full Name</label>
                    <input value={form.name} onChange={setField("name")} required />
                  </div>
                  <div className="field">
                    <label>Phone</label>
                    <input value={form.phone} onChange={setField("phone")} type="tel" required />
                  </div>
                </div>
                <div className="field">
                  <label>Email</label>
                  <input value={form.email} onChange={setField("email")} type="email" required />
                </div>
                <div className="field">
                  <label>Scope of Project</label>
                  <select value={form.scope} onChange={setField("scope")} required>
                    <option value="">Select an option</option>
                    <option>Accent & façade lighting</option>
                    <option>Landscape & garden</option>
                    <option>Path & driveway</option>
                    <option>Full property design</option>
                    <option>Service / maintenance</option>
                  </select>
                </div>
                <div className="field">
                  <label>Tell us about your home</label>
                  <textarea value={form.message} onChange={setField("message")} placeholder="Property size, landscaping details, timeline, or anything else relevant." />
                </div>
                <button className="btn btn-primary" type="submit" disabled={sending} style={{ alignSelf: "flex-start", marginTop: 12, opacity: sending ? 0.6 : 1 }}>
                  {sending ? "Sending…" : "Send Inquiry"} {!sending && <IconArrow />}
                </button>
                {error && <p style={{ color: "#d9a654", marginTop: 12, fontSize: 14 }}>{error}</p>}
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">
              <img src="assets/logo.png" alt="Ridge" />
              <div className="footer-brand-text">
                <span className="name">Ridge Outdoor Lighting</span>
                <span className="tag">Beauty After Dark</span>
              </div>
            </div>
            <p style={{ marginTop: 24, maxWidth: "38ch", fontSize: 14 }}>
              Bespoke outdoor lighting for private estates throughout the Greater DFW area.
            </p>
          </div>
          <div className="footer-col">
            <h5>Disciplines</h5>
            <a href="#services">Accent & Façade</a>
            <a href="#services">Landscape & Garden</a>
            <a href="#services">Path & Driveway</a>
          </div>
          <div className="footer-col">
            <h5>Studio</h5>
            <a href="#about">About</a>
            <a href="#process">Process</a>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <a href="tel:8439013508">(843) 901-3508</a>
            <a href="mailto:tony@ridgeoutdoorlighting.com">tony@ridgeoutdoorlighting.com</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Ridge Outdoor Lighting · All rights reserved</span>
          <span>Beauty After Dark</span>
        </div>
      </div>
    </footer>
  );
}

// ===== App =====
function App({ tweaks }) {
  const [lightsOn, setLightsOn] = useState(true);

  useEffect(() => {
    const root = document.documentElement;
    const palettes = {
      forest: { ink: "#0c1310", ink2: "#141c17", brass: "#c9a86a" },
      midnight: { ink: "#0a0e14", ink2: "#11161e", brass: "#c9a86a" },
      charcoal: { ink: "#141414", ink2: "#1c1c1c", brass: "#c9a86a" },
      bronze: { ink: "#0c1310", ink2: "#141c17", brass: "#b8956a" },
    };
    const p = palettes[tweaks.palette] || palettes.forest;
    root.style.setProperty("--ink", p.ink);
    root.style.setProperty("--ink-2", p.ink2);
    root.style.setProperty("--brass", p.brass);
    root.style.setProperty("--brass-glow", `${p.brass}aa`);

    const fonts = {
      cormorant: '"Cormorant Garamond", Georgia, serif',
      playfair: '"Playfair Display", Georgia, serif',
      lora: '"Lora", Georgia, serif',
    };
    root.style.setProperty("--serif", fonts[tweaks.serif] || fonts.cormorant);
  }, [tweaks.palette, tweaks.serif]);

  const headlines = {
    classic: 'Beauty,<br/><span class="accent">after dark.</span>',
    revealed: 'The home you built,<br/><span class="accent">revealed</span> at night.',
    quiet: 'Quiet light.<br/><span class="accent">Considered</span> craft.',
  };
  const subs = {
    classic: "Bespoke outdoor lighting for private estates across the Greater DFW area. Designed on site, hand-aimed after dark, supported for life.",
    revealed: "We design and install custom outdoor lighting that lets your home perform at its best in the hours that matter most.",
    quiet: "A small DFW lighting studio building permanent, professional installations on a select number of estates each year.",
  };

  return (
    <>
      <Nav lightsOn={lightsOn} setLightsOn={setLightsOn} />
      <Hero
        headline={headlines[tweaks.headline] || headlines.classic}
        sub={subs[tweaks.headline] || subs.classic}
        lightsOn={lightsOn}
        setLightsOn={setLightsOn}
      />
      <Marquee />
      <Services />
      <About />
      <Process />
      <Contact />
      <Footer />
    </>
  );
}

function Root() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "forest",
    "serif": "cormorant",
    "headline": "classic"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  return (
    <>
      <App tweaks={tweaks} />
      <window.TweaksPanel>
        <window.TweakSection label="Palette" />
        <window.TweakRadio
          label="Mood"
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "forest", label: "Forest" },
            { value: "midnight", label: "Midnight" },
            { value: "charcoal", label: "Charcoal" },
            { value: "bronze", label: "Bronze" },
          ]}
        />
        <window.TweakSection label="Typography" />
        <window.TweakRadio
          label="Display Serif"
          value={tweaks.serif}
          onChange={(v) => setTweak("serif", v)}
          options={[
            { value: "cormorant", label: "Cormorant" },
            { value: "playfair", label: "Playfair" },
            { value: "lora", label: "Lora" },
          ]}
        />
        <window.TweakSection label="Hero Copy" />
        <window.TweakSelect
          label="Headline"
          value={tweaks.headline}
          onChange={(v) => setTweak("headline", v)}
          options={[
            { value: "classic", label: "Beauty, after dark." },
            { value: "revealed", label: "The home revealed." },
            { value: "quiet", label: "Quiet light." },
          ]}
        />
      </window.TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<Root />);
