// Focus Built — cinematic landing page

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "navy",
  "photoTreatment": "color",
  "displayFont": "cormorant",
  "heroImage": "villas-night"
}/*EDITMODE-END*/;

const ACCENTS = {
  navy:    { value: "#1d3a52", soft: "#2a4d6a", label: "Navy (brand)" },
  ink:     { value: "#1A1815", soft: "#2c2925", label: "Ink" },
  narra:   { value: "#6F4A2E", soft: "#85613f", label: "Narra brown" },
  moss:    { value: "#4a5d3a", soft: "#5d7349", label: "Moss" },
};
const ACCENT_VALUES = Object.values(ACCENTS).map(a => a.value);

const DISPLAY_FONTS = {
  cormorant:  { stack: '"Cormorant Garamond", "EB Garamond", Georgia, serif', label: "Cormorant" },
  ebgaramond: { stack: '"EB Garamond", Georgia, serif', label: "EB Garamond" },
  fraunces:   { stack: '"Fraunces", Georgia, serif', label: "Fraunces" },
};

const PHOTO_FILTERS = {
  color: "none",
  warm:  "saturate(0.92) sepia(0.06) contrast(1.02)",
  mono:  "grayscale(1) contrast(1.05) brightness(0.97) sepia(0.18)",
};

const HERO_IMAGES = {
  "villas-night": ASSET("assets/proj-villas-night.png"),
  "bmw":          ASSET("assets/proj-bmw.png"),
  "pool":         ASSET("assets/proj-pool.png"),
};

const PROJECTS = [
  {
    id: "bmw",
    name: "BMW Service Center",
    client: "RSA Motors",
    sector: "Automotive flagship",
    location: "Metro Manila",
    scope: "General contracting · architectural finishes",
    year: "2024",
    image: ASSET("assets/proj-bmw.png"),
    ratio: "16 / 9",
    summary: "An authorised BMW service flagship — a façade of fritted glass and dark composite panel set against a polished concrete forecourt. We built the building shell, the showroom, and the service bays on a fast-track schedule and turned the keys over to RSA's operations team on the agreed handover date."
  },
  {
    id: "villas",
    name: "The Gable Villas",
    client: "Private developer",
    sector: "High-end residential",
    location: "Tagaytay Ridge",
    scope: "Design-build · three-unit compound",
    year: "2024 — in progress",
    image: ASSET("assets/proj-villas-night.png"),
    ratio: "16 / 10",
    summary: "Three identical A-frame villas on a single compound. The shell is reinforced concrete; the roof is laminated timber on a steel ridge plate; the cladding is a mix of stone, plaster, and slatted hardwood. Built for a private developer for sale or long-stay rental."
  },
  {
    id: "pickledrop",
    name: "PickleDrop",
    client: "PickleDrop Sports, Inc.",
    sector: "Sports & recreation",
    location: "Alabang",
    scope: "Long-span steel structure · court fit-out",
    year: "2024",
    image: ASSET("assets/proj-pickledrop.webp"),
    ratio: "16 / 9",
    summary: "A purpose-built pickleball facility — six courts under a single long-span steel roof, with clerestory daylighting, skylights, and a perimeter spectator bench. The roof was engineered for full natural ventilation so the courts stay playable without mechanical cooling."
  },
  {
    id: "pool",
    name: "Casa Pavilion",
    client: "Private residence",
    sector: "Luxury residential amenity",
    location: "Alabang",
    scope: "Pool, pool house, outdoor kitchen",
    year: "2023",
    image: ASSET("assets/proj-pool.png"),
    ratio: "4 / 3",
    summary: "A pool pavilion behind a private residence — laid out as three small buildings around a freshwater pool with a vanishing edge and a sunken cold plunge. Stone, brick, sapele teak, and a structural pergola of black steel."
  },
  {
    id: "aviation",
    name: "PAG Aviation Training Center",
    client: "Philippine Academy for Aviation Ground",
    sector: "Aviation · institutional",
    location: "Plaridel Airport, Bulacan",
    scope: "Hangar shell · training facility · apron works",
    year: "2023",
    image: ASSET("assets/proj-aviation.png"),
    ratio: "4 / 3",
    summary: "A training hangar for a flight school — long-span structural steel arch, polycarbonate clerestory, and apron concrete sized for Cessnas and twin-engine trainers. The shell was built around an active flight schedule with weekend night pours to keep the school operating during construction."
  }
];

