// ══════════════════════════════════════════════════════════
// Section components - hero, sections, accountability, footer
// ══════════════════════════════════════════════════════════

function Header({ clientFirstName }){
  const brandLogo = window.__BRAND_LOGO;
  const brandFirm = window.__BRAND_FIRM;
  return (
    <header className="site-header">
      {brandLogo ? (
        <a href={window.__BRAND_THEME?.source_url || '#'} className="logo" style={{padding:'6px 12px'}}>
          <img src={brandLogo.url} alt={brandLogo.alt || brandFirm || ''} style={{maxHeight:40,display:'block'}}/>
        </a>
      ) : (
        <a href="#" className="logo logo-wordmark">
          <img src="assets/living-my-plan-logo.png" alt="Living My Plan" />
        </a>
      )}
      <span className="page-badge">{clientFirstName ? `${clientFirstName}'s service plan` : 'Your service plan'}</span>
    </header>
  );
}

function SetupBar({ onGenerate, shareUrl, onHide }){
  const [form, setForm] = useState({
    clientName: "", advisorName: "", advisorFirm: "",
    advisorEmail: "", advisorPhone: "",
    advisorBooking: "", advisorServicePage: ""
  });
  const [copied, setCopied] = useState(false);
  function update(k,v){ setForm(f=>({...f,[k]:v})); }
  function submit(e){
    e.preventDefault();
    onGenerate(form);
  }
  function copy(){
    navigator.clipboard.writeText(shareUrl).then(()=>{
      setCopied(true);
      setTimeout(()=>setCopied(false), 1800);
    });
  }
  return (
    <div className="setup-bar">
      <button 
        type="button"
        className="setup-hide-btn"
        onClick={onHide}
        title="Hide setup panel">
        ×
      </button>
      <div className="setup-inner">
        <div className="setup-intro">
          <div className="setup-label">Advisor setup</div>
          <div className="setup-title">Make this page yours before sharing</div>
          <div className="setup-desc">Fill in your details and the client's name, then generate a personalized link. Share it with one client at a time. The page becomes their system of action for the year ahead: what you'll do together, when, and how they can prepare.</div>
        </div>
        <form className="setup-form" onSubmit={submit}>
          <div className="setup-field">
            <label>Client name(s)</label>
            <input type="text" placeholder="Margaret & Daniel Whitcomb" required
              value={form.clientName} onChange={e=>update('clientName',e.target.value)}/>
          </div>
          <div className="setup-field">
            <label>Your name</label>
            <input type="text" placeholder="Jane Smith" required
              value={form.advisorName} onChange={e=>update('advisorName',e.target.value)}/>
          </div>
          <div className="setup-field">
            <label>Firm name</label>
            <input type="text" placeholder="Smith Financial" required
              value={form.advisorFirm} onChange={e=>update('advisorFirm',e.target.value)}/>
          </div>
          <div className="setup-field">
            <label>Your email</label>
            <input type="email" placeholder="jane@smithfinancial.ca" required
              value={form.advisorEmail} onChange={e=>update('advisorEmail',e.target.value)}/>
          </div>
          <div className="setup-field">
            <label>Your phone <span className="setup-field-hint">(optional)</span></label>
            <input type="tel" placeholder="(555) 123-4567"
              value={form.advisorPhone} onChange={e=>update('advisorPhone',e.target.value)}/>
          </div>
          <div className="setup-field">
            <label>Booking link <span className="setup-field-hint">(optional)</span></label>
            <input type="url" placeholder="https://calendly.com/jane"
              value={form.advisorBooking} onChange={e=>update('advisorBooking',e.target.value)}/>
          </div>
          <div className="setup-row">
            <button type="submit" className="setup-btn">Generate personalized page</button>
            {shareUrl && (
              <div className="setup-link-out">
                Shareable link for your client
                <br/>
                <code>{shareUrl}</code>
                <button type="button" className="setup-copy" onClick={copy} style={{marginLeft:10}}>
                  {copied?'Copied ✓':'Copy link'}
                </button>
              </div>
            )}
          </div>
        </form>
      </div>
    </div>
  );
}

function AdvisorCard({ advisor, onContact }){
  return (
    <div className="advisor-card">
      <div className="advisor-card-label">Your advisor</div>
      <div className="advisor-card-name">{advisor.name}</div>
      <div className="advisor-card-firm">{advisor.firm}</div>
      <div className="advisor-card-contact">
        <a href={`mailto:${advisor.email}?subject=My%20service%20plan`} onClick={()=>onContact('email')}>
          {Icon.mail}<span>{advisor.email}</span>
        </a>
        {advisor.phone && (
          <a href={`tel:${advisor.phone.replace(/[^0-9+]/g,'')}`} onClick={()=>onContact('phone')}>
            {Icon.phone}<span>{advisor.phone}</span>
          </a>
        )}
        {advisor.booking && (
          <a href={advisor.booking} target="_blank" rel="noopener" onClick={()=>onContact('booking')}>
            {Icon.cal}<span>Book a meeting</span>
          </a>
        )}
        {advisor.servicePage && (
          <a href={advisor.servicePage} target="_blank" rel="noopener" onClick={()=>onContact('service')}>
            {Icon.doc}<span>How we work with clients</span>
          </a>
        )}
      </div>
      <div className="advisor-card-note">This page is how we stay in step. It tells you what is coming, what is needed from you, and how to prepare. Built for you. Updated after every meeting.</div>
    </div>
  );
}

