/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSelect, TweakColor */
const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "oxblood",
  "showFrameIllus": true,
  "density": "comfortable",
  "heroVariant": "gallery",
  "showQuoteForm": true
}/*EDITMODE-END*/;

/* ---------------- shared bits ---------------- */

function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square" />
    </svg>
  );
}

function ArrowDiag({ size = 16 }) {
  return (
    <svg className="svc-arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4 12L12 4M6 4h6v6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square" />
    </svg>
  );
}

function Placeholder({ label, aspect = "4 / 3", showFrame = false, tone = "default", style = {}, src = null }) {
  const toneStyles = {
    default: {},
    dark: { background: "linear-gradient(140deg, oklch(0.32 0.045 50), oklch(0.22 0.03 45))" },
    cream: { background: "linear-gradient(140deg, oklch(0.94 0.018 78), oklch(0.90 0.022 70))" },
    oxblood: { background: "linear-gradient(140deg, oklch(0.36 0.085 22), oklch(0.26 0.06 22))" },
  };
  return (
    <div className="matboard" style={{ aspectRatio: aspect, position: "relative", overflow: "hidden", ...(src ? { background: "none" } : toneStyles[tone]), ...style }}>
      {src && <img src={src} alt={label} style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", zIndex: 1 }} />}
      {showFrame && <div className="frame-illus" style={{ zIndex: 2 }} />}
      {!src && <div className="ph-label">{label}</div>}
    </div>
  );
}

/* ---------------- NAV ---------------- */

function Nav() {
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const links = [
    { href: "#services", label: "Services" },
    { href: "#process", label: "Process" },
    { href: "#why", label: "Why Ridout" },
    { href: "visualizer.html", label: "Visualizer" },
    { href: "#contact", label: "Contact" },
  ];

  return (
    <header className="nav">
      <div className="wrap nav-row">
        <a href="#" className="logo">
          Ridout <span style={{ color: "var(--oxblood)" }}>Framing</span>
          <span className="since">Est. Dallas 1997</span>
        </a>
        <nav className="nav-links nav-desktop-links">
          {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
          <span className="vbar" />
          <a href="tel:9722432990" style={{ fontFamily: "var(--mono)", fontSize: "12px", letterSpacing: "0.06em" }}>
            (972) 243-2990
          </a>
          <a href="#contact" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: "12.5px" }}>
            Request a Quote <Arrow size={12} />
          </a>
        </nav>
        <button className="nav-hamburger" onClick={() => setMenuOpen(true)} aria-label="Open menu">
          <span /><span /><span />
        </button>
      </div>

      <div className={`nav-mobile-drawer${menuOpen ? " open" : ""}`}>
        <button className="nav-close" onClick={() => setMenuOpen(false)} aria-label="Close menu">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M4 4l12 12M16 4L4 16" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="square" />
          </svg>
        </button>
        {links.map(l => (
          <a key={l.href} href={l.href} className="nav-drawer-link" onClick={() => setMenuOpen(false)}>
            {l.label}
          </a>
        ))}
        <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 12 }}>
          <a href="tel:9722432990" style={{ fontFamily: "var(--mono)", fontSize: "13px", letterSpacing: "0.08em", color: "var(--muted)", padding: "8px 0" }}>
            (972) 243-2990
          </a>
          <a href="#contact" className="btn btn-primary" style={{ justifyContent: "center" }} onClick={() => setMenuOpen(false)}>
            Request a Quote <Arrow />
          </a>
        </div>
      </div>
    </header>
  );
}

/* ---------------- HERO ---------------- */

