const { useState, useEffect, useRef, useMemo } = React;

// ============================================================
// TWEAKS
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 220,
  "accentChroma": 0.12,
  "accentLightness": 0.38,
  "headlineFont": "Inter Tight",
  "bodyFont": "Inter",
  "bgTone": "hospital",
  "showGrain": false,
  "heroLayout": "split",
  "ctaStyle": "filled"
}/*EDITMODE-END*/;

// ============================================================
// LOGO
// ============================================================
function Logo({ size = 24 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <path d="M12 2 L22 8 L22 16 L12 22 L2 16 L2 8 Z" stroke="currentColor" strokeWidth="1.5" fill="none" />
        <path d="M12 2 L12 22 M2 8 L22 16 M22 8 L2 16" stroke="currentColor" strokeWidth="0.6" opacity="0.4" />
      </svg>
      <span style={{
        fontFamily: "var(--font-headline)",
        fontWeight: 500,
        letterSpacing: "-0.02em",
        fontSize: 21,
      }}>
        Elevate<span style={{ opacity: 0.5, marginLeft: 4 }}>Lab</span>
      </span>
    </div>
  );
}

// ============================================================
// NAV
// ============================================================
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Services", "#services"],
    ["Process", "#process"],
    ["Turnaround", "#turnaround"],
    ["Contact", "#contact"],
  ];

  return (
    <nav style={{
      position: "fixed",
      top: 0, left: 0, right: 0,
      zIndex: 50,
      padding: "20px 48px",
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      background: scrolled ? "rgba(250,250,249,0.85)" : "transparent",
      backdropFilter: scrolled ? "blur(12px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(10,14,20,0.06)" : "1px solid transparent",
      transition: "all 280ms ease",
      color: "var(--ink)",
    }}>
      <Logo />
      <div style={{ display: "flex", gap: 36, alignItems: "center" }}>
        {links.map(([label, href]) => (
          <a key={label} href={href} style={{
            fontSize: 13.5,
            color: "var(--ink)",
            textDecoration: "none",
            opacity: 0.7,
            fontWeight: 450,
            transition: "opacity 200ms",
          }}
          onMouseEnter={e => e.currentTarget.style.opacity = "1"}
          onMouseLeave={e => e.currentTarget.style.opacity = "0.7"}
          >
            {label}
          </a>
        ))}
        <a href="#contact" style={{
          fontSize: 13.5,
          padding: "9px 18px",
          background: "var(--ink)",
          color: "var(--bg)",
          borderRadius: 999,
          textDecoration: "none",
          fontWeight: 500,
          transition: "transform 200ms",
        }}
        onMouseEnter={e => e.currentTarget.style.transform = "translateY(-1px)"}
        onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}
        >
          Get started
        </a>
      </div>
    </nav>
  );
}