// ── Scroll-reveal hook (IntersectionObserver, one-shot)
function Reveal({ children, as = "div", delay = 0, className = "", style = {}, threshold = 0 }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setShown(true);
          io.disconnect();
        }
      });
    }, { threshold, rootMargin: "0px 0px 0px 0px" });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [threshold]);
  const Tag = as;
  return (
    <Tag ref={ref}
      className={"reveal " + (shown ? "is-in " : "") + className}
      style={{ ...style, transitionDelay: shown ? `${delay}ms` : "0ms" }}>
      {children}
    </Tag>
  );
}

// ── Logo
function LogoMark({ color = "currentColor", size = 28 }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} aria-hidden="true">
      <path d="M 20 30 L 50 12 L 80 30" fill="none" stroke={color} strokeWidth="4.5" strokeLinecap="square" strokeLinejoin="miter" />
      <path d="M 32 30 L 32 78" fill="none" stroke={color} strokeWidth="4.5" strokeLinecap="square" />
      <path d="M 32 48 L 50 48" fill="none" stroke={color} strokeWidth="4.5" strokeLinecap="square" />
      <path d="M 50 48 L 68 48 L 68 78 L 50 78 Z" fill="none" stroke={color} strokeWidth="4.5" strokeLinejoin="miter" />
    </svg>
  );
}

// ── Nav (changes contrast when over the dark hero)
function Nav({ onContact, overHero }) {
  return (
    <header className={"nav" + (overHero ? " nav-over-hero" : " nav-on-page")}>
      <div className="container nav-inner">
        <a className="nav-brand" href="#top">
          <span className="nav-brand-mark"><LogoMark color="currentColor" size={30} /></span>
          <span className="nav-brand-text">FOCUSBUILT<em>Development Corp.</em></span>
        </a>
        <button className="nav-cta" onClick={onContact}>
          <span>Get in touch</span>
          <span className="nav-cta-arrow">→</span>
        </button>
      </div>
    </header>
  );
}

// ── Cinematic hero
function CinematicHero({ onContact, heroImage }) {
  const tagRef = useRef(null);
  return (
    <section className="hero-cine" id="top">
      <div className="hero-cine-bg">
        <img src={heroImage} alt="" className="hero-cine-img" />
        <div className="hero-cine-scrim"></div>
        <div className="hero-cine-vignette"></div>
      </div>

      <div className="hero-cine-content container">
        <div className="hero-cine-eyebrow">
          <span className="hero-cine-eyebrow-dot"></span>
          Focus Built Development Corp. · Manila · est. 2019
        </div>

        <h1 className="hero-cine-tag" ref={tagRef}>
          <span className="hl">A general contractor</span>
          <span className="hl">for the projects you can't</span>
          <span className="hl"><em>afford to get wrong.</em></span>
        </h1>

        <div className="hero-cine-actions">
          <button className="btn-primary on-dark" onClick={onContact}>
            <span>Get in touch</span>
            <span className="btn-arrow">→</span>
          </button>
          <a className="btn-ghost on-dark" href="#work">
            See selected work
          </a>
        </div>
      </div>

      <div className="hero-cine-meta container">
        <div className="hero-cine-meta-row">
          <div className="hero-cine-meta-item">
            <div className="mono key">Sectors</div>
            <div className="val">Automotive · Residential · Aviation · Sports</div>
          </div>
          <div className="hero-cine-meta-item">
            <div className="mono key">License</div>
            <div className="val">PCAB · Cat. B · GB-1</div>
          </div>
          <div className="hero-cine-meta-item">
            <div className="mono key">Featured</div>
            <div className="val">The Gable Villas · Tagaytay Ridge</div>
          </div>
        </div>
      </div>

      <a className="hero-cine-scroll" href="#intro" aria-label="Scroll down">
        <span className="hero-cine-scroll-label mono">Scroll</span>
        <span className="hero-cine-scroll-line"></span>
      </a>
    </section>
  );
}