function Hero({ variant = "gallery", showFrameIllus = true }) {
  return (
    <section style={{ paddingTop: 72, paddingBottom: 80 }}>
      <div className="wrap">
        {/* meta line */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 56 }}>
          <span className="label">№ 01 — Ridout Framing / Dallas, Texas</span>
          <span className="label">Commercial &amp; Wholesale · Since 1997</span>
        </div>

        <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)", gap: 64, alignItems: "stretch" }}>
          {/* Left: headline */}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div>
              <span className="eyebrow">A Dallas Trade Framer</span>
              <h1 className="display" style={{
                fontSize: "clamp(56px, 6.6vw, 104px)",
                margin: "26px 0 0",
                color: "var(--ink)",
              }}>
                Commercial<br />
                picture framing<br />
                for designers,<br />
                <span className="display-italic" style={{ color: "var(--oxblood)" }}>galleries &amp; businesses.</span>
              </h1>
            </div>

            <div style={{ marginTop: 56, maxWidth: 540 }}>
              <p className="body-lg" style={{ marginTop: 0 }}>
                Dallas-based wholesale framing for artwork, mirrors, memorabilia, hospitality
                projects, healthcare spaces, offices, and interior design teams — produced in
                our shop on Quaker Street since 1997.
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
                <a href="#contact" className="btn btn-primary">Request a Quote <Arrow /></a>
                <a href="tel:9722432990" className="btn btn-ghost">Call (972) 243-2990</a>
              </div>
              <div style={{ marginTop: 28, display: "flex", gap: 16, alignItems: "center" }}>
                <span className="label">Avg. quote turnaround</span>
                <span className="num" style={{ fontSize: 14, color: "var(--ink)" }}>&lt; 48 hrs</span>
                <span className="vbar" />
                <span className="label">Trade pricing</span>
                <span className="num" style={{ fontSize: 14, color: "var(--ink)" }}>Available</span>
              </div>
            </div>
          </div>

          {/* Right: visual */}
          <div className="hero-right" style={{ position: "relative", minHeight: 620 }}>
            {variant === "gallery" ? (
              <div className="gallery-grid">
                <div className="g-1" style={{ position: "relative" }}>
                  <Placeholder label="Workshop · production floor" aspect="auto" tone="dark" style={{ height: "100%" }} showFrame={showFrameIllus} src="./images/optimized/ridout168.jpg" />
                </div>
                <div className="g-2"><Placeholder label="Frame corner detail" aspect="auto" tone="oxblood" style={{ height: "100%" }} src="./images/optimized/ridout164.jpg" /></div>
                <div className="g-3"><Placeholder label="Consulting on artwork" aspect="auto" tone="cream" style={{ height: "100%" }} src="./images/optimized/ridout153.jpg" /></div>
                <div className="g-4"><Placeholder label="Moulding selection" aspect="auto" tone="default" style={{ height: "100%" }} src="./images/optimized/ridout120.jpg" /></div>
                <div className="g-5"><Placeholder label="Mat cutting machine" aspect="auto" tone="dark" style={{ height: "100%" }} src="./images/optimized/ridout161.jpg" /></div>
                <div className="g-6"><Placeholder label="Craftsman at work" aspect="auto" tone="cream" style={{ height: "100%" }} src="./images/optimized/ridout114.jpg" /></div>
              </div>
            ) : (
              <Placeholder label="Workshop / studio photograph" aspect="auto" tone="dark" style={{ height: "100%" }} showFrame={showFrameIllus} src="./images/optimized/ridout168.jpg" />
            )}

            {/* museum label */}
            <div className="hero-museum-label" style={{
              position: "absolute",
              right: 0,
              bottom: -48,
              maxWidth: 280,
              padding: "14px 18px",
              background: "var(--paper)",
              border: "1px solid var(--rule)",
              fontFamily: "var(--mono)",
              fontSize: 11,
              lineHeight: 1.6,
              letterSpacing: "0.04em",
              color: "var(--charcoal)"
            }}>
              <div style={{ color: "var(--oxblood)", marginBottom: 4, fontWeight: 500 }}>PLATE I.</div>
              Production floor, Quaker St.<br />
              Closed-corner walnut moulding<br />
              with 8-ply rag matboard.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- TRUST BAR ---------------- */