function Hero({ advisor, client, score, maxScore, progressDisplay, variant, onContact, stats }){
  const firstName = (client.name||'').split('&')[0].trim().split(' ')[0] || 'there';
  const innerCls = variant === 'quiet' ? 'quiet' : variant === 'stacked' ? 'stacked' : '';
  return (
    <section className="hero">
      <div className={`hero-inner ${innerCls}`}>
        <div>
          <span className="eyebrow">Your service plan · 2026</span>
          <h1>Welcome back, <span className="em">{firstName}</span>.<br/>Here is what we are doing together <span className="em">this year</span>.</h1>
          <span className="tagline">Prepared for every possibility.</span>
          <p className="sub">The right activities. The right moments. Everything you need to get the most out of working with {advisor.firm}.</p>

          {progressDisplay === 'ring' && (
            <div className="progress-ring-wrap" style={{marginTop:10}}>
              <ProgressRing score={score} max={maxScore}/>
              <div className="progress-copy">
                <div className="progress-copy-head">{stats.done} of {stats.total} activities complete</div>
                <div className="progress-copy-sub">{stats.overdue > 0 ? `${stats.overdue} item${stats.overdue>1?'s':''} overdue. Two are up next this month.` : stats.active > 0 ? `${stats.active} in progress. ${stats.upcoming} upcoming.` : 'You are on track for the year.'}</div>
              </div>
            </div>
          )}
          {progressDisplay === 'bar' && <ProgressBar score={score} max={maxScore}/>}
          {progressDisplay === 'numeric' && <ProgressNumeric score={score} max={maxScore}/>}

          <div className="hero-stats">
            <div>
              <div className="hero-stat-val">{stats.done}</div>
              <div className="hero-stat-label">Completed</div>
            </div>
            <div>
              <div className="hero-stat-val">{stats.active + stats.upcoming}</div>
              <div className="hero-stat-label">Coming up</div>
            </div>
            <div>
              <div className="hero-stat-val" style={{color:stats.overdue>0?'var(--status-overdue)':undefined}}>{stats.overdue}</div>
              <div className="hero-stat-label">Need attention</div>
            </div>
          </div>
        </div>
        {variant !== 'quiet' && <AdvisorCard advisor={advisor} onContact={onContact}/>}
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────
// HEALTH STRIP - overall plan health meter. Full-width strip
// below the hero showing a score 0-100, bucket label, counts
// of what's open, and a smooth animated fill bar.
// ──────────────────────────────────────────────────────────
function HealthStrip({ health }){
  const { total, bucket, label, openActivity, openCompliance, activityOverdueCount, compOverdue } = health;
  const [animated, setAnimated] = useState(total);

  // Animate number when total changes
  useEffect(() => {
    const from = animated;
    const to = total;
    if(from === to) return;
    const start = performance.now();
    const dur = 700;
    let raf;
    function tick(now){
      const t = Math.min(1, (now - start) / dur);
      const eased = 1 - Math.pow(1 - t, 3);
      setAnimated(Math.round(from + (to - from) * eased));
      if(t < 1) raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [total]);

  const overduePill = activityOverdueCount + compOverdue;

  // Copy per bucket
  const copy = {
    excellent: "Your file is in great shape. Keep the momentum.",
    ontrack:   "You're in good standing. A couple of items to chip away at.",
    attention: "A few items need your attention. Nothing urgent yet.",
    behind:    "Some items have slipped past due. Let's get current.",
  }[bucket];

  return (
    <section className={`health-strip health-${bucket}`} aria-live="polite">
      <div className="health-strip-inner">
        <div className="health-label">
          <div className="health-label-eyebrow">Service Plan Health</div>
          <div className="health-label-status">
            <span className="health-dot"></span>
            {label}
          </div>
        </div>
        <div className="health-meter">
          <div className="health-meter-track">
            <div className="health-meter-fill" style={{ width: `${Math.max(2, total)}%` }}></div>
            <div className="health-meter-ticks">
              <span style={{left:'25%'}}></span>
              <span style={{left:'50%'}}></span>
              <span style={{left:'75%'}}></span>
            </div>
          </div>
          <div className="health-score">
            <span className="health-score-num">{animated}</span>
            <span className="health-score-slash">/</span>
            <span className="health-score-max">100</span>
          </div>
        </div>
        <div className="health-summary">
          <p className="health-copy">{copy}</p>
          <div className="health-counts">
            {openActivity > 0 && (
              <span className="health-count-chip">
                <span className="health-count-n">{openActivity}</span>
                activit{openActivity===1?'y':'ies'} open
              </span>
            )}
            {openCompliance > 0 && (
              <span className="health-count-chip">
                <span className="health-count-n">{openCompliance}</span>
                compliance item{openCompliance===1?'':'s'} open
              </span>
            )}
            {overduePill > 0 && (
              <span className="health-count-chip overdue">
                <span className="health-count-n">{overduePill}</span>
                overdue
              </span>
            )}
            {openActivity === 0 && openCompliance === 0 && (
              <span className="health-count-chip clear">All clear</span>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function ActivitySection({ activities, completed, reminders, forceOverdue, overdueDates, onToggle, onToggleRemind, onOpenResource, viewMode }){
  const [filter, setFilter] = useState('all');
  const [expandedTile, setExpandedTile] = useState(null);
  const filtered = useMemo(() => {
    return activities.filter(a => {
      const s = deriveStatus(a, completed, forceOverdue);
      if(filter === 'all') return true;
      if(filter === 'upcoming') return s === 'upcoming' || s === 'active';
      if(filter === 'overdue') return s === 'overdue';
      if(filter === 'complete') return s === 'complete';
      return true;
    }).sort((a,b)=>a.dueSort-b.dueSort);
  }, [filter, completed, activities, forceOverdue]);

  const counts = useMemo(() => {
    const c = { all: activities.length, upcoming: 0, overdue: 0, complete: 0 };
    activities.forEach(a => {
      const s = deriveStatus(a, completed, forceOverdue);
      if(s === 'complete') c.complete++;
      else if(s === 'overdue') c.overdue++;
      else c.upcoming++;
    });
    return c;
  }, [completed, activities]);

  return (
    <section className="section" id="activities">
      <div className="section-head">
        <div className="section-head-l">
          <div className="section-label">Action · required activity</div>
          <h2 className="section-title">The work we do <span className="em">together</span> this year.</h2>
          <p className="section-desc">Each activity below is part of your service plan. Check items off as you complete them, turn on reminders for the ones you want nudges on, and open the details when you want to prepare ahead of a meeting.</p>
        </div>
        <div className="filter-tabs">
          <button className={`filter-tab ${filter==='all'?'active':''}`} onClick={()=>setFilter('all')}>All <span className="filter-tab-count">{counts.all}</span></button>
          <button className={`filter-tab ${filter==='upcoming'?'active':''}`} onClick={()=>setFilter('upcoming')}>Upcoming <span className="filter-tab-count">{counts.upcoming}</span></button>
          <button className={`filter-tab ${filter==='overdue'?'active':''}`} onClick={()=>setFilter('overdue')}>Overdue <span className="filter-tab-count">{counts.overdue}</span></button>
          <button className={`filter-tab ${filter==='complete'?'active':''}`} onClick={()=>setFilter('complete')}>Complete <span className="filter-tab-count">{counts.complete}</span></button>
        </div>
      </div>

      {counts.overdue > 0 && (
        <div className="overdue-alert" role="alert">
          <div className="overdue-alert-icon">
            <svg viewBox="0 0 24 24" style={{width:18,height:18,fill:'currentColor'}}>
              <path d="M12 2L1 21h22L12 2zm0 4.5L19.5 19h-15L12 6.5zM11 10v5h2v-5h-2zm0 6v2h2v-2h-2z"/>
            </svg>
          </div>
          <div className="overdue-alert-body">
            <div className="overdue-alert-title">{counts.overdue} {counts.overdue===1?'activity is':'activities are'} overdue</div>
            <div className="overdue-alert-desc">Behind schedule can mean missed tax windows, lapsed consents, or a KYC refresh that puts the account on hold. Start with the one with the longest delay.</div>
          </div>
          <button className="overdue-alert-cta" onClick={()=>setFilter('overdue')}>
            Show overdue →
          </button>
        </div>
      )}

      {viewMode === 'timeline' && (
        <div className="activity-timeline">
          {filtered.map(a => (
            <ActivityTimelineItem key={a.id} activity={a} completed={completed}
              reminderOn={reminders.has(a.id)} forceOverdue={forceOverdue} overdueDates={overdueDates}
              onToggle={onToggle} onToggleRemind={onToggleRemind} onOpenResource={onOpenResource}/>
          ))}
        </div>
      )}
      {viewMode === 'compact' && (
        <div className="activity-list">
          {filtered.map(a => (
            <ActivityCompact key={a.id} activity={a} completed={completed}
              forceOverdue={forceOverdue} overdueDates={overdueDates}
              onToggle={onToggle}/>
          ))}
        </div>
      )}
      {viewMode === 'cards' && (
        <div className="activity-list">
          {filtered.map(a => (
            <ActivityCard key={a.id} activity={a} completed={completed}
              reminderOn={reminders.has(a.id)} forceOverdue={forceOverdue} overdueDates={overdueDates}
              onToggle={onToggle} onToggleRemind={onToggleRemind} onOpenResource={onOpenResource}/>
          ))}
        </div>
      )}
      {viewMode !== 'timeline' && viewMode !== 'compact' && viewMode !== 'cards' && (
        <div className="activity-tile-grid">
          {filtered.map(a => (
            <ActivityTile key={a.id} activity={a} completed={completed}
              reminderOn={reminders.has(a.id)} forceOverdue={forceOverdue} overdueDates={overdueDates}
              onToggle={onToggle} onToggleRemind={onToggleRemind} onOpenResource={onOpenResource}
              expanded={expandedTile === a.id}
              onToggleExpand={(id) => setExpandedTile(expandedTile === id ? null : id)}/>
          ))}
        </div>
      )}
    </section>
  );
}

// ──────────────────────────────────────────────────────────
// COVERAGE MAP - tile grid showing every pillar of the client's
// financial picture, color-coded by status.
// ──────────────────────────────────────────────────────────
const CoverageIcons = {
  target: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>,
  wallet: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7a2 2 0 0 1 2-2h14v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/><path d="M3 7h16M17 13h2"/></svg>,
  chart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 20h18M6 16v-5M11 16V8M16 16v-3M21 16V4"/></svg>,
  sun: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/></svg>,
  receipt: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3z"/><path d="M9 8h6M9 12h6M9 16h4"/></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z"/></svg>,
  heart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20s-7-4.5-9-9.5A5 5 0 0 1 12 6a5 5 0 0 1 9 4.5C19 15.5 12 20 12 20z"/></svg>,
  briefcase: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V4h6v3M3 13h18"/></svg>,
  scroll: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3h12v15a3 3 0 0 1-3 3H6V3z"/><path d="M6 3a3 3 0 0 0-3 3v2h3M9 8h6M9 12h6M9 16h4"/></svg>,
  key: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="15" r="4"/><path d="M10.5 12.5L20 3M17 6l2 2M14 9l2 2"/></svg>,
  family: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="7" cy="8" r="3"/><circle cx="17" cy="8" r="3"/><circle cx="12" cy="16" r="2"/><path d="M3 21v-2a4 4 0 0 1 4-4M21 21v-2a4 4 0 0 0-4-4M9 21v-1a3 3 0 0 1 6 0v1"/></svg>,
  home: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-9z"/></svg>
};

const COVERAGE_STATUS_META = {
  "in-place":    { label: "In place",    color: "#10B981", order: 0 },
  "in-progress": { label: "In progress", color: "#F59E0B", order: 1 },
  "gap":         { label: "Gap",         color: "#EF4444", order: 2 },
  "not-started": { label: "Not started", color: "#64748B", order: 3 },
  "not-offered": { label: "Via partner", color: "#64748B", order: 4 }
};

function CoverageMap({ pillars, coverageByState, demoState, advisor, onContact }){
  const [selected, setSelected] = useState(null);
  const overrides = coverageByState[demoState] || coverageByState.midyear;

  const enriched = useMemo(() => pillars.map(p => {
    const o = overrides[p.id] || { status: "not-started", note: "", entries: [] };
    return { ...p, status: o.status, note: o.note, entries: o.entries || [] };
  }), [pillars, overrides]);

  const counts = useMemo(() => {
    const c = { "in-place":0, "in-progress":0, "gap":0, "not-started":0, "not-offered":0 };
    enriched.forEach(p => { c[p.status] = (c[p.status]||0) + 1; });
    return c;
  }, [enriched]);

  const total = enriched.length;
  const inPlace = counts["in-place"];
  const gaps = counts["gap"];

  return (
    <section className="section" id="coverage">
      <div className="section-head">
        <div className="section-head-l">
          <div className="section-label">Understanding · your financial picture</div>
          <h2 className="section-title">Every piece of your plan, <span className="em">in one view.</span></h2>
          <p className="section-desc">A complete picture of where you stand across the areas that make a plan actually work. Click any tile to see what it covers, what we have in place for you, and what is worth looking at together.</p>
        </div>
        <div className="coverage-summary">
          <div className="coverage-summary-num">{inPlace}<span>/{total}</span></div>
          <div className="coverage-summary-label">areas in place</div>
          {gaps > 0 && (
            <div className="coverage-summary-gap">
              <span className="coverage-summary-gap-dot"></span>
              {gaps} gap{gaps>1?'s':''} to review
            </div>
          )}
        </div>
      </div>

      <div className="coverage-legend">
        {Object.entries(COVERAGE_STATUS_META).map(([key, m]) => (
          <span key={key} className="coverage-legend-item">
            <span className="coverage-legend-dot" style={{background:m.color}}></span>
            {m.label}
          </span>
        ))}
      </div>

      <div className="coverage-grid">
        {enriched.map(p => {
          const meta = COVERAGE_STATUS_META[p.status] || COVERAGE_STATUS_META["not-started"];
          return (
            <button key={p.id} className={`coverage-tile status-${p.status}`}
              onClick={() => setSelected(p)}
              aria-label={`${p.title} - ${meta.label}`}>
              <div className="coverage-tile-top">
                <span className="coverage-tile-icon" style={{color:meta.color}}>
                  {CoverageIcons[p.glyph] || CoverageIcons.target}
                </span>
                <span className="coverage-tile-status" style={{color:meta.color,borderColor:meta.color}}>
                  <span className="coverage-tile-status-dot" style={{background:meta.color}}></span>
                  {meta.label}
                </span>
              </div>
              <div className="coverage-tile-title">
                {p.title}
                {p.tooltip && (
                  <EduTip term="Why this matters" size="sm">
                    {p.tooltip}
                  </EduTip>
                )}
              </div>
              <div className="coverage-tile-short">{p.short}</div>
              <div className="coverage-tile-note">{p.note}</div>
            </button>
          );
        })}
      </div>

      {selected && (
        <CoverageDetail pillar={selected}
          meta={COVERAGE_STATUS_META[selected.status]}
          advisor={advisor}
          onContact={onContact}
          onClose={() => setSelected(null)}/>
      )}
    </section>
  );
}

function CoverageDetail({ pillar, meta, advisor, onContact, onClose }){
  // Close on esc
  React.useEffect(() => {
    const h = e => { if(e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  const showAction = pillar.status === 'gap' || pillar.status === 'not-started' || pillar.status === 'in-progress';
  const hasEntries = pillar.entries && pillar.entries.length > 0;

  return (
    <div className="coverage-modal" onClick={onClose}>
      <div className="coverage-modal-card" onClick={e=>e.stopPropagation()}>
        <button className="coverage-modal-close" onClick={onClose} aria-label="Close">×</button>
        <div className="coverage-modal-head">
          <span className="coverage-modal-icon" style={{color:meta.color,borderColor:meta.color}}>
            {CoverageIcons[pillar.glyph] || CoverageIcons.target}
          </span>
          <div>
            <div className="coverage-modal-label">{meta.label}</div>
            <h3 className="coverage-modal-title">{pillar.title}</h3>
          </div>
        </div>
        <p className="coverage-modal-desc">{pillar.desc}</p>
        <div className="coverage-modal-status">
          <div className="coverage-modal-status-label">Your current status</div>
          <div className="coverage-modal-status-val" style={{color:meta.color}}>
            <span className="coverage-modal-status-dot" style={{background:meta.color}}></span>
            {pillar.note || meta.label}
          </div>
        </div>

        {hasEntries && (
          <div className="coverage-modal-entries">
            <div className="coverage-modal-entries-label">What you have in place</div>
            {pillar.entries.map((entry, idx) => (
              <div key={idx} className="coverage-modal-entry">
                <div className="coverage-modal-entry-head">
                  <strong>{entry.carrier}</strong>
                  <span className={`coverage-book-badge ${entry.on_book ? 'on-book' : 'off-book'}`}>
                    {entry.on_book ? 'On-book' : 'Off-book'}
                  </span>
                </div>
                {entry.policy_type && (
                  <div className="coverage-modal-entry-meta">{entry.policy_type}</div>
                )}
                {entry.last_reviewed && (
                  <div className="coverage-modal-entry-meta">Last reviewed {entry.last_reviewed}</div>
                )}
                {entry.portal_url && (
                  <a href={entry.portal_url} target="_blank" rel="noopener noreferrer" className="coverage-portal-link" onClick={e => e.stopPropagation()}>
                    Open {entry.carrier} client portal →
                  </a>
                )}
                {(pillar.id === 'life-insurance' || pillar.id === 'living-benefits' || pillar.id === 'group' || pillar.id === 'property') && entry.carrier && (
                  <div className="coverage-helper">
                    <strong>What you can do with {entry.carrier}:</strong>
                    <ul>
                      {pillar.id === 'life-insurance' && entry.carrier === 'Empire Life' && (
                        <>
                          <li><a href="https://www.empire.ca/about-us/contact-us" target="_blank" rel="noopener noreferrer">Update your address and banking</a></li>
                          <li><a href="https://www.empire.ca/faq/insurance-claims" target="_blank" rel="noopener noreferrer">Make a claim</a></li>
                          <li>Add coverage (<a href={`mailto:${advisor.email}`}>email {advisor.name.split(' ')[0]}</a> or call <a href={`tel:${advisor.phone}`}>{advisor.phone}</a>)</li>
                          <li>Term switch opportunity in 2028 (<a href={`mailto:${advisor.email}`}>email {advisor.name.split(' ')[0]}</a> or call <a href={`tel:${advisor.phone}`}>{advisor.phone}</a>)</li>
                        </>
                      )}
                      {pillar.id === 'life-insurance' && entry.carrier !== 'Empire Life' && (
                        <>
                          <li>Update banking for premium payments</li>
                          <li>Update your address</li>
                          <li>Make a claim</li>
                          <li>Add coverage</li>
                        </>
                      )}
                      {pillar.id === 'living-benefits' && (
                        <>
                          <li>Update banking for premium payments</li>
                          <li>Update your address</li>
                          <li>Make a claim</li>
                          <li>Review your coverage</li>
                        </>
                      )}
                      {pillar.id === 'group' && (
                        <>
                          <li>Update beneficiaries</li>
                          <li>Submit a claim</li>
                          <li>Add dependents</li>
                          <li>Review plan details</li>
                        </>
                      )}
                      {pillar.id === 'property' && (
                        <>
                          <li>Update property details</li>
                          <li>Make a claim</li>
                          <li>Add coverage</li>
                          <li>Review auto/home policies</li>
                        </>
                      )}
                    </ul>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

        {showAction && (
          <div className="coverage-modal-actions">
            <button className="coverage-modal-btn primary" onClick={()=>{ onContact('coverage-'+pillar.id); onClose(); }}>
              {pillar.action || `Talk to ${advisor.firm || 'your advisor'}`}
              <svg viewBox="0 0 24 24" style={{width:14,height:14,fill:'currentColor'}}><path d="M8 5l1.4 1.4L13.95 11H4v2h9.95L9.4 17.6 8 19l7-7z"/></svg>
            </button>
            <button className="coverage-modal-btn secondary" onClick={onClose}>Not right now</button>
          </div>
        )}
        {pillar.status === 'in-place' && (
          <div className="coverage-modal-in-place">
            ✓ This is handled. You can rest easy on this one.
          </div>
        )}
      </div>
    </div>
  );
}

function PhasesSection({ phases }){
  return (
    <section className="section">
      <div className="section-head">
        <div className="section-head-l">
          <div className="section-label">Understanding · how the year flows</div>
          <h2 className="section-title">Four phases. <span className="em">Every year.</span></h2>
          <p className="section-desc">The rhythm of our work together. Each phase is a block of the calendar with a clear purpose, so nothing important falls between the cracks.</p>
        </div>
      </div>
      <div className="phases">
        {phases.map(p => (
          <div className="phase" key={p.num}>
            <div className="phase-num">{p.num}</div>
            <div className="phase-label">{p.label}</div>
            <h4>{p.title}</h4>
            <p>{p.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function ResourcesSection({ resources, topics, viewed, onOpen, advisor, onContact, planStatus }){
  const [topic, setTopic] = useState('all');
  const filtered = topic === 'all' ? resources : resources.filter(r => r.topic === topic);
  const hasPlan = planStatus === 'ready' || planStatus === 'active';
  return (
    <section className="section">
      <div className="section-head">
        <div className="section-head-l">
          <div className="section-label">Awareness · your curated library</div>
          <h2 className="section-title">The reading that makes our <span className="em">meetings efficient.</span></h2>
          <p className="section-desc">Short videos, one-pagers, and plain-language explainers hand-picked for you. Each under five minutes. The more you read, the more time we spend on the decisions only you can make.</p>
        </div>
      </div>
      <div className="resource-filter">
        {topics.map(t => (
          <button key={t.key} className={`resource-chip ${topic===t.key?'active':''}`} onClick={()=>setTopic(t.key)}>{t.label}</button>
        ))}
      </div>
      <div className="resources-grid">
        {(topic === 'all' || topic === 'contannuity') && (
          <div className="resource resource-upsell" onClick={()=>onContact('contannuity-claim')}>
            <span className="resource-upsell-badge">Add-on · included for you</span>
            <span className="resource-kind" style={{color:'#F59E0B'}}>
              <svg viewBox="0 0 24 24" style={{width:14,height:14,fill:'currentColor'}}><path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 16.8l-6.2 4.5 2.4-7.4L2 9.4h7.6z"/></svg>
              Contannuity™
            </span>
            <h4>Claim your Contannuity™ plan</h4>
            <p>The continuity conversation most plans skip. {advisor.firm || 'Your advisor'} has opted you in - activate the planning process for the people you love. No additional cost to you.</p>
            <div className="resource-upsell-foot">
              <span className="resource-upsell-cta">Activate my plan →</span>
              <span className="resource-upsell-small">10 min intake · confidential</span>
            </div>
          </div>
        )}
        {filtered.map(r => (
          <div key={r.id} className={`resource ${viewed.has(r.id)?'resource-viewed':''}`} onClick={()=>onOpen(r)}>
            {r.isNew && !viewed.has(r.id) && <span className="resource-new">New</span>}
            <span className="resource-kind">
              {Icon[r.kindIcon] || Icon.doc}
              {r.kind}
            </span>
            <h4>{r.title}</h4>
            <p>{r.desc}</p>
            <div className="resource-meta">
              <span className="read-time">
                <svg viewBox="0 0 24 24" style={{width:12,height:12,fill:'currentColor'}}><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"/></svg>
                {r.readTime} · {r.date}
              </span>
              <span className="resource-arrow">→</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ConversationsSection({ conversations, advisor, onContact }){
  return (
    <section className="section">
      <div className="section-head">
        <div className="section-head-l">
          <div className="section-label">Accountability · conversations</div>
          <h2 className="section-title">What we just covered. <span className="em">What is next.</span></h2>
          <p className="section-desc">A short record of where we left off and what we agreed to do before we meet again.</p>
        </div>
      </div>
      <div className="conv-grid">
        <div className="conv past">
          <div className="conv-label">Last conversation</div>
          <h4>{conversations.past.title}</h4>
          <div className="conv-when">{conversations.past.when}</div>
          <div className="conv-agenda">Covered</div>
          <ul>{conversations.past.agenda.map((x,i)=><li key={i}>{x}</li>)}</ul>
          <div className="conv-note"><strong>Agreed:</strong> {conversations.past.note}</div>
          <div className="conv-attribution">
            <span className="conv-attribution-dot"></span>
            Meeting framework provided by <a href="https://continuum.com" target="_blank" rel="noopener">continuum.com</a>
          </div>
        </div>
        <div className="conv">
          <div className="conv-label">Next conversation</div>
          <h4>{conversations.next.title}</h4>
          <div className="conv-when">{conversations.next.when}</div>
          <div className="conv-agenda">Agenda</div>
          <ul>{conversations.next.agenda.map((x,i)=><li key={i}>{x}</li>)}</ul>
          <div className="conv-note" style={{marginBottom:16}}>{conversations.next.note}</div>
          <div className="conv-footer">
            {advisor.booking ? (
              <a href={advisor.booking} target="_blank" rel="noopener" className="conv-btn" onClick={()=>onContact('reschedule')}>{Icon.cal} Reschedule or confirm</a>
            ) : (
              <a href={`mailto:${advisor.email}?subject=My%20upcoming%20meeting`} className="conv-btn" onClick={()=>onContact('reschedule')}>{Icon.mail} Confirm the date</a>
            )}
            <button className="conv-btn secondary" onClick={()=>onContact('agenda-add')}>Add a topic to the agenda</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// Education glossary - short plain-language definitions shown
// on hover / tap from an EduTip beside the related term. Keys
// are compliance item ids and known acronyms.
const EDU_TIPS = {
  'kyc-current': { term: 'KYC', text: "Know Your Client. Canadian regulators require your advisor to keep an up-to-date record of your finances, goals, knowledge, and risk tolerance. Refreshed annually or when life changes." },
  'trusted-contact': { term: 'Trusted Contact Person', text: "Someone your advisor can reach out to if they're concerned about your wellbeing, can't reach you, or suspect financial exploitation. They make no decisions about your money. Required by CIRO since 2021." },
  'casl-consent': { term: 'CASL Consent', text: "Canada's Anti-Spam Legislation. You give your advisor permission to send you service updates, educational content, and planning reminders by email. You can withdraw consent at any time." },
  'privacy-disclosure': { term: 'Privacy & Disclosure', text: "A plain-English summary of what personal information your advisor collects, why, how it's stored, and who it may be shared with. Acknowledging it confirms you've read and understood." },
  'id-verification': { term: 'ID Verification', text: "Canadian anti-money-laundering rules require your advisor to confirm you are who you say you are. Usually a government photo ID on file, refreshed when it expires." },
  'annual-review': { term: 'Annual Review', text: "A formal yearly check-in - your plan, your portfolio, anything changing in your life. Documented and shared with you afterward." }
};

function ComplianceSection({ compliance, onToggle, advisor, onContact }){
  const items = compliance.items;
  const completedCount = items.filter(i => i.completed).length;
  const total = items.length;
  const allClear = completedCount === total;
  const pct = Math.round((completedCount / total) * 100);

  return (
    <section className="section">
      <div className="section-head">
        <div className="section-head-l">
          <div className="section-label">Legal, Regulatory and Compliance documentation requirements</div>
          <h2 className="section-title">Everything we need <span className="em">on record</span>, checked and current.</h2>
          <p className="section-desc">Regulation changes. Life changes. Your advisor is responsible for keeping a short list of confirmations up to date. This panel shows what's done, what's due, and lets you confirm items we need from you.</p>
        </div>
        <div className={`compliance-status ${allClear ? 'clear' : 'open'}`}>
          <div className="compliance-status-ring">
            <svg viewBox="0 0 48 48" width="48" height="48">
              <circle cx="24" cy="24" r="20" fill="none" stroke="rgba(255,255,255,.08)" strokeWidth="4"/>
              <circle cx="24" cy="24" r="20" fill="none" stroke="currentColor" strokeWidth="4"
                strokeLinecap="round"
                strokeDasharray={`${(pct/100)*125.66} 125.66`}
                transform="rotate(-90 24 24)"/>
            </svg>
            <span>{completedCount}/{total}</span>
          </div>
          <div>
            <div className="compliance-status-head">{allClear ? 'All clear' : `${total - completedCount} open`}</div>
            <div className="compliance-status-sub">{allClear ? 'Your file is current.' : 'Items waiting on you or your advisor.'}</div>
          </div>
        </div>
      </div>

      <div className="compliance-grid">
        {items.map(item => (
          <div key={item.id} className={`compliance-tile ${item.completed ? 'done' : ''} ${item.overdue ? 'overdue' : ''} ${item.owner === 'advisor' ? 'advisor-owned' : ''}`}>
            <div className="compliance-tile-top">
              <button className={`compliance-check ${item.completed ? 'checked' : ''}`}
                onClick={(e)=>onToggle(item.id, e)}
                aria-label={item.completed ? 'Mark incomplete' : 'Mark complete'}>
                {item.completed && (
                  <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
                )}
              </button>
              <span className={`compliance-owner ${item.owner}`}>
                {item.owner === 'advisor' ? 'Advisor' : 'You sign'}
              </span>
            </div>
            <h4 className="compliance-tile-title">
              {item.title}
              {EDU_TIPS[item.id] && (
                <EduTip term={EDU_TIPS[item.id].term} size="sm">
                  {EDU_TIPS[item.id].text}
                </EduTip>
              )}
            </h4>
            <div className="compliance-tile-meta">
              {item.completed ? (
                <>
                  <span className="compliance-meta-pill done">Done {item.completedDate}</span>
                  {item.renewsOn && <span className="compliance-meta-muted">Renews {item.renewsOn}</span>}
                </>
              ) : (
                <span className={`compliance-meta-pill ${item.overdue ? 'overdue' : 'due'}`}>
                  {item.overdue ? 'Overdue' : 'Due'} {item.dueDate}
                </span>
              )}
            </div>
          </div>
        ))}
      </div>

      <div className="compliance-footer">
        <span>Questions about any of these? Your advisor has the original copy on file.</span>
        <button className="compliance-foot-btn" onClick={()=>onContact('compliance-question')}>
          {Icon.mail} Email {advisor.name.split(' ')[0]}
        </button>
      </div>
    </section>
  );
}

function PartnerToolsSection({ advisor, onContact, planStatus = 'ready' }){
  return (
    <section className="section">
      <div className="section-head">
        <div className="section-head-l">
          <div className="section-label">Action · your secure workspace</div>
          <h2 className="section-title">Two places we meet you <span className="em">between conversations</span>.</h2>
          <p className="section-desc">Your full financial plan and secure document vault live in dedicated workspaces. We surface them here so you always know where to go.</p>
        </div>
      </div>

      <div className="partner-tools">
        {/* Laylah Client Space */}
        <div className="partner-tool laylah">
          <div className="partner-tool-head">
            <div className="partner-tool-brand">
              <div className="partner-tool-mark laylah-mark">L</div>
              <div>
                <div className="partner-tool-name">Laylah Client Space</div>
                <div className="partner-tool-tag">Powered by Laylah · Secure client portal</div>
              </div>
            </div>
            <span className="partner-tool-pill pill-active">Connected</span>
          </div>
          <p className="partner-tool-desc">Your private, secure workspace. Send messages, share documents, see what's in your file, and book meetings. Bank-level security, single sign-on from here.</p>
          <ul className="partner-tool-list">
            <li>Secure messaging with your advisor</li>
            <li>Upload tax slips, statements, and ID</li>
            <li>Book or reschedule meetings</li>
            <li>Download signed documents</li>
          </ul>
          <div className="partner-tool-cta">
            <button className="partner-tool-btn primary"
              onClick={()=>{ onContact('laylah-login'); }}>
              {Icon.shield || Icon.doc} Log in to Laylah
            </button>
            <button className="partner-tool-btn ghost"
              onClick={()=>onContact('laylah-help')}>First time? Set up access</button>
          </div>
        </div>

        {/* Friedmann Financial Plan */}
        <div className="partner-tool friedmann">
          <div className="partner-tool-head">
            <div className="partner-tool-brand">
              <div className="partner-tool-mark friedmann-mark">ƒ</div>
              <div>
                <div className="partner-tool-name">Your Financial Plan</div>
                <div className="partner-tool-tag">Built with Friedmann.ai · Interactive plan</div>
              </div>
            </div>
            <span className={`partner-tool-pill ${planStatus === 'ready' ? 'pill-active' : planStatus === 'updating' ? 'pill-pending' : 'pill-none'}`}>
              {planStatus === 'ready' ? 'Ready to view' : planStatus === 'updating' ? 'Refreshing' : 'Not requested'}
            </span>
          </div>
          <p className="partner-tool-desc">Your plan is an interactive model, not a PDF. Open it to see projections, run scenarios, and explore what changes if your income, retirement date, or markets shift.</p>
          <ul className="partner-tool-list">
            <li>Retirement income projections</li>
            <li>Tax modelling across accounts</li>
            <li>Monte Carlo outcomes, visualized</li>
            <li>Run your own "what if" scenarios</li>
          </ul>
          <div className="partner-tool-cta">
            {planStatus === 'ready' ? (
              <>
                <button className="partner-tool-btn primary"
                  onClick={()=>onContact('friedmann-view')}>
                  {Icon.doc} View my plan
                </button>
                <span className="partner-tool-meta">Last refreshed March 18, 2026</span>
              </>
            ) : planStatus === 'updating' ? (
              <>
                <button className="partner-tool-btn ghost" disabled>
                  Plan refreshing…
                </button>
                <span className="partner-tool-meta">Your advisor is updating after our last meeting. Usually ready within 48 hours.</span>
              </>
            ) : (
              <>
                <button className="partner-tool-btn primary"
                  onClick={()=>onContact('friedmann-request')}>
                  Request my plan
                </button>
                <span className="partner-tool-meta">Your advisor will be notified and will prepare it for your next meeting.</span>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function AccountabilitySection({ onCommit, committed }){
  const [date, setDate] = useState('2026-04-30');
  const [activity, setActivity] = useState('contannuity-build');
  const [success, setSuccess] = useState(committed);
  useEffect(()=>{ setSuccess(committed); }, [committed]);
  function submit(e){
    e.preventDefault();
    setSuccess(true);
    onCommit({ activityId: activity, date });
  }
  return (
    <div className="accountability">
      <div className="accountability-head">
        <div className="accountability-icon">✓</div>
        <h3>Make it <span className="em">real</span>. Commit to a date.</h3>
      </div>
      <p>Pick one item below and set the date you will finish it by. We will send you a gentle reminder the week of, and your advisor will see your commitment so they can support it in conversation. Opt-in only. No spam.</p>
      {!success ? (
        <form className="accountability-form" onSubmit={submit}>
          <div className="acc-field">
            <label>I will complete</label>
            <select value={activity} onChange={e=>setActivity(e.target.value)}>
              {ACTIVITIES.filter(a=>!a.overdue || a.status!=='complete').map(a=>(
                <option key={a.id} value={a.id}>{a.title}</option>
              ))}
            </select>
          </div>
          <div className="acc-field">
            <label>By this date</label>
            <input type="date" value={date} onChange={e=>setDate(e.target.value)}/>
          </div>
          <button type="submit" className="acc-submit">Set my reminder</button>
        </form>
      ) : (
        <div className="acc-success">
          <svg viewBox="0 0 24 24" style={{width:18,height:18,fill:'currentColor'}}><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
          Your commitment is set. We will remind you the week of the date you chose, and your advisor has been notified.
        </div>
      )}
    </div>
  );
}

function CTABlock({ advisor, onContact }){
  return (
    <div className="cta-advisor" id="talk">
      <div className="cta-advisor-label">When something is on your mind</div>
      <h3>Questions, life changes, <span className="em">curveballs</span>?</h3>
      <p className="cta-lede">Reach out anytime. You do not have to wait for a scheduled meeting to talk to {advisor.firm}. That is what we are here for.</p>
      <div className="cta-btns">
        <button className="cta-advisor-btn" onClick={()=>{window.location.href = `mailto:${advisor.email}?subject=A%20question%20about%20my%20service%20plan`; onContact('email');}}>
          {Icon.mail} Email {advisor.name.split(' ')[0]}
        </button>
        {advisor.phone && (
          <button className="cta-advisor-btn secondary" onClick={()=>{window.location.href = `tel:${advisor.phone.replace(/[^0-9+]/g,'')}`; onContact('phone');}}>
            {Icon.phone} Call the office
          </button>
        )}
        {advisor.booking && (
          <button className="cta-advisor-btn" onClick={()=>{window.open(advisor.booking,'_blank'); onContact('booking');}}>
            {Icon.cal} Book a meeting
          </button>
        )}
      </div>
    </div>
  );
}

function SiteFooter(){
  return (
    <footer className="site-footer">
      <div className="site-footer-inner">
        <div className="footer-brand">
          <span className="footer-brand-pill"><span className="logo-mark">Living My Plan</span></span>
          <span>A client service platform from 49Maple Inc.</span>
        </div>
        <div className="footer-tagline">Your year with your advisor.</div>
        <div className="footer-legal-links">
          <a href="https://etcprojects.com/privacy-policy.html" target="_blank" rel="noopener">Privacy Policy</a>
          <span className="footer-legal-sep">·</span>
          <a href="https://etcprojects.com/terms-and-conditions.html" target="_blank" rel="noopener">Terms and Conditions</a>
          <span className="footer-legal-sep">·</span>
          <a href="https://etcprojects.com/ai-disclaimer.html" target="_blank" rel="noopener">AI Disclaimer</a>
        </div>
        <div className="copyright">© 2026 49Maple Inc. o/a Etcetera Projects. All rights reserved. Powered by highly efficient people.</div>
        <div className="trademark">LIVING MY PLAN™ and CONTANNUITY™ are trademarks of 49Maple Inc.</div>
        <div className="disclaimer">This page is an educational resource provided by your advisor. It does not constitute legal, tax, or financial advice. All questions about your specific situation should be directed to your advisor.</div>
      </div>
    </footer>
  );
}

function TweaksPanel({ open, tweaks, setTweak, onClose }){
  const pillGroup = (label, key, options) => (
    <div className="tweak-group">
      <label className="tweak-label">{label}</label>
      <div className="tweak-pills">
        {options.map(o => (
          <button key={o.value} className={`tweak-pill ${tweaks[key]===o.value?'active':''}`}
            onClick={()=>setTweak(key,o.value)}>{o.label}</button>
        ))}
      </div>
    </div>
  );
  return (
    <div className={`tweaks-panel ${open?'open':''}`}>
      <div className="tweaks-header">
        <div className="tweaks-title">Tweaks</div>
        <button className="tweaks-close" onClick={onClose}>×</button>
      </div>
      <div className="tweaks-body">
        {pillGroup('Demo state','demoState',[
          {value:'pristine',label:'Pristine'},
          {value:'midyear',label:'Mid-year'},
          {value:'overdue',label:'Overdue'},
          {value:'nearcomplete',label:'Near complete'}
        ])}
        {pillGroup('Activity view','activityView',[
          {value:'tiles',label:'Tiles'},
          {value:'cards',label:'Cards'},
          {value:'timeline',label:'Timeline'},
          {value:'compact',label:'Compact'}
        ])}
        {pillGroup('Progress display','progressDisplay',[
          {value:'ring',label:'Ring'},
          {value:'bar',label:'Bar'},
          {value:'numeric',label:'Numeric'}
        ])}
        {pillGroup('Hero variant','heroVariant',[
          {value:'split',label:'Split'},
          {value:'stacked',label:'Stacked'},
          {value:'quiet',label:'Quiet'}
        ])}
        {pillGroup('Accent colour','accent',[
          {value:'amber',label:'Amber'},
          {value:'teal',label:'Teal'}
        ])}
        {pillGroup('Financial plan status','planStatus',[
          {value:'ready',label:'Ready'},
          {value:'updating',label:'Updating'},
          {value:'none',label:'Not yet'}
        ])}
        <div className="tweak-group">
          <div className="tweak-toggle-row">
            <label className="tweak-label" style={{marginBottom:0}}>Show accountability opt-in</label>
            <input type="checkbox" className="tweak-toggle"
              checked={tweaks.showAccountability}
              onChange={e=>setTweak('showAccountability',e.target.checked)}/>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Header, SetupBar, Hero, ActivitySection, PhasesSection,
  ResourcesSection, ConversationsSection, ComplianceSection,
  PartnerToolsSection, AccountabilitySection, CoverageMap,
  CTABlock, SiteFooter, TweaksPanel
});