// ============================================================
// HERO
// ============================================================
function Hero() {
  const [time, setTime] = useState("");
  useEffect(() => {
    const tick = () => {
      const now = new Date();
      const opts = { timeZone: "America/New_York", hour: "2-digit", minute: "2-digit", hour12: false };
      setTime(now.toLocaleTimeString("en-US", opts) + " EST");
    };
    tick();
    const id = setInterval(tick, 30000);
    return () => clearInterval(id);
  }, []);

  return (
    <section style={{
      minHeight: "100vh",
      padding: "140px 48px 80px",
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      position: "relative",
    }}>
      {/* TOP STRIP */}
      <div style={{
        display: "flex",
        justifyContent: "space-between",
        fontSize: 12,
        letterSpacing: "0.08em",
        textTransform: "uppercase",
        opacity: 0.55,
        fontFamily: "var(--font-mono)",
      }}>
        <span>Boca Raton, FL · 26.36° N</span>
        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{
            width: 6, height: 6, borderRadius: "50%",
            background: "var(--accent)",
            boxShadow: "0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent)",
          }} />
          Lab open · {time}
        </span>
      </div>

      {/* HEADLINE */}
      <div style={{ maxWidth: 1240 }}>
        <div style={{
          fontSize: 12,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          opacity: 0.55,
          fontFamily: "var(--font-mono)",
          marginBottom: 28,
          display: "flex",
          alignItems: "center",
          gap: 12,
        }}>
          <span style={{ width: 24, height: 1, background: "currentColor", opacity: 0.4 }} />
          A digital dental lab — est. 2024
        </div>

        <h1 style={{
          fontFamily: "var(--font-headline)",
          fontSize: "clamp(56px, 9vw, 144px)",
          lineHeight: 0.95,
          letterSpacing: "-0.04em",
          fontWeight: 400,
          margin: 0,
          color: "var(--ink)",
        }}>
          Digital precision.<br />
          <span style={{ fontStyle: "italic", fontWeight: 300, opacity: 0.92 }}>Delivered fast.</span>
        </h1>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 80,
          marginTop: 56,
          maxWidth: 980,
        }}>
          <p style={{
            fontSize: 19,
            lineHeight: 1.5,
            color: "var(--ink)",
            opacity: 0.78,
            margin: 0,
            maxWidth: 460,
            textWrap: "pretty",
          }}>
            The agile dental lab partner for your clinic's daily needs. Scan in, design overnight, ship in the morning.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start" }}>
            <a href="#contact" style={{
              padding: "14px 26px",
              background: "var(--ink)",
              color: "var(--bg)",
              borderRadius: 999,
              textDecoration: "none",
              fontSize: 15,
              fontWeight: 500,
              display: "inline-flex",
              alignItems: "center",
              gap: 12,
              transition: "transform 200ms",
            }}
            onMouseEnter={e => e.currentTarget.style.transform = "translateY(-2px)"}
            onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}
            >
              Open an account
              <span style={{ fontSize: 18 }}>→</span>
            </a>
            <a href="#services" style={{
              fontSize: 14,
              color: "var(--ink)",
              opacity: 0.65,
              textDecoration: "none",
              padding: "8px 0",
              borderBottom: "1px solid currentColor",
            }}>
              See what we make
            </a>
          </div>
        </div>
      </div>

      {/* BOTTOM METRICS */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 0,
        marginTop: 80,
        borderTop: "1px solid rgba(10,14,20,0.1)",
        paddingTop: 28,
      }}>
        {[
          ["24–48h", "average turnaround"],
          ["12k+", "cases shipped"],
          ["98.4%", "first-fit rate"],
          ["1:1", "lead designer per clinic"],
        ].map(([num, label], i) => (
          <div key={i} style={{
            paddingRight: 24,
            borderLeft: i === 0 ? "none" : "1px solid rgba(10,14,20,0.1)",
            paddingLeft: i === 0 ? 0 : 24,
          }}>
            <div style={{
              fontFamily: "var(--font-headline)",
              fontSize: 36,
              letterSpacing: "-0.03em",
              fontWeight: 400,
              color: "var(--ink)",
              lineHeight: 1,
            }}>
              {num}
            </div>
            <div style={{
              fontSize: 12,
              opacity: 0.55,
              marginTop: 10,
              fontFamily: "var(--font-mono)",
              textTransform: "uppercase",
              letterSpacing: "0.06em",
            }}>
              {label}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// MARQUEE / CLIENTS
// ============================================================
function Marquee() {
  const items = [
    "Trusted by clinics across South Florida",
    "iTero · 3Shape · Medit compatible",
    "FDA-registered facility",
    "Same-day digital design",
    "Boca Raton · Delray · Fort Lauderdale · Miami",
  ];
  const doubled = [...items, ...items, ...items];
  return (
    <div style={{
      borderTop: "1px solid rgba(10,14,20,0.08)",
      borderBottom: "1px solid rgba(10,14,20,0.08)",
      padding: "22px 0",
      overflow: "hidden",
      whiteSpace: "nowrap",
    }}>
      <div style={{
        display: "inline-flex",
        gap: 64,
        animation: "marquee 50s linear infinite",
      }}>
        {doubled.map((s, i) => (
          <span key={i} style={{
            fontSize: 13,
            opacity: 0.55,
            fontFamily: "var(--font-mono)",
            letterSpacing: "0.04em",
            display: "inline-flex",
            alignItems: "center",
            gap: 64,
          }}>
            {s}
            <span style={{ width: 4, height: 4, borderRadius: "50%", background: "currentColor", opacity: 0.4 }} />
          </span>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// SERVICES
// ============================================================
function Services() {
  const [hovered, setHovered] = useState(null);

  const services = [
    {
      n: "01",
      title: "Retainers & Splints",
      desc: "Clear printed retainers and night guards. High-strength bio-compatible resin, finished and polished in-house.",
      meta: ["24–48h turnaround", "Bio Splint Makertech resin", "Scan: upper / lower / bite"],
      sub: "Most ordered",
      image: "images/retainer.jpg",
    },
    {
      n: "02",
      title: "3D Model Printing",
      desc: "High-resolution study models, dies, and surgical guides. Pre-print edits, low production time, made entirely in the digital flow.",
      meta: ["Next day", "Pre-print edits included", "Scan: upper / lower"],
      sub: "Bread & butter",
      image: "images/model.jpg",
    },
    {
      n: "03",
      title: "Digital Design",
      desc: "CAD design for restorative cases. Send your scans, receive the design file or the finished printed appliance — your call.",
      meta: ["Overnight", "exocad · 3Shape", "Per-case or retainer"],
      sub: "White-label friendly",
      image: "images/splint-on-model.jpg",
    },
  ];

  return (
    <section id="services" style={{ padding: "140px 48px 60px" }}>
      <SectionHeader eyebrow="Services" number="01" title="Three things, done well." />

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 0,
        marginTop: 80,
        borderTop: "1px solid var(--rule)",
      }}>
        {services.map((s, i) => (
          <div key={i}
            onMouseEnter={() => setHovered(i)}
            onMouseLeave={() => setHovered(null)}
            style={{
              padding: "40px 32px 40px 0",
              borderBottom: "1px solid var(--rule)",
              borderLeft: i === 0 ? "none" : "1px solid var(--rule)",
              paddingLeft: i === 0 ? 0 : 32,
              position: "relative",
              cursor: "default",
              transition: "background 300ms",
              background: hovered === i ? "rgba(10,14,20,0.015)" : "transparent",
            }}>
            <div style={{
              display: "flex",
              justifyContent: "flex-end",
              alignItems: "baseline",
              marginBottom: 28,
            }}>
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                opacity: 0.5,
                letterSpacing: "0.06em",
                textTransform: "uppercase",
              }}>{s.sub}</span>
            </div>

            {/* Visual */}
            <div style={{
              aspectRatio: "4/3",
              background: "#0A0E14",
              border: "1px solid var(--rule)",
              borderRadius: 4,
              marginBottom: 32,
              position: "relative",
              overflow: "hidden",
              transition: "transform 600ms cubic-bezier(.2,.8,.2,1)",
              transform: hovered === i ? "scale(1.01)" : "scale(1)",
            }}>
              <img src={s.image} alt={s.title} style={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
                display: "block",
                transition: "transform 800ms cubic-bezier(.2,.8,.2,1), filter 400ms",
                transform: hovered === i ? "scale(1.04)" : "scale(1)",
                filter: hovered === i ? "brightness(1.05)" : "brightness(1)",
              }} />
              <div style={{
                position: "absolute",
                top: 12, left: 12,
                fontSize: 10,
                fontFamily: "var(--font-mono)",
                color: "rgba(255,255,255,0.65)",
                letterSpacing: "0.06em",
                textTransform: "uppercase",
                background: "rgba(0,0,0,0.35)",
                padding: "4px 8px",
                borderRadius: 2,
                backdropFilter: "blur(4px)",
              }}>
                {s.n} / 03
              </div>
            </div>

            <h3 style={{
              fontFamily: "var(--font-headline)",
              fontSize: 32,
              letterSpacing: "-0.025em",
              fontWeight: 400,
              margin: "0 0 14px",
              lineHeight: 1.05,
            }}>
              {s.title}
            </h3>
            <p style={{
              fontSize: 15,
              lineHeight: 1.55,
              opacity: 0.7,
              margin: "0 0 28px",
              textWrap: "pretty",
              maxWidth: 380,
            }}>
              {s.desc}
            </p>

            <ul style={{
              listStyle: "none",
              padding: 0,
              margin: 0,
              display: "flex",
              flexDirection: "column",
              gap: 8,
            }}>
              {s.meta.map((m, j) => (
                <li key={j} style={{
                  fontSize: 12.5,
                  fontFamily: "var(--font-mono)",
                  opacity: 0.65,
                  display: "flex",
                  alignItems: "center",
                  gap: 10,
                  letterSpacing: "0.02em",
                }}>
                  <span style={{ width: 4, height: 4, background: "var(--accent)" }} />
                  {m}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// Full-bleed UV cure visual — single accent of color in the page
function CureBleed() {
  return (
    <section style={{
      position: "relative",
      height: "min(75vh, 720px)",
      overflow: "hidden",
      background: "#000",
      margin: "0",
    }}>
      <img src="images/uv-cure.jpg" alt="UV post-cure of printed splints" style={{
        position: "absolute",
        inset: 0,
        width: "100%",
        height: "100%",
        objectFit: "cover",
        opacity: 0.92,
      }} />
      <div style={{
        position: "absolute",
        inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%)",
      }} />
      <div style={{
        position: "absolute",
        bottom: 48,
        left: 48,
        right: 48,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-end",
        color: "#fff",
      }}>
        <div style={{ maxWidth: 640 }}>
          <div style={{
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            opacity: 0.7,
            marginBottom: 16,
          }}>
            Post-cure · 405nm
          </div>
          <h3 style={{
            fontFamily: "var(--font-headline)",
            fontSize: "clamp(32px, 4vw, 56px)",
            letterSpacing: "-0.025em",
            fontWeight: 400,
            lineHeight: 1.05,
            margin: 0,
            textWrap: "balance",
          }}>
            Every appliance finished in-house, under our own light.
          </h3>
        </div>
        <div style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          opacity: 0.6,
          textAlign: "right",
        }}>
          Boca Raton<br />FL · 33434
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SECTION HEADER
// ============================================================
function SectionHeader({ eyebrow, number, title, sub }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "200px 1fr",
      gap: 48,
      alignItems: "start",
    }}>
      <div style={{
        fontFamily: "var(--font-mono)",
        fontSize: 12,
        textTransform: "uppercase",
        letterSpacing: "0.08em",
        opacity: 0.55,
        paddingTop: 12,
      }}>
        <div style={{ marginBottom: 6 }}>{number} — {eyebrow}</div>
      </div>
      <h2 style={{
        fontFamily: "var(--font-headline)",
        fontSize: "clamp(40px, 5.5vw, 76px)",
        letterSpacing: "-0.03em",
        fontWeight: 400,
        margin: 0,
        lineHeight: 1,
        maxWidth: 900,
      }}>
        {title}
      </h2>
      {sub && (
        <>
          <div />
          <p style={{
            fontSize: 17,
            lineHeight: 1.5,
            opacity: 0.7,
            maxWidth: 600,
            margin: "24px 0 0",
            textWrap: "pretty",
          }}>{sub}</p>
        </>
      )}
    </div>
  );
}

// ============================================================
// TURNAROUND TIMELINE
// ============================================================
function Turnaround() {
  const [hour, setHour] = useState(0);

  useEffect(() => {
    let raf;
    let start;
    const loop = (t) => {
      if (!start) start = t;
      const elapsed = (t - start) / 60; // 60ms per hour
      setHour(Math.min(48, elapsed % 56));
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  const phases = [
    { at: 0, label: "Scan received", detail: "STL upload or iTero direct" },
    { at: 4, label: "Case reviewed", detail: "By a lead designer, not a queue" },
    { at: 12, label: "Designed", detail: "exocad / 3Shape CAD" },
    { at: 24, label: "Printed & finished", detail: "Trim, polish, QC" },
    { at: 36, label: "Shipped", detail: "Overnight to your clinic" },
    { at: 48, label: "In-chair", detail: "First-fit verified" },
  ];

  return (
    <section id="turnaround" style={{
      padding: "140px 48px",
      background: "var(--ink)",
      color: "var(--bg)",
      borderRadius: 0,
    }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "200px 1fr",
        gap: 48,
        alignItems: "start",
      }}>
        <div style={{
          fontFamily: "var(--font-mono)",
          fontSize: 12,
          textTransform: "uppercase",
          letterSpacing: "0.08em",
          opacity: 0.55,
          paddingTop: 12,
        }}>
          02 — Turnaround
        </div>
        <div>
          <h2 style={{
            fontFamily: "var(--font-headline)",
            fontSize: "clamp(40px, 5.5vw, 76px)",
            letterSpacing: "-0.03em",
            fontWeight: 400,
            margin: 0,
            lineHeight: 1,
          }}>
            From scan to seat in <span style={{ fontStyle: "italic", color: "var(--accent-light)" }}>48 hours</span>, typically less.
          </h2>
          <p style={{
            fontSize: 17,
            lineHeight: 1.5,
            opacity: 0.6,
            maxWidth: 600,
            margin: "28px 0 0",
            textWrap: "pretty",
          }}>
            We run a small, focused operation — no offshore handoffs, no week-long queues. Most cases ship the next morning.
          </p>
        </div>
      </div>

      {/* Timeline */}
      <div style={{ marginTop: 96, position: "relative" }}>
        <div style={{
          position: "relative",
          height: 1,
          background: "rgba(255,255,255,0.15)",
          margin: "0 0 48px",
        }}>
          {/* Filled progress */}
          <div style={{
            position: "absolute",
            left: 0, top: 0, bottom: 0,
            width: `${(hour / 48) * 100}%`,
            background: "var(--accent-light)",
            transition: "width 80ms linear",
          }} />
          {/* Cursor */}
          <div style={{
            position: "absolute",
            left: `${(hour / 48) * 100}%`,
            top: -4,
            width: 8, height: 8,
            borderRadius: "50%",
            background: "var(--accent-light)",
            transform: "translateX(-50%)",
            boxShadow: "0 0 0 6px color-mix(in oklch, var(--accent-light) 25%, transparent)",
            transition: "left 80ms linear",
          }} />

          {/* Phase ticks */}
          {phases.map((p, i) => (
            <div key={i} style={{
              position: "absolute",
              left: `${(p.at / 48) * 100}%`,
              top: -3,
              width: 1, height: 7,
              background: "rgba(255,255,255,0.3)",
              transform: "translateX(-50%)",
            }} />
          ))}
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(6, 1fr)",
          gap: 16,
        }}>
          {phases.map((p, i) => {
            const reached = hour >= p.at;
            return (
              <div key={i} style={{
                opacity: reached ? 1 : 0.4,
                transition: "opacity 200ms",
              }}>
                <div style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                  letterSpacing: "0.06em",
                  color: reached ? "var(--accent-light)" : "rgba(255,255,255,0.5)",
                  marginBottom: 8,
                }}>
                  H+{p.at.toString().padStart(2, "0")}
                </div>
                <div style={{
                  fontFamily: "var(--font-headline)",
                  fontSize: 18,
                  letterSpacing: "-0.015em",
                  marginBottom: 6,
                }}>
                  {p.label}
                </div>
                <div style={{
                  fontSize: 12.5,
                  opacity: 0.55,
                  lineHeight: 1.45,
                }}>
                  {p.detail}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 64,
          paddingTop: 28,
          borderTop: "1px solid rgba(255,255,255,0.12)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          fontSize: 12,
          fontFamily: "var(--font-mono)",
          opacity: 0.6,
          letterSpacing: "0.06em",
          textTransform: "uppercase",
        }}>
          <span>Live demo · simulated 48-hour cycle</span>
          <span>H+{Math.floor(hour).toString().padStart(2, "0")}:{Math.floor((hour % 1) * 60).toString().padStart(2, "0")}</span>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PROCESS / WHY US
// ============================================================
function Process() {
  const points = [
    {
      n: "A",
      title: "Talk to a designer, not a portal.",
      body: "Your clinic gets a named lead designer. Text us a question, get an answer the same hour."
    },
    {
      n: "B",
      title: "Local, not offshore.",
      body: "Designed and printed in Boca Raton. Cases never leave Florida, so they never get stuck in customs."
    },
    {
      n: "C",
      title: "One flat per-case price.",
      body: "No surprise fees for revisions, rush, or shipping. You'll know the price before you upload."
    },
  ];

  return (
    <section id="process" style={{ padding: "140px 48px" }}>
      <SectionHeader
        eyebrow="Why Elevate"
        number="03"
        title="Built for clinics that move."
        sub="Most labs were built for a different decade. We built ours around the way digital dentistry actually works in 2026."
      />

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 48,
        marginTop: 96,
      }}>
        {points.map((p, i) => (
          <div key={i} style={{
            paddingTop: 32,
            borderTop: "1px solid var(--rule)",
          }}>
            <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.08em",
              opacity: 0.5,
              marginBottom: 24,
            }}>
              ({p.n})
            </div>
            <h3 style={{
              fontFamily: "var(--font-headline)",
              fontSize: 26,
              letterSpacing: "-0.02em",
              fontWeight: 400,
              margin: "0 0 16px",
              lineHeight: 1.15,
              textWrap: "balance",
            }}>
              {p.title}
            </h3>
            <p style={{
              fontSize: 15,
              lineHeight: 1.55,
              opacity: 0.7,
              margin: 0,
              textWrap: "pretty",
            }}>
              {p.body}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// CONTACT FORM
// ============================================================
function Contact() {
  const [form, setForm] = useState({
    name: "", clinic: "", email: "", phone: "",
    services: [], scanner: "", volume: "1-5",
    message: "",
  });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [step, setStep] = useState(1);

  const update = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    setErrors(e => ({ ...e, [k]: null }));
  };

  const toggleService = (s) => {
    setForm(f => ({
      ...f,
      services: f.services.includes(s)
        ? f.services.filter(x => x !== s)
        : [...f.services, s],
    }));
  };

  const validateStep1 = () => {
    const e = {};
    if (!form.name.trim()) e.name = "Required";
    if (!form.clinic.trim()) e.clinic = "Required";
    if (!form.email.trim()) e.email = "Required";
    else if (!/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) e.email = "Invalid email";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const next = () => { if (validateStep1()) setStep(2); };
  const submit = async (ev) => {
    ev.preventDefault();
    if (form.services.length === 0) {
      setErrors({ services: "Pick at least one" });
      return;
    }
    try {
      const fd = new FormData();
      Object.entries(form).forEach(([k, v]) => {
        fd.append(k, Array.isArray(v) ? v.join(", ") : v);
      });
      const res = await fetch("send.php", { method: "POST", body: fd });
      if (!res.ok) throw new Error("Send failed");
      setSubmitted(true);
    } catch (err) {
      setErrors({ services: "Could not send. Please try again or email lab@elevatelab3d.com." });
    }
  };

  const inputStyle = (err) => ({
    width: "100%",
    padding: "14px 0 12px",
    background: "transparent",
    border: "none",
    borderBottom: `1px solid ${err ? "#c44" : "rgba(10,14,20,0.18)"}`,
    fontSize: 17,
    fontFamily: "var(--font-body)",
    color: "var(--ink)",
    outline: "none",
    transition: "border-color 200ms",
  });

  const labelStyle = {
    fontSize: 11,
    fontFamily: "var(--font-mono)",
    textTransform: "uppercase",
    letterSpacing: "0.08em",
    opacity: 0.55,
    display: "block",
    marginBottom: 6,
  };

  if (submitted) {
    return (
      <section id="contact" style={{ padding: "140px 48px" }}>
        <div style={{
          maxWidth: 720,
          margin: "0 auto",
          textAlign: "center",
        }}>
          <div style={{
            width: 56, height: 56,
            borderRadius: "50%",
            background: "var(--accent)",
            color: "white",
            display: "flex", alignItems: "center", justifyContent: "center",
            margin: "0 auto 32px",
            fontSize: 24,
          }}>✓</div>
          <h2 style={{
            fontFamily: "var(--font-headline)",
            fontSize: 56,
            letterSpacing: "-0.03em",
            fontWeight: 400,
            margin: "0 0 24px",
            lineHeight: 1,
          }}>
            We'll be in touch shortly.
          </h2>
          <p style={{ fontSize: 17, opacity: 0.7, lineHeight: 1.5 }}>
            Thanks, {form.name.split(" ")[0]}. A lead designer from Elevate Lab will email you at <span style={{ color: "var(--ink)", borderBottom: "1px solid currentColor" }}>{form.email}</span> within one business hour to set up your account.
          </p>
          <button onClick={() => { setSubmitted(false); setStep(1); setForm({ name: "", clinic: "", email: "", phone: "", services: [], scanner: "", volume: "1-5", message: "" }); }}
            style={{
              marginTop: 32,
              padding: "10px 18px",
              background: "transparent",
              border: "1px solid rgba(10,14,20,0.2)",
              borderRadius: 999,
              fontSize: 13,
              cursor: "pointer",
              fontFamily: "inherit",
            }}>
            Submit another
          </button>
        </div>
      </section>
    );
  }

  return (
    <section id="contact" style={{ padding: "140px 48px" }}>
      <SectionHeader
        eyebrow="Get started"
        number="04"
        title="Open an account."
        sub="Tell us about your clinic. We'll set you up with a lead designer and get your first case running this week."
      />

      <form onSubmit={submit} style={{
        marginTop: 80,
        display: "grid",
        gridTemplateColumns: "200px 1fr",
        gap: 48,
        alignItems: "start",
      }}>
        <div style={{
          fontFamily: "var(--font-mono)",
          fontSize: 12,
          textTransform: "uppercase",
          letterSpacing: "0.08em",
          opacity: 0.55,
          position: "sticky",
          top: 100,
        }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={{ opacity: step >= 1 ? 1 : 0.4, display: "flex", gap: 10, alignItems: "center" }}>
              <span style={{
                width: 18, height: 18, borderRadius: "50%",
                border: "1px solid currentColor",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 9,
                background: step >= 1 ? "var(--ink)" : "transparent",
                color: step >= 1 ? "var(--bg)" : "currentColor",
                borderColor: step >= 1 ? "var(--ink)" : "currentColor",
              }}>1</span>
              You
            </div>
            <div style={{ opacity: step >= 2 ? 1 : 0.4, display: "flex", gap: 10, alignItems: "center" }}>
              <span style={{
                width: 18, height: 18, borderRadius: "50%",
                border: "1px solid currentColor",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 9,
                background: step >= 2 ? "var(--ink)" : "transparent",
                color: step >= 2 ? "var(--bg)" : "currentColor",
                borderColor: step >= 2 ? "var(--ink)" : "currentColor",
              }}>2</span>
              Your work
            </div>
          </div>
        </div>

        <div style={{ maxWidth: 680 }}>
          {step === 1 && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
              <div>
                <label style={labelStyle}>Your name {errors.name && <span style={{ color: "#c44", marginLeft: 6 }}>· {errors.name}</span>}</label>
                <input style={inputStyle(errors.name)} value={form.name} onChange={e => update("name", e.target.value)} placeholder="Dr. Jane Doe" />
              </div>
              <div>
                <label style={labelStyle}>Clinic {errors.clinic && <span style={{ color: "#c44", marginLeft: 6 }}>· {errors.clinic}</span>}</label>
                <input style={inputStyle(errors.clinic)} value={form.clinic} onChange={e => update("clinic", e.target.value)} placeholder="Doe Family Dentistry" />
              </div>
              <div>
                <label style={labelStyle}>Email {errors.email && <span style={{ color: "#c44", marginLeft: 6 }}>· {errors.email}</span>}</label>
                <input type="email" style={inputStyle(errors.email)} value={form.email} onChange={e => update("email", e.target.value)} placeholder="jane@clinic.com" />
              </div>
              <div>
                <label style={labelStyle}>Phone <span style={{ opacity: 0.5 }}>(optional)</span></label>
                <input style={inputStyle(false)} value={form.phone} onChange={e => update("phone", e.target.value)} placeholder="(561) 555-0100" />
              </div>
              <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end", marginTop: 24 }}>
                <button type="button" onClick={next} style={{
                  padding: "14px 26px",
                  background: "var(--ink)",
                  color: "var(--bg)",
                  border: "none",
                  borderRadius: 999,
                  fontSize: 15,
                  fontWeight: 500,
                  cursor: "pointer",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 12,
                  fontFamily: "inherit",
                }}>
                  Continue <span style={{ fontSize: 18 }}>→</span>
                </button>
              </div>
            </div>
          )}

          {step === 2 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
              <div>
                <label style={labelStyle}>What do you need? {errors.services && <span style={{ color: "#c44", marginLeft: 6 }}>· {errors.services}</span>}</label>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 12 }}>
                  {["Retainers", "Splints / Night guards", "Study models", "Surgical guides", "CAD design", "Crown / bridge"].map(s => (
                    <button key={s} type="button" onClick={() => toggleService(s)} style={{
                      padding: "10px 16px",
                      background: form.services.includes(s) ? "var(--ink)" : "transparent",
                      color: form.services.includes(s) ? "var(--bg)" : "var(--ink)",
                      border: `1px solid ${form.services.includes(s) ? "var(--ink)" : "rgba(10,14,20,0.18)"}`,
                      borderRadius: 999,
                      fontSize: 13.5,
                      cursor: "pointer",
                      fontFamily: "inherit",
                      transition: "all 180ms",
                    }}>
                      {s}
                    </button>
                  ))}
                </div>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
                <div>
                  <label style={labelStyle}>Scanner</label>
                  <select value={form.scanner} onChange={e => update("scanner", e.target.value)} style={{
                    ...inputStyle(false),
                    appearance: "none",
                    background: "transparent",
                    cursor: "pointer",
                  }}>
                    <option value="">Select scanner…</option>
                    <option>iTero Element</option>
                    <option>3Shape Trios</option>
                    <option>Medit i700</option>
                    <option>Primescan</option>
                    <option>Other / no scanner</option>
                  </select>
                </div>
                <div>
                  <label style={labelStyle}>Cases per week</label>
                  <div style={{ display: "flex", gap: 6, marginTop: 14 }}>
                    {["1-5", "5-15", "15-30", "30+"].map(v => (
                      <button key={v} type="button" onClick={() => update("volume", v)} style={{
                        flex: 1,
                        padding: "10px 0",
                        background: form.volume === v ? "var(--ink)" : "transparent",
                        color: form.volume === v ? "var(--bg)" : "var(--ink)",
                        border: `1px solid ${form.volume === v ? "var(--ink)" : "rgba(10,14,20,0.18)"}`,
                        fontSize: 13,
                        cursor: "pointer",
                        fontFamily: "var(--font-mono)",
                        transition: "all 180ms",
                      }}>
                        {v}
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              <div>
                <label style={labelStyle}>Anything else? <span style={{ opacity: 0.5 }}>(optional)</span></label>
                <textarea value={form.message} onChange={e => update("message", e.target.value)}
                  rows={3}
                  placeholder="A first case, a question about pricing, etc."
                  style={{
                    ...inputStyle(false),
                    resize: "none",
                    paddingTop: 14,
                  }} />
              </div>

              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 16 }}>
                <button type="button" onClick={() => setStep(1)} style={{
                  padding: "12px 0",
                  background: "transparent",
                  border: "none",
                  fontSize: 14,
                  cursor: "pointer",
                  opacity: 0.6,
                  fontFamily: "inherit",
                  color: "var(--ink)",
                }}>
                  ← Back
                </button>
                <button type="submit" style={{
                  padding: "14px 26px",
                  background: "var(--ink)",
                  color: "var(--bg)",
                  border: "none",
                  borderRadius: 999,
                  fontSize: 15,
                  fontWeight: 500,
                  cursor: "pointer",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 12,
                  fontFamily: "inherit",
                }}>
                  Send request <span style={{ fontSize: 18 }}>→</span>
                </button>
              </div>
            </div>
          )}
        </div>
      </form>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer style={{
      padding: "80px 48px 40px",
      borderTop: "1px solid var(--rule)",
    }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "2fr 1fr 1fr 1fr",
        gap: 48,
        marginBottom: 80,
      }}>
        <div>
          <Logo />
          <p style={{
            marginTop: 24,
            fontSize: 14,
            lineHeight: 1.55,
            opacity: 0.6,
            maxWidth: 320,
            textWrap: "pretty",
          }}>
            A small, focused digital dental lab serving clinics across South Florida.
          </p>
        </div>

        <div>
          <div style={{ ...sectionLabel }}>Visit</div>
          <address style={{ fontStyle: "normal", fontSize: 14, lineHeight: 1.6, opacity: 0.8 }}>
            7820 Glades Road<br />
            Suite 250<br />
            Boca Raton, FL 33434
          </address>
        </div>

        <div>
          <div style={{ ...sectionLabel }}>Contact</div>
          <div style={{ fontSize: 14, lineHeight: 1.7, opacity: 0.8 }}>
            <a href="mailto:lab@elevatelab3d.com" style={footerLink}>lab@elevatelab3d.com</a><br />
            <a href="tel:+15618704057" style={footerLink}>(561) 870-4057</a><br />
            <span style={{ opacity: 0.6 }}>Mon–Fri · 8am – 6pm EST</span>
          </div>
        </div>

        <div>
          <div style={{ ...sectionLabel }}>Compatible</div>
          <div style={{ fontSize: 14, lineHeight: 1.7, opacity: 0.8 }}>
            iTero<br />
            3Shape Trios<br />
            Medit i700<br />
            Primescan
          </div>
        </div>
      </div>

      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-end",
        paddingTop: 28,
        borderTop: "1px solid var(--rule)",
        fontSize: 12,
        opacity: 0.5,
        fontFamily: "var(--font-mono)",
        letterSpacing: "0.04em",
      }}>
        <span>© 2026 Elevate Lab, LLC · FDA reg. #DXX-9921</span>
        <span style={{
          fontFamily: "var(--font-headline)",
          fontSize: 96,
          letterSpacing: "-0.04em",
          fontWeight: 300,
          opacity: 0.06,
          color: "var(--ink)",
          lineHeight: 0.9,
          alignSelf: "flex-end",
          marginRight: -8,
        }}>
          Elevate
        </span>
        <span>Designed in Boca Raton, FL</span>
      </div>
    </footer>
  );
}

const sectionLabel = {
  fontSize: 11,
  fontFamily: "var(--font-mono)",
  textTransform: "uppercase",
  letterSpacing: "0.08em",
  opacity: 0.5,
  marginBottom: 16,
};

const footerLink = {
  color: "inherit",
  textDecoration: "none",
  borderBottom: "1px solid currentColor",
  paddingBottom: 1,
};

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

  // apply CSS vars from tweaks
  useEffect(() => {
    const root = document.documentElement;
    const accent = `oklch(${tweaks.accentLightness} ${tweaks.accentChroma} ${tweaks.accentHue})`;
    const accentLight = `oklch(0.72 ${tweaks.accentChroma * 0.7} ${tweaks.accentHue})`;
    root.style.setProperty("--accent", accent);
    root.style.setProperty("--accent-light", accentLight);

    const bgMap = {
      hospital: "#FAFAF9",
      cool: "#F6F8FA",
      warm: "#FBF8F3",
    };
    root.style.setProperty("--bg", bgMap[tweaks.bgTone] || bgMap.hospital);
    root.style.setProperty("--font-headline", `"${tweaks.headlineFont}", sans-serif`);
    root.style.setProperty("--font-body", `"${tweaks.bodyFont}", sans-serif`);
  }, [tweaks]);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Marquee />
        <Services />
        <CureBleed />
        <Turnaround />
        <Process />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakSlider label="Hue" value={tweaks.accentHue} min={0} max={360} step={1} onChange={v => setTweak("accentHue", v)} />
          <TweakSlider label="Chroma" value={tweaks.accentChroma} min={0} max={0.3} step={0.01} onChange={v => setTweak("accentChroma", v)} />
          <TweakSlider label="Lightness" value={tweaks.accentLightness} min={0.2} max={0.7} step={0.01} onChange={v => setTweak("accentLightness", v)} />
        </TweakSection>
        <TweakSection title="Surface">
          <TweakRadio label="Background tone" value={tweaks.bgTone}
            options={[{label: "Hospital", value: "hospital"}, {label: "Cool", value: "cool"}, {label: "Warm", value: "warm"}]}
            onChange={v => setTweak("bgTone", v)} />
        </TweakSection>
        <TweakSection title="Typography">
          <TweakSelect label="Headline" value={tweaks.headlineFont}
            options={["Inter Tight", "Söhne", "Helvetica Neue", "Fraunces", "Instrument Serif", "GT America"].map(v => ({label: v, value: v}))}
            onChange={v => setTweak("headlineFont", v)} />
          <TweakSelect label="Body" value={tweaks.bodyFont}
            options={["Inter", "Helvetica Neue", "system-ui", "IBM Plex Sans"].map(v => ({label: v, value: v}))}
            onChange={v => setTweak("bodyFont", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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