// site-page.jsx — the Binderow Law single-page site.
// Depends on site-kit.jsx (makeTheme, Eyebrow, Btn, Mark, Lockup, Reveal).

const NAV = [
["Practice", "#practice"],
["About", "#about"],
["Clients", "#clients"]];


const FIRM = {
  phone: "858.259.1940",
  email: "lawrence@binderowlaw.com",
  addr1: "1330 Camino Del\u00a0Mar, Suite\u00a0250",
  addr2: "Del\u00a0Mar, California 92014",
  linkedin: "https://www.linkedin.com/in/lawrencebinderow/"
};

// ---- STICKY NAV -----------------------------------------------------------
function TopNav({ C }) {
  const [solid, setSolid] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  return (
    <div style={{
      position: "sticky", top: 0, zIndex: 50,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: solid ? "14px 7vw" : "22px 7vw",
      background: solid ? "rgba(251,246,236,0.92)" : "transparent",
      backdropFilter: solid ? "saturate(140%) blur(10px)" : "none",
      borderBottom: solid ? `1px solid ${C.line}` : "1px solid transparent",
      boxShadow: solid ? "0 8px 28px rgba(15,26,94,0.07)" : "none",
      transition: "all 0.35s ease"
    }}>
      <a href="#top" style={{ textDecoration: "none" }}><Lockup C={C} size={50} /></a>
      <div className="nav-desktop" style={{ display: "flex", alignItems: "center", gap: 32 }}>
        {NAV.map(([label, href]) =>
        <a key={href} href={href} className="nav-link" style={{ fontFamily: C.sans, fontSize: 14.5, color: C.ink, textDecoration: "none", fontWeight: 500 }}>{label}</a>
        )}
        <Btn C={C} variant="solid" href="#contact" style={{ padding: "11px 22px", fontSize: 14 }}>Contact</Btn>
      </div>
      <button type="button" className="nav-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(o => !o)}
        style={{ display: "none", flexDirection: "column", justifyContent: "center", gap: 5, width: 44, height: 44, padding: 0, background: "none", border: "none", cursor: "pointer" }}>
        <span style={{ display: "block", width: 26, height: 2, background: C.ink, borderRadius: 2, transition: "transform 0.3s ease, opacity 0.3s ease", transform: open ? "translateY(7px) rotate(45deg)" : "none" }} />
        <span style={{ display: "block", width: 26, height: 2, background: C.ink, borderRadius: 2, transition: "opacity 0.2s ease", opacity: open ? 0 : 1 }} />
        <span style={{ display: "block", width: 26, height: 2, background: C.ink, borderRadius: 2, transition: "transform 0.3s ease, opacity 0.3s ease", transform: open ? "translateY(-7px) rotate(-45deg)" : "none" }} />
      </button>
      <div className="nav-overlay" style={{
        position: "fixed", inset: 0, zIndex: 49,
        display: open ? "flex" : "none", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 30,
        background: "rgba(251,246,236,0.98)", backdropFilter: "saturate(140%) blur(12px)"
      }}>
        {NAV.map(([label, href]) =>
        <a key={href} href={href} onClick={() => setOpen(false)} style={{ fontFamily: C.serif, fontStyle: "italic", fontSize: 28, color: C.ink, textDecoration: "none", fontWeight: 500 }}>{label}</a>
        )}
        <Btn C={C} variant="solid" href="#contact" onClick={() => setOpen(false)} style={{ padding: "13px 30px", fontSize: 15, marginTop: 6 }}>Contact</Btn>
      </div>
    </div>);

}