function TrustBar() {
  const items = [
    { num: "1997", label: "Founded in Dallas" },
    { num: "B2B", label: "Commercial & wholesale only" },
    { num: "Full Service", label: "Pickup · delivery · installation" },
    { num: "1 → 500+", label: "Single pieces to large rollouts" },
  ];
  return (
    <div style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", background: "var(--paper)" }}>
      <div className="wrap trust-grid" style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 0,
      }}>
        {items.map((it, i) => (
          <div key={i} style={{
            padding: "32px 28px",
            borderLeft: i === 0 ? "none" : "1px solid var(--rule)",
            display: "flex",
            flexDirection: "column",
            gap: 6,
          }}>
            <div style={{ fontFamily: "var(--serif)", fontSize: 28, color: "var(--oxblood)", lineHeight: 1 }}>
              {it.num}
            </div>
            <div className="label" style={{ marginTop: 10 }}>{it.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- MARQUEE ---------------- */

function Marquee() {
  const phrases = [
    "Art galleries", "Interior designers", "Ad agencies", "Hospitality", "Corporate",
    "Healthcare", "Hotels & resorts", "Restaurants", "Office buildings", "Nursing homes",
  ];
  const row = (
    <span>
      {phrases.map((p, i) => (
        <React.Fragment key={i}>
          {p}<em>◆</em>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-inner">
        {row}{row}
      </div>
    </div>
  );
}

/* ---------------- SERVICES ---------------- */

const SERVICES = [
  { id: "art",      title: "Original Artwork",       lead: "Conservation framing for paintings, works on paper, and gallery inventory.", tone: "dark",    label: "Plate II — Original artwork",     src: "./images/optimized/ridout164.jpg" },
  { id: "photo",    title: "Photos & Prints",        lead: "Editioned photography, fine-art prints, and large-format reproductions.",     tone: "cream",   label: "Plate III — Photo & print",       src: "./images/optimized/ridout153.jpg" },
  { id: "memo",     title: "Memorabilia",            lead: "Shadow boxes for jerseys, signed pieces, awards, and dimensional objects.",   tone: "default", label: "Plate IV — Shadow box",           src: "./images/optimized/ridout139.jpg" },
  { id: "mirror",   title: "Mirrors",                lead: "Custom mirror fabrication for hospitality, residential, and retail spaces.",  tone: "oxblood", label: "Plate V — Mirror",                src: "./images/optimized/ridout120.jpg" },
  { id: "canvas",   title: "Canvas Stretching",      lead: "Hand-stretched canvas on kiln-dried bars in any size, from study to mural.",  tone: "dark",    label: "Plate VI — Canvas",               src: "./images/optimized/ridout161.jpg" },
  { id: "diploma",  title: "Diploma Frames",         lead: "Branded diploma and certificate framing programs for corporate accounts.",    tone: "cream",   label: "Plate VII — Diploma",             src: "./images/optimized/ridout114.jpg" },
  { id: "supply",   title: "Frames, Matboard & Glass", lead: "Wholesale supply: closed-corner mouldings, rag mats, museum & UV glazing.", tone: "default", label: "Plate VIII — Supply",           src: "./images/optimized/ridout168.jpg" },
];

function Services() {
  return (
    <section id="services">
      <div className="wrap">
        <div className="services-header" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end", marginBottom: 64 }}>
          <div>
            <span className="eyebrow">§ 02 — Capabilities</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "16px 0 0" }}>
              Built for production.<br />
              <span className="display-italic" style={{ color: "var(--oxblood)" }}>Detailed like a one-off.</span>
            </h2>
          </div>
          <div>
            <p className="body-lg" style={{ margin: 0, maxWidth: 460, marginLeft: "auto" }}>
              Whether the brief is one prized memento or a 400-piece rollout across a hotel
              property, the same shop, the same hands, and the same standards see it through.
            </p>
          </div>
        </div>

        <div className="svc-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 0,
          borderTop: "1px solid var(--rule)",
          borderLeft: "1px solid var(--rule)",
        }}>
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.id} svc={s} index={i + 1} />
          ))}
          {/* trailing cell with summary */}
          <div style={{
            padding: 28,
            borderRight: "1px solid var(--rule)",
            borderBottom: "1px solid var(--rule)",
            background: "var(--oxblood)",
            color: "var(--cream)",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            minHeight: 320,
          }}>
            <div>
              <span className="label" style={{ color: "var(--brass)" }}>§ 02.08</span>
              <h3 className="display" style={{ fontSize: 32, margin: "20px 0 12px", color: "var(--cream)" }}>
                Don't see it on the list?
              </h3>
              <p className="body" style={{ color: "oklch(0.92 0.02 75)", margin: 0 }}>
                If it can be framed, mounted, stretched, or hung — we've probably done it. Send the brief.
              </p>
            </div>
            <a href="#contact" className="btn-link" style={{ color: "var(--brass)", borderColor: "var(--brass)", marginTop: 28 }}>
              Talk to a framer <Arrow />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ svc, index }) {
  return (
    <div className="svc-card" style={{
      borderRight: "1px solid var(--rule)",
      borderBottom: "1px solid var(--rule)",
      borderTop: 0, borderLeft: 0,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <span className="label">§ 02.0{index}</span>
        <ArrowDiag />
      </div>
      <Placeholder
        label={svc.label}
        aspect="4 / 3"
        tone={svc.tone}
        style={{ width: "100%" }}
        src={svc.src}
      />
      <div>
        <h3 className="display" style={{ fontSize: 26, margin: "0 0 8px", lineHeight: 1.05 }}>
          {svc.title}
        </h3>
        <p className="body" style={{ margin: 0, fontSize: 14, lineHeight: 1.55 }}>{svc.lead}</p>
      </div>
    </div>
  );
}

/* ---------------- WHY CHOOSE ---------------- */

const WHY_POINTS = [
  { n: "i.",   t: "Quality craftsmanship",   d: "Closed corners, hand-fitted mats, glazing without compromise — work that holds up under gallery lighting and HVAC cycles." },
  { n: "ii.",  t: "Fair value",              d: "Trade pricing for designers, consultants, and corporate accounts. Volume scales without losing the per-piece standard." },
  { n: "iii.", t: "Responsive service",      d: "Quotes typically within 48 hours. Direct line to the framer running your job — not a queue, not a ticket." },
  { n: "iv.",  t: "Quality materials",       d: "Conservation-grade matboard, UV and museum glazing, archival mounting, hardwood and metal mouldings." },
  { n: "v.",   t: "Sustainable production",  d: "Reclaimed and FSC-sourced moulding where available; in-house fabrication minimizes shipping and packaging waste." },
];

function WhyChoose() {
  return (
    <section id="why" style={{ background: "var(--paper)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="why-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.85fr) minmax(0, 1.15fr)", gap: 80, alignItems: "start" }}>
          <div className="why-sticky" style={{ position: "sticky", top: 100 }}>
            <span className="eyebrow">§ 03 — Why Ridout</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "16px 0 24px" }}>
              The standards<br />
              <span className="display-italic" style={{ color: "var(--oxblood)" }}>haven't slipped</span><br />
              since 1997.
            </h2>
            <p className="body" style={{ maxWidth: 380 }}>
              Five things our trade clients keep coming back for.
            </p>
            <div className="bracket-frame" style={{ marginTop: 36, padding: "28px 24px", color: "var(--rule)" }}>
              <span className="br-tl" /><span className="br-br" />
              <div style={{ color: "var(--ink)" }}>
                <div className="num" style={{ fontSize: 44, color: "var(--oxblood)", lineHeight: 1, fontFamily: "var(--serif)", fontWeight: 300 }}>28</div>
                <div className="label" style={{ marginTop: 6 }}>Years on Quaker Street</div>
              </div>
            </div>
          </div>

          <div>
            {WHY_POINTS.map((p, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "60px 1fr",
                gap: 24,
                padding: "32px 0",
                borderTop: i === 0 ? "1px solid var(--rule)" : "none",
                borderBottom: "1px solid var(--rule)",
                alignItems: "baseline",
              }}>
                <span className="num" style={{
                  fontFamily: "var(--serif)",
                  fontStyle: "italic",
                  color: "var(--oxblood)",
                  fontSize: 22,
                }}>{p.n}</span>
                <div>
                  <h3 className="display" style={{ fontSize: 32, margin: "0 0 10px", lineHeight: 1.1 }}>{p.t}</h3>
                  <p className="body" style={{ margin: 0, maxWidth: 560 }}>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- PROCESS ---------------- */

const STEPS = [
  { n: "01", t: "Send the brief", d: "Call or email with project details — counts, sizes, materials, deadline. We'll tell you what's missing." },
  { n: "02", t: "Review options", d: "We walk you through moulding, matting, glazing, and finishing options against budget and timeline." },
  { n: "03", t: "Quote & spec", d: "Itemized quote with samples on request. Specifications locked, lead time confirmed in writing." },
  { n: "04", t: "Make · deliver · install", d: "Production in our Dallas shop, with pickup, white-glove delivery, and installation available." },
];

function Process() {
  const [active, setActive] = useState(0);
  return (
    <section id="process">
      <div className="wrap">
        <div className="process-header" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end", marginBottom: 56 }}>
          <div>
            <span className="eyebrow">§ 04 — How a project moves</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "16px 0 0" }}>
              Four steps, no<br />
              <span className="display-italic" style={{ color: "var(--oxblood)" }}>moving targets.</span>
            </h2>
          </div>
          <p className="body-lg" style={{ margin: 0, maxWidth: 460, marginLeft: "auto" }}>
            Every project — single piece or hundreds — moves through the same disciplined path.
            Hover a step for detail.
          </p>
        </div>

        <div className="process-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--ink)" }}>
          {STEPS.map((s, i) => (
            <button
              key={s.n}
              onMouseEnter={() => setActive(i)}
              onFocus={() => setActive(i)}
              className="process-btn"
              style={{
                textAlign: "left",
                padding: "36px 28px 40px",
                borderRight: i < 3 ? "1px solid var(--rule)" : "none",
                background: active === i ? "var(--ink)" : "transparent",
                color: active === i ? "var(--cream)" : "var(--ink)",
                transition: "background 240ms ease, color 240ms ease",
                cursor: "default",
                minHeight: 280,
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                gap: 24,
              }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span className="step-num" style={{ color: active === i ? "var(--brass)" : "var(--oxblood)" }}>{s.n}</span>
                <span style={{
                  width: 8, height: 8, borderRadius: "50%",
                  background: active === i ? "var(--brass)" : "var(--rule)",
                  transition: "background 200ms ease",
                }} />
              </div>
              <div>
                <h3 className="display" style={{ fontSize: 24, margin: "0 0 10px", lineHeight: 1.1 }}>{s.t}</h3>
                <p className="body" style={{
                  margin: 0,
                  fontSize: 14,
                  color: active === i ? "oklch(0.85 0.015 70)" : "var(--charcoal)",
                }}>{s.d}</p>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- TESTIMONIALS ---------------- */

const QUOTES = [
  {
    body: "Marc is one of the few remaining true craftsmen in the framing industry. Personal attention, strong production, fair pricing, and on-time delivery — every time, on every job.",
    who: "Senior Art Consultant",
    org: "Hospitality projects, Texas",
  },
  {
    body: "Ridout handles our large hospitality rollouts and a single piece for a private client with the same excellent service. Deadline flexibility, impeccable work, and careful packing on every shipment.",
    who: "Principal Designer",
    org: "Boutique interior design firm",
  },
];

function Testimonials() {
  return (
    <section style={{ background: "var(--ink)", color: "var(--cream)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48 }}>
          <span className="eyebrow" style={{ color: "var(--brass)" }}>§ 05 — From the trade</span>
          <span className="label" style={{ color: "oklch(0.7 0.015 70)" }}>Two of many</span>
        </div>

        <div className="testimonials-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
          {QUOTES.map((q, i) => (
            <figure key={i} style={{ margin: 0, display: "flex", flexDirection: "column", gap: 20 }}>
              <span className="quote-mark">“</span>
              <blockquote style={{
                margin: 0,
                fontFamily: "var(--serif)",
                fontSize: 28,
                lineHeight: 1.3,
                fontWeight: 400,
                color: "var(--cream)",
                fontStyle: "italic",
                letterSpacing: "-0.01em",
              }}>
                {q.body}
              </blockquote>
              <figcaption style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid oklch(0.4 0.015 70)" }}>
                <div style={{ fontFamily: "var(--sans)", fontSize: 14, color: "var(--cream)", fontWeight: 500 }}>{q.who}</div>
                <div className="label" style={{ color: "var(--brass)", marginTop: 4 }}>{q.org}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- VISUALIZER CTA ---------------- */

function VisualizerCTA() {
  return (
    <section style={{ padding: "80px 0", background: "var(--paper)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap viz-cta-inner" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 48, flexWrap: "wrap" }}>
        <div style={{ maxWidth: 560 }}>
          <span className="eyebrow">Frame Visualizer</span>
          <h2 className="display" style={{ fontSize: "clamp(32px, 3.8vw, 52px)", margin: "16px 0 18px" }}>
            See it before<br />
            <span className="display-italic" style={{ color: "var(--oxblood)" }}>you commit.</span>
          </h2>
          <p className="body-lg" style={{ margin: 0 }}>
            Upload a photo of your artwork and try different frame styles, mat colors,
            and sizes — before your studio visit on Quaker Street.
          </p>
        </div>
        <a href="visualizer.html" className="btn btn-primary" style={{ fontSize: "14px", padding: "16px 28px", whiteSpace: "nowrap" }}>
          Open Frame Visualizer <Arrow />
        </a>
      </div>
    </section>
  );
}

/* ---------------- CONTACT CTA ---------------- */

function Contact({ showForm = true }) {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: "", company: "", email: "", scope: "", details: "" });
  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <section id="contact" style={{ background: "var(--cream-2)" }}>
      <div className="wrap">
        <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 80 }}>
          {/* Left: pitch + address */}
          <div>
            <span className="eyebrow">§ 06 — Start a project</span>
            <h2 className="display" style={{ fontSize: "clamp(48px, 5.4vw, 80px)", margin: "16px 0 24px" }}>
              Request a<br />
              commercial<br />
              <span className="display-italic" style={{ color: "var(--oxblood)" }}>framing quote.</span>
            </h2>
            <p className="body-lg" style={{ maxWidth: 460 }}>
              Tell us a little about the work. We typically reply within one business day with
              options, pricing, and a realistic lead time.
            </p>

            <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr", gap: 0, border: "1px solid var(--rule)", background: "var(--paper)" }}>
              <ContactRow label="Address" value={<>1153 Quaker Street<br />Dallas, TX 75207</>} />
              <ContactRow label="Phone" value={<a href="tel:9722432990" style={{ borderBottom: "1px solid currentColor" }}>(972) 243-2990</a>} />
              <ContactRow label="Hours" value={<>7:30 AM — 3:30 PM<br />Monday through Friday</>} />
              <ContactRow label="Trade" value="Wholesale & commercial accounts" last />
            </div>
          </div>

          {/* Right: form */}
          <div>
            {showForm ? (
              <form onSubmit={onSubmit} style={{ background: "var(--paper)", padding: 40, border: "1px solid var(--rule)", position: "relative" }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 28 }}>
                  <span className="label">Quote request</span>
                  <span className="label">Form 06.A</span>
                </div>

                {submitted ? (
                  <div style={{ textAlign: "center", padding: "60px 20px" }}>
                    <div className="display" style={{ fontSize: 36, color: "var(--oxblood)", marginBottom: 16 }}>
                      <span className="display-italic">Thank you.</span>
                    </div>
                    <p className="body">A framer will be in touch within one business day.</p>
                  </div>
                ) : (
                  <div className="quote-form">
                    <input className="field" placeholder="Your name" value={form.name} onChange={onChange("name")} required />
                    <input className="field" placeholder="Company / firm" value={form.company} onChange={onChange("company")} />
                    <input className="field field-full" type="email" placeholder="Email address" value={form.email} onChange={onChange("email")} required />
                    <select className="field field-full" value={form.scope} onChange={onChange("scope")} required>
                      <option value="">Project type…</option>
                      <option>Hospitality / hotel rollout</option>
                      <option>Healthcare facility</option>
                      <option>Corporate office</option>
                      <option>Gallery / consultant inventory</option>
                      <option>Restaurant / retail</option>
                      <option>Single piece / memento</option>
                      <option>Other</option>
                    </select>
                    <textarea
                      className="field field-full"
                      placeholder="Project details — counts, sizes, materials, deadline."
                      value={form.details}
                      onChange={onChange("details")}
                    />
                    <button type="submit" className="btn btn-primary field-full" style={{ justifyContent: "center", padding: "16px" }}>
                      Submit Request <Arrow />
                    </button>
                    <p className="label field-full" style={{ margin: 0, textAlign: "center" }}>
                      Or call <a href="tel:9722432990" style={{ color: "var(--oxblood)" }}>(972) 243-2990</a>
                    </p>
                  </div>
                )}
              </form>
            ) : (
              <div style={{ background: "var(--oxblood)", color: "var(--cream)", padding: 48, minHeight: 480, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <span className="label" style={{ color: "var(--brass)" }}>Direct line</span>
                <div>
                  <div className="display" style={{ fontSize: 64, color: "var(--cream)", lineHeight: 1 }}>
                    (972)<br />243-2990
                  </div>
                  <p className="body" style={{ marginTop: 24, color: "oklch(0.92 0.02 75)" }}>
                    Or email the shop and we'll route your project to the right framer.
                  </p>
                </div>
                <a href="mailto:hello@ridoutframing.com" className="btn-link" style={{ color: "var(--brass)", borderColor: "var(--brass)" }}>
                  Email the shop <Arrow />
                </a>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactRow({ label, value, last = false }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "120px 1fr",
      padding: "20px 24px",
      borderBottom: last ? "none" : "1px solid var(--rule)",
      alignItems: "baseline",
      gap: 16,
    }}>
      <span className="label">{label}</span>
      <span className="body" style={{ color: "var(--ink)", fontSize: 15 }}>{value}</span>
    </div>
  );
}

/* ---------------- FOOTER ---------------- */

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, alignItems: "start", marginBottom: 64 }}>
          <div className="footer-brand">
            <div className="logo" style={{ color: "var(--cream)" }}>
              Ridout <span style={{ color: "var(--brass)" }}>Framing</span>
            </div>
            <p className="body" style={{ marginTop: 16, color: "oklch(0.78 0.01 70)", maxWidth: 380 }}>
              Commercial &amp; wholesale picture framing for the Dallas trade and beyond.
              Originals, photos, mirrors, memorabilia, and projects of any scale.
            </p>
          </div>
          <FooterCol title="Capabilities" links={["Original Artwork", "Photos & Prints", "Memorabilia", "Mirrors", "Canvas Stretching", "Diploma Frames"]} />
          <FooterCol title="Trade" links={["Designers", "Galleries", "Hospitality", "Healthcare", "Corporate", "Ad Agencies"]} />
          <FooterCol title="Visit" links={["1153 Quaker Street", "Dallas, TX 75207", "(972) 243-2990", "Mon–Fri · 7:30–3:30"]} />
        </div>
        <div className="hairline" style={{ background: "oklch(0.32 0.012 50)" }} />
        <div className="footer-copyright" style={{ display: "flex", justifyContent: "space-between", paddingTop: 28, fontSize: 12, color: "oklch(0.6 0.01 70)", fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>
          <span>© 1997–2026 Ridout Framing · All rights reserved</span>
          <span>Made on Quaker Street, Dallas TX</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="label" style={{ color: "var(--brass)", marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {links.map((l) => (
          <li key={l}><a href="#" style={{ fontSize: 14 }}>{l}</a></li>
        ))}
      </ul>
    </div>
  );
}

/* ---------------- TWEAKS WIRING ---------------- */

const ACCENTS = {
  oxblood: { "--oxblood": "oklch(0.34 0.085 22)", "--oxblood-deep": "oklch(0.26 0.07 22)" },
  forest:  { "--oxblood": "oklch(0.36 0.06 150)", "--oxblood-deep": "oklch(0.26 0.05 150)" },
  navy:    { "--oxblood": "oklch(0.32 0.06 250)", "--oxblood-deep": "oklch(0.22 0.05 250)" },
  ink:     { "--oxblood": "oklch(0.22 0.012 50)", "--oxblood-deep": "oklch(0.14 0.01 50)" },
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply accent vars
  useEffect(() => {
    const vars = ACCENTS[tweaks.accent] || ACCENTS.oxblood;
    Object.entries(vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [tweaks.accent]);

  // density
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.density === "tight") {
      root.style.setProperty("--section-pad", "80px");
      document.querySelectorAll("section").forEach((s) => { s.style.paddingTop = "80px"; s.style.paddingBottom = "80px"; });
    } else {
      document.querySelectorAll("section").forEach((s) => { s.style.paddingTop = ""; s.style.paddingBottom = ""; });
    }
  }, [tweaks.density]);

  return (
    <>
      <Nav />
      <Hero variant={tweaks.heroVariant} showFrameIllus={tweaks.showFrameIllus} />
      <TrustBar />
      <Marquee />
      <Services />
      <WhyChoose />
      <Process />
      <Testimonials />
      <VisualizerCTA />
      <Contact showForm={tweaks.showQuoteForm} />
      <Footer />

      <TweaksPanel title="Tweaks" defaultPosition={{ right: 24, bottom: 24 }}>
        <TweakSection title="Palette">
          <TweakRadio
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "oxblood", label: "Oxblood" },
              { value: "forest",  label: "Forest" },
              { value: "navy",    label: "Navy" },
              { value: "ink",     label: "Ink" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Visual"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "gallery", label: "Gallery wall" },
              { value: "single",  label: "Single image" },
            ]}
          />
          <TweakToggle
            label="Show frame motif"
            value={tweaks.showFrameIllus}
            onChange={(v) => setTweak("showFrameIllus", v)}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "comfortable", label: "Editorial" },
              { value: "tight",       label: "Compact" },
            ]}
          />
          <TweakToggle
            label="Quote form (vs. phone block)"
            value={tweaks.showQuoteForm}
            onChange={(v) => setTweak("showQuoteForm", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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