// ── Intro (typographic statement after the hero)
function Intro() {
  return (
    <section className="intro" id="intro">
      <div className="container">
        <Reveal className="intro-eyebrow">
          <div className="eyebrow">A studio of seven · five active sectors</div>
        </Reveal>
        <Reveal className="intro-text" delay={120}>
          <p className="intro-statement">
            We take on a small number of significant projects each year —
            automotive flagships, high-end villas, sports venues, aviation
            infrastructure. Founder-led, on every site, every week.
          </p>
        </Reveal>
        <Reveal className="intro-grid" delay={240}>
          <div className="intro-meta">
            <div className="mono intro-meta-k">01</div>
            <div className="intro-meta-v">A small studio<br /><span>seven people, by choice</span></div>
          </div>
          <div className="intro-meta">
            <div className="mono intro-meta-k">02</div>
            <div className="intro-meta-v">Founder-led<br /><span>Pao Sunga signs every change order</span></div>
          </div>
          <div className="intro-meta">
            <div className="mono intro-meta-k">03</div>
            <div className="intro-meta-v">Quiet & credentialed<br /><span>PCAB Cat. B · GB-1 · verified</span></div>
          </div>
          <div className="intro-meta">
            <div className="mono intro-meta-k">04</div>
            <div className="intro-meta-v">Closed-loop<br /><span>we stay through the punch list</span></div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Marquee sector strip (animated)
function SectorMarquee() {
  const sectors = [
    "Automotive flagships",
    "High-end residential",
    "Aviation infrastructure",
    "Sports & recreation",
    "Hospitality interiors",
    "Institutional builds",
  ];
  const row = (key) => (
    <div className="marq-row" key={key}>
      {sectors.map((s, i) => (
        <span key={i} className="marq-item">
          <span className="marq-dot"></span>{s}
        </span>
      ))}
    </div>
  );
  return (
    <div className="marq" aria-hidden="true">
      <div className="marq-track">
        {row("a")}
        {row("b")}
      </div>
    </div>
  );
}

// ── Project (with sticky meta + parallax image)
function ProjectBlock({ p, index, total }) {
  const wrapRef = useRef(null);
  const imgRef = useRef(null);

  // parallax
  useEffect(() => {
    const wrap = wrapRef.current;
    const img = imgRef.current;
    if (!wrap || !img) return;
    let raf = 0;
    const tick = () => {
      const rect = wrap.getBoundingClientRect();
      const vh = window.innerHeight;
      // progress = -1 (above) to 1 (below)
      const center = rect.top + rect.height / 2;
      const progress = (center - vh / 2) / (vh / 2 + rect.height / 2);
      const clamped = Math.max(-1, Math.min(1, progress));
      const shift = clamped * -28; // up to 28px translate
      img.style.transform = `translate3d(0, ${shift.toFixed(2)}px, 0) scale(1.04)`;
      raf = 0;
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(tick);
    };
    tick();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <article className="proj" ref={wrapRef}>
      <Reveal className="proj-img-wrap" threshold={0}>
        <div className="proj-img" style={{ aspectRatio: p.ratio }}>
          <img ref={imgRef} src={p.image} alt={p.name}
            style={{ filter: "var(--photo-filter)" }} />
        </div>
      </Reveal>

      <div className="proj-meta-col">
        <div className="proj-meta-sticky">
          <Reveal>
            <div className="proj-counter mono">
              <span className="proj-counter-n">{String(index + 1).padStart(2, "0")}</span>
              <span className="proj-counter-line"></span>
              <span className="proj-counter-t">{String(total).padStart(2, "0")}</span>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <div className="proj-sector">{p.sector}</div>
          </Reveal>
          <Reveal delay={140}>
            <h3 className="proj-name">{p.name}</h3>
          </Reveal>
          <Reveal delay={200}>
            <div className="proj-client">For {p.client} · {p.location}</div>
          </Reveal>
          <Reveal delay={260}>
            <div className="proj-rule"></div>
          </Reveal>
          <Reveal delay={300}>
            <div className="proj-scope mono">{p.scope}</div>
          </Reveal>
          <Reveal delay={360}>
            <p className="proj-summary">{p.summary}</p>
          </Reveal>
          <Reveal delay={420}>
            <div className="proj-year mono">{p.year}</div>
          </Reveal>
        </div>
      </div>
    </article>
  );
}

function Work() {
  return (
    <section className="work" id="work">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow">Selected work · 2023 — 2024</div>
            <h2>Five projects.<br /><em>Five sectors.</em><br />One studio.</h2>
          </div>
          <p className="section-head-blurb">
            We choose a handful of significant builds each year so the work can be
            run completely — from the first site walk to the year-on warranty visit.
          </p>
        </Reveal>
        <div className="projects">
          {PROJECTS.map((p, i) => (
            <ProjectBlock key={p.id} p={p} index={i} total={PROJECTS.length} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Studio
function Studio() {
  return (
    <section className="studio" id="studio">
      <div className="container">
        <div className="studio-grid">
          <Reveal className="studio-img-wrap">
            <div className="studio-img">
              <img src={ASSET("assets/pao-on-site.png")} alt="Pao Sunga on site"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 22%", filter: "var(--photo-filter)" }} />
            </div>
          </Reveal>
          <div className="studio-text">
            <Reveal><div className="eyebrow">The studio</div></Reveal>
            <Reveal delay={100}>
              <h2>Founder-led.<br />On every site,<br /><em>every week.</em></h2>
            </Reveal>
            <Reveal delay={180}>
              <p>Focus Built is led by Pao Sunga, a civil engineer who has been
                running building sites in and around Manila for more than a decade.
                Pao founded the firm in 2019 after eight years with two mid-size
                Philippine contractors.</p>
            </Reveal>
            <Reveal delay={240}>
              <p>The studio is deliberately small — a tight team of project
                managers, quantity surveyors, and site supervisors. We take on
                a handful of significant projects each year so that the founder
                can sign the change orders, walk the building before the client
                does, and call the inspector back himself.</p>
            </Reveal>
            <Reveal delay={300}>
              <p>We work across automotive flagships, luxury residential,
                aviation infrastructure, and sports venues. The thing that ties
                the work together is the way we run a project: clean
                documentation, mocked-up materials, no surprises at handover.</p>
            </Reveal>
            <Reveal delay={360}><div className="signature">Pao</div></Reveal>
          </div>
        </div>

        <div className="principles">
          {[
            ["01", "We visit before we draw.", "before", "The first deliverable on any project is a site report — climate, neighbours, the way light moves through at three in the afternoon. These decide more than the floor plan."],
            ["02", "We mock things up.", "mock things up", "Before we commit to a material on a façade, we build it at full scale on site. If a sample doesn't survive a Manila rain on the test panel, it doesn't go on the building."],
            ["03", "We stay through closeout.", "stay through closeout", "Most of the value we add happens in the last ten percent — the punch list, the as-builts, the year after. We don't disappear at handover."]
          ].map(([no, title, italic, body], i) => (
            <Reveal className="principle" delay={i * 100} key={no}>
              <div className="principle-no mono">{no}</div>
              <h3>{title.split(italic)[0]}<em>{italic}</em>{title.split(italic)[1]}</h3>
              <p>{body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Contact
function Contact() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", project: "", message: "" });
  const u = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 6000);
  };

  return (
    <section className="contact" id="contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-left">
            <Reveal><div className="eyebrow">Inquiries</div></Reveal>
            <Reveal delay={100}>
              <h2>Tell us about <em>what you're building.</em></h2>
            </Reveal>
            <Reveal delay={180}>
              <p className="contact-blurb">
                For new projects, references, or a conversation about something
                we might build for you. We respond to every inquiry within two
                business days.
              </p>
            </Reveal>
            <Reveal delay={240}>
              <div className="contact-info">
                <div className="contact-row">
                  <div className="mono contact-k">Email</div>
                  <a className="contact-v link-email" href="mailto:inquiry@focusbuilt.ph">inquiry@focusbuilt.ph</a>
                </div>
                <div className="contact-row">
                  <div className="mono contact-k">Phone</div>
                  <div className="contact-v">+63 917 555 0144</div>
                </div>
                <div className="contact-row">
                  <div className="mono contact-k">Studio</div>
                  <div className="contact-v">2/F, 8412 Kalayaan Ave.<br />Poblacion, Makati 1210</div>
                </div>
                <div className="contact-row">
                  <div className="mono contact-k">Hours</div>
                  <div className="contact-v">Mon — Fri · 09:00 — 18:00 PHT</div>
                </div>
              </div>
            </Reveal>
          </div>
          <Reveal className="contact-right" delay={120}>
            <form className="form" onSubmit={submit}>
              <div className="field">
                <label htmlFor="n">Name</label>
                <input id="n" required value={form.name} onChange={u("name")} placeholder="Your name" />
              </div>
              <div className="field">
                <label htmlFor="e">Email</label>
                <input id="e" type="email" required value={form.email} onChange={u("email")} placeholder="you@email.com" />
              </div>
              <div className="field">
                <label htmlFor="p">Project</label>
                <input id="p" value={form.project} onChange={u("project")} placeholder="Sector, location, rough scope" />
              </div>
              <div className="field">
                <label htmlFor="m">Message</label>
                <textarea id="m" required value={form.message} onChange={u("message")} placeholder="A few sentences about what you're thinking of building. No pressure to be specific." />
              </div>
              <div className="form-bottom">
                <button type="submit">
                  <span>Send inquiry</span>
                  <span className="btn-arrow">→</span>
                </button>
                <div className="form-note mono">
                  Or write to <a href="mailto:inquiry@focusbuilt.ph">inquiry@focusbuilt.ph</a>
                </div>
              </div>
              {sent && <div className="ok">Thanks — we'll write back within two business days.</div>}
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ── Closing tagline + footer
function ClosingTagline() {
  return (
    <section className="closing">
      <div className="container">
        <Reveal>
          <div className="closing-eyebrow eyebrow">— a closing thought</div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="closing-tag">
            Build it once.<br />Build it <em>completely.</em>
          </h2>
        </Reveal>
        <Reveal delay={220}>
          <div className="closing-signoff">
            <span>Focus Built Development Corp.</span>
            <span className="mono">Manila · est. MMXIX</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function FooterBar() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">
              <span className="nav-brand-mark"><LogoMark color="var(--ink)" size={28} /></span>
              <span className="nav-brand-text">FOCUSBUILT<em>Development Corp.</em></span>
            </div>
            <p className="footer-blurb">
              A small Manila studio building careful work across automotive,
              residential, aviation, and sports.
            </p>
          </div>
          <div>
            <h4>Studio</h4>
            <ul>
              <li><a href="mailto:inquiry@focusbuilt.ph">inquiry@focusbuilt.ph</a></li>
              <li>+63 917 555 0144</li>
              <li>2/F, 8412 Kalayaan Ave.<br />Poblacion, Makati</li>
            </ul>
          </div>
          <div>
            <h4>Credentials</h4>
            <ul>
              <li>PCAB License No. 47221</li>
              <li>Category B · Classification GB-1</li>
              <li>Member, PCA</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Focus Built Development Corporation</span>
          <span>Manila · est. 2019</span>
        </div>
      </div>
    </footer>
  );
}

// ── App
function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [overHero, setOverHero] = useState(true);

  const setTweak = (k, v) => {
    const next = typeof k === "object" ? { ...tweaks, ...k } : { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: next }, "*");
  };

  useEffect(() => {
    const r = document.documentElement;
    const a = ACCENTS[tweaks.accent] || ACCENTS.navy;
    r.style.setProperty("--accent", a.value);
    r.style.setProperty("--accent-soft", a.soft);
    r.style.setProperty("--photo-filter", PHOTO_FILTERS[tweaks.photoTreatment] || "none");
    r.style.setProperty("--display", DISPLAY_FONTS[tweaks.displayFont]?.stack || DISPLAY_FONTS.cormorant.stack);
  }, [tweaks]);

  // track whether nav is over the dark hero
  useEffect(() => {
    const onScroll = () => {
      setOverHero(window.scrollY < window.innerHeight - 120);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollToContact = () => {
    const el = document.getElementById("contact");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // smooth-scroll for anchors
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      el.scrollIntoView({ behavior: "smooth", block: "start" });
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  const onAccentChange = (v) => {
    const key = Object.entries(ACCENTS).find(([_, a]) => a.value === v)?.[0] || "navy";
    setTweak("accent", key);
  };

  return (
    <div className="shell" data-screen-label="Focus Built — landing">
      <Nav onContact={scrollToContact} overHero={overHero} />
      <main>
        <CinematicHero onContact={scrollToContact} heroImage={HERO_IMAGES[tweaks.heroImage] || HERO_IMAGES["villas-night"]} />
        <Intro />
        <SectorMarquee />
        <Work />
        <Studio />
        <Contact />
        <ClosingTagline />
      </main>
      <FooterBar />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand accent">
          <TweakColor
            label="Accent"
            value={ACCENTS[tweaks.accent].value}
            onChange={onAccentChange}
            options={ACCENT_VALUES}
          />
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "#999", marginTop: 6, paddingLeft: 2 }}>
            {ACCENTS[tweaks.accent].label}
          </div>
        </TweakSection>
        <TweakSection label="Hero image">
          <TweakRadio
            label="Image"
            value={tweaks.heroImage}
            onChange={(v) => setTweak("heroImage", v)}
            options={[
              { value: "villas-night", label: "Villa" },
              { value: "bmw",  label: "BMW" },
              { value: "pool", label: "Pool" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Photo treatment">
          <TweakRadio
            label="Filter"
            value={tweaks.photoTreatment}
            onChange={(v) => setTweak("photoTreatment", v)}
            options={[
              { value: "color", label: "Color" },
              { value: "warm",  label: "Warm" },
              { value: "mono",  label: "Mono" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Display typeface">
          <TweakSelect
            label="Font"
            value={tweaks.displayFont}
            onChange={(v) => setTweak("displayFont", v)}
            options={Object.entries(DISPLAY_FONTS).map(([k, v]) => ({ value: k, label: v.label }))}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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