/* global React, HeroBg, SvcViz, TimelineViz */
const { useEffect, useRef, useState, Fragment } = React;

/* ============================================================
   Helpers
   ============================================================ */
function useScrollProgress(ref) {
  const [p, setP] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const el = ref.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = rect.height - window.innerHeight;
      const scrolled = -rect.top;
      setP(Math.max(0, Math.min(1, scrolled / total)));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [ref]);
  return p;
}

function useInView(ref, threshold = 0.4) {
  const [v, setV] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) setV(true); },
      { threshold }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref, threshold]);
  return v;
}

function CountUp({ to, suffix = '', duration = 1800, decimals = 0 }) {
  const ref = useRef(null);
  const inView = useInView(ref, 0.5);
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!inView) return;
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const k = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - k, 3);
      setVal(to * eased);
      if (k < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [inView, to, duration]);
  return <span ref={ref}>{val.toFixed(decimals)}{suffix}</span>;
}

/* ============================================================
   Annotation pin
   ============================================================ */
function Anno({ n, top, left, right, title, children }) {
  return (
    <div className="anno-pin" style={{ top, left, right }}>
      {n}
      <div className="anno-pin__tip">
        <strong>{title}</strong>
        {children}
      </div>
    </div>
  );
}

/* ============================================================
   Hero
   ============================================================ */
