/* TMS WEALTH - app.jsx */
const { useState, useEffect, useRef } = React;
const RES = (id, path) => (typeof window !== 'undefined' && ((window.__IMG && window.__IMG[id]) || (window.__resources && window.__resources[id]))) || path;
if (typeof window !== 'undefined') window.RES = RES;
const LINKS = (typeof window !== 'undefined' && window.__LINKS) || { access: 'Private Access.html', article: 'Commentary.html' };

/* ---------------- Tweak defaults ---------------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "type": "serif",
  "palette": "warm",
  "hero": "full",
  "brand": "tms"
}/*EDITMODE-END*/;

/* ---------------- Brand identities ---------------- */
const BRANDS = {
  tms:  { letters:'TMS',  name:'TMS Wealth',  tagline:'TMS Wealth', subTop:'Wealth', subBot:'', subStacked:'Wealth', wordSuffix:'Wealth', founder:'Founder \u00b7 TMS Wealth' },
  aura: { letters:'AURA', name:'Aura Wealth', tagline:'Wealth Management',       subTop:'Wealth',         subBot:'Management', subStacked:'Wealth Management', wordSuffix:'Wealth', founder:'Founder \u00b7 Aura Wealth', logoId:'auraLogo', logoSrc:'uploads/Aura Logo - Black.png' },
};

/* ---------------- Hooks ---------------- */
function useReveals(dep) {
  useEffect(() => {
    const els = Array.from(document.querySelectorAll('.reveal, .img-reveal'));
    if (!els.length) return;
    const reveal = (el) => el.classList.add('in');
    const checkAll = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      els.forEach(el => {
        if (el.classList.contains('in')) return;
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.9 && r.bottom > 0) reveal(el);
      });
    };
    requestAnimationFrame(checkAll);
    const onScroll = () => requestAnimationFrame(checkAll);
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    let io = null;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver((entries) => {
        entries.forEach(en => { if (en.isIntersecting) { reveal(en.target); io.unobserve(en.target); } });
      }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
      els.forEach(e => { if (!e.classList.contains('in')) io.observe(e); });
    }
    const safety = setTimeout(() => els.forEach(reveal), 1700);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (io) io.disconnect();
      clearTimeout(safety);
    };
  }, [dep]);
}

function useParallax(dep) {
  useEffect(() => {
    let raf = null;
    const nodes = Array.from(document.querySelectorAll('[data-parallax]'));
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const update = () => {
      const vh = window.innerHeight;
      nodes.forEach(n => {
        const r = n.getBoundingClientRect();
        const speed = parseFloat(n.getAttribute('data-parallax')) || 0.12;
        const center = r.top + r.height / 2;
        const off = (center - vh / 2) / vh;
        n.style.transform = `translate3d(0, ${(-off * speed * 100).toFixed(2)}px, 0)`;
      });
      raf = null;
    };
    const onScroll = () => { if (raf == null) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [dep]);
}

function useNavState(heroVariant) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return { scrolled, onPhoto: heroVariant === 'full' };
}

function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 10; window.scrollTo({ top: y, behavior: 'smooth' }); }
}

function useClock() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []);
  const date = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'America/Chicago' });
  const time = now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', timeZone: 'America/Chicago' });
  return `${date} · ${time} CT`;
}