// ---- HERO -----------------------------------------------------------------
function Hero({ C }) {
  const H = (px) => Math.round(px * C.hScale);
  return (
    <div id="top" style={{ padding: "8px 7vw 0" }}>
      <div style={{ position: "relative", borderRadius: 26, overflow: "hidden", minHeight: 540 }}>
        <img src={(typeof window !== "undefined" && window.__resources && window.__resources.libraryHero) || "library-hero.jpg"} alt="Antique law library bookshelves" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(90deg, ${C.navyDeep}ea 0%, ${C.navyDeep}e0 15%, ${C.navyDeep}ce 30%, ${C.navyDeep}b4 42%, ${C.navyDeep}90 54%, ${C.navyDeep}60 64%, ${C.navyDeep}38 74%, ${C.navyDeep}1c 84%, ${C.navyDeep}0a 92%, ${C.navyDeep}00 100%)` }} />
        <div style={{ position: "absolute", inset: 0, background: `radial-gradient(135% 125% at 16% 54%, ${C.navyDeep}66 0%, ${C.navyDeep}30 40%, ${C.navyDeep}00 72%)` }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, ${C.navyDeep}2e 0%, ${C.navyDeep}00 26%, ${C.navyDeep}00 74%, ${C.navyDeep}42 100%)` }} />
        <div style={{ position: "relative", display: "flex", flexDirection: "column", justifyContent: "center", padding: "70px 6%", minHeight: 540, maxWidth: 760, color: C.linen }}>
          <Reveal><Eyebrow C={C} color={C.goldLight} style={{ marginBottom: 20 }}>Del Mar · Intellectual Property · Since 1989</Eyebrow></Reveal>
          <Reveal delay={90}>
            <div style={{ fontFamily: C.serif, fontSize: `clamp(34px, 4.4vw, ${H(48)}px)`, fontWeight: C.hWeight, lineHeight: 1.14, fontStyle: "italic", textWrap: "balance", textShadow: `0 2px 28px ${C.navyDeep}e0, 0 1px 4px ${C.navyDeep}c0` }}>
              Boutique trademark law for businesses <span style={{ color: C.goldLight }}>worldwide</span>.
            </div>
          </Reveal>
          <Reveal delay={180}>
            <div style={{ fontFamily: C.sans, fontSize: 16.5, lineHeight: 1.72, color: "rgba(251,246,236,0.94)", maxWidth: 560, margin: "22px 0 32px", textShadow: `0 1px 16px ${C.navyDeep}d8, 0 1px 3px ${C.navyDeep}90` }}>
              Binderow Law Offices is a boutique law firm specializing in trademark law. With years
              of experience providing hands-on legal services to entrepreneurs and businesses — from
              individuals to large enterprises — the firm helps clients protect their intellectual
              property in the United States and internationally, maintaining close relationships with
              IP law firms throughout the world.
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <Btn C={C} variant="gold" target="_blank" rel="noopener noreferrer" href={`mailto:${FIRM.email}?subject=Consultation%20request`}>Request a consultation</Btn>
              <Btn C={C} variant="ghostLight" href="#about">Meet Lawrence</Btn>
            </div>
          </Reveal>
        </div>
      </div>
    </div>);

}