function Hero({ variant }) {
  return (
    <section className="hero" data-screen-label="01 Hero" data-section="hero">
      <div className="hero__bg">
        <HeroBg variant={variant} />
        <div className="hero__vignette"></div>
      </div>
      <div className="hero__content">
        <div className="hero__eyebrow">
          <span className="line"></span>
          <span>Houston · Est. 2018 · Risk Strategy & Estate Planning</span>
        </div>
        <h1 className="hero__title">
          <span className="word">Protect</span>{' '}
          <span className="word">your</span>{' '}
          <span className="word italic">business.</span>{' '}
          <br/>
          <span className="word">Secure</span>{' '}
          <span className="word">your</span>{' '}
          <span className="word italic">legacy.</span>
        </h1>
        <p className="hero__sub">
          M+A is a Houston-based independent brokerage working with founders and operators who'd rather plan for what could happen than react when it does.
        </p>
        <Anno n="1" top="64px" right="80px" title="Hero load animation">
          Headline reveals word-by-word with stagger (0.15s) + blur-in. Background is a continuous canvas animation — variants: topographic / particles / geometry. Toggle in Tweaks.
        </Anno>
      </div>
      <div className="hero__meta">
        <div className="col">
          <span>01 / 08</span>
          <span>Hero — Mission</span>
        </div>
        <div className="hero__scroll-cue">
          <span>Scroll</span>
        </div>
        <div className="col" style={{textAlign:'right'}}>
          <span>Coverage</span>
          <span>Commercial · Personal · Life · Benefits</span>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Beyond Policies — pinned reveal
   ============================================================ */
const BP_PHRASES = [
  { eyebrow: 'Approach', title: ['Beyond ', 'policies.'], caption: 'Insurance is the floor — not the strategy. We start with the questions a policy can\'t answer.' },
  { eyebrow: 'Method', title: ['Long-term ', 'strategies.'], caption: 'Multi-decade planning across property, people, and personal balance sheet — modeled, not assumed.' },
  { eyebrow: 'Outcome', title: ['Always ', 'protected.'], caption: 'Ongoing reviews, real claim advocacy, and a broker team that knows your full picture.' },
];
function BeyondPolicies() {
  const ref = useRef(null);
  const p = useScrollProgress(ref);
  const idx = Math.min(2, Math.floor(p * 3));
  return (
    <section className="bp" id="approach" ref={ref} data-screen-label="02 Beyond Policies" data-section="approach">
      <div className="bp__sticky">
        <div className="bp__rail">
          <div className="bp__rail-fill" style={{ height: `${p * 100}%` }}></div>
        </div>
        <div className="bp__ticks">
          {[0,1,2].map(i => (
            <div key={i} className={`bp__tick ${i === idx ? 'active' : ''}`}></div>
          ))}
        </div>

        <div className="bp__phrases" style={{height: '50vh'}}>
          {BP_PHRASES.map((ph, i) => (
            <div key={i} className={`bp__phrase ${i === idx ? 'active' : ''}`}>
              <span>
                <em>{ph.title[0]}</em>{ph.title[1]}
              </span>
            </div>
          ))}
        </div>

        <div className="bp__caption" style={{ opacity: 1 }}>
          <div className="eyebrow" style={{marginBottom:'12px'}}>{BP_PHRASES[idx].eyebrow}</div>
          {BP_PHRASES[idx].caption}
        </div>

        <div className="bp__counter">
          <strong>0{idx+1}</strong> &nbsp;/&nbsp; 03 &nbsp;·&nbsp; OUR APPROACH
        </div>

        <Anno n="2" top="80px" left="80px" title="Pinned scroll reveal">
          Section pins for 300vh. Scroll progress drives a 3-step phrase swap with stagger fade + a vertical tick rail on the left.
        </Anno>
      </div>
    </section>
  );
}

/* ============================================================
   Services — horizontal scroll
   ============================================================ */
const SERVICES = [
  {
    num: '01', title: ['Commercial ', 'Property & Casualty'],
    desc: 'Coverage built around how your operation actually runs — supply chain, premises, fleet, professional liability, and the gaps standard programs miss.',
    bullets: ['Property & GL', 'Workers Comp', 'Cyber & E&O', 'Umbrella & Excess'],
    viz: 'shield',
  },
  {
    num: '02', title: ['Employee ', 'Benefits'],
    desc: 'Health, dental, vision, and ancillary plans designed for retention — with the renewal modeling and broker advocacy mid-market employers usually don\'t get.',
    bullets: ['Group Medical', 'Self-Funded Strategy', 'Retirement & 401(k)', 'Executive Carve-outs'],
    viz: 'people',
  },
  {
    num: '03', title: ['Private ', 'Client Services'],
    desc: 'Home, auto, and umbrella coverage for individuals and families at every stage — from a first home to a complex personal estate — paired with personal risk reviews most agents don’t bother running.',
    bullets: ['Home & Auto', 'Personal Umbrella & Excess', 'Boats & Recreational', 'Fine Art & Collections'],
    viz: 'private',
  },
  {
    num: '04', title: ['Life ', 'Insurance Strategy'],
    desc: 'Term, permanent, and key-person structures sized to actual obligations — funding buy-sell agreements, estate equalization, and generational transfer.',
    bullets: ['Buy-Sell Funding', 'Estate Equalization', 'Key-Person', 'Premium Financing'],
    viz: 'legacy',
  },
];
function Services() {
  const ref = useRef(null);
  const p = useScrollProgress(ref);
  const totalPanels = SERVICES.length;
  // Dwell mapping: each panel holds fully in frame, then slides to the next —
  // so headings arrive all the way in before the horizontal scroll advances.
  const seg = 1 / (totalPanels - 1);
  const segIdx = Math.min(totalPanels - 2, Math.floor(p / seg));
  const local = (p - segIdx * seg) / seg;      // 0..1 within this transition
  const dwell = 0.4;                           // fraction of each segment held
  const move = local <= dwell ? 0 : (local - dwell) / (1 - dwell);
  const eased = move * move * (3 - 2 * move);  // smoothstep
  const idxPos = segIdx + eased;               // fractional panel index 0..n-1
  const trackTranslate = idxPos * 75;          // each panel 75vw
  const activeIdx = Math.min(totalPanels - 1, Math.round(idxPos));
  return (
    <section className="svc" id="services" ref={ref} data-bg="light" data-screen-label="03 Services" data-section="services">
      <div className="svc__sticky">
        <div className="svc__head">
          <h2 className="serif">Four practices. <em>One coherent plan.</em></h2>
          <div className="meta">Section 03 / Services</div>
        </div>
        <div className="svc__track" style={{ transform: `translateX(-${trackTranslate}vw)` }}>
          {SERVICES.map((s, i) => (
            <article key={i} className="svc__panel">
              <div className="svc__numeral">{s.num}</div>
              <div className="svc__panel-inner">
                <div className="svc__copy">
                  <div className="svc__num-tag">{s.num} — Service</div>
                  <h3 className="svc__title">{s.title[0]}<em style={{fontStyle:'italic', color:'var(--accent-2)'}}>{s.title[1]}</em></h3>
                  <p className="svc__desc">{s.desc}</p>
                  <ul className="svc__bullets">
                    {s.bullets.map(b => <li key={b}>{b}</li>)}
                  </ul>
                  <a className="svc__cta" href="#contact">Speak with an advisor →</a>
                </div>
                <div className="svc__viz">
                  <SvcViz kind={s.viz} />
                </div>
              </div>
            </article>
          ))}
        </div>
        <div className="svc__progress">
          <span className="svc__progress-label">0{activeIdx + 1} / 0{totalPanels}</span>
          <div className="svc__progress-track">
            <div className="svc__progress-fill" style={{ width: `${((activeIdx + 1) / totalPanels) * 100}%` }}></div>
          </div>
          <span className="svc__progress-label">{SERVICES[activeIdx].title.join('').toUpperCase()}</span>
        </div>
        <Anno n="3" top="120px" right="40px" title="Horizontal scroll-lock">
          Section is 500vh tall. Vertical scroll translates a horizontal track of 4 panels (each 75vw). Numerals, progress bar, and viz swap in lockstep.
        </Anno>
      </div>
    </section>
  );
}

/* ============================================================
   Timeline — Startup to Succession (centerpiece)
   ============================================================ */
const STAGES = [
  { label: 'Startup', eyebrow: 'STAGE 01', titleA: 'Founded.', titleB: ' Lean. Exposed.',
    copy: 'First hires, first leases, first contracts. Most founders are uninsured against the events that can end them. We map exposures before they become claims.',
    services: ['Commercial GL', 'Cyber', 'Key-Person Life'],
    metrics: [['Headcount','1–25'],['Revenue','< $5M'],['Risk Profile','Concentrated'],['Horizon','12–36 mo']]
  },
  { label: 'Growth', eyebrow: 'STAGE 02', titleA: 'Hiring fast.', titleB: ' Surface widens.',
    copy: 'Benefits programs become a recruiting tool. Premises multiply. Cyber surface expands. We renegotiate annually and stop \"bundle drift\".',
    services: ['Employee Benefits', 'Property', 'D&O'],
    metrics: [['Headcount','25–100'],['Revenue','$5–25M'],['Risk Profile','Distributed'],['Horizon','3–5 yr']]
  },
  { label: 'Scaling', eyebrow: 'STAGE 03', titleA: 'Multi-state.', titleB: ' Multi-entity.',
    copy: 'Operations cross state lines. Cap table complexity rises. We bring a captive insurance review and self-funded benefits modeling into the mix.',
    services: ['Self-Funded Health', 'Captive Review', 'Excess Liability'],
    metrics: [['Headcount','100–500'],['Revenue','$25–150M'],['Risk Profile','Layered'],['Horizon','5–10 yr']]
  },
  { label: 'Legacy', eyebrow: 'STAGE 04', titleA: 'Personal balance ', titleB: 'sheet matters now.',
    copy: 'Founder net worth eclipses operating exposure. Private client coverage and estate-grade life insurance enter the picture alongside the business plan.',
    services: ['Private Client', 'Estate Life', 'Excess Personal'],
    metrics: [['Net Worth','$10M+'],['Entities','3–8'],['Risk Profile','Personal+Co.'],['Horizon','10–20 yr']]
  },
  { label: 'Succession', eyebrow: 'STAGE 05', titleA: 'Transfer.', titleB: ' Or exit. Or both.',
    copy: 'Buy-sell funded with permanent life. Estate equalization across heirs. Liquidity engineered to land at the right moment, not whenever the policy pays.',
    services: ['Buy-Sell Funding', 'Estate Equalization', 'Premium Financing'],
    metrics: [['Stage','Transition'],['Liquidity','Engineered'],['Risk Profile','Generational'],['Horizon','20+ yr']]
  },
];
function Timeline() {
  const ref = useRef(null);
  const p = useScrollProgress(ref);
  const total = STAGES.length;
  const float = p * (total - 1);
  const idx = Math.min(total - 1, Math.round(float));
  const railFill = (float / (total - 1)) * 100;
  const stage = STAGES[idx];

  return (
    <section className="tl" id="lifecycle" ref={ref} data-screen-label="04 Lifecycle Timeline" data-section="lifecycle">
      <div className="tl__sticky">
        <div className="tl__head">
          <h2 className="serif">From <em>startup</em> to <em>succession</em> — the same advisor at every stage.</h2>
          <div className="meta eyebrow">04 / Lifecycle</div>
        </div>

        <div className="tl__stage">
          <div className="tl__viz">
            <div className="tl__viz-left">
              <div className="tl__stage-eyebrow">{stage.eyebrow} · {stage.label.toUpperCase()}</div>
              <div className="tl__stage-title">{stage.titleA}<em>{stage.titleB}</em></div>
              <p className="tl__stage-copy">{stage.copy}</p>
              <div className="tl__stage-services">
                {stage.services.map(s => (
                  <span key={s} className="tl__service-chip active">{s}</span>
                ))}
              </div>
            </div>
            <div className="tl__viz-right">
              <div className="tl__diagram">
                <TimelineViz stage={idx} />
              </div>
            </div>
          </div>

          <div className="tl__rail-wrap">
            <div className="tl__rail"></div>
            <div className="tl__rail-fill" style={{ width: `calc(${railFill}% - 24px * ${railFill/100})` }}></div>
            <div className="tl__rail-marker" style={{ left: `calc(12px + ${railFill}% - 24px * ${railFill/100})` }}></div>
            <div className="tl__nodes">
              {STAGES.map((s, i) => (
                <div key={s.label} className={`tl__node ${i === idx ? 'active' : ''} ${i < idx ? 'passed' : ''}`}>
                  <div className="tl__node-dot"></div>
                  <div className="tl__node-label">{s.label}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="tl__metrics">
            {stage.metrics.map(([k,v]) => (
              <div key={k} className="tl__metric">
                <div className="tl__metric-label">{k}</div>
                <div className="tl__metric-value"><em>{v}</em></div>
              </div>
            ))}
          </div>
        </div>

        <Anno n="4" top="100px" right="40px" title="Lifecycle timeline (centerpiece)">
          Pins for 400vh. Scroll progress moves a marker across 5 nodes; copy, chips, metric block, and abstract risk-curve diagram cross-fade per stage.
        </Anno>
      </div>
    </section>
  );
}

/* ============================================================
   Why Choose Us — split scroll
   ============================================================ */
const DIFFS = [
  { tag: 'Continuity', num: 8, suffix: '', unit: 'years in the business', title: 'The firm is young. The team isn\'t.', copy: 'M+A is eight years in — and the brokers behind it have been placing coverage for far longer. You get the attention of a young firm backed by the judgment of a veteran team.' },
  { tag: 'Responsiveness', num: 24, suffix: 'hrs', unit: 'max response time — from a broker, not a call center', title: 'Small enough to answer the phone.', copy: 'No ticket queues, no account tiers. When something changes — a claim, an acquisition, a new driver — you talk to the team that built your program, same day.' },
  { tag: 'Advocacy', num: 100, suffix: '%', unit: 'of claims advocated, start to finish', title: 'We don\'t go quiet at claim time.', copy: 'A policy is only as good as the day it pays. We escalate, document, and litigate-adjacent on your behalf — that\'s where most brokers go quiet.' },
  { tag: 'Independence', num: 38, suffix: '+', unit: 'A-rated carriers, no quotas — and growing', title: 'Independent, by structure.', copy: 'We aren\'t captive to any carrier. The recommendation is the recommendation — not the one with the highest commission this quarter.' },
];
function WhyUs() {
  return (
    <section className="why" id="why" data-bg="light" data-screen-label="05 Why Choose Us" data-section="why">
      <div className="why__inner">
        <div className="why__pinned">
          <div className="eyebrow">05 — Why M+A</div>
          <h2 className="serif">We don't <em>sell policies.</em> We design <em>strategies.</em></h2>
          <p>The difference shows up in year three, not month one — when a renewal isn't a rubber stamp, when a claim isn't a fight, when a transition isn't a surprise.</p>
          <Anno n="5" top="-40px" right="-20px" title="Split-scroll counters">
            Left column pins. Right column scrolls 4 differentiators with parallax. Stat numerals count up via IntersectionObserver when each enters view.
          </Anno>
        </div>
        <div className="why__scroll">
          {DIFFS.map((d, i) => (
            <div key={i} className="why__diff">
              <div className="tag">0{i+1} — {d.tag}</div>
              <div className="why__num">
                <CountUp to={d.num} decimals={d.decimals || 0} suffix={d.suffix} />
                <span className="unit">{d.unit}</span>
              </div>
              <h3 className="serif">{d.title}</h3>
              <p>{d.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Insights magazine grid
   ============================================================ */
const ARTICLES = [
  { feat: true, cat: 'Strategy', date: 'Jul 2026', read: '8 min',
    title: 'When the policy is the business plan.',
    excerpt: 'How mid-market founders use permanent life insurance as a buy-sell, estate, and liquidity tool — without the seminar-room pitch.',
    img: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1200&q=80&auto=format'
  },
  { cat: 'Commercial', date: 'Jun 2026', read: '6 min',
    title: 'The renewal isn\'t a rubber stamp.',
    excerpt: 'The exposures that changed, the limits that didn\'t, and the questions your broker should be asking before you re-sign.',
    img: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=900&q=80&auto=format'
  },
  { cat: 'Private Client', date: 'May 2026', read: '4 min',
    title: 'Your umbrella has a hole in it.',
    excerpt: 'Why the standard $1M personal umbrella is a default, not a decision — and how to size excess liability to your actual balance sheet.',
    img: 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=900&q=80&auto=format'
  },
  { cat: 'Benefits', date: 'Apr 2026', read: '5 min',
    title: 'The self-funded inflection point.',
    excerpt: 'Most employers could move to self- or level-funded medical sooner than they think. Here\'s the math and the guardrails.',
    img: 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=900&q=80&auto=format'
  },
  { cat: 'Advocacy', date: 'Mar 2026', read: '7 min',
    title: 'What a broker does when the claim goes sideways.',
    excerpt: 'Documentation, escalation, and the carrier conversations that decide whether a claim actually pays.',
    img: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=900&q=80&auto=format'
  },
];
function Insights() {
  return (
    <section className="ins" id="insights" data-screen-label="06 Insights" data-section="insights">
      <div className="container" style={{marginBottom:'60px'}}>
        <div className="section-header">
          <div>
            <div className="eyebrow" style={{marginBottom:'16px'}}>06 — Insights & Resources</div>
            <h2 className="serif" style={{fontSize:'clamp(40px,5vw,72px)', fontWeight:300, letterSpacing:'-0.02em', maxWidth:'900px'}}>
              Field notes from the practice — written for operators, not search engines.
            </h2>
          </div>
          <div className="section-header__num">All articles →</div>
        </div>
      </div>
      <div className="ins__grid">
        {ARTICLES.map((a, i) => (
          <a key={i} href="#contact" className={`ins__card ${a.feat ? 'ins__card--feat' : ''}`} aria-label={`${a.title} — coming soon`}>
            <span className="ins__soon">Coming soon</span>
            <div className="ins__card-img">
              <img src={a.img} alt="" loading="lazy" />
            </div>
            <div className="ins__meta">
              <span className="cat">{a.cat}</span>
              <span className="dot"></span>
              <span>{a.date}</span>
              <span className="dot"></span>
              <span>{a.read}</span>
            </div>
            <h3 className="ins__title serif">{a.title}</h3>
            <p className="ins__excerpt">{a.excerpt}</p>
          </a>
        ))}
      </div>
      <Anno n="6" top="100px" right="100px" title="Magazine grid">
        Asymmetric 2-column grid: feature article spans 2 rows. Hover desaturates → color, headline underlines via background-size, image scales 1.05x.
      </Anno>
    </section>
  );
}

/* ============================================================
   Testimonials — scroll-driven carousel
   ============================================================ */
const TESTIMONIALS = [
  { name: 'Jessie L.', role: 'Founder & CEO, Industrial Services', meta: '· Houston · 9 yr client',
    quote: 'They <em>found a $400K gap</em> in our coverage during a routine review. Six months later we filed against it. Worth every dollar of that retainer.',
    img: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&q=80&auto=format'
  },
  { name: 'Rachel C.', role: 'CFO, Family Holding Co.', meta: '· The Woodlands · 6 yr client',
    quote: 'M+A doesn\'t walk in with a quote. They walk in with a <em>five-year plan</em>. That\'s a different category of advisor.',
    img: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&q=80&auto=format'
  },
  { name: 'John C.', role: 'Founder, Logistics & Distribution', meta: '· Galveston · 12 yr client',
    quote: 'We sold the company in 2024. The buy-sell M+A structured for us in 2018 made the negotiation <em>fundamentally simpler.</em>',
    img: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&q=80&auto=format'
  },
];
function Testimonials() {
  const ref = useRef(null);
  const p = useScrollProgress(ref);
  const idx = Math.min(2, Math.floor(p * 3));
  return (
    <section className="test" ref={ref} data-screen-label="07 Testimonials" data-section="testimonials">
      <div className="test__sticky">
        <div className={`test__bg bg-${idx}`}></div>
        <div className="test__inner">
          <div className="test__head">
            <h3>07 / Voices</h3>
            <div className="test__counter"><strong>0{idx+1}</strong> / 03 — {TESTIMONIALS[idx].name}</div>
          </div>
          <div className="test__quote-wrap">
            {TESTIMONIALS.map((t, i) => (
              <div key={i} className={`test__quote ${i === idx ? 'active' : ''}`}>
                <div className="test__quote-text serif"
                  dangerouslySetInnerHTML={{__html: t.quote}}
                />
                <div className="test__client">
                  <div className="test__client-portrait">
                    <img src={t.img} alt={t.name} />
                  </div>
                  <div className="test__client-name serif">{t.name}</div>
                  <div className="test__client-role">{t.role}</div>
                  <div className="test__client-meta">{t.meta}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="test__nav">
            {TESTIMONIALS.map((_, i) => (
              <div key={i} className={`test__nav-btn ${i === idx ? 'active' : ''} ${i < idx ? 'passed' : ''}`}></div>
            ))}
          </div>
        </div>
        <Anno n="7" top="80px" left="80px" title="Scroll-driven carousel">
          Section pins for 300vh. Each 100vh advances one testimonial. Background gradient, quote, and portrait cross-fade. No autoplay — user controls pace via scroll.
        </Anno>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ
   ============================================================ */
const FAQS = [
  { q: 'Do you only work with Houston-based clients?', a: 'No — our office is in Houston, but we place coverage across all 50 states for commercial and life clients, and we travel to clients where the planning warrants it. Roughly 40% of our book is outside Texas.' },
  { q: 'How are you compensated?', a: 'Predominantly through carrier-paid commissions, fully disclosed. For complex private-client and estate work we also use a flat advisory retainer so the recommendation is never weighted by commission.' },
  { q: 'How is M+A different from a national broker?', a: 'Scale without the conveyor belt. We place enough premium to negotiate at the carrier level, but every client has one named advisor — not an account team behind a portal. Senior people stay on the file.' },
  { q: 'Can you review my existing coverage before I switch?', a: 'Yes — and we recommend it. The first conversation is a no-cost coverage audit; if your current setup is sound, we\'ll tell you and you keep the report.' },
  { q: 'Do you handle claims directly?', a: 'We don\'t adjust claims, but we advocate through every step — documentation, escalation, carrier negotiation. Claims advocacy is the test of a broker; most fail it.' },
  { q: 'What size client do you typically work with?', a: 'Commercial: $2M to $500M revenue. Private client: everyday home and auto through complex personal estates. Life & estate: any size where the planning compounds — usually founders, professionals, and family offices.' },
];
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq section-light" data-bg="light" data-screen-label="07 FAQ" data-section="faq">
      <div className="faq__inner">
        <div className="faq__head">
          <div className="eyebrow" style={{marginBottom:'24px'}}>07 — FAQ</div>
          <h2 className="serif">Practical <em>questions,</em> answered.</h2>
        </div>
        <div className="faq__list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq__item ${open === i ? 'open' : ''}`}>
              <button className="faq__q serif" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq__q-icon"></span>
              </button>
              <div className="faq__a" style={{ maxHeight: open === i ? '300px' : '0' }}>
                <div className="faq__a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="faq__cta">
          <h3 className="serif">Still have <em>questions?</em></h3>
          <a className="faq__cta-btn" href="#contact">
            Talk to an advisor
            <span>→</span>
          </a>
        </div>
        <Anno n="8" top="40px" right="20px" title="Accordion w/ letter-spacing animation">
          Single-open accordion. Answer expands with max-height ease + a subtle letter-spacing tightening. Floating contact card lives at the section bottom.
        </Anno>
      </div>
    </section>
  );
}

/* ============================================================
   Contact / Final CTA
   ============================================================ */
function Contact() {
  return (
    <section className="cta" id="contact" data-screen-label="08 Contact" data-section="contact">
      <div className="cta__inner">
        <div className="eyebrow" style={{marginBottom:'40px'}}>08 — Begin</div>
        <h2 className="cta__title">Ready to <em>safeguard</em> your business <br/>and <em>your future?</em></h2>
        <div className="cta__paths">
          <button className="cta__path">
            <span className="cta__soon">Coming soon</span>
            <div className="cta__path-num"><strong>PATH 01</strong> — Consultation</div>
            <div className="cta__path-title serif">Schedule a Consultation</div>
            <div className="cta__path-desc">A 45-minute conversation with a senior advisor. No prep needed — bring your most pressing question and we'll work backward from there.</div>
            <div className="cta__path-arrow">Book a time <span>→</span></div>
          </button>
          <button className="cta__path">
            <span className="cta__soon">Coming soon</span>
            <div className="cta__path-num"><strong>PATH 02</strong> — Self-serve</div>
            <div className="cta__path-title serif">Identify My Risk Gaps</div>
            <div className="cta__path-desc">A 6-minute assessment. We'll send a written summary of where your current coverage is likely thin — no sales call required.</div>
            <div className="cta__path-arrow">Begin assessment <span>→</span></div>
          </button>
        </div>
        <div className="cta__contact">
          <div className="cta__contact-item">
            <div className="label">Office</div>
            <div className="value">Houston, TX</div>
          </div>
          <div className="cta__contact-item">
            <div className="label">Phone</div>
            <div className="value"><a href="tel:+13465539301">+1 (346) 553 · 9301</a></div>
          </div>
          <div className="cta__contact-item">
            <div className="label">Email</div>
            <div className="value"><a href="mailto:info@mariskmanagement.com">info@<br/>mariskmanagement.com</a></div>
          </div>
          <div className="cta__contact-item">
            <div className="label">Hours</div>
            <div className="value">Mon–Thu 9:00 — 17:00<br/>Fri 9:00 — 12:00 CT</div>
          </div>
        </div>
        <div className="cta__footer">
          <div className="left">
            <span className="dot"></span>
            <span>M+A Risk Management · Houston · Est. 2018</span>
          </div>
          <div>© 2026 · Licensed TX, OK, LA, NM, AR, FL · Privacy</div>
        </div>
        <Anno n="9" top="0" right="40px" title="Closing CTA">
          Two-path resolution: assisted (consultation) and self-serve (Typeform-style assessment). Editorial contact block — annual-report back-page energy.
        </Anno>
      </div>
    </section>
  );
}

window.MASections = { Hero, BeyondPolicies, Services, Timeline, WhyUs, Insights, Testimonials, FAQ, Contact };