const Arrow = () => (
  <svg className="btn-arrow" width="15" height="11" viewBox="0 0 15 11" fill="none" aria-hidden="true">
    <path d="M9 1l4.5 4.5L9 10M13 5.5H0.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);


/* ---------------- MARKETS ---------------- */
function useMarkets() {
  // Live quotes come from market.js (window.__MARKET, fed by the tms-market Worker).
  // Until the first fetch resolves the ticker renders empty rather than placeholder numbers.
  const read = () => {
    const m = typeof window !== 'undefined' && window.__MARKET;
    if (!m || !m.quotes) return [];
    // Yields move in points, not percent-of-percent: show the 10-Yr change as +0.02 rather than +0.38%.
    return m.quotes.map(q => ({ name: q.name, v: q.price, c: (q.yld ? q.chg : q.chgPct) == null ? 0 : (q.yld ? q.chg : q.chgPct), yld: !!q.yld, sym: q.sym }));
  };
  const [rows, setRows] = useState(read);
  useEffect(() => {
    const h = () => setRows(read());
    window.addEventListener('market:update', h);
    h();
    return () => window.removeEventListener('market:update', h);
  }, []);
  return rows;
}
const marketAsOf = () => {
  const m = typeof window !== 'undefined' && window.__MARKET;
  if (!m || !m.asOf) return m && m.error ? 'Market data unavailable' : 'Loading market data…';
  const t = new Date(m.asOf).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', timeZone: 'America/Chicago' });
  return `As of ${t} CT · may be delayed up to 15 min`;
};
const fmtVal = (r) => r.yld ? r.v.toFixed(2) + '%' : r.v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const fmtChg = (c, r) => (c >= 0 ? '+' : '') + c.toFixed(2) + (r && r.yld ? '' : '%');

function MarketsPanel() {
  const rows = useMarkets();
  const dateStr = useRef(new Date().toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })).current;
  return (
    <aside className="mkt" aria-label="Market overview">
      <div className="mkt-head">
        <span className="mkt-title"><span className="mkt-live"></span> Markets</span>
        <span className="mkt-date">{dateStr}</span>
      </div>
      {rows.map((r, i) => (
        <div className="mkt-row" key={i}>
          <span className="mkt-name">{r.name}</span>
          <span className="mkt-val">{fmtVal(r)}</span>
          <span className={`mkt-chg ${r.c >= 0 ? 'up' : 'down'}`}>{fmtChg(r.c, r)}</span>
        </div>
      ))}
      <div className="mkt-foot">{marketAsOf()}</div>
    </aside>
  );
}

/* ---------------- HERO LOGIN + TICKER ---------------- */
function HeroLogin() {
  const [sent, setSent] = useState(false);
  const clock = useClock();
  return (
    <aside className="hero-login" aria-label="Private client access">
      <div className="hl-brand">
        {window.TMSLogo ? <window.TMSLogo variant="nav" tone="light" /> : <span className="hl-tms">TMS</span>}
      </div>
      <div className="hl-access">Private Access · Client Portal</div>
      <div className="hl-clock">{clock}</div>
      {!sent ? (
        <React.Fragment>
          <p className="hl-sub">Client portal: sign in to view your dashboard, documents, and notes from Tina.</p>
          <form className="hl-form" onSubmit={(e)=>{e.preventDefault();setSent(true);}}>
            <input type="email" required placeholder="Email" aria-label="Email" />
            <input type="password" required placeholder="Password" aria-label="Password" />
            <button className="hl-btn" type="submit">Sign In</button>
          </form>
          <div className="hl-foot">
            <a href="#contact" onClick={(e)=>{e.preventDefault();scrollToId('contact');}}>Request access</a>
            <a href={LINKS.access}>Full portal ↗</a>
          </div>
        </React.Fragment>
      ) : (
        <p className="hl-ok">A secure sign-in link is on its way to your inbox.</p>
      )}
    </aside>
  );
}

