/* Epic Custom Lighting — page section components */

const { useState, useEffect, useRef } = React;

// ============ NAV ============
const NAV_ITEMS = [
{ label: 'Residential Christmas', href: 'residential-christmas.html' },
{ label: 'Commercial Christmas', href: 'commercial-christmas.html' },
{ label: 'Christmas Trees', href: 'christmas-trees.html' },
{ label: 'Landscape Lighting', href: 'landscape-lighting.html' },
{ label: 'Specialty Lighting', href: 'specialty-lighting.html' },
{ label: 'About', href: 'about.html' }];


const Nav = ({ tweaks }) => {
  const [scrolled, setScrolled] = useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = drawerOpen ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [drawerOpen]);

  return (
    <header className={`ecl-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="ecl-nav-main">
        <div className="ecl-nav-main-inner">
          <a href="index.html" className="ecl-nav-logo">
            <EpicLogo invert={true} />
          </a>
          <nav className="ecl-nav-links">
            {NAV_ITEMS.map((item, i) =>
            <div key={i} className="ecl-nav-item">
                <a href={item.href}>{item.label}</a>
              </div>
            )}
          </nav>
          <div className="ecl-nav-cta">
            <a href="tel:404-538-0108" className="ecl-btn ecl-btn-outline ecl-nav-phone">
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 2.5a1 1 0 0 1 1-1h1.6a1 1 0 0 1 1 .76l.6 2.4a1 1 0 0 1-.27 1L6.2 6.9a10 10 0 0 0 2.9 2.9l1.24-1.23a1 1 0 0 1 1-.27l2.4.6a1 1 0 0 1 .76 1v1.6a1 1 0 0 1-1 1A11.5 11.5 0 0 1 3.5 2.5z" stroke="currentColor" strokeWidth="1.25" strokeLinejoin="round" /></svg>
              <span>404.538.0108</span>
            </a>
            <a href="#contact" className="ecl-btn ecl-btn-gold">Get a Free Quote</a>
          </div>
          <button
            className={`ecl-nav-hamburger ${drawerOpen ? 'is-open' : ''}`}
            aria-label="Open menu"
            aria-expanded={drawerOpen}
            onClick={() => setDrawerOpen((o) => !o)}>
            
            <span /><span /><span />
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      <div className={`ecl-nav-drawer-scrim ${drawerOpen ? 'is-open' : ''}`} onClick={() => setDrawerOpen(false)} />
      <aside className={`ecl-nav-drawer ${drawerOpen ? 'is-open' : ''}`} aria-hidden={!drawerOpen}>
        <div className="ecl-nav-drawer-head">
          <span className="ecl-nav-drawer-label">Menu</span>
          <button className="ecl-nav-drawer-close" aria-label="Close menu" onClick={() => setDrawerOpen(false)}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M5 5l12 12M17 5L5 17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
          </button>
        </div>
        <nav className="ecl-nav-drawer-links">
          {NAV_ITEMS.map((item, i) =>
          <div key={i} className="ecl-nav-drawer-item">
              <a className="ecl-nav-drawer-link" href={item.href} onClick={() => setDrawerOpen(false)}>
                <span>{item.label}</span>
              </a>
            </div>
          )}
        </nav>
        <div className="ecl-nav-drawer-foot">
          <a href="#contact" className="ecl-btn ecl-btn-gold ecl-btn-lg ecl-nav-drawer-cta" onClick={() => setDrawerOpen(false)}>
            Get a Free Quote
          </a>
          <div className="ecl-nav-drawer-contact">
            <a href="tel:404-538-0108">404.538.0108</a>
            <a href="mailto:info@epiccustomlighting.com">info@epiccustomlighting.com</a>
          </div>
        </div>
      </aside>
    </header>);

};

// ============ HERO ============
// Curated rotation mixing Christmas + Landscape so the homepage signals
// both pillars instead of reading as a Christmas-only studio.
const HERO_ROTATION = [
{ src: '/.netlify/images?w=1600&q=70&url=/assets/hero-farm-ww.jpg', kind: 'Residential' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/hero-commercial-publix.png', kind: 'Commercial', fit: 'contain' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/landscape-erik-front.png', kind: 'Landscape', fit: 'contain' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/specialty-halloween.png', kind: 'Specialty' }];


// Ambient bokeh — slow-drifting golden orbs for the luxe holiday mood.
// Pure CSS animation; positions/timings are stable across renders so the
// particles feel intentional, not random.
const BOKEH_PARTICLES = [
{ top: '12%', left: '8%', size: 9, opacity: 0.35, dx: 22, dy: -28, dur: 22, blur: 1.2, delay: 0 },
{ top: '22%', left: '18%', size: 5, opacity: 0.55, dx: -14, dy: -22, dur: 18, blur: 0.8, delay: 2.5 },
{ top: '36%', left: '14%', size: 7, opacity: 0.32, dx: 18, dy: 28, dur: 24, blur: 1.0, delay: 1.2 },
{ top: '58%', left: '6%', size: 11, opacity: 0.28, dx: 24, dy: -20, dur: 26, blur: 1.6, delay: 4.0 },
{ top: '72%', left: '22%', size: 4, opacity: 0.58, dx: -10, dy: -16, dur: 16, blur: 0.6, delay: 0.8 },
{ top: '18%', left: '78%', size: 8, opacity: 0.38, dx: -20, dy: 24, dur: 23, blur: 1.2, delay: 3.2 },
{ top: '32%', left: '88%', size: 6, opacity: 0.48, dx: -16, dy: -20, dur: 19, blur: 0.9, delay: 1.8 },
{ top: '52%', left: '82%', size: 12, opacity: 0.30, dx: -28, dy: 18, dur: 28, blur: 1.8, delay: 5.5 },
{ top: '68%', left: '92%', size: 5, opacity: 0.50, dx: -12, dy: -22, dur: 17, blur: 0.7, delay: 2.0 },
{ top: '82%', left: '64%', size: 7, opacity: 0.34, dx: 14, dy: -24, dur: 21, blur: 1.1, delay: 3.6 },
{ top: '44%', left: '48%', size: 4, opacity: 0.55, dx: 12, dy: -18, dur: 15, blur: 0.6, delay: 0.4 },
{ top: '88%', left: '38%', size: 8, opacity: 0.32, dx: -16, dy: -28, dur: 25, blur: 1.3, delay: 4.8 }];


const BokehField = () =>
<div className="ecl-bokeh" aria-hidden="true">
    {BOKEH_PARTICLES.map((p, i) =>
  <span
    key={i}
    className="ecl-bokeh-dot"
    style={{
      top: p.top,
      left: p.left,
      width: `${p.size}px`,
      height: `${p.size}px`,
      '--opacity': p.opacity,
      '--dx': `${p.dx}px`,
      '--dy': `${p.dy}px`,
      '--dur': `${p.dur}s`,
      '--blur': `${p.blur}px`,
      '--delay': `${p.delay}s`,
      animationDelay: `${p.delay}s`,
      animationDuration: `${p.dur}s`
    }} />

  )}
  </div>;


const Hero = ({ tweaks }) => {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % HERO_ROTATION.length), 5500);
    return () => clearInterval(t);
  }, []);
  const activeKind = HERO_ROTATION[idx].kind;

  return (
    <section className="ecl-hero">
      {HERO_ROTATION.map((img, i) =>
      <div
        key={i}
        className={`ecl-hero-bg ${i === idx ? 'is-active' : ''} ${img.fit === 'contain' ? 'is-contain' : ''}`}
        style={{ backgroundImage: `url(${img.src})` }} />

      )}
      <div className="ecl-hero-overlay" />
      <BokehField />
      {/* sparkle decorations */}
      <div className="ecl-sparkle ecl-sparkle-1"><SparkleStar size={28} color="#f4ecd8" /></div>
      <div className="ecl-sparkle ecl-sparkle-2"><SparkleStar size={18} color="#c9a961" /></div>
      <div className="ecl-sparkle ecl-sparkle-3"><SparkleStar size={14} color="#f4ecd8" /></div>
      <div className="ecl-sparkle ecl-sparkle-4"><SparkleStar size={22} color="#c9a961" /></div>

      <div className="ecl-hero-inner">
        <div className="ecl-hero-eyebrow">
          <span className="ecl-eyebrow-line" />
          <span>CHRISTMAS  ·  LANDSCAPE  ·  COMMERCIAL ·  SPECIALTY</span>
          <span className="ecl-eyebrow-line" />
        </div>
        <h1 className="ecl-hero-title">
          <span className="ecl-hero-line1">The art of</span>
          <span className="ecl-hero-line2"><em>exterior</em> lighting.</span>
        </h1>
        <p className="ecl-hero-sub">
          Custom-designed Christmas, landscape, and commercial lighting — bringing
          homes, neighborhoods, and properties across Metro Atlanta and North
          Georgia to life for over a decade.
        </p>
        <div className="ecl-hero-actions">
          <a href="#contact" className="ecl-btn ecl-btn-gold ecl-btn-lg">
            <span>Get a Free Quote</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
          <a href="https://online.flippingbook.com/view/382280297" className="ecl-btn ecl-btn-outline ecl-btn-lg" target="_blank" rel="noopener noreferrer">
            <span>Browse Holiday Catalog</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>
        <p className="hero-catalog-note is-light">Browse commercial trees, wreaths, garland, and holiday decor options.</p>

        {/* tiny indicator showing which pillar is on screen */}
        <div className="ecl-hero-rotator">
          {HERO_ROTATION.map((img, i) =>
          <button
            key={i}
            type="button"
            className={`ecl-hero-rotator-dot ${i === idx ? 'is-active' : ''}`}
            aria-label={`Show ${img.kind} hero`}
            onClick={() => setIdx(i)} />

          )}
          <span className="ecl-hero-rotator-kind">{activeKind}</span>
        </div>

        <div className="ecl-hero-strip">
          <div><strong>10+YEARS</strong><span>Designing displays</span></div>
          <div><strong>4.9 ★</strong><span>Google rating</span></div>
          <div><strong>1,200+</strong><span>Properties lit</span></div>
          <div><strong>100%</strong><span>Turnkey service</span></div>
        </div>
      </div>

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

};

// ============ MARQUEE / TRUSTED BY ============
const TrustStrip = () =>
<section className="ecl-trust">
    <div className="ecl-trust-inner">
      <div className="ecl-trust-label">
        <SparkleStar size={12} color="#c9a961" />
        <span>TRUSTED BY HOMEOWNERS, HOAs & PROPERTY MANAGERS ACROSS GEORGIA</span>
        <SparkleStar size={12} color="#c9a961" />
      </div>

    </div>
  </section>;


// ============ INTRO ============
const Intro = () =>
<section className="ecl-intro">
    <div className="ecl-intro-inner">
      <div className="ecl-intro-eyebrow" style={{ textAlign: "left" }}>
        <SparkleStar size={12} color="#c9a961" /> ABOUT EPIC CUSTOM LIGHTING
      </div>
      <h2 className="ecl-intro-title" style={{ fontSize: "35px", color: "rgb(11, 10, 10)" }}>
        Custom lighting for homes, businesses, and outdoor spaces across North Georgia,<br />
        designed for people who care about the details.
      </h2>
      <div className="ecl-intro-grid">
        <p className="ecl-intro-lead">Epic Custom Lighting is a local, family-owned company specializing in Christmas lighting, commercial displays, landscape lighting, patio lighting, and specialty seasonal designs. With years of hands-on experience, commercial-grade products, and a focus on clean installation, we make the process simple while giving every property a polished, professional look.
      </p>
        <div className="ecl-intro-pillars">
          {[
        { n: '01', t: 'Designed Around The Property', d: 'Every layout is planned around the home, business, landscape, or entrance we’re lighting.' },
        { n: '02', t: 'Built With Quality Products', d: 'We use professional lighting materials selected for brightness, durability, and reliable outdoor performance.' },
        { n: '03', t: 'Installed With Care', d: 'From the first quote to ongoing support, we make the experience simple and stress-free.' }].
        map((p, i) =>
        <div key={i} className="ecl-pillar">
              <span className="ecl-pillar-num">{p.n}</span>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
        )}
        </div>
      </div>
    </div>
  </section>;


// ============ SERVICES ============
const SERVICES = [
{
  tag: '',
  label: 'RESIDENTIAL CHRISTMAS',
  title: 'A turnkey Christmas display for your home.',
  body: '',
  image: '/.netlify/images?w=1600&q=70&url=/assets/services-residential-rwn.png',
  bullets: ['Designed around your home’s layout', 'Commercial-grade LED bulbs and materials', 'Rooflines, peaks, columns, and ground lighting', 'Shrubs, trees, garland, wreaths, and decorations', 'In-season maintenance support', 'Removal and storage after the season'],
  href: 'residential-christmas.html'
},
{
  tag: '',
  label: 'COMMERCIAL CHRISTMAS',
  title: 'A polished holiday display for your business or community.',
  body: '',
  image: '/.netlify/images?w=1600&q=70&url=/assets/commercial-depew.png',
  bullets: ['Designed for offices, restaurants, HOAs, and churches', 'Clean roofline and architectural lighting', 'Entrance, monument, and sign enhancement', 'Greenery, wreaths, bows, and seasonal décor', 'Coordinated looks for multi-property locations', 'Professional service built around your schedule']
},
{
  tag: '',
  label: 'LANDSCAPE LIGHTING',
  title: 'Enjoy your outdoor spaces after sunset.',
  body: '',
  image: '/.netlify/images?w=1600&q=70&url=/assets/services-landscape-tia.png',
  bullets: ['Architectural uplighting', 'Path, step, and walkway lighting', 'Tree, garden, and hardscape accents', 'Patio and outdoor living areas', 'Added visibility and security', 'Poolside and hardscape trim accents']
},
{
  tag: '',
  label: 'SPECIALTY LIGHTING',
  title: 'Celebrate more than just Christmas.',
  body: '',
  image: '/.netlify/images?w=1600&q=70&url=/assets/specialty-halloween-purple.png',
  bullets: ['Halloween and fall color packages', 'Thanksgiving and harvest displays', 'July 4th and patriotic lighting', 'Awareness month color themes', 'Valentine’s, Easter, and other occasions', 'Custom installs for unique events']
}];


const Services = ({ tweaks }) => {
  return (
    <section className="ecl-services" id="services">
      <div className="ecl-services-inner">
        <div className="ecl-section-head">
          <span className="ecl-section-eyebrow"><SparkleStar size={12} color="#c9a961" /> WHAT WE DO</span>
          <h2 className="ecl-section-title">Four specialties.<br />One team. Every detail.</h2>
        </div>

        <div className={`ecl-services-grid ecl-services-${tweaks.serviceLayout || 'stagger'}`}>
          {SERVICES.map((s, i) =>
          <article key={i} className="ecl-service-card" style={{ '--delay': `${i * 0.05}s` }}>
              <div className="ecl-service-image">
                <img src={s.image} alt={s.title} />
                {s.tag && <span className="ecl-service-tag">{s.tag}</span>}
              </div>
              <div className="ecl-service-body">
                <span className="ecl-service-label">{s.label}</span>
                <h3>{s.title}</h3>
                {s.body && <p>{s.body}</p>}
                <ul className="ecl-service-bullets">
                  {s.bullets.map((b, j) =>
                <li key={j}>
                      <span className="ecl-bullet-dot" />
                      {b}
                    </li>
                )}
                </ul>
                <a href={s.href || '#'} className="ecl-service-link">
                  Explore {s.label.toLowerCase().replace('residential ', '')}
                  <svg width="16" height="10" viewBox="0 0 16 10" fill="none"><path d="M1 5h13M10 1l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
                </a>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

// ============ SIGNATURE GALLERY ============
const GALLERY = [
{ src: '/.netlify/images?w=1600&q=70&url=/assets/holiday-ridge.jpg', label: 'Pure White Ridge', kind: 'Residential' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/holiday-redslim.jpg', label: 'Red & Warm White', kind: 'Residential' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/holiday-cottoncandy.jpg', label: 'Cotton Candy', kind: 'Color Display' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/landscape-pool.jpg', label: 'Pool & Patio', kind: 'Landscape' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/holiday-multicolor-park.jpg', label: 'Park Spectacular', kind: 'Commercial' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/landscape-path.jpg', label: 'Pathway In-ground', kind: 'Landscape' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/holiday-tree.jpg', label: 'Wrapped Tree', kind: 'Signature' },
{ src: '/.netlify/images?w=1600&q=70&url=/assets/commercial-monument.jpg', label: 'Center Monument', kind: 'Commercial' }];


const Gallery = () => {
  const [filter, setFilter] = useState('All');
  const filters = ['All', 'Residential', 'Commercial', 'Landscape', 'Signature'];
  const visible = filter === 'All' ? GALLERY : GALLERY.filter((g) => g.kind === filter);

  return (
    <section className="ecl-gallery" id="gallery">
      <div className="ecl-gallery-inner">
        <div className="ecl-section-head ecl-section-head-row">
          <div>
            <span className="ecl-section-eyebrow"><SparkleStar size={12} color="#c9a961" /> SELECTED WORK</span>
            <h2 className="ecl-section-title">A look at the portfolio.</h2>
          </div>
          <div className="ecl-gallery-filters">
            {filters.map((f) =>
            <button
              key={f}
              className={`ecl-chip ${filter === f ? 'is-active' : ''}`}
              onClick={() => setFilter(f)}>
              {f}</button>
            )}
          </div>
        </div>

        <div className="ecl-gallery-grid">
          {visible.map((g, i) =>
          <figure key={g.src} className={`ecl-gallery-item ecl-gallery-item-${i % 6 + 1}`}>
              <img src={g.src} alt={g.label} loading="lazy" />
              <figcaption>
                <span className="ecl-cap-kind">{g.kind}</span>
                <span className="ecl-cap-label">{g.label}</span>
              </figcaption>
            </figure>
          )}
        </div>

        <div className="ecl-gallery-foot">
          <a href="#" className="ecl-btn ecl-btn-outline-dark">View Full Gallery
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
          </a>
        </div>
      </div>
    </section>);

};

// ============ FEATURED SPLIT (Signature Collection) ============
const Featured = () =>
<section className="ecl-featured">
    <div className="ecl-featured-inner">
      <div className="ecl-featured-image">
        <img src="/.netlify/images?w=1600&q=70&url=/assets/decor-champagne.jpg" alt="Champagne shimmer décor" />
        <div className="ecl-featured-badge">
          <SparkleStar size={14} color="#c9a961" />
          <span>SIGNATURE COLLECTION</span>
        </div>
      </div>
      <div className="ecl-featured-copy">
        <span className="ecl-section-eyebrow"><span className="ecl-eyebrow-dot" /> NEW FOR 2026</span>
        <h2>The Signature<br />Collection.</h2>
        <p className="ecl-lead">
          Curated wreaths, garlands, and décor in three designer palettes — Champagne Shimmer,
          Classic Christmas, and Winter Pearl. Hand-styled by our team for porches, mantels,
          and entryways that demand a step beyond.
        </p>
        <div className="ecl-palette-row">
          {[
        { name: 'Champagne Shimmer', swatches: ['#c9a961', '#e8d8b3', '#f4ecd8', '#1a1f2a'] },
        { name: 'Classic Christmas', swatches: ['#7a1820', '#1f4d2c', '#c9a961', '#f4ecd8'] },
        { name: 'Winter Pearl', swatches: ['#f4ecd8', '#cfd6dc', '#a8b1bc', '#1a1f2a'] }].
        map((p, i) =>
        <div key={i} className="ecl-palette">
              <div className="ecl-palette-swatches">
                {p.swatches.map((s, j) => <span key={j} style={{ background: s }} />)}
              </div>
              <span>{p.name}</span>
            </div>
        )}
        </div>
        <a href="#" className="ecl-btn ecl-btn-gold">Explore the Collection</a>
      </div>
    </div>
  </section>;


// ============ PROCESS ============
const PROCESS_STEPS = [
{ n: 'Step 1', t: 'Design Consultation', d: 'Tell us about your property. We\'ll meet on-site or in our Acworth showroom and walk through colors, palettes, and design ideas tailored to your home or business.' },
{ n: 'Step 2', t: 'Custom Plan & Quote', d: 'You receive a render-ready plan with photos of similar work, a transparent quote, and recommendations — never pressure.' },
{ n: 'Step 3', t: 'Professional Install', d: 'Our trained crew installs cleanly and discreetly. Most residential installs are completed in a single day.' },
{ n: 'Step 4', t: 'Service & Storage', d: 'In-season maintenance is included. We take down, package, and store everything for next year — your home stays yours.' }];


const Process = () =>
<section className="ecl-process">
    <div className="ecl-process-inner">
      <div className="ecl-section-head">
        <span className="ecl-section-eyebrow ecl-eyebrow-light"><SparkleStar size={12} color="#c9a961" /> HOW IT WORKS</span>
        <h2 className="ecl-section-title ecl-section-title-light">From "what if" to "wow."<br />In four simple steps.</h2>
      </div>
      <ol className="ecl-process-steps">
        {PROCESS_STEPS.map((s, i) =>
      <li key={i}>
            <div className="ecl-process-num">
              <SparkleStar size={20} color="#c9a961" />
              <span>{s.n}</span>
            </div>
            <h4>{s.t}</h4>
            <p>{s.d}</p>
            {i < PROCESS_STEPS.length - 1 && <div className="ecl-process-connector" />}
          </li>
      )}
      </ol>
    </div>
  </section>;


// ============ WHY US ============
const WhyUs = () =>
<section className="ecl-why">
    <div className="ecl-why-inner">
      <div className="ecl-why-image">
        <img src="/.netlify/images?w=1600&q=70&url=/assets/why-epic-candy-corn.png" alt="Custom fall candy corn lighting display" />
      </div>
      <div className="ecl-why-copy">
        <span className="ecl-section-eyebrow"><span className="ecl-eyebrow-dot" /> WHY EPIC</span>
        <h2 className="ecl-section-title">A better lighting experience<br />from start to finish.</h2>
        <div className="ecl-why-list">
          {[
        { t: 'Thoughtful Design', d: 'Every project is planned around your property\u2019s architecture, layout, and style \u2014 not pulled from a standard package.' },
        { t: 'Professional Products', d: 'We use high-quality LED lighting and materials selected for crisp color, reliable performance, and a polished finished look.' },
        { t: 'Clean Installation', d: 'Our trained team focuses on placement, spacing, and overall aesthetics so your lighting complements the property.' },
        { t: 'Dependable Support', d: 'From the first quote to service after installation, we keep the process organized, responsive, and stress-free.' }].
        map((w, i) =>
        <div key={i} className="ecl-why-item">
              <div className="ecl-why-check">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.5 3.5L13 4.5" stroke="#c9a961" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <div>
                <h4>{w.t}</h4>
                <p>{w.d}</p>
              </div>
            </div>
        )}
        </div>
      </div>
    </div>
  </section>;


// ============ REVIEWS ============
const REVIEWS = [
{ name: 'John Matthews', loc: 'Google Review', stars: 5, text: 'Great experience, very knowledgeable and efficient. Definitely worth every penny.' },
{ name: 'Siddarth Vedere', loc: 'Google Review', stars: 5, text: 'Excellent service. The lights installed have been great so far. Will definitely work with them again. The crew who installed the lights were very efficient.' },
{ name: 'Eric Ehlenbach', loc: 'Google Review', stars: 5, text: 'Good direct communication. Installers courteous and prompt. Lights look fantastic! Adding a few trees and/or shrubs makes all the difference. Just enough to accent the home. Very festive for the season.' },
{ name: 'Tom Croxton', loc: 'Google Review', stars: 5, text: 'Excellent work, very professional.' },
{ name: 'Cherokee Pointe', loc: 'Canton, GA', stars: 5, text: 'Landscape lighting that finally does justice to the architecture. The uplighting on the front elevation is exactly what we asked for — and a little more.' }];


// Replace this with your real Google "Write a Review" link.
// Get it from: Google Business Profile → Share review form.
const GOOGLE_REVIEW_URL = 'https://search.google.com/local/writereview?placeid=YOUR_PLACE_ID';
const REVIEW_COUNT = 47; // update with real count when known

// Hash a name to a stable avatar accent color so the row reads varied.
const AVATAR_COLORS = ['#c9a961', '#b13a3f', '#1f5722', '#8a6a2a', '#5a7d8a', '#a67b3a'];
const avatarFor = (name) => {
  const initial = (name.trim()[0] || '?').toUpperCase();
  let h = 0;
  for (let i = 0; i < name.length; i++) h = h * 31 + name.charCodeAt(i) | 0;
  const bg = AVATAR_COLORS[Math.abs(h) % AVATAR_COLORS.length];
  return { initial, bg };
};

const ReviewCard = ({ r }) => {
  const [open, setOpen] = useState(false);
  const isLong = r.text.length > 130;
  const av = avatarFor(r.name);
  return (
    <article className="ecl-rv-card">
      <div className="ecl-rv-head">
        <span className="ecl-rv-avatar" style={{ background: av.bg }}>{av.initial}</span>
        <div className="ecl-rv-meta">
          <span className="ecl-rv-name">
            {r.name}
            <span className="ecl-rv-verified" aria-label="Verified">
              <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                <path d="M7.96 14.94L5.5 12.2l-3.6.32.31-3.6L.05 6.46 2.5 4.84 3.05 1.3l3.5.8L8.04 0l1.48 2.1 3.5-.8.56 3.54 2.45 1.62-2.16 2.46.32 3.6-3.61-.31-2.46 2.73zm-1.74-5.62L11.3 4.24l-1.04-1.08-4 4-1.85-1.84-1.06 1.04 2.87 2.96z" />
              </svg>
            </span>
          </span>
          <span className="ecl-rv-source">
            <svg width="11" height="11" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="#4285F4" d="M23 12.2c0-.8-.07-1.6-.2-2.4H12v4.5h6.2a5.3 5.3 0 0 1-2.3 3.5v2.9h3.7c2.2-2 3.4-5 3.4-8.5z" />
              <path fill="#34A853" d="M12 23.5c3.1 0 5.7-1 7.6-2.8l-3.7-2.9c-1 .7-2.4 1.1-3.9 1.1-3 0-5.6-2-6.5-4.8H1.7v3c1.9 3.8 5.8 6.4 10.3 6.4z" />
              <path fill="#FBBC05" d="M5.5 14.1a7 7 0 0 1 0-4.2v-3H1.7a11.5 11.5 0 0 0 0 10.2l3.8-3z" />
              <path fill="#EA4335" d="M12 4.8c1.7 0 3.2.6 4.4 1.7l3.3-3.3A11.5 11.5 0 0 0 12 0C7.5 0 3.6 2.6 1.7 6.4l3.8 3c.9-2.8 3.5-4.6 6.5-4.6z" />
            </svg>
            <span>Google Review</span>
          </span>
        </div>
      </div>
      <div className="ecl-rv-stars" aria-label={`${r.stars} out of 5 stars`}>
        {Array(r.stars).fill('★').map((s, j) => <span key={j}>{s}</span>)}
      </div>
      <p className={`ecl-rv-text ${open ? 'is-open' : ''}`}>{r.text}</p>
      {isLong &&
      <button className="ecl-rv-more" type="button" onClick={() => setOpen((o) => !o)}>
          {open ? 'Show less' : 'Read more'}
        </button>
      }
    </article>);

};

const Reviews = () => {
  const visible = REVIEWS.slice(0, 4);
  return (
    <section className="ecl-reviews" id="reviews">
      <div className="ecl-reviews-inner">
        <h2 className="ecl-rv-title">Our Customers Love Us!</h2>

        <div className="ecl-rv-toolbar">
          <div className="ecl-rv-rating">
            <span className="ecl-rv-rating-label">Overall Rating</span>
            <div className="ecl-rv-rating-row">
              <strong className="ecl-rv-rating-num">4.9</strong>
              <span className="ecl-rv-rating-stars">★★★★★</span>
              <span className="ecl-rv-rating-count">({REVIEW_COUNT})</span>
            </div>
          </div>
          <a className="ecl-rv-write" href={GOOGLE_REVIEW_URL} target="_blank" rel="noopener">
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
              <path d="M11.5 1.5l3 3-9 9H2.5v-3l9-9z" strokeLinejoin="round" />
            </svg>
            <span>Write a Review</span>
          </a>
        </div>

        <div className="ecl-rv-grid">
          {visible.map((r, i) => <ReviewCard key={i} r={r} />)}
        </div>

      </div>
    </section>);

};


// ============ CONTACT / CTA ============
const Contact = ({ flyer, hideInfo, photos } = {}) => {
  const [interest, setInterest] = useState('Residential Christmas');
  const interests = ['Residential Christmas', 'Commercial Christmas', 'Landscape Lighting', 'Specialty Lighting'];

  return (
    <section className={`ecl-contact${flyer || photos ? ' ecl-contact-flyered' : ''}${photos ? ' ecl-contact-haspanel' : ''}`} id="contact">
      {!flyer && !photos &&
      <div className="ecl-contact-bg">
        <img src="/.netlify/images?w=1600&q=70&url=/assets/hero-avery-trace.jpg" alt="" />
      </div>}
      <div className="ecl-contact-inner">
        <div className="ecl-contact-left">
        <div className="ecl-contact-copy">
          <span className="ecl-section-eyebrow ecl-eyebrow-light"><SparkleStar size={12} color="#c9a961" /> START YOUR DESIGN</span>
          <h2>Let's design<br />your <em>brightest</em> year yet.</h2>
          <p>Tell us a little about your property and what you have in mind. We'll get back to you within one business day with availability and next steps.</p>
          {!flyer && !hideInfo &&
            <div className="ecl-contact-info">
            <div>
              <span className="ecl-info-label">CALL OR TEXT</span>
              <a href="tel:404-538-0108">404.538.0108</a>
            </div>
            <div>
              <span className="ecl-info-label">EMAIL</span>
              <a href="mailto:info@epiccustomlighting.com">info@epiccustomlighting.com</a>
            </div>
            <div>
              <span className="ecl-info-label">VISIT THE SHOWROOM</span>
              <a href="#">201 Northridge Dr. #204 Acworth, GA 30101
(text or call to schedule visit)


              </a>
            </div>
          </div>}
        </div>
        <form className="ecl-form" onSubmit={(e) => {e.preventDefault();alert('Demo form — submission disabled.');}}>
          <div className="ecl-form-head">
            <h3>Get a Free Quote</h3>
            <span>Response within 1 business day</span>
          </div>
          <div className="ecl-form-row">
            <label>
              <span>Full Name</span>
              <input type="text" required />
            </label>
            <label>
              <span>Phone</span>
              <input type="tel" required />
            </label>
          </div>
          <label>
            <span>Email</span>
            <input type="email" required />
          </label>
          <label>
            <span>Property Address</span>
            <input type="text" />
          </label>
          <div className="ecl-form-field">
            <span className="ecl-form-label">I'm interested in</span>
            <div className="ecl-radio-row">
              {interests.map((i) => <button key={i} type="button" className={`ecl-radio ${interest === i ? 'is-active' : ''}`}
                onClick={() => setInterest(i)}>
                {i}</button>
                )}
            </div>
          </div>
          <label>
            <span>Tell us about your project</span>
            <textarea rows="3" />
          </label>
          <button type="submit" className="ecl-btn ecl-btn-gold ecl-btn-full">
            Request My Free Quote
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
          <p className="ecl-form-fine">By submitting, you consent to contact from Epic Custom Lighting. We never share your info.</p>
        </form>
        </div>
        {photos &&
        <div className="ecl-contact-flyer ecl-contact-photopanel">
          {photos.map((p, i) => <img key={i} src={p.src} alt={p.alt} loading="lazy" />)}
        </div>}
        {flyer &&
        <div className="ecl-contact-flyer">
          <img src={flyer} alt="Expertly designed, beautifully lit residential Christmas lighting — design, installation, maintenance, and takedown" loading="lazy" />
        </div>}
      </div>
    </section>);

};

// ============ SERVICE AREAS ============
const SERVICE_AREA_CITIES = [
'Acworth', 'Kennesaw', 'Marietta', 'Woodstock',
'Canton', 'Roswell', 'Alpharetta', 'Sandy Springs',
'Buckhead', 'Smyrna', 'Buford', 'Dallas',
'Dacula', 'Lawrenceville', 'Cartersville', 'Powder Springs',
'Brookhaven', 'Milton', 'Holly Springs', 'East Cobb',
'West Cobb', 'Paulding County', 'Cobb County', 'Cherokee County'];


const ServiceAreas = () =>
<section className="ecl-areas" id="service-areas">
    <div className="ecl-areas-inner">
      <span className="ecl-areas-eyebrow">Service Areas</span>
      <h3 className="ecl-areas-title">Proudly serving Metro Atlanta &amp; North Georgia.</h3>
      <ul className="ecl-areas-grid">
        {SERVICE_AREA_CITIES.map((city) =>
      <li key={city}>{city}</li>
      )}
      </ul>
      <p className="ecl-areas-foot">
        Don't see your city listed? <a href="#contact">Contact us</a> to see if your property is in our area.
      </p>
      <div className="ecl-footer-bottom">
        <span>© 2026 Epic Custom Lighting. All rights reserved.</span>
        <div>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Sitemap</a>
        </div>
      </div>
    </div>
  </section>;


// ============ FOOTER ============
const Footer = () =>
<footer className="ecl-footer">
    <div className="ecl-footer-inner">
      <div className="ecl-footer-brand">
        <EpicLogo invert={true} />
      </div>
      <div className="ecl-footer-cols">
        <div>
          <h5>SERVICES</h5>
          <a href="residential-christmas.html">Residential Christmas</a>
          <a href="commercial-christmas.html">Commercial Christmas</a>
          <a href="landscape-lighting.html">Landscape Lighting</a>
          <a href="specialty-lighting.html">Specialty Lighting</a>
        </div>
        <div>
          <h5>CONNECT</h5>
          <div className="ecl-footer-social ecl-footer-social-col">
            <a href="https://facebook.com" aria-label="Facebook" target="_blank" rel="noopener">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.51 1.5-3.9 3.78-3.9 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12z" /></svg>
            </a>
            <a href="https://instagram.com" aria-label="Instagram" target="_blank" rel="noopener">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
                <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="1" fill="currentColor" stroke="none" />
              </svg>
            </a>
            <a href="https://linkedin.com" aria-label="LinkedIn" target="_blank" rel="noopener">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.72C24 .77 23.2 0 22.22 0z" /></svg>
            </a>
            <a href="https://tiktok.com" aria-label="TikTok" target="_blank" rel="noopener">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-.88-.05 6.33 6.33 0 0 0-5.21 9.86 6.34 6.34 0 0 0 10.86-4.43V8.21a8.16 8.16 0 0 0 4.77 1.52V6.29a4.78 4.78 0 0 1-.31-.02v.42z" /></svg>
            </a>
          </div>
        </div>
        <div>
          <h5>Company</h5>
          <a href="about.html">Our Story</a>
          <a href="#">Portfolio</a>
          <a href="#">Reviews</a>
          <a href="#">FAQs</a>
          <a href="blog.html">Blog</a>
          <a href="#">
</a>
        </div>
        <div>
          <h5>Contact</h5>
          <a href="tel:404-538-0108">404.538.0108</a>
          <a href="mailto:info@epiccustomlighting.com">info@epiccustomlighting.com</a>
          <span>Showroom and office:
201 Northridge Dr.
#204
Acworth,  GA. 30101</span>
        </div>
      </div>
    </div>
  </footer>;
Object.assign(window, { Nav, Hero, BokehField, TrustStrip, Intro, Services, Process, WhyUs, Reviews, Contact, ServiceAreas, Footer });