/* Shared components v2 — operator's memo */

const { useState, useEffect } = React;

const NAV = [
  { href: "index.html", label: "Home" },
  { href: "services.html", label: "Services" },
  { href: "case-studies.html", label: "Results" },
  { href: "about.html", label: "About" },
  { href: "resources.html", label: "Resources" },
];

function Wordmark() {
  return (
    <a href="index.html" className="wordmark" aria-label="Digital Contractors home">
      <span className="dc-stamp" aria-hidden="true">DC</span>
      <span className="dc-text">
        <span>Digital</span>
        <span>Contractors</span>
      </span>
    </a>
  );
}

function Nav({ active }) {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  return (
    <>
      <nav className="nav" role="navigation">
        <div className="nav-inner">
          <Wordmark />
          <div className="nav-links">
            {NAV.map(n => (
              <a key={n.href} href={n.href} className={active === n.href ? "active" : ""}>{n.label}</a>
            ))}
          </div>
          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <a href="book.html" className="btn btn-gold" style={{ padding: "10px 16px", fontSize: 14 }}>Book a call</a>
            <button className="nav-toggle" aria-label="Menu" onClick={() => setOpen(true)}>
              <span></span>
            </button>
          </div>
        </div>
      </nav>
      <div className={"nav-drawer" + (open ? " open" : "")} role="dialog" aria-modal="true">
        <div className="top">
          <Wordmark />
          <button className="close" onClick={() => setOpen(false)} aria-label="Close menu">×</button>
        </div>
        {NAV.map(n => (
          <a key={n.href} href={n.href} className={active === n.href ? "active" : ""} onClick={() => setOpen(false)}>{n.label}</a>
        ))}
        <a href="book.html" className="btn btn-gold btn-lg drawer-cta">Book a call →</a>
      </div>
    </>
  );
}

function MobileCTA() {
  return (
    <div className="mobile-cta">
      <a href="book.html" className="btn btn-gold">Book a call — see if we're a fit</a>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-inner">
          <div>
            <div style={{ marginBottom: 16 }}><Wordmark /></div>
            <p style={{ maxWidth: 360, color: "color-mix(in oklab, var(--paper) 72%, transparent)", fontSize: 15 }}>
              Marketing for hardscape builders doing $2M+. We help you fill the calendar with jobs worth taking.
            </p>
            <div style={{ marginTop: 24 }}>
              <div style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--gold)", marginBottom: 10 }}>Get the brief</div>
              <form className="email-cap" onSubmit={e => {
                e.preventDefault();
                const email = e.target.querySelector("input").value;
                const fd = new FormData();
                fd.append("email", email);
                fd.append("source", "website-footer-subscribe");
                fd.append("submittedAt", new Date().toISOString());
                fd.append("page", window.location.href);
                fetch("https://services.leadconnectorhq.com/hooks/wtyLih5GtjxAoOfWs6dk/webhook-trigger/dbdbf3b8-ef48-40e9-afa5-f5f4886faeca", {
                  method: "POST", body: fd
                }).catch(() => {});
                e.target.querySelector("input").value = "";
                e.target.querySelector("button").textContent = "Sent!";
                setTimeout(() => { e.target.querySelector("button").textContent = "Send"; }, 2000);
              }}>
                <input type="email" placeholder="you@company.com" required />
                <button type="submit">Send</button>
              </form>
              <div style={{ fontSize: 12, color: "color-mix(in oklab, var(--paper) 55%, transparent)", marginTop: 10 }}>
                Short monthly note. What's working, what we changed, and why.
              </div>
            </div>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="services.html">Services</a></li>
              <li><a href="case-studies.html">Results</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="resources.html">Resources</a></li>
            </ul>
          </div>
          <div>
            <h5>Talk to us</h5>
            <ul>
              <li><a href="book.html">Book a call</a></li>
              <li><a href="mailto:hello@digitalcontractors.io">hello@digitalcontractors.io</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} Digital Contractors. Hardscape only.</div>
          <div>Built for builders doing $2M+.</div>
        </div>
      </div>
    </footer>
  );
}

/* Image placeholder — solid forest with a caption */
function ImgSlot({ label, aspect, style }) {
  const cls = "img-slot" + (aspect === "wide" ? " wide" : aspect === "square" ? " square" : "");
  return (
    <div className={cls} style={style}>
      <div className="label">{label || "Project photo"}</div>
    </div>
  );
}