// ---- PRACTICE -------------------------------------------------------------
function Practice({ C }) {
  const H = (px) => Math.round(px * C.hScale);
  const services = [
  "Trademark Search & Clearance",
  "Application Strategy",
  "Federal Trademark Registration & Maintenance",
  "Office Action Responses",
  "Assignments, Mergers & Name Changes",
  "Trademark Monitoring & Enforcement",
  "Trademark Licensing",
  "Copyright"];

  return (
    <div id="practice" style={{ scrollMarginTop: 90, padding: "96px 7vw", background: "rgb(250, 245, 233)" }}>
      <Reveal delay={70}><div style={{ fontFamily: C.serif, fontSize: H(42), fontWeight: C.hWeight, textAlign: "center", color: C.ink, marginBottom: 52 }}>Areas of practice</div></Reveal>
      <div className="practice-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22, maxWidth: 1180, margin: "0 auto" }}>
        {services.map((s, i) =>
        <Reveal key={i} delay={i * 70}>
            <div className="practice-card" style={{ background: C.card, borderRadius: 18, padding: "34px 26px", boxShadow: "0 14px 34px rgba(15,26,94,0.07)", height: "100%", borderTop: `3px solid ${C.gold}`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", textAlign: "center", minHeight: 150 }}>
              <div style={{ fontFamily: C.sans, fontSize: 12, fontWeight: 600, letterSpacing: 1.6, color: C.gold, marginBottom: 14 }}>{i + 1}</div>
              <div style={{ fontFamily: C.serif, fontSize: H(21), fontWeight: C.hWeight, color: C.ink, lineHeight: 1.28, textWrap: "balance" }}>{s}</div>
            </div>
          </Reveal>
        )}
      </div>
    </div>);

}

// ---- EXPERIENCE (navy band + stats) ---------------------------------------
function Experience({ C }) {
  const H = (px) => Math.round(px * C.hScale);
  const stats = [["29+", "years in practice"], ["1989", "in brand licensing"], ["Global", "filing network"], ["1:1", "personal counsel"]];
  return (
    <div id="experience" style={{ ...{ scrollMarginTop: 90, padding: "100px 7vw", background: C.navy, color: C.linen }, background: "rgb(12, 24, 93)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 60, alignItems: "center", maxWidth: 1180, margin: "0 auto" }} className="exp-grid">
        <Reveal>
          <div>
            <Eyebrow C={C} color={C.goldLight} style={{ marginBottom: 16 }}>Why Lawrence</Eyebrow>
            <div style={{ fontFamily: C.serif, fontSize: H(36), fontWeight: C.hWeight, lineHeight: 1.24, marginBottom: 18 }}>
              He ran brand licensing before he protected it.
            </div>
            <div style={{ fontFamily: C.sans, fontSize: 16, lineHeight: 1.78, color: "rgba(251,246,236,0.85)", maxWidth: 480, textWrap: "pretty" }}>
              As VP &amp; General Counsel of Hang Ten International, Lawrence managed global
              licensing for surf, camera, and lifestyle brands. That business-side fluency
              now backs every filing — with the personal attention only a sole practitioner gives.
            </div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
            {stats.map((s, i) =>
            <div key={i} style={{ background: "rgba(251,246,236,0.07)", borderRadius: 16, padding: "26px 24px", border: "1px solid rgba(221,184,120,0.28)" }}>
                <div style={{ fontFamily: C.serif, fontSize: H(40), fontWeight: C.hWeight, color: C.goldLight, lineHeight: 1 }}>{s[0]}</div>
                <div style={{ fontFamily: C.sans, fontSize: 14, color: "rgba(251,246,236,0.82)", marginTop: 8 }}>{s[1]}</div>
              </div>
            )}
          </div>
        </Reveal>
      </div>
    </div>);

}

// ---- ABOUT / BIO ----------------------------------------------------------
function CredItem({ C, label, lines }) {
  return (
    <div>
      <Eyebrow C={C} size={11} ls={2.2} style={{ marginBottom: 12 }}>{label}</Eyebrow>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 7 }}>
        {lines.map((l, i) => (
          <li key={i} style={{ position: "relative", paddingLeft: 18, fontFamily: C.sans, fontSize: 15, lineHeight: 1.5, color: C.ink, opacity: 0.9 }}>
            <span style={{ position: "absolute", left: 0, top: "0.66em", width: 5, height: 5, borderRadius: "50%", background: C.gold }} />
            {l}
          </li>
        ))}
      </ul>
    </div>);
}

function About({ C }) {
  const H = (px) => Math.round(px * C.hScale);
  const creds = [
    ["Education", ["B.A., University of Wisconsin\u2013Madison", "J.D., The John Marshall Law School, Chicago"]],
    ["Bar admissions", ["State Bar of California", "Illinois State Bar Association"]],
    ["Affiliations", ["International Trademark Association (INTA)", "California Lawyers Association"]],
    ["Interests", ["Running", "International travel"]],
  ];
  return (
    <div id="about" style={{ scrollMarginTop: 90, padding: "100px 7vw" }}>
      <div style={{ maxWidth: 940, margin: "0 auto" }}>
        <Reveal>
          <div style={{ marginBottom: 40, paddingBottom: 30, borderBottom: `1px solid ${C.line}` }}>
            <Eyebrow C={C} style={{ marginBottom: 14 }}>The attorney</Eyebrow>
            <div style={{ fontFamily: C.serif, fontSize: H(46), fontWeight: C.hWeight, color: C.ink, lineHeight: 1.05 }}>Lawrence Binderow</div>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <div>
            <div style={{ float: "left", width: "min(30%, 240px)", marginRight: 36, marginBottom: 22 }} className="about-photo">
              <img src={(typeof window !== "undefined" && window.__resources && window.__resources.lawrence) || "lawrence.jpg"} alt="Lawrence Binderow" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", objectPosition: "center 18%", borderRadius: 18, display: "block" }} />
            </div>

            <div style={{ fontFamily: C.sans, fontSize: 16, lineHeight: 1.8, color: C.ink, opacity: 0.86 }}>
              <p style={{ margin: "0 0 16px" }}>
                The firm&rsquo;s principal attorney brings over three decades of experience in
                intellectual property law, with a practice rooted in trademark registration and
                brand management.
              </p>
              <p style={{ margin: "0 0 16px" }}>
                Before founding Binderow Law Offices in 1989, Lawrence served as Vice President and
                General Counsel of Hang Ten International and International Licensing Corporation (San Diego),
                where he managed global brand licensing programs across the surf, apparel, and
                consumer lifestyle industries. That in-house perspective informs every client
                engagement &mdash; counsel that understands how brands operate in the marketplace,
                not just how they are filed at the trademark office.
              </p>
              <p style={{ margin: 0 }} className="bio-last">
                He is an active member of the International Trademark Association (INTA), currently
                serving on the Small and Medium Enterprises (SME) Resources Committee (2026), and founded a global running club that
                brings together trademark attorneys from around the world at major intellectual property conferences and events.
              </p>
            </div>

            <div style={{ clear: "left" }} />

            <div style={{ height: 1, background: C.line, margin: "38px 0 32px" }} />

            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "30px 40px" }} className="cred-grid">
              {creds.map(([label, lines]) => (
                <CredItem key={label} C={C} label={label} lines={lines} />
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </div>);

}

// ---- CLIENTS --------------------------------------------------------------
function Clients({ C }) {
  const H = (px) => Math.round(px * C.hScale);
  const clients = ["Surf & action sports", "Camera & electronics", "Fashion & apparel", "Consumer brands", "Restaurant & cafés", "Food", "Pharmaceuticals"];
  return (
    <div id="clients" style={{ scrollMarginTop: 90, padding: "96px 7vw", background: C.sand, textAlign: "center" }}>
      <Reveal><Eyebrow C={C} style={{ marginBottom: 14 }}>Who we work with</Eyebrow></Reveal>
      <Reveal delay={70}><div style={{ fontFamily: C.serif, fontSize: H(36), fontWeight: C.hWeight, color: C.ink, marginBottom: 38 }}>Individuals and business entities seeking to protect their intellectual property interests</div></Reveal>
      <Reveal delay={140}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, justifyContent: "center", maxWidth: 880, margin: "0 auto" }}>
          {clients.map((c, i) =>
          <span key={i} style={{ fontFamily: C.sans, fontSize: 15, color: C.navy, background: C.card, border: `1px solid ${C.line}`, borderRadius: 999, padding: "12px 24px", whiteSpace: "nowrap" }}>{c}</span>
          )}
        </div>
      </Reveal>
    </div>);

}

// ---- CONTACT --------------------------------------------------------------
function Contact({ C }) {
  const H = (px) => Math.round(px * C.hScale);
  const line = { fontFamily: C.sans, fontSize: 16, color: "rgba(251,246,236,0.9)", textDecoration: "none" };
  return (
    <div id="contact" style={{ scrollMarginTop: 90, padding: "0 7vw 56px" }}>
      <div style={{ background: C.navyDeep, borderRadius: 28, color: C.linen, textAlign: "center", padding: "84px 8% 60px", maxWidth: 1180, margin: "0 auto" }}>
        <Reveal><div style={{ display: "flex", justifyContent: "center", marginBottom: 24 }}><Mark C={C} size={52} on="dark" /></div></Reveal>
        <Reveal delay={70}><div style={{ fontFamily: C.serif, fontSize: H(44), fontWeight: C.hWeight, marginBottom: 14 }}>Protect what you’ve built.</div></Reveal>
        <Reveal delay={140}>
          <div style={{ fontFamily: C.sans, fontSize: 15.5, color: "rgba(251,246,236,0.74)", maxWidth: 540, margin: "0 auto 34px", lineHeight: 1.7 }}>
            Tell me about your brand and what you need to protect.<br />Consultations are by appointment.
          </div>
        </Reveal>
        <Reveal delay={210}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10, marginBottom: 34 }}>
            <a href={`tel:${FIRM.phone.replace(/[^0-9]/g, "")}`} style={line}>{FIRM.phone}</a>
            <a href={`mailto:${FIRM.email}`} target="_blank" rel="noopener noreferrer" style={line}>{FIRM.email}</a>
            <a href={FIRM.linkedin} target="_blank" rel="noopener noreferrer" style={{ ...line, display: "inline-flex", alignItems: "center", gap: 8 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.49 6 1.12 6 0 4.88 0 3.5 0 2.12 1.12 1 2.49 1 3.87 1 4.98 2.12 4.98 3.5zM.22 8.02h4.54V23H.22V8.02zM8.34 8.02h4.35v2.05h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.47 3.04 5.47 6.99V23h-4.54v-6.4c0-1.53-.03-3.49-2.13-3.49-2.13 0-2.46 1.66-2.46 3.38V23H8.34V8.02z"/></svg>
              LinkedIn
            </a>
            <div style={{ fontFamily: C.sans, fontSize: 15, color: "rgba(251,246,236,0.66)", lineHeight: 1.6 }}>{FIRM.addr1}<br />{FIRM.addr2}</div>
          </div>
        </Reveal>
        <Reveal delay={270}>
          <Btn C={C} variant="gold" target="_blank" rel="noopener noreferrer" href={`mailto:${FIRM.email}?subject=Consultation%20request`}>Email Lawrence</Btn>
        </Reveal>
      </div>
    </div>);

}

// ---- FOOTER ---------------------------------------------------------------
function Footer({ C }) {
  return (
    <div style={{ padding: "30px 7vw 40px", textAlign: "center", color: C.muted, fontFamily: C.sans, fontStyle: "italic", fontSize: 12.5, lineHeight: 1.7, borderTop: `1px solid ${C.line}` }}>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 14 }}><Lockup C={C} size={30} /></div>
      © 2026 Binderow Law Offices · {FIRM.addr1}, {FIRM.addr2}
      <div style={{ maxWidth: "100%", margin: "26px 0 0", paddingTop: 22, borderTop: `1px solid ${C.line}`, textAlign: "left", fontStyle: "normal", fontSize: 10, lineHeight: 1.8, letterSpacing: 0.2, color: C.muted, opacity: 0.92 }}>
        <p style={{ margin: "0 0 13px" }}>The information provided on this website is intended for general informational purposes only and should not be construed as legal advice on any matter and should not be relied upon as a substitute for professional legal counsel. If you require legal assistance, please consult with a qualified attorney to discuss your specific situation and obtain personalized advice. Using this website or contacting Binderow Law Offices does not create an attorney-client relationship. Please do not send any confidential information to Binderow Law Offices until such time as an attorney-client relationship has been established.</p>
        <p style={{ margin: "0 0 13px" }}><strong style={{ fontWeight: 700, color: C.ink, fontStyle: "normal" }}>Legal notice:</strong> The information on this website is provided for general informational purposes only. None of the information on this website is offered, nor should it be construed, as legal advice on any matter. Nothing on this website &ndash; including the presentment, transmittal, and/or receipt of information on this website &ndash; shall create or is intended to create a prospective or actual attorney-client relationship between you (or any other person) and Binderow Law Offices. You should not act or rely upon any information contained in this website without first specifically seeking professional legal advice. By visiting this website or receiving information from this website, you shall not become an actual or prospective client of the firm and the firm shall not be precluded from representing any person with interests that are adverse to your interests.</p>
        <p style={{ margin: 0 }}>Binderow Law Offices endeavors to comply with all applicable legal and ethical requirements in operating this website. Binderow Law Offices will not, under any circumstance, undertake any work or engagement that conflicts with any applicable, ethical, or statutory requirement pertaining to the performance of professional legal services. Nothing contained in this website should be construed to represent that the quality of our legal services is superior to that provided by other lawyers. It is important to understand that each matter or case is different and that prior results cannot and do not guarantee or predict a similar outcome with respect to any future matter in which Binderow Law Offices may be retained.</p>
      </div>
    </div>);

}

// ---- APP ------------------------------------------------------------------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heading": "garamond",
  "navy": "classic",
  "mark": "heritage",
  "accent": ["#c4983f", "#ddb878", "#9c7730"]
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const C = window.makeTheme(t);
  return (
    <React.Fragment>
      <div style={{ background: C.linen, minHeight: "100vh" }}>
        <TopNav C={C} />
        <Hero C={C} />
        <Practice C={C} />
        <About C={C} />
        <Clients C={C} />
        <Contact C={C} />
        <Footer C={C} />
      </div>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Logo mark" />
        <TweakRadio label="Mark" value={t.mark}
        options={['heritage', 'flat', 'plain']}
        onChange={(v) => setTweak('mark', v)} />
        <TweakSection label="Headings" />
        <TweakRadio label="Heading font" value={t.heading}
        options={['garamond', 'playfair']}
        onChange={(v) => setTweak('heading', v)} />
        <TweakSection label="Ground" />
        <TweakRadio label="Navy depth" value={t.navy}
        options={['classic', 'deep']}
        onChange={(v) => setTweak('navy', v)} />
        <TweakSection label="Accent" />
        <TweakColor label="Gold" value={t.accent}
        options={[
        ['#c4983f', '#ddb878', '#9c7730'],
        ['#b08d4f', '#c8b487', '#8f6e39'],
        ['#caa24e', '#e3c489', '#a07e34']]
        }
        onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </React.Fragment>);

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