function MarketsTicker() {
  const rows = useMarkets();
  const items = [...rows, ...rows, ...rows];
  return (
    <div className="ticker" aria-label="Market overview">
      <div className="ticker-label"><span className="mkt-live"></span> Markets</div>
      <div className="ticker-mask">
        <div className="ticker-track">
          {items.map((r, i) => (
            <span className="tk-item" key={i}>
              <span className="tk-name">{r.name}</span>
              <span className="tk-val">{fmtVal(r)}</span>
              <span className={`tk-chg ${r.c >= 0 ? 'up' : 'down'}`}>{fmtChg(r.c, r)}</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function PhotoMark() {
  return window.TMSLogo ? <span className="photo-mark"><window.TMSLogo variant="nav" tone="light" /></span> : null;
}

/* ---------------- NAV ---------------- */
function NavIndices() {
  const rows = useMarkets();
  const ref = useRef(null);
  // market.js decides inline vs. marquee from the measured overflow (see .dl-idx.is-marquee in styles.css)
  useEffect(() => { if (ref.current && window.__fitTicker) window.__fitTicker(ref.current); }, [rows]);
  const items = (copy) => rows.map((r, i) => (
    <span className="dl-idx-item" key={(copy ? 'c' : 'i') + i}>
      <span className="dl-idx-name">{r.name}</span>
      <span className="dl-idx-val">{fmtVal(r)}</span>
      <span className={`dl-idx-chg ${r.c >= 0 ? 'up' : 'down'}`}>{fmtChg(r.c, r)}</span>
    </span>
  ));
  return (
    <span className="dl-idx" ref={ref}>
      <span className="dl-idx-track">{items(false)}</span>
      <span className="dl-idx-track" aria-hidden="true">{items(true)}</span>
    </span>
  );
}
const WI_LINK = (typeof window !== 'undefined' && window.__WI_LINK) || 'Women & Investing.html';
const NAV_ITEMS = [
  { id: 'approach', label: 'Approach' },
  { id: 'who', label: 'Clients' },
  { id: 'services', label: 'Services' },
  { href: WI_LINK, label: 'Women & Investing' },
];

function Nav({ heroVariant }) {
  const { scrolled, onPhoto } = useNavState(heroVariant);
  const [menu, setMenu] = useState(false);
  const [now, setNow] = useState(() => new Date());
  const [bcDock, setBcDock] = useState(false);
  useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []);
  useEffect(() => {
    const onScroll = () => {
      const el = document.querySelector('.hero-bc');
      setBcDock(el ? el.getBoundingClientRect().bottom < 140 : window.scrollY > 620);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);
  const dlDate = now.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
  const dlTime = now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', timeZone: 'America/Chicago' }) + ' CT';
  const cls = ['nav', scrolled ? 'scrolled' : '', onPhoto ? 'on-photo' : '', bcDock ? 'bc-on' : ''].join(' ');
  return (
    <React.Fragment>
      <header className={cls}>
        <div className="nav-bar">
          <a className="brand-link" href="#top" onClick={(e)=>{e.preventDefault();scrollToId('top');}} aria-label="TMS Wealth home">
            {window.TMSLogo ? <window.TMSLogo variant="nav" /> : <span className="brand-name">TMS Wealth</span>}
          </a>
          <nav className="nav-links">
            {NAV_ITEMS.map(it => (
              it.href
                ? <a key={it.label} className="nav-link" href={it.href}>{it.label}</a>
                : <a key={it.id} className="nav-link" href={'#'+it.id} onClick={(e)=>{e.preventDefault();scrollToId(it.id);}}>{it.label}</a>
            ))}
            <a className="nav-cta" href="#contact" onClick={(e)=>{e.preventDefault();scrollToId('contact');}}>Schedule a Conversation</a>
          </nav>
          <button className="nav-burger nav-cta" onClick={()=>setMenu(true)} aria-label="Open menu">Menu</button>
        </div>
        <div className="nav-dateline" aria-hidden="true">
          <span className="dl-date">{dlDate}</span>
          <span className="dl-dot"></span>
          <span className="dl-time">{dlTime}</span>
          <span className="dl-sep"></span>
          <NavIndices />
        </div>
        <div className="bc-dock">
          <p>Check the background of investment professionals associated with this site on FINRA&rsquo;s <a href="https://brokercheck.finra.org" target="_blank" rel="noopener">BrokerCheck</a>.</p>
        </div>
      </header>
      {menu && (
        <div className="mobile-menu" role="dialog" aria-modal="true">
          <button className="mm-close" onClick={()=>setMenu(false)} aria-label="Close menu">Close</button>
          <nav>
            {NAV_ITEMS.map(it => (
              it.href
                ? <a key={it.label} href={it.href}>{it.label}</a>
                : <a key={it.id} href={'#'+it.id} onClick={(e)=>{e.preventDefault();setMenu(false);scrollToId(it.id);}}>{it.label}</a>
            ))}
            <a className="mm-cta" href="#contact" onClick={(e)=>{e.preventDefault();setMenu(false);scrollToId('contact');}}>Schedule a Conversation</a>
          </nav>
        </div>
      )}
    </React.Fragment>
  );
}

/* ---------------- BROKERCHECK (required disclosure) ---------------- */
function BrokerCheck({ light }) {
  return (
    <p className={`hero-bc${light ? '' : ' hero-bc--ink'}`}>
      Check the background of investment professionals associated with this site on FINRA&rsquo;s <a href="https://brokercheck.finra.org" target="_blank" rel="noopener">BrokerCheck</a>.
    </p>
  );
}

/* ---------------- HERO ---------------- */
function Hero({ variant, tagline }) {
  const eyebrow = <p className="eyebrow hero-eyebrow">{tagline}</p>;
  const heading = <h1 className="display">Wealth with clarity</h1>;
  const sub = (
    <p className="hero-sub">Thoughtful guidance for individuals, families, and professionals seeking a more intentional, organized approach to their finances.</p>
  );
  const actions = (light) => (
    <div className="hero-actions">
      <a className={`btn ${light ? 'btn--light' : 'btn--solid'}`} href="#contact" onClick={(e)=>{e.preventDefault();scrollToId('contact');}}>Schedule a Conversation <Arrow/></a>
      <a className="link-text" href="#approach" onClick={(e)=>{e.preventDefault();scrollToId('approach');}}>The Approach</a>
    </div>
  );

  if (variant === 'split') {
    return (
      <section id="top" className="hero hero--split">
        <div className="hero-text">{eyebrow}{heading}{sub}{actions(false)}<BrokerCheck /></div>
        <div className="hero-media img-reveal in">
          <img src={RES('heroSplit','uploads/IMG_0005-web.jpg')} alt="Tina Meckaroski" data-parallax="0.08" />
          <PhotoMark />
        </div>
      </section>
    );
  }
  if (variant === 'text') {
    return (
      <section id="top" className="hero hero--text">
        <div className="hero-text">{eyebrow}{heading}{sub}
          <div className="hero-actions" style={{justifyContent:'center'}}>
            <a className="btn btn--solid" href="#contact" onClick={(e)=>{e.preventDefault();scrollToId('contact');}}>Schedule a Conversation <Arrow/></a>
          </div>
          <BrokerCheck />
        </div>
        <div className="hero-strip img-reveal in">
          <img src={RES('heroText','uploads/IMG_6338-web.jpg')} alt="Tina Meckaroski" data-parallax="0.1" />
          <PhotoMark />
        </div>
      </section>
    );
  }
  return (
    <section id="top" className="hero hero--full">
      <div className="hero-media">
        <img src={RES('heroFull','uploads/IMG_6339.JPG')} alt="Tina Meckaroski in conversation with clients" data-parallax="0.16" style={{objectPosition:'center 36%'}} />
      </div>
      <div className="hero-content wrap">{eyebrow}{heading}{sub}{actions(true)}<BrokerCheck light /></div>
    </section>
  );
}

/* ---------------- STATEMENT (philosophy) ---------------- */
function Statement({ founder }) {
  return (
    <section className="section-pad philosophy-dark reveal">
      <div className="wrap-narrow">
        <div className="phil-logo">
          {window.TMSLogo ? <window.TMSLogo variant="nav" tone="ondeep" /> : null}
        </div>
        <p className="eyebrow no-rule">The Philosophy</p>
        <p className="phil-quote">Real confidence comes from knowing exactly <em>where you stand</em>.</p>
        <p className="phil-quote2">A practice measured in decades, not quarters.</p>
        <span className="phil-rule"></span>
        <div className="phil-sign-dark">
          <span className="sig-name">Tina Meckaroski</span>
          <span className="sig-r">{founder}</span>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CAREER ARC ---------------- */
const ARC = [
  { year: '2008', label: 'Where it began', text: 'I started in the middle of a financial crisis, and learned that discipline, not prediction, is what carries people through.' },
  { year: '2016\u201322', label: 'Institutional experience', big: true, text: 'For six years I worked alongside institutional investment teams, gaining a firsthand understanding of how capital moves through markets and how disciplined, long-term decisions are made.' },
  { year: 'Today', label: 'TMS Wealth', logo: true, text: 'For more than fifteen years I have guided individuals, families, and founders. Today that work continues through a boutique, deliberate practice built for the long term.' },
];
function CareerArc() {
  return (
    <section id="approach" className="section-pad arc">
      <div className="wrap arc-grid">
        <figure className="arc-figure img-reveal reveal" style={{margin:0}}>
          <img src={RES('arc','uploads/IMG_6337-web.jpg')} alt="Tina Meckaroski" data-parallax="0.07" />
          <figcaption>Tina Meckaroski · Founder</figcaption>
          <PhotoMark />
        </figure>
        <div>
          <div className="sec-head reveal" style={{marginBottom:'44px'}}>
            <p className="eyebrow">Why this work feels different</p>
            <h2 className="display" style={{marginTop:'20px'}}>A career built on conviction</h2>
          </div>
          <div className="arc-list">
            {ARC.map((m,i) => (
              <div className={`arc-item reveal${m.big ? ' big' : ''}`} key={i} style={{transitionDelay:`${i*0.08}s`}}>
                <div className="arc-year">{m.year}{m.sub ? <span style={{fontSize:'0.36em',letterSpacing:'0.18em',marginLeft:'0.7em',verticalAlign:'middle',color:'var(--muted)'}}>{m.sub}</span> : null}</div>
                {m.logo
                  ? <div className="arc-logo">{window.TMSLogo ? <window.TMSLogo variant="nav" /> : <span className="al-tms">TMS</span>}</div>
                  : <div className="arc-label">{m.label}</div>}
                <p className="arc-text">{m.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- METHOD ---------------- */
const METHOD = [
  { k: 'I', t: 'What you own', d: 'A complete, organized picture of every asset, account, and obligation.' },
  { k: 'II', t: "How it's structured", d: 'Finances arranged so nothing is left to guesswork.' },
  { k: 'III', t: 'How it aligns', d: 'Investments mapped to the life you are actually building.' },
  { k: 'IV', t: 'What matters most', d: "Decisions anchored to your priorities, not the market's noise." },
];
function Method() {
  return (
    <section className="section-pad method">
      <div className="wrap">
        <div className="method-head reveal">
          <p className="eyebrow no-rule">The method</p>
          <h2 className="display">Before strategy, there is clarity</h2>
          <p className="lead">Every relationship moves through the same four questions, in order, without skipping ahead.</p>
        </div>
        <div className="mpath reveal">
          <div className="mpath-line"></div>
          <div className="mpath-grid">
            {METHOD.map((m,i) => (
              <div className="mstep" key={i}>
                <div className="mnode">{m.k}</div>
                <h3>{m.t}</h3>
                <p>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FILM BAND ---------------- */
function FilmBand() {
  return (
    <section className="filmband img-reveal reveal">
      <div className="fb-media"><img src={RES('film','uploads/IMG_6343.JPG')} alt="Tina Meckaroski" data-parallax="0.12" style={{objectPosition:'center 18%'}} /></div>
      <PhotoMark />
      <div className="fb-content wrap">
        <p className="fb-quote">Clarity is a strategy: <em>steady, organized, and built to last.</em></p>
        <p className="fb-attr">Tina Meckaroski</p>
      </div>
    </section>
  );
}

/* ---------------- WHO ---------------- */
function Who() {
  return (
    <section id="who" className="who section-pad">
      <div className="wrap who-manifesto">
        <div className="wm-text reveal">
          <p className="eyebrow">Who I work with</p>
          <p className="wm-statement">A boutique few: <span className="em">executives</span>, <span className="em">founders</span>, <span className="em">women stepping into financial leadership</span>, <span className="em">couples &amp; families</span>, <span className="em">first-generation wealth-builders</span>, and those <span className="em">in transition</span>.</p>
        </div>
        <figure className="wm-figure img-reveal reveal reveal-d1" style={{margin:0}}>
          <img src={RES('who','uploads/IMG_6340.JPG')} alt="Tina in conversation with a client" data-parallax="0.06" />
          <PhotoMark />
        </figure>
      </div>
    </section>
  );
}

/* ---------------- SERVICES ---------------- */
const SERVICES = [
  { tag: 'Ongoing Advisory', title: 'Private Wealth Management', desc: 'Your full financial picture of investments, cash flow, and goals, aligned and stewarded over time.', meta: [['Engagement','Continuous'],['Cadence','Reviewed quarterly'],['For','Individuals & families']] },
  { tag: 'Cohort · Max 8', title: 'Wealth Education Series', desc: 'The foundations of personal finance, taught intimately, with individualized planning alongside.', meta: [['Format','Small cohort'],['Sessions','Multi-part'],['For','The newly engaged']] },
  { tag: 'Stewardship', title: 'Multi-Generational Wealth', desc: 'Preparing the next generation to talk about, and steward, what has been built.', meta: [['Format','Family workshops'],['Cadence','As needed'],['For','Families']] },
  { tag: 'Speaking', title: 'Speaking & Education', desc: 'A modern, human approach to financial wellbeing for teams and communities.', meta: [['Format','Talks & sessions'],['Cadence','By engagement'],['For','Organizations']] },
];
function Services() {
  const [open, setOpen] = useState(0);
  return (
    <section id="services" className="section-pad">
      <div className="wrap">
        <div className="sec-head reveal">
          <p className="eyebrow">Ways we can work together</p>
          <h2 className="display" style={{marginTop:'22px'}}>Four ways to find clarity</h2>
        </div>
        <div className="svc-acc reveal">
          {SERVICES.map((s,i) => (
            <div className={`svc-item${open===i ? ' open' : ''}`} key={i}>
              <button className="svc-btn" onClick={()=>setOpen(open===i ? -1 : i)} aria-expanded={open===i}>
                <span className="svc-num">{String(i+1).padStart(2,'0')}</span>
                <span className="svc-h">{s.title}</span>
                <span style={{display:'flex',alignItems:'center'}}><span className="svc-tag2">{s.tag}</span><span className="svc-plus"></span></span>
              </button>
              <div className="svc-panel">
                <div className="svc-panel-inner">
                  <p>{s.desc}</p>
                  <div className="svc-meta2">
                    {s.meta.map((m,j) => (
                      <div className="mm" key={j}><span className="k">{m[0]}</span><span className="v">{m[1]}</span></div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- MARKET COMMENTARY ---------------- */
const COMM_LIST = [
  { date: 'May 21, 2026', title: 'When cash feels safe, and quietly isn\u2019t' },
  { date: 'May 7, 2026', title: 'What \u201corganized\u201d really means for your money' },
  { date: 'Apr 23, 2026', title: 'Teaching the next generation about wealth' },
];
function Commentary() {
  return (
    <section id="commentary" className="commentary section-pad">
      <div className="wrap">
        <div className="sec-head reveal" style={{marginBottom:'44px'}}>
          <p className="eyebrow">Market Commentary</p>
          <h2 className="display" style={{marginTop:'22px'}}>Perspective, when it matters</h2>
        </div>
        <div className="comm-grid">
          <article className="comm-feature reveal">
            <div className="cf-media img-reveal in"><img src={RES('commentary','uploads/IMG_6382.JPG')} alt="" /><PhotoMark /></div>
            <span className="comm-tag">Featured Note</span>
            <h3 className="display">Clarity is a strategy: staying steady when markets aren't</h3>
            <div className="comm-byline">Tina Meckaroski <span className="dot"></span> May 28, 2026 <span className="dot"></span> 6 min read</div>
            <p>Volatility tests plans, not markets. A look at why the investors who fare best in turbulent stretches are rarely the ones predicting them, and what an organized financial life makes possible when the headlines turn loud.</p>
            <a className="btn btn--ghost" href={LINKS.article}>Read the note <Arrow/></a>
          </article>
          <div className="comm-side reveal reveal-d1">
            <div className="side-panel">
              <h4>Recent notes</h4>
              <ul className="comm-list" style={{borderTop:'none'}}>
                {COMM_LIST.map((c,i) => (
                  <li key={i} style={i===0?{paddingTop:0}:undefined}><a href={LINKS.article}>
                    <div className="cl-date">{c.date}</div>
                    <div className="cl-title">{c.title}</div>
                  </a></li>
                ))}
              </ul>
            </div>
            <div className="side-panel side-sub">
              <label>Receive Tina's commentary as it's published.</label>
              <div className="sub-row">
                <input type="email" placeholder="you@email.com" aria-label="Email" />
                <button type="button" onClick={(e)=>{e.target.textContent='Thank you';}}>Subscribe</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- WOMEN & INVESTING (teaser) ---------------- */
function WomenTeaser() {
  return (
    <section className="wi-teaser">
      <div className="wi-teaser-media img-reveal reveal">
        <img src={RES('wiTeaser','uploads/IMG_9601-web.jpg')} alt="Tina Meckaroski" data-parallax="0.08" />
        <PhotoMark />
      </div>
      <div className="wi-teaser-body reveal reveal-d1">
        <p className="eyebrow">Women &amp; Investing</p>
        <h2 className="display">Confidence, built one informed decision at a time</h2>
        <p className="wi-teaser-lead">A growing resource for women who want to feel more informed and in control of their financial lives: educational guides, conversation starters, and practical first steps that make investing feel approachable.</p>
        <a className="btn btn--solid" href={WI_LINK}>Explore the resource <Arrow/></a>
      </div>
    </section>
  );
}

/* ---------------- CONTACT ---------------- */
// Where form submissions are delivered.
const TINA_EMAIL = 'tinameckaroski@gmail.com';
// Optional: once a Formspree form is created (free, points to TINA_EMAIL),
// paste its endpoint here (e.g. 'https://formspree.io/f/abcdwxyz') for seamless
// background email delivery. Until then, the form opens the visitor's email
// client pre-addressed to TINA_EMAIL.
const FORMSPREE_ENDPOINT = '';

function Contact() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name:'', email:'', message:'' });
  const submit = async (e) => {
    e.preventDefault();
    if (FORMSPREE_ENDPOINT) {
      try {
        const res = await fetch(FORMSPREE_ENDPOINT, { method:'POST', headers:{ 'Accept':'application/json' }, body: new FormData(e.target) });
        if (res.ok) { setSent(true); return; }
      } catch (_) { /* fall through to mailto */ }
    }
    const subject = encodeURIComponent('Website inquiry' + (form.name ? ' from ' + form.name : ''));
    const body = encodeURIComponent(`Name: ${form.name}\nEmail: ${form.email}\n\n${form.message}`);
    window.location.href = `mailto:${TINA_EMAIL}?subject=${subject}&body=${body}`;
    setSent(true);
  };
  const upd = (k) => (e) => setForm(f => ({...f, [k]: e.target.value}));
  return (
    <section id="contact" className="contact section-pad">
      <div className="wrap contact-grid">
        <figure className="contact-figure img-reveal reveal" style={{margin:0}}>
          <img src={RES('contact','uploads/IMG_6324-9f17fec6.JPG')} alt="Tina Meckaroski speaking" />
          <PhotoMark />
        </figure>
        <div className="contact-body reveal reveal-d1">
          <p className="eyebrow">Begin a conversation</p>
          <h2 className="display" style={{marginTop:'22px'}}>If something here resonated</h2>
          <p className="contact-lead">You may be ready for a different kind of financial conversation. I'd welcome the chance to hear what you're building toward.</p>
          {!sent ? (
            <form className="form" onSubmit={submit}>
              <input type="hidden" name="_subject" value="New inquiry from TMS Wealth website" />
              <div className="field"><label htmlFor="f-name">Name</label>
                <input id="f-name" name="name" type="text" required placeholder="Your name" value={form.name} onChange={upd('name')} /></div>
              <div className="field"><label htmlFor="f-email">Email</label>
                <input id="f-email" name="email" type="email" required placeholder="you@email.com" value={form.email} onChange={upd('email')} /></div>
              <div className="field"><label htmlFor="f-msg">What's on your mind?</label>
                <textarea id="f-msg" name="message" rows="3" placeholder="A few words about where you are and what you're hoping for." value={form.message} onChange={upd('message')}></textarea></div>
              <div className="form-actions"><button className="btn btn--on-deep" type="submit">Schedule a Conversation <Arrow/></button></div>
            </form>
          ) : (
            <div className="form-success">
              Thank you, {form.name ? form.name.split(' ')[0] : 'and'} , your note is on its way.
              <span className="small">I'll be in touch personally to find a time to connect.</span>
            </div>
          )}
          <div className="contact-direct">
            <div className="label">Or email directly</div>
            <a href="mailto:tina.meckaroski@hiptpartners.com">tina.meckaroski@hiptpartners.com</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          {window.TMSLogo ? <window.TMSLogo variant="nav" tone="ondeep" /> : <span className="brand-name">TMS Wealth</span>}
          <nav className="footer-nav">
            {NAV_ITEMS.map(it => (
              it.href
                ? <a key={it.label} href={it.href}>{it.label}</a>
                : <a key={it.id} href={'#'+it.id} onClick={(e)=>{e.preventDefault();scrollToId(it.id);}}>{it.label}</a>
            ))}
          </nav>
        </div>
        <div className="footer-disc">
          <p>Securities offered through LPL Financial. Member <a className="footer-link" href="https://www.finra.org" target="_blank" rel="noopener">FINRA</a>/<a className="footer-link" href="https://www.sipc.org" target="_blank" rel="noopener">SIPC</a>. Investment advice offered through HighPoint Advisor Group, LLC, a registered investment advisor. HighPoint Advisor Group, LLC and TMS Wealth, LLC are separate entities from LPL Financial.</p>
          <p className="footer-block2">The financial professionals associated with LPL Financial may discuss and/or transact business only with residents of the states in which they are properly registered or licensed. No offers may be made or accepted from any resident of any other state.</p>
          <p className="footer-block2"><a className="footer-link" href="https://www.lpl.com/CRS" target="_blank" rel="noopener">LPL Financial Form CRS</a></p>
        </div>
        <div className="footer-copy">© 2026 TMS Wealth, LLC. All rights reserved.</div>
      </div>
    </footer>
  );
}

/* ---------------- TWEAKS ---------------- */
function Panel({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typography" />
      <TweakRadio label="Headline style" value={t.type}
        options={[{value:'serif',label:'Editorial'},{value:'sans',label:'Modern'},{value:'caps',label:'Classic'}]}
        onChange={(v)=>setTweak('type', v)} />
      <TweakSection label="Palette" />
      <TweakRadio label="Mood" value={t.palette}
        options={[{value:'warm',label:'Warm'},{value:'greige',label:'Greige'},{value:'brass',label:'Brass'}]}
        onChange={(v)=>setTweak('palette', v)} />
      <TweakSection label="Hero" />
      <TweakRadio label="Treatment" value={t.hero}
        options={[{value:'full',label:'Full'},{value:'split',label:'Split'},{value:'text',label:'Text'}]}
        onChange={(v)=>setTweak('hero', v)} />
      <TweakSection label="Brand" />
      <TweakRadio label="Identity" value={t.brand}
        options={[{value:'tms',label:'TMS'},{value:'aura',label:'Aura'}]}
        onChange={(v)=>setTweak('brand', v)} />
    </TweaksPanel>
  );
}

/* ---------------- APP ---------------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const B = BRANDS[t.brand] || BRANDS.tms;
  if (typeof window !== 'undefined') window.__BRANDCFG = B;
  useEffect(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
    document.documentElement.setAttribute('data-type', t.type);
    document.documentElement.setAttribute('data-brand', t.brand);
  }, [t.palette, t.type, t.brand]);
  useReveals(t.hero + t.palette + t.type + t.brand);
  useParallax(t.hero);
  return (
    <React.Fragment>
      <Nav heroVariant={t.hero} />
      <main>
        <Hero variant={t.hero} tagline={B.tagline} />
        <Statement founder={B.founder} />
        <CareerArc />
        <Method />
        <FilmBand />
        <Who />
        <Services />
        <WomenTeaser />
        <Contact />
      </main>
      <Footer />
      <Panel t={t} setTweak={setTweak} />
    </React.Fragment>
  );
}

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