const { useState, useEffect, useRef } = React;

// ============ PALETTES ============
const PALETTES = {
  navyred: { '--green-900': '#0c1c36', '--green-800': '#102545', '--green-700': '#193463', '--green-600': '#27457e', '--green-500': '#3d5d99', '--green-200': '#b8c4d8', '--green-100': '#dfe5ee', '--cream': '#c9cacc', '--cream-2': '#b9babc', '--paper': '#d6d7d9', '--gold': '#b8252e', '--gold-soft': '#d94653', '--ink': '#16181b', '--ink-2': '#2c2f33', '--ink-3': '#4a4d52', '--line': '#a8aaad' },
  navyclassic: { '--green-900': '#0d1f3c', '--green-800': '#14274a', '--green-700': '#1f3563', '--green-600': '#324a7a', '--green-500': '#4d6797', '--green-200': '#b8c4d8', '--green-100': '#dfe5ee', '--cream': '#f3eee4', '--cream-2': '#e9e2d2', '--paper': '#faf6ee', '--gold': '#b08a3e', '--gold-soft': '#d6b674' },
  bordeaux: { '--green-900': '#3a1820', '--green-800': '#4d1f29', '--green-700': '#6b2b38', '--green-600': '#864050', '--green-500': '#a35e6d', '--green-200': '#d4b8be', '--green-100': '#ead7da', '--cream': '#f5ede3', '--cream-2': '#ebe0d2', '--paper': '#fbf6ee', '--gold': '#a98448', '--gold-soft': '#d4b078' },
  forest: { '--green-900': '#1c2f24', '--green-800': '#243d2f', '--green-700': '#2e4d3c', '--green-600': '#3d6650', '--green-500': '#4f8268', '--green-200': '#b8cdbf', '--green-100': '#dfe7df', '--cream': '#f6f2ea', '--cream-2': '#efe9dd', '--paper': '#fbf8f2', '--gold': '#b08a3e', '--gold-soft': '#d6b674' }
};
const SERIFS = {
  cormorant: "'Cormorant Garamond', Georgia, serif",
  source: "'Source Serif 4', 'Cormorant Garamond', Georgia, serif",
  libre: "'Libre Caslon Text', 'Cormorant Garamond', Georgia, serif"
};

// ============ DATA ============
const SERVICES = [
{ num: '01', title: 'Family Law Litigation Support', body: 'Financial affidavit preparation, equitable distribution, asset tracing, income determination, alimony & needs analysis, and child support calculations — alongside expert testimony at trial, mediation, and discovery.' },
{ num: '02', title: 'Family Law Mediation', body: 'A measured, financially-grounded path to resolution. We bring forensic clarity and a calm, neutral perspective to help parties settle complex marital matters without protracted litigation.' },
{ num: '03', title: 'Business Valuation', body: 'A business valuation may be needed for estate and gift purposes, family law purposes, or consulting purposes. Our credentialed valuation experts deliver defensible opinions that stand up in court and in negotiation.' },
{ num: '04', title: 'Forensic Accounting', body: '"The art and science of investigating people and money." We apply specialized accounting and investigative skill to financial records when fraud, dissipation, or hidden assets are in question.' },
{ num: '05', title: 'Financial Planning', body: 'Big-picture budgeting, cash flow, tax, retirement, investment, education, and insurance planning — particularly during and after life-changing events like divorce.' },
{ num: '06', title: 'Tax & Accounting Services', body: 'Tax planning and preparation strategies that minimize liability and maximize cash flow, plus accurate accounting for established businesses and start-ups alike.' }];


const PARTNERS = [
{
  initials: 'JS', name: 'Jonathan Stief', role: 'Partner', photo: 'assets/jon-sm.png',
  creds: 'CPA, ABV, CFF, PFS, J.D. — Forensic Accountant & Litigation Partner',
  bio: "Jon is a Certified Public Accountant (CPA) with specialized certifications in Financial Forensics, Business Valuation, and Financial Planning from the American Institute of Certified Public Accountants. Jon has been an active member of The Florida Bar since 2008. In addition, Jon is a Florida Supreme Court Certified Family Law Mediator. With an integrated background in family law, accounting, forensic analysis, and mediation, Jon is uniquely qualified to address complex financial issues in family law matters. His combined legal and financial expertise allows him to provide comprehensive support throughout the settlement and litigation process, including financial analysis, business valuation, forensic accounting, settlement negotiations, and expert testimony in court."
},
{
  initials: 'SK', name: 'Scott Karp', role: 'Partner', photo: 'assets/scott-sm.png',
  creds: 'CPA — Forensic Accountant & Litigation Partner',
  bio: 'Mr. Karp has over 22 years of accounting experience and is a partner of FAV Advisors, LLC, a firm specializing in business valuations, forensic accounting and litigation support. Since June, 2014, his focus has been forensic accounting. He has served as an expert witness and has testified in both family law and civil litigation matters. Scott provides litigation support in cases involving family law, civil litigation, personal injury, fraud investigations and criminal matters. Due to his background as a corporate controller, he continues to provide accounting consulting services. Mr. Karp is trained in collaborative law and is a Florida Supreme Court Family Law Mediator.'
},
{
  initials: 'JC', name: 'Joseph Castro', role: 'Partner', photo: 'assets/joe-sm.png', 
  creds: 'CPA, ABV, CFF — Forensic Accountant & Litigation Partner',
  bio: 'Joe is a Certified Public Accountant (CPA), Accredited Business Valuator (ABV) and Certified Financial Forensic (CFF) with over 20 years of expertise in providing forensic and family law litigation support services, including but not limited to analysis of assets and liabilities and related preparation of proposed equitable distribution, asset tracing, business valuation, income determination, alimony and needs analysis, and child support calculations. His roles include providing expert testimony and invaluable support at Trials as well as facilitating mediations and discovery management.\n\nIn addition, Joseph\u2019s background in public accounting as well as his prior tenure as Controller of a private software company, has allowed him to gain extensive insight and experience in dealing with complex financial business matters and in providing traditional accounting and tax services.'
},
{
  initials: 'RD', name: 'Richard Dotson', role: 'Partner', photo: 'assets/richard-sm.png', 
  creds: 'CPA, ABV, CFF — Business Valuation Lead Partner',
  bio: "Richard is a Certified Public Accountant (CPA) with specialized certifications in Financial Forensics and Business Valuation from the American Institute of Certified Public Accountants. Richard focuses on business valuation, forensic accounting, and damages calculations. With more than 35 years of valuation experience, Richard has appraised over 700 business entities and intangible assets \u2014 including copyrights, trademarks, patents, and contingent liabilities \u2014 in matters spanning estate and gift valuations, business transactions, employee stock ownership plans, bankruptcy, and litigation.\n\nRichard has served as an expert witness and forensic accounting consultant in cases involving business valuation, receivership, family law, fraud, lost wage claims, life care plan valuation, and economic damages, testifying in venues ranging from Small Claims Court to Federal Criminal and Federal Bankruptcy Court. His litigation experience includes breach of contract, shareholder disputes, fraudulent inducement, patent and copyright infringement, bankruptcy and insolvency matters, insurance claims, and criminal cases."
}];


const TESTIMONIALS = [
{ quote: "I have both used Mr. Stief as an expert and had him opposing me in other cases. In all cases I find him to be a pleasure to work with, as well as extremely professional and knowledgeable.", attr: 'Ken Gordon, Esq., Brinkley Morgan' },
{ quote: "As a financial professional working with clients through divorce I have seen Jon Stief and his team work hard to help eliminate the stress and emotion with their knowledge and data driven process that allow for better outcomes.", attr: 'Matt Dernis, Financial Planner' },
{ quote: "I cannot recommend Jon highly enough. He handled my case in the most professional, thorough way and I have since referred numerous friends to him. I always knew that I was in good hands with Jon and never had to worry about any aspect falling through the cracks. The fact that Jon is an accountant and an attorney is priceless, as it allows him to view situations from many facets. I am forever grateful!", attr: 'Jaclyn Polsky, Client' },
{ quote: "Without any hesitation I would recommend FAV Advisors. Their expertise was extremely beneficial in my contempt and alimony modification case — always available, going over and above for the best possible outcome.", attr: 'Client — Post-Judgment Modification' }];


// ============ TEXTURE SVG ============
const Texture = () =>
<svg className="bg" viewBox="0 0 400 500" preserveAspectRatio="none">
    <defs>
      <pattern id="stripes" patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(35)">
        <line x1="0" y1="0" x2="0" y2="14" stroke="#f6f2ea" strokeWidth="1" />
      </pattern>
    </defs>
    <rect width="400" height="500" fill="url(#stripes)" />
  </svg>;


// ============ COMPONENTS ============
function Logo({ inline }) {
  return (
    <a className="logo" href="#top">
      <img src="assets/fav-logo.png" alt="FAV Advisors, LLC" className="logo-img" />
    </a>);

}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
  { h: '#about', l: 'Who We Are' },
  { h: '#values', l: 'What Sets Us Apart' },
  { h: '#services', l: 'Services' },
  { h: '#partners', l: 'Partners' },
  ];

  return (
    <>
      <nav className={`nav${scrolled ? ' scrolled' : ''}`} id="top">
        <div className="container nav-inner">
          <Logo />
          <div className="nav-links">
            {links.map((x) => <a key={x.h} href={x.h} onClick={() => setOpen(false)}>{x.l}</a>)}
          </div>
          <a href="#contact" className="btn nav-cta">Schedule a Consultation <span className="arr">→</span></a>
          <button className={`hamburger${open ? ' open' : ''}`} onClick={() => setOpen((o) => !o)} aria-label="Menu">
            <span></span><span></span>
          </button>
        </div>
      </nav>
      <div className={`mobile-menu${open ? ' open' : ''}`} style={{ left: '11px', top: '67px', position: 'absolute' }}>
        {links.map((x) => <a key={x.h} href={x.h} onClick={() => setOpen(false)}>{x.l}</a>)}
        <a href="#contact" onClick={() => setOpen(false)}>Schedule a Consultation</a>
      </div>
    </>);

}

function Hero() {
  const videoRef = useRef(null);
  const [videoOk, setVideoOk] = useState(false);
  useEffect(() => {
    // Try multiple CDN sources in order; first one that loads wins
    const candidates = [
    // Local file first (HD version recommended — 4K may not stream)
    'assets/hero-video.mp4',
    // Same video at 1080p from the Pexels CDN (id 6780084) as a smaller fallback
    'https://videos.pexels.com/video-files/6780084/6780084-hd_1920_1080_30fps.mp4',
    'https://videos.pexels.com/video-files/6780084/6780084-uhd_2560_1440_30fps.mp4'];

    const v = videoRef.current;
    if (!v) return;
    let cancelled = false;
    (async () => {
      for (const url of candidates) {
        if (cancelled) return;
        try {
          const probe = document.createElement('video');
          probe.muted = true;
          probe.playsInline = true;
          probe.preload = 'metadata';
          probe.src = url;
          await new Promise((resolve, reject) => {
            const t = setTimeout(() => reject(new Error('timeout')), 4000);
            probe.onloadedmetadata = () => {clearTimeout(t);resolve();};
            probe.onerror = () => {clearTimeout(t);reject(new Error('error'));};
          });
          if (cancelled) return;
          v.src = url;
          v.load();
          v.play().catch(() => {});
          setVideoOk(true);
          return;
        } catch (e) {
























          // try next
        }}})();return () => {cancelled = true;};}, []);return <section className="hero hero-video" data-screen-label="01 Hero">
      <video ref={videoRef} className="hero-bg" autoPlay muted loop playsInline preload="auto" poster="assets/hero-poster.jpg" />
      
      <div className="hero-overlay"></div>
      <div className="container hero-video-inner">
        <div className="hero-video-content">
          <span className="mono eyebrow" style={{ color: "rgb(248, 107, 107)" }}>Forensic Accounting &amp; Valuation Advisors</span>
          <h1><span style={{ color: "rgb(180, 171, 171)" }}>Forensic analysis and <span style={{ color: "rgb(116, 166, 230)" }}>business valuation</span> for</span> <em><span style={{ color: "rgb(235, 82, 82)" }}>family law</span></em> &amp; complex financial matters.</h1>
          <p className="lead" style={{ color: "rgb(255, 255, 255)" }}>FAV Advisors is a CPA and consulting firm specializing in family law litigation support, business valuation, forensic accounting, and the financial planning that follows. Trusted by attorneys, clients, and the courts.</p>
          <div className="hero-cta">
            <a className="btn big" href="#contact">Schedule a Consultation <span className="arr">→</span></a>
            <a className="btn big ghost-light" href="#services">Explore Services</a>
          </div>
        </div>
      </div>
      <div className="hero-scroll">
        <span>Scroll</span>
        <span className="hero-scroll-line"></span>
      </div>
    </section>;}function Ticker({ show }) {if (!show) return null;const items = ['Forensic Accounting', 'Family Law Litigation Support', 'Business Valuation', 'Mediation', 'Tax & Trust Services', 'Financial Planning'];const doubled = [...items, ...items];return <div className="ticker">
      <div className="ticker-track">
        {doubled.map((x, i) => <div key={i} className="ticker-item">{x}</div>)}
      </div>
    </div>;
}

function Who() {
  return (
    <section className="s who" id="about" data-screen-label="02 Who We Are">
      <div className="container who-grid">
        <div className="who-img">
          <img src="assets/who-illustration.svg" alt="Practice areas: forensic accounting, business valuation, family law, mediation, personal injury, tax and trust services" />
        </div>
        <div className="who-content">
          <span className="mono">Who We Are</span>
          <h2>A firm built on legal insight and accounting rigor.</h2>
          <p>FAV Advisors is a CPA and consulting practice specializing in family law litigation support, forensic accounting, and business valuation. Our partners bring together legal training and decades of credentialed accounting experience — a combination that is uncommon, and uncommonly useful, when the financial questions are complex.</p>
          <p>We work alongside attorneys, courts, and the families they represent to translate dense financial records into clear, defensible conclusions. Our work has resolved cases in mediation, held up in trial, and given clients the confidence to move forward.</p>
          <div className="signature">— The Partners, FAV Advisors</div>
        </div>
      </div>
    </section>);

}

function Values() {
  const items = [
  { n: 'I', t: 'Analytical', p: 'We analyze everything relevant to your matter — personal and business financial records, tax returns, discovery, and pleadings. We cross-reference and confirm every number, then summarize our work in a way that is straightforward to read and built to hold up.' },
  { n: 'II', t: 'Reliable', p: 'Our work and our opinions must be relied upon. Our reputation reflects that standard — trusted by our clients, the professionals we work with, and the courts in which we appear.' },
  { n: 'III', t: 'Dual-Trained', p: 'Legal training and accounting credentials in the same room. We read the law the way attorneys do, and apply the law to the numbers the way courts can use.' }];

  return (
    <section className="s values" id="values" data-screen-label="03 Values">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="mono">What Sets Us Apart</span>
            <h2>A different kind of forensic accounting firm.</h2>
          </div>
          <div className="right">
            <p>Comprehensive expertise, personal service, and an unusual willingness to roll up our sleeves. The result: financial work product that holds up — at the negotiating table, in mediation, and on the witness stand.</p>
          </div>
        </div>
        <div className="v-grid">
          {items.map((x) =>
          <div className="v-card" key={x.n}>
              <div>
                <div className="v-num">{x.n}</div>
                <h3>{x.t}</h3>
                <p>{x.p}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Services() {
  return (
    <section className="s services" id="services" data-screen-label="04 Services" style={{ backgroundColor: "rgb(201, 202, 204)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="mono">Our Services</span>
            <h2>Where forensic accounting meets family law.</h2>
          </div>
          <div className="right">
            <p>Our work is concentrated on a niche we know deeply: family law litigation support and mediation, with the valuation, forensic, and planning capabilities that surround it.</p>
          </div>
        </div>
        <div className="svc-grid">
          {SERVICES.map((s) =>
          <a className="svc" key={s.num} href="#contact" style={{ backgroundColor: "rgb(232, 234, 238)" }}>
              <div className="num">{s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="more">Discuss your matter <span className="arr">→</span></div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

function Partners() {
  const [open, setOpen] = useState(null);
  return (
    <section className="s partners" id="partners" data-screen-label="05 Partners" style={{ backgroundColor: "rgb(12, 28, 54)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="mono">The Partners</span>
            <h2>Four partners. One standard of work.</h2>
          </div>
          <div className="right">
            <p>FAV Advisors is led by four partners whose careers in forensic accounting, family law, business valuation, and tax intersect on every engagement.</p>
          </div>
        </div>
        <div className="p-grid">
          {PARTNERS.map((p, i) =>
          <div key={p.initials} className={`p-card${open === i ? ' open' : ''}`} onClick={() => setOpen(open === i ? null : i)}>
              <div className="p-photo" style={p.photoBg ? { background: p.photoBg } : undefined}>
                {p.photo ?
              <img src={p.photo} alt={p.name} style={p.imgStyle} /> :

              <>
                    <Texture />
                    <div className="ph">[ headshot pending ]</div>
                    <div className="p-initials">{p.initials}</div>
                  </>
              }
              </div>
              <div className="p-body">
                <div className="role">{p.role}</div>
                <h3>{p.name}</h3>
                <div className="creds">{p.creds}</div>
                <div className="p-bio" style={{ color: "rgb(44, 47, 51)" }}>{p.bio.split('\n\n').map((t, k) => <p key={k} style={{ margin: k ? '0.9em 0 0' : 0 }}>{t}</p>)}</div>
                <div className="p-toggle">{open === i ? '— Close bio' : '+ Read bio'}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Testimonials() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI((x) => (x + 1) % TESTIMONIALS.length), 7000);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="s testimonials" id="testimonials" data-screen-label="06 Testimonials">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="mono">In their words</span>
            <h2>What attorneys and clients say.</h2>
          </div>
          <div className="right">
            <p>Counsel, clients, and the courts depend on our work. A few selected words from those we have served.</p>
          </div>
        </div>
        <div className="t-wrap">
          {TESTIMONIALS.map((t, idx) =>
          <div key={idx} className={`t-slide${i === idx ? ' active' : ''}`}>
              <div className="t-num">{String(idx + 1).padStart(2, '0')}</div>
              <div>
                <div className="t-quote">&ldquo;{t.quote}&rdquo;</div>
                <div className="t-attr">— {t.attr}</div>
              </div>
            </div>
          )}
        </div>
        <div className="t-nav">
          {TESTIMONIALS.map((_, idx) =>
          <button key={idx} className={`t-dot${i === idx ? ' active' : ''}`} onClick={() => setI(idx)} aria-label={`Testimonial ${idx + 1}`}></button>
          )}
        </div>
      </div>
    </section>);

}

function Contact() {
  const [form, setForm] = useState({ name: '', email: '', phone: '', matter: 'Family Law Litigation Support', message: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    const err = {};
    if (!form.name.trim()) err.name = 'Required';
    if (!/^\S+@\S+\.\S+$/.test(form.email)) err.email = 'Valid email required';
    if (!form.message.trim() || form.message.trim().length < 10) err.message = 'Please describe your matter (10+ chars)';
    setErrors(err);
    if (Object.keys(err).length === 0) setSent(true);
  };
  return (
    <section className="s contact" id="contact" data-screen-label="07 Contact">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="mono">Schedule a Consultation</span>
            <h2>Let&rsquo;s talk through your matter.</h2>
          </div>
          <div className="right">
            <p>Briefly describe your situation and one of our partners will follow up to schedule a confidential consultation. All inquiries are reviewed personally.</p>
          </div>
        </div>
        <div className="c-grid">
          <dl className="c-info">
            <dt>Offices</dt>
            <dd>12 S.E. 7th Street, Suite 803<br />Fort Lauderdale, Florida 33301</dd>
            <dd style={{ marginTop: '14px' }}>7900 Glades Rd., Ste. 260<br />Boca Raton, Florida 33434</dd>
            <dt>Telephone</dt>
            <dd><a href="tel:9547670400">(954) 767-0400</a></dd>
            <dt>Email</dt>
            <dd><a href="mailto:info@favadvisors.com">info@favadvisors.com</a></dd>
            <dt>Hours</dt>
            <dd>Monday – Friday<br />9:00 AM – 5:00 PM</dd>
          </dl>
          <form className="c-form" onSubmit={submit} noValidate>
            {sent ?
            <div className="success">
                <h3>Thank you.</h3>
                <p>Your message has been received. A partner will be in touch within one business day to schedule your consultation.</p>
              </div> :

            <>
                <div className="row">
                  <div>
                    <label>Full Name</label>
                    <input value={form.name} onChange={(e) => update('name', e.target.value)} placeholder="Jane Doe" />
                    <div className="err">{errors.name}</div>
                  </div>
                  <div>
                    <label>Email</label>
                    <input type="email" value={form.email} onChange={(e) => update('email', e.target.value)} placeholder="jane@example.com" />
                    <div className="err">{errors.email}</div>
                  </div>
                </div>
                <div className="row">
                  <div>
                    <label>Phone</label>
                    <input value={form.phone} onChange={(e) => update('phone', e.target.value)} placeholder="(954) 000-0000" />
                    <div className="err"></div>
                  </div>
                  <div>
                    <label>Nature of Matter</label>
                    <select value={form.matter} onChange={(e) => update('matter', e.target.value)}>
                      {SERVICES.map((s) => <option key={s.num}>{s.title}</option>)}
                      <option>Other / Not Sure</option>
                    </select>
                    <div className="err"></div>
                  </div>
                </div>
                <div>
                  <label>Briefly describe your matter</label>
                  <textarea rows={3} value={form.message} onChange={(e) => update('message', e.target.value)} placeholder="Confidential. Share whatever context is helpful."></textarea>
                  <div className="err">{errors.message}</div>
                </div>
                <button type="submit">Request Consultation →</button>
              </>
            }
          </form>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer data-screen-label="08 Footer">
      <div className="container">
        <div className="f-grid">
          <div className="f-col f-brand">
            <a className="logo" href="#top">
              <img src="assets/fav-logo-light.png" alt="FAV Advisors, LLC" className="logo-img footer-logo" />
            </a>
            <p>A forensic accounting and consulting firm serving attorneys, families, and businesses across Florida.</p>
          </div>
          <div className="f-col">
            <h4>Firm</h4>
            <a href="#about">Who We Are</a>
            <a href="#values">What Sets Us Apart</a>
            <a href="#partners">Partners</a>
          </div>
          <div className="f-col">
            <h4>Services</h4>
            <a href="#services">Family Law Litigation</a>
            <a href="#services">Business Valuation</a>
            <a href="#services">Forensic Accounting</a>
            <a href="#services">Tax &amp; Accounting</a>
          </div>
          <div className="f-col">
            <h4>Contact</h4>
            <a href="tel:9547670400">(954) 767-0400</a>
            <a href="mailto:info@favadvisors.com">info@favadvisors.com</a>
            <a href="#contact">12 S.E. 7th Street, Suite 803<br />Fort Lauderdale, FL 33301</a>
            <a href="#contact">7900 Glades Rd., Ste. 260<br />Boca Raton, FL 33434</a>
          </div>
        </div>
          <div className="f-bot">
            <div>© {new Date().getFullYear()} FAV Advisors, LLC. All rights reserved.</div>
            <div><a href="privacy-policy.html">Privacy Policy</a> · Confidential consultations · Licensed in Florida</div>
          </div>
      </div>
    </footer>);

}

function applyTweaks(t) {
  const p = PALETTES[t.palette] || PALETTES.forest;
  Object.entries(p).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  document.documentElement.style.setProperty('--serif-display', SERIFS[t.serif] || SERIFS.cormorant);
  // override heading font
  const id = '__serif_override';
  let el = document.getElementById(id);
  if (!el) {el = document.createElement('style');el.id = id;document.head.appendChild(el);}
  el.textContent = `h1,h2,h3,h4,.logo-text .name,.t-quote,.signature,.hero-stamp .yr,.c-info dd,.t-num,.v-num,.p-initials { font-family: ${SERIFS[t.serif] || SERIFS.cormorant} !important; }`;
}

function App() {
  const initial = (() => {
    try {
      const raw = document.getElementById('__edit_mode_tweaks_init').textContent;
      const m = raw.match(/\{[\s\S]*\}/);
      return m ? JSON.parse(m[0]) : { palette: 'forest', serif: 'cormorant', showTicker: true };
    } catch {return { palette: 'forest', serif: 'cormorant', showTicker: true };}
  })();
  const [t] = React.useState(initial);
  useEffect(() => {applyTweaks(t);}, [t]);

  return (
    <>
      <Nav />
      <Hero />
      <Ticker show={t.showTicker} />
      <Who />
      <Values />
      <Services />
      <Partners />
      <Contact />
      <Footer />

    </>);

}

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