/* Single stat — used in hero + elsewhere */
function Stat({ n, label }) {
  return (
    <div className="stat">
      <div className="n">{n}</div>
      <div className="label">{label}</div>
    </div>
  );
}

/* Section wrapper */
function Section({ dark, children, style, id }) {
  return (
    <section id={id} className={"section" + (dark ? " dark" : "")} style={style}>
      <div className="wrap">{children}</div>
    </section>
  );
}

/* Tweaks panel — small, focused on headline/layout/density */
function Tweaks({ config, onChange }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setVisible(true);
      if (e.data?.type === "__deactivate_edit_mode") setVisible(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);
  if (!visible || !config) return null;

  const update = (key, value) => {
    const next = { ...config.values, [key]: value };
    onChange(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: value } }, "*");
  };

  return (
    <aside className="tweaks">
      <header>
        <span>Tweaks</span>
        <span style={{ color: "color-mix(in oklab, var(--paper) 50%, transparent)" }}>live</span>
      </header>
      {config.fields.map(f => (
        <section key={f.key}>
          <label>{f.label}</label>
          <div className="opts">
            {f.options.map(opt => (
              <button
                key={opt.value}
                className={config.values[f.key] === opt.value ? "on" : ""}
                onClick={() => update(f.key, opt.value)}
              >{opt.label}</button>
            ))}
          </div>
        </section>
      ))}
    </aside>
  );
}

/* Logo slider — infinite scroll, white logos on dark */
const CLIENT_LOGOS = [
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e74e6cb7dca6d4bf8.png", alt: "Christian Complete Landscape" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e1be0196b7948c746.png", alt: "Blue Stone Landscaping" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e17d9a9f15244c1d7.png", alt: "EIC Concrete" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef7373735369f2215.png", alt: "Avex Masonry" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e74e6cb020c6d4bf7.png", alt: "AA Construction" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef737376fea9f2217.png", alt: "Elite Designs & Construction" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ea4764d99f12045c1.png", alt: "Aesthetic Landscaping" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef36e600f53740ce2.png", alt: "Elegance Outdoor Living" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef36e60f158740ce1.png", alt: "Envision Outdoors" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef36e6097fa740ce0.png", alt: "Allegor" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e00a0d44b4b08ce20.png", alt: "Salas Concrete" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e00a0d4f65108ce23.png", alt: "Custom Spaces" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e3a309e39bcb0e27b.png", alt: "Five Star Landscaping" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ebb1ed237c0871b48.png", alt: "Moreno Remodeling Group" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef73737b8c69f2216.png", alt: "GC HVAC" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef36e609c4b740cdf.png", alt: "KMB Landscaping" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef7e07a4221fc1f58.png", alt: "Millennium Outdoor Services" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef788b041d296fbfd.png", alt: "Outworx Landscape" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef7e07a1923fc1f5a.png", alt: "Granados Construction" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef980e147dd8314eb.png", alt: "Heeler Construction" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e00a0d45ef908ce21.png", alt: "SW Florida Builders" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e73812149169952a7.png", alt: "Extensive Lawn & Landscape" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e15ee060ae0c06e33.png", alt: "Abraham & Sons Masonry" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e1be019903348c747.png", alt: "Keystone Hardscape & Design" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ebb1ed2804b871b47.png", alt: "Alcon Renovations" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5e00a0d455de08ce22.png", alt: "SCS Contracting" },
  { src: "https://storage.googleapis.com/msgsndr/wtyLih5GtjxAoOfWs6dk/media/673cba5ef7e07a7231fc1f59.png", alt: "Star Construction & Renovations" },
];

function LogoSlider() {
  /* Render logos twice so the animation loops seamlessly */
  const doubled = [...CLIENT_LOGOS, ...CLIENT_LOGOS];
  return (
    <div className="logo-slider">
      <div className="eyebrow">Trusted by 27+ contractors nationwide</div>
      <div className="slider-track">
        {doubled.map((l, i) => (
          <div key={i} className="logo-slide">
            <img src={l.src} alt={l.alt} loading="lazy" />
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Footer, MobileCTA, ImgSlot, Stat, Section, Tweaks, Wordmark, LogoSlider });