// Dedicated product landing pages for Circle, Slack, and Synchronize Core.

function DetailLink({ route, go, children, className = '' }) {
  return (
    <a href={`#/${route}`} className={className} onClick={e => { e.preventDefault(); go(route); }}>
      {children}
    </a>
  );
}

function DetailHero({ label, title, body, note, visual, tone, go, cta }) {
  return (
    <section className={`detail-hero detail-hero--${tone}`}>
      <div className="page detail-hero-grid">
        <div className="detail-hero-copy">
          <div className="page-intro-label">{label}</div>
          <h1 className="display-1">{title}</h1>
          <p>{body}</p>
          {note && <div className="detail-hero-note">{note}</div>}
          <div className="detail-hero-actions">
            <DetailLink route="get-started" go={go} className="btn btn-primary btn-lg">{cta} →</DetailLink>
            <DetailLink route="how-it-works" go={go} className="btn btn-soft btn-lg">See how Synchronize works</DetailLink>
          </div>
        </div>
        <div className="detail-hero-visual">{visual}</div>
      </div>
    </section>
  );
}

function DetailSectionHead({ eyebrow, title, body, light = false }) {
  return (
    <div className={`detail-section-head${light ? ' detail-section-head--light' : ''} reveal`}>
      <div className="eyebrow">{eyebrow}</div>
      <h2 className="display-2">{title}</h2>
      {body && <p>{body}</p>}
    </div>
  );
}

function DetailCards({ items, light = false }) {
  return (
    <div className={`detail-card-grid${light ? ' detail-card-grid--light' : ''}`}>
      {items.map((item, index) => (
        <article className="detail-card reveal" key={item.title}>
          <span>{String(index + 1).padStart(2, '0')}</span>
          <h3>{item.title}</h3>
          <p>{item.body}</p>
        </article>
      ))}
    </div>
  );
}

function DetailProcess({ steps, light = false, service = false }) {
  return (
    <div className={`detail-process${light ? ' detail-process--light' : ''}${service ? ' detail-process--service' : ''}`}>
      {steps.map((step, index) => (
        <article className="detail-process-step reveal" key={step.title}>
          <div>{service ? '✓' : String(index + 1).padStart(2, '0')}</div>
          <h3>{step.title}</h3>
          <p>{step.body}</p>
        </article>
      ))}
    </div>
  );
}

function FeatureIcon({ kind, compact = false }) {
  const blue = '#4242F0';
  const green = '#15996C';
  const coral = '#FF6A3D';
  const className = `detail-feature-icon detail-feature-icon--${kind}${compact ? ' detail-feature-icon--compact' : ''}`;
  const commonProps = {
    viewBox: '0 0 48 48',
    fill: 'none',
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    'aria-hidden': true,
  };
  const renderSvg = children => (
    <span className={`${className} detail-feature-icon--svg`} aria-hidden="true">
      <svg {...commonProps}>{children}</svg>
    </span>
  );

  if (kind === 'email-post') {
    return renderSvg(<>
      <rect x="8" y="12" width="29" height="25" rx="5" fill="#fff" stroke={blue} strokeWidth="2.2"/>
      <path d="m9.8 15 12.7 10L35.2 15" stroke={blue} strokeWidth="2.1"/>
      <circle cx="35.25" cy="8.5" r="6.4" fill="#fff" stroke={green} strokeWidth="1.8"/>
      <path d="M35.25 5.4v6.2M32.15 8.5h6.2" stroke={green} strokeWidth="1.8"/>
    </>);
  }

  if (kind === 'email-reply') {
    return renderSvg(<>
      <rect x="10" y="21" width="30" height="19" rx="4.5" fill="#fff" stroke={blue} strokeWidth="2.3"/>
      <path d="m12.5 24 12.5 9 12.5-9" stroke={blue} strokeWidth="2.1"/>
      <path d="M40 29v-3c0-9.7-6.3-15-17-15H8" stroke={green} strokeWidth="3.7"/>
      <path d="m12.5 4.5-7 6.5 7 6.5Z" fill={green}/>
    </>);
  }

  if (kind === 'digest-weekly') {
    return renderSvg(<>
      <rect x="9" y="8" width="30" height="32" rx="5" fill="#fff" stroke={blue} strokeWidth="2.2"/>
      <path d="M10 17h28" stroke={blue} strokeWidth="2.2"/>
      <path d="M16 5v7M32 5v7" stroke={green} strokeWidth="2.4"/>
      <text x="24" y="33" fill={blue} fontSize="15" fontWeight="800" textAnchor="middle" fontFamily="Arial, sans-serif">7</text>
    </>);
  }

  if (kind === 'digest-biweekly') {
    return renderSvg(<>
      <rect x="6.5" y="11" width="28" height="29" rx="4.5" fill="#F1F1FF" stroke="#A9A9DE" strokeWidth="1.7" transform="rotate(-5 20.5 25.5)"/>
      <rect x="12" y="7" width="29" height="31" rx="5" fill="#fff" stroke={blue} strokeWidth="2.2"/>
      <path d="M13 16h27M19 4.5v7M34 4.5v7" stroke={green} strokeWidth="2.3"/>
      <text x="26.5" y="31.5" fill={blue} fontSize="13" fontWeight="800" textAnchor="middle" fontFamily="Arial, sans-serif">14</text>
    </>);
  }

  if (kind === 'digest-daily') {
    return renderSvg(<>
      <circle cx="24" cy="20" r="8.5" fill="#FFF7E8" stroke={coral} strokeWidth="2.2"/>
      <path d="M24 6V3.5M14.1 10.1l-2-2M33.9 10.1l2-2M9.8 20H6.5M41.5 20h-3.3" stroke={coral} strokeWidth="2.2"/>
      <path d="M8 34h32M11 34a13 13 0 0 1 26 0" fill="#fff" stroke={blue} strokeWidth="2.3"/>
      <path d="M14 39h20" stroke={green} strokeWidth="2.5"/>
    </>);
  }

  if (kind === 'email-domain') {
    return renderSvg(<>
      <circle cx="23" cy="24" r="15" fill="#fff" stroke={blue} strokeWidth="2.2"/>
      <path d="M8 24h30M23 9c4.5 4.1 6.2 9.1 6.2 15S27.5 34.9 23 39M23 9c-4.5 4.1-6.2 9.1-6.2 15S18.5 34.9 23 39" stroke={blue} strokeWidth="1.7"/>
      <path d="M10.8 16.5h24.4M10.8 31.5h24.4" stroke="#A9A9DE" strokeWidth="1.4"/>
      <circle cx="37" cy="35" r="7" fill={green} stroke="#fff" strokeWidth="2"/>
      <path d="M39.8 35.2c0 2.1-1 3.4-2.5 3.4-2.2 0-3.7-1.5-3.7-3.7 0-2.5 1.7-4.2 4.1-4.2 2.6 0 4.4 1.7 4.4 4.4" stroke="#fff" strokeWidth="1.2"/>
    </>);
  }

  if (kind === 'email-realtime') {
    return renderSvg(<>
      <circle cx="22" cy="23" r="15" fill="#fff" stroke={blue} strokeWidth="2.3"/>
      <path d="M22 5V2.5M14.5 5h15" stroke={blue} strokeWidth="2.2"/>
      <path d="M22 12v11l7 4" stroke="#A9A9DE" strokeWidth="2.1"/>
      <path d="M24.5 11.5 17 24h6l-2 10.5L30.5 20h-6l0-8.5Z" fill={coral}/>
      <rect x="29" y="29" width="15" height="11" rx="2.5" fill="#fff" stroke={green} strokeWidth="2"/>
      <path d="m31 31.5 5.5 4 5.5-4" stroke={green} strokeWidth="1.6"/>
    </>);
  }

  if (kind === 'email-broadcast') {
    return renderSvg(<>
      <path d="M8 21h7l18-9v24l-18-9H8a3 3 0 0 1-3-3 3 3 0 0 1 3-3Z" fill="#fff" stroke={blue} strokeWidth="2.3"/>
      <path d="m17 20 6 4-6 4" stroke={green} strokeWidth="1.9"/>
      <path d="M14.5 28.5 18 40h7l-3-9" fill="#fff" stroke={blue} strokeWidth="2.1"/>
      <path d="M38 18c2 1.6 3 3.6 3 6s-1 4.4-3 6M41 13c3.5 2.9 5 6.6 5 11" stroke={coral} strokeWidth="2"/>
    </>);
  }

  if (kind === 'sso') {
    return renderSvg(<>
      <rect x="6" y="5" width="36" height="38" rx="5" fill="#fff" stroke={blue} strokeWidth="2.2"/>
      <path d="M7 13.5h34" stroke={blue} strokeWidth="2"/>
      <circle cx="11" cy="9.3" r="1.2" fill={coral}/>
      <circle cx="15" cy="9.3" r="1.2" fill="#B8B8D8"/>
      <circle cx="19" cy="9.3" r="1.2" fill="#B8B8D8"/>
      <circle cx="15" cy="22" r="4" fill="#D9F4EA" stroke={green} strokeWidth="1.5"/>
      <path d="M10.5 29c.9-2.8 2.4-4.2 4.5-4.2s3.6 1.4 4.5 4.2" stroke={green} strokeWidth="1.6"/>
      <path d="M23 20h12M23 25h10" stroke="#A9A9CB" strokeWidth="2"/>
      <rect x="11" y="33" width="26" height="6" rx="3" fill={blue}/>
      <path d="M21 36h7M25.5 33.7 28 36l-2.5 2.3" stroke="#fff" strokeWidth="1.6"/>
    </>);
  }

  if (kind === 'support') {
    return renderSvg(<>
      <path d="M10 11h28a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H25l-8 6v-6h-7a5 5 0 0 1-5-5V16a5 5 0 0 1 5-5Z" fill="#fff" stroke={blue} strokeWidth="2.2"/>
      <path d="m11 17 13 9 13-9" stroke={green} strokeWidth="2"/>
      <circle cx="37" cy="34" r="6.5" fill={green} stroke="#fff" strokeWidth="2"/>
      <path d="M35.3 32.3a1.9 1.9 0 1 1 2.5 1.8c-.8.3-1 .8-1 1.4M36.8 38h.01" stroke="#fff" strokeWidth="1.5"/>
    </>);
  }

  if (kind === 'priority-support') {
    return renderSvg(<>
      <path d="M9 25v-3a15 15 0 0 1 30 0v3" stroke={blue} strokeWidth="2.5"/>
      <rect x="5" y="23" width="8" height="14" rx="4" fill="#fff" stroke={blue} strokeWidth="2.2"/>
      <rect x="35" y="23" width="8" height="14" rx="4" fill="#fff" stroke={blue} strokeWidth="2.2"/>
      <path d="M39 37c0 4-3 6-8 6h-4" stroke={blue} strokeWidth="2.2"/>
      <circle cx="24" cy="14" r="8" fill="#fff" stroke={coral} strokeWidth="2"/>
      <path d="m24 8.5 1.5 3.3 3.6.4-2.7 2.5.8 3.6-3.2-1.8-3.2 1.8.8-3.6-2.7-2.5 3.6-.4L24 8.5Z" fill={coral}/>
    </>);
  }

  if (kind === 'white-glove') {
    return renderSvg(<>
      <g transform="translate(6.6 0) scale(.688 1)">
        <path d="M15 39v-5c-3.6-2.8-6.1-5.8-8-9.4l-3.4-6.5a4.1 4.1 0 0 1 7.2-3.9L15 21V10a4 4 0 0 1 8 0v11V6.5a4 4 0 0 1 8 0V21V8.5a4 4 0 0 1 8 0V22v-9a4 4 0 0 1 8 0v14c0 4.4-.9 8.4-2.7 12H15Z" fill="#fff" stroke={blue} strokeWidth="2.2"/>
        <path d="M23 21V10M31 21V6.5M39 22V8.5" stroke={blue} strokeWidth="2.2"/>
        <path d="M23 28v8M30 26v11" stroke="#A9A9CB" strokeWidth="2.2"/>
        <path d="M14 39h31v7H14z" fill="#F7F7FF" stroke={blue} strokeWidth="2.2"/>
        <path d="M16.5 41.5h26" stroke={green} strokeWidth="1.8"/>
      </g>
    </>);
  }

  if (kind === 'surfaces') {
    return renderSvg(<>
      <path d="M27 7.5h13v14" stroke={blue} strokeWidth="2.25"/>
      <path d="M35.8 21.5h8.4L40 26Z" fill={blue}/>
      <path d="M22.5 40H8v-9.5" stroke={green} strokeWidth="2.25"/>
      <path d="M3.8 30.5h8.4L8 25.5Z" fill={green}/>
      <rect x="5" y="6" width="20" height="20" rx="6" fill="#fff" stroke="#D9CADD" strokeWidth="1.5"/>
      <image href="assets/slack.png" x="9" y="10" width="12" height="12" preserveAspectRatio="xMidYMid meet"/>
      <rect x="23" y="25" width="20" height="16" rx="5" fill="#fff" stroke={blue} strokeWidth="2.5"/>
      <path d="m25.7 28 7.3 5.5 7.3-5.5" stroke={blue} strokeWidth="2.1"/>
    </>);
  }

  if (kind === 'ask') {
    return (
      <span className={`${className} detail-feature-icon--svg`} aria-hidden="true">
        <svg {...commonProps}>
          <circle cx="19" cy="23" r="9.5" stroke={blue} strokeWidth="2.5"/>
          <path d="M25.8 29.8 34.5 38.5" stroke={blue} strokeWidth="2.5"/>
          <path d="M34 7.5c.5 2.8 2.7 5 5.5 5.5-2.8.5-5 2.7-5.5 5.5-.5-2.8-2.7-5-5.5-5.5 2.8-.5 5-2.7 5.5-5.5Z" fill={green}/>
          <path d="M40 20c.25 1.45 1.55 2.75 3 3-1.45.25-2.75 1.55-3 3-.25-1.45-1.55-2.75-3-3 1.45-.25 2.75-1.55 3-3Z" fill={blue}/>
        </svg>
      </span>
    );
  }

  if (kind === 'controls') {
    const wrenchPath = 'M14.7 6.3a4 4 0 0 0-4.3 5.9l-7 7a2 2 0 0 0 2.8 2.8l7-7a4 4 0 0 0 5.9-4.3l-2.7 2.7-3.1-.8-.8-3.1 2.7-2.7Z';
    return (
      <span className={`${className} detail-feature-icon--svg`} aria-hidden="true">
        <svg {...commonProps}>
          <g transform="translate(14 3) scale(1.25)" stroke={blue} strokeWidth="2.25">
            <path vectorEffect="non-scaling-stroke" d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.09a2 2 0 0 1 1 1.73v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z"/>
            <circle vectorEffect="non-scaling-stroke" cx="12" cy="12" r="3"/>
          </g>
          <g transform="translate(2 13) scale(1.25)">
            <path vectorEffect="non-scaling-stroke" d={wrenchPath} stroke="#fff" strokeWidth="6"/>
            <path vectorEffect="non-scaling-stroke" d={wrenchPath} stroke={green} strokeWidth="2.75"/>
          </g>
        </svg>
      </span>
    );
  }

  if (kind === 'sync') {
    return (
      <span className={`${className} detail-feature-icon--svg`} aria-hidden="true">
        <svg {...commonProps}>
          <path d="M28.5 6.5H35A6.5 6.5 0 0 1 41.5 13v6M37.8 15.3l3.7 3.7 3.7-3.7" stroke={blue} strokeWidth="2.25"/>
          <path d="M19.5 41.5H13A6.5 6.5 0 0 1 6.5 35v-6M2.8 32.7 6.5 29l3.7 3.7" stroke={green} strokeWidth="2.25"/>
          <path d="M11 10h14.5a4.5 4.5 0 0 1 4.5 4.5v7a4.5 4.5 0 0 1-4.5 4.5H18l-6 4v-4h-1a4.5 4.5 0 0 1-4.5-4.5v-7A4.5 4.5 0 0 1 11 10Z" fill="#fff" stroke={blue} strokeWidth="2.5"/>
          <path d="M12.5 17.5h10" stroke={blue} strokeWidth="2"/>
          <path d="M24 22.5h13.5A4.5 4.5 0 0 1 42 27v7a4.5 4.5 0 0 1-4.5 4.5H36v4l-6-4h-6a4.5 4.5 0 0 1-4.5-4.5v-7a4.5 4.5 0 0 1 4.5-4.5Z" fill="#fff" stroke={green} strokeWidth="2.5"/>
          <path d="M25.5 30h10" stroke={green} strokeWidth="2"/>
        </svg>
      </span>
    );
  }

  return (
    <span className={className} aria-hidden="true">
      <i></i><b></b><em></em>
    </span>
  );
}

function DetailFeatureGrid({ items }) {
  return (
    <div className="detail-feature-grid">
      {items.map(item => (
        <article className="detail-feature reveal" key={item.title}>
          {item.iconKind
            ? <FeatureIcon kind={item.iconKind}/>
            : <span aria-hidden="true">{item.icon}</span>}
          <div>
            <h3>{item.title}</h3>
            <p>{item.body}</p>
          </div>
        </article>
      ))}
    </div>
  );
}

function DetailFAQ({ items, go }) {
  return (
    <div className="detail-faq">
      {items.map(item => (
        <details key={item.q}>
          <summary>{item.q}<span aria-hidden="true">+</span></summary>
          <p>
            {item.a}
            {item.route && <> <DetailLink route={item.route} go={go} className="detail-faq-link">{item.linkLabel} →</DetailLink></>}
          </p>
        </details>
      ))}
    </div>
  );
}

function DetailFinalCTA({ kicker, title, body, cta, go }) {
  return (
    <section className="section-tight">
      <div className="page">
        <div className="product-final-cta reveal">
          <div>
            <div className="product-kicker">{kicker}</div>
            <h2>{title}</h2>
          </div>
          <div>
            <p>{body}</p>
            <DetailLink route="get-started" go={go} className="btn btn-brand btn-lg">{cta} →</DetailLink>
          </div>
        </div>
      </div>
    </section>
  );
}

function CircleMomentMark({ kind }) {
  if (kind === 'slack') return <ProductMark src="assets/slack.png" alt=""/>;
  if (kind === 'email') return <ProductMark kind="email" alt=""/>;
  if (kind === 'circle') return <ProductMark src="assets/circle.png" alt="" className="product-mark--circle"/>;
  return <span className="circle-moment-sync"><img src="assets/logo-mark.svg" alt=""/></span>;
}

function CircleSystemVisual() {
  const circlePosts = [
    { name: 'Vivian Okafor', meta: 'CFO · 2m', text: 'What belongs in a board update when we need a decision, not just a status report?', reactions: '💡 6', responses: '4 replies' },
    { name: 'Lucas Ferreira', meta: 'Community lead · 8m', text: 'Which onboarding moment made the biggest difference to member participation?', reactions: '🙌 9', responses: '7 replies' },
    { name: 'Hana Watanabe', meta: 'COO · 14m', text: 'How are you helping managers make faster decisions without adding more meetings?', reactions: '⚡ 8', responses: '5 replies' },
  ];
  const moments = [
    { slot: 'a', delay: '0s', kind: 'slack', avatar: 'Nora Bennett', eyebrow: 'REPLIED IN SLACK', title: 'Nora Bennett', body: 'Show the decision trigger beside runway.' },
    { slot: 'a', delay: '-8s', kind: 'email', glyph: '14', eyebrow: 'EMAIL DIGEST', title: 'Today in Finance Leaders', body: '14 conversations · 38 replies' },
    { slot: 'a', delay: '-16s', kind: 'circle', glyph: '↗', eyebrow: 'PUBLISHED IN CIRCLE', title: 'Board prep published', body: 'Post delivered to Slack and email' },
    { slot: 'b', delay: '-2.5s', kind: 'email', avatar: 'David Ortiz', eyebrow: 'REPLIED BY EMAIL', title: 'David Ortiz', body: 'The board needs to know when the plan changes.' },
    { slot: 'b', delay: '-10.5s', kind: 'slack', avatar: 'Mei Lin', eyebrow: 'SLACK REACTION', title: 'Mei reacted 🔥', body: 'Reaction added to the Circle thread' },
    { slot: 'b', delay: '-18.5s', kind: 'sync', glyph: '✦', eyebrow: 'WORKFLOW', title: 'New member activated', body: 'Welcome email + Slack DM sent' },
    { slot: 'c', delay: '-4s', kind: 'circle', glyph: '▶', eyebrow: 'PUBLISHED IN CIRCLE', title: 'Finance Foundations', body: 'Course progress · 72%', progress: true },
    { slot: 'c', delay: '-10s', kind: 'circle', glyph: '◷', eyebrow: 'PUBLISHED IN CIRCLE', title: 'Founder office hours', body: 'Event reminder delivered everywhere' },
    { slot: 'c', delay: '-16s', kind: 'sync', avatar: 'Rachel Kim', eyebrow: 'MEMBER SYNC', title: 'Rachel Kim matched', body: 'One profile on every surface' },
    { slot: 'c', delay: '-22s', kind: 'email', avatar: 'Priya Raman', eyebrow: 'REPLY RETURNED', title: 'Priya replied by email', body: 'Added to the original Circle thread' },
  ];

  return (
    <div className="integration-scene circle-scene circle-scene--soft" aria-label="Circle stays home for content, courses, events, and payments while members join the conversation from Slack and email">
      <div className="circle-soft-halo" aria-hidden="true"></div>
      <div className="scene-status"><i></i> Circle connected</div>

      <div className="circle-core-card circle-core-card--soft">
        <div className="circle-core-head">
          <ProductMark src="assets/circle.png" alt="Circle" className="product-mark--circle"/>
          <div><strong>Finance Leaders</strong><span>Circle stays your community home</span></div>
          <b>LIVE</b>
        </div>
        <div className="circle-home-keeps">
          <span><i>≡</i><b>Content</b></span>
          <span><i>▶</i><b>Courses</b></span>
          <span><i>◷</i><b>Events</b></span>
          <span><i>$</i><b>Payments</b></span>
          <span><i>✦</i><b>Workflows</b></span>
        </div>
        <div className="circle-core-thread">
          <div className="circle-post-rotator">
            {circlePosts.map((post, index) => (
              <div className="circle-rotating-post" style={{ '--post-delay': `${-1 + index * -5}s` }} key={post.name}>
                <div className="scene-author"><PortraitAvatar name={post.name} size={32}/><span><strong>{post.name}</strong><small>{post.meta}</small></span></div>
                <p>{post.text}</p>
                <div className="circle-thread-foot"><span>{post.reactions}</span><span>🙌 3</span><b>{post.responses}</b></div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="circle-sync-beacon circle-sync-beacon--soft">
        <img src="assets/logo-mark.svg" alt=""/>
        <span></span><span></span>
      </div>

      <div className="circle-moment-layer" aria-hidden="true">
        {moments.map((moment, index) => (
          <div className={`circle-moment circle-moment--${moment.slot}`} style={{ '--moment-delay': moment.delay }} key={`${moment.eyebrow}-${index}`}>
            <CircleMomentMark kind={moment.kind}/>
            {moment.avatar ? <PortraitAvatar name={moment.avatar} size={27}/> : <span className="circle-moment-glyph">{moment.glyph}</span>}
            <span className="circle-moment-copy"><small>{moment.eyebrow}</small><strong>{moment.title}</strong><p>{moment.body}</p></span>
            {moment.progress && <i className="circle-moment-progress"><b></b></i>}
          </div>
        ))}
      </div>

      <div className="circle-soft-packet circle-soft-packet--1" aria-hidden="true"></div>
      <div className="circle-soft-packet circle-soft-packet--2" aria-hidden="true"></div>
    </div>
  );
}

function SlackSystemVisual() {
  const slackPosts = [
    { name: 'Amara Ndlovu', meta: '9:42', text: 'Who has built a finance function before the Series A?', reactions: '💡 6', replies: '5 replies' },
    { name: 'Felix Moreau', meta: '10:18', text: 'What made your member directory genuinely useful?', reactions: '🙌 8', replies: '7 replies' },
    { name: 'Yuki Tanaka', meta: '11:06', text: 'How do you bring quieter members into a conversation?', reactions: '✨ 9', replies: '6 replies' },
  ];
  const moments = [
    { slot: 'a', delay: '0s', kind: 'email', glyph: '↩', eyebrow: 'EMAIL PARTICIPATION', title: 'Reply without opening Slack', body: 'Added to the original thread' },
    { slot: 'a', delay: '-8s', kind: 'sync', glyph: '⌗', eyebrow: 'COMMUNITY WEB', title: 'Full thread published', body: 'People · resources · replies' },
    { slot: 'a', delay: '-16s', kind: 'sync', glyph: '⌕', eyebrow: 'ASK', title: 'Answer found with citations', body: 'From approved community knowledge' },
    { slot: 'b', delay: '-2.5s', kind: 'sync', glyph: '≡', eyebrow: 'MEMBER DIRECTORY', title: 'Adriana Costa enriched', body: 'Role, interests, and expertise added' },
    { slot: 'b', delay: '-10.5s', kind: 'sync', glyph: '✦', eyebrow: 'ONBOARDING', title: 'New member welcomed', body: 'Email sequence + Slack DM sent' },
    { slot: 'b', delay: '-18.5s', kind: 'sync', glyph: '◎', eyebrow: 'ENGAGEMENT INSIGHT', title: '12 quieter members joined', body: 'Participation beyond message volume' },
    { slot: 'c', delay: '-4s', kind: 'email', glyph: '14', eyebrow: 'DAILY DIGEST', title: 'Today in Finance Leaders', body: '14 conversations · 38 replies' },
    { slot: 'c', delay: '-10s', kind: 'sync', glyph: '3', eyebrow: 'EXPERT MATCH', title: '3 relevant members found', body: 'Malik, Sora, and Theo can help' },
    { slot: 'c', delay: '-16s', kind: 'sync', glyph: '✓', eyebrow: 'APPLICATION', title: 'Amina Yusuf approved', body: 'Profile created and welcome sent' },
    { slot: 'c', delay: '-22s', kind: 'slack', glyph: '➤', eyebrow: 'TARGETED OUTREACH', title: 'Cohort reminder delivered', body: 'Slack and email, one audience' },
  ];

  return (
    <div className="integration-scene slack-scene slack-scene--soft" aria-label="Slack stays the familiar home for live conversation while Synchronize adds email, web, discovery, onboarding, and community operations around it">
      <div className="slack-soft-halo" aria-hidden="true"></div>
      <div className="scene-status"><i></i> Workspace connected</div>

      <div className="slack-thread-card slack-thread-card--soft">
        <div className="slack-thread-head">
          <ProductMark src="assets/slack.png" alt="Slack"/>
          <span><strong>Finance Leaders</strong><small>Slack stays familiar</small></span>
          <b>LIVE</b>
        </div>
        <div className="slack-workspace-keeps">
          <span><i>#</i><b>Channels</b></span>
          <span><i>↳</i><b>Threads</b></span>
          <span><i>●</i><b>Members</b></span>
          <span><i>↗</i><b>Analytics</b></span>
          <span><i>⚙</i><b>Configuration</b></span>
        </div>
        <div className="slack-post-rotator">
          {slackPosts.map((post, index) => (
            <div className="slack-rotating-post" style={{ '--post-delay': `${-1 + index * -5}s` }} key={post.name}>
              <div className="scene-author"><PortraitAvatar name={post.name} size={32}/><span><strong>{post.name}</strong><small># member-asks · {post.meta}</small></span></div>
              <p>{post.text}</p>
              <div className="slack-thread-foot"><span>{post.reactions}</span><span>🙌 3</span><b>{post.replies}</b></div>
            </div>
          ))}
        </div>
      </div>

      <div className="slack-sync-beacon slack-sync-beacon--soft">
        <img src="assets/logo-mark.svg" alt=""/>
        <div></div><div></div>
      </div>

      <div className="slack-moment-layer" aria-hidden="true">
        {moments.map((moment, index) => (
          <div className={`slack-moment slack-moment--${moment.slot}`} style={{ '--moment-delay': moment.delay }} key={`${moment.eyebrow}-${index}`}>
            {moment.kind === 'slack' ? <ProductMark src="assets/slack.png" alt=""/> : moment.kind === 'email' ? <ProductMark kind="email" alt=""/> : <span className="slack-moment-sync"><img src="assets/logo-mark.svg" alt=""/></span>}
            <span className="slack-moment-glyph">{moment.glyph}</span>
            <span className="slack-moment-copy"><small>{moment.eyebrow}</small><strong>{moment.title}</strong><p>{moment.body}</p></span>
          </div>
        ))}
      </div>

      <div className="slack-soft-packet slack-soft-packet--1" aria-hidden="true"></div>
      <div className="slack-soft-packet slack-soft-packet--2" aria-hidden="true"></div>
    </div>
  );
}

function CoreSystemVisual() {
  const snapshots = [
    { eyebrow: 'MEMBERS MATCHED', metric: '1,281 of 1,281', body: 'Profiles, access, and identity verified' },
    { eyebrow: 'CONTENT VERIFIED', metric: '18,420 posts', body: 'History and authorship carried forward' },
    { eyebrow: 'SPACES REBUILT', metric: '32 spaces', body: 'Structure and permissions ready for launch' },
  ];
  const moments = [
    { slot: 'a', delay: '0s', glyph: '↥', eyebrow: 'PLATFORM EXPORT', title: 'History received', body: 'Members · content · structure' },
    { slot: 'a', delay: '-8s', glyph: '≋', eyebrow: 'COMMUNITY MAP', title: 'Spaces translated', body: 'Groups and permissions preserved' },
    { slot: 'a', delay: '-16s', glyph: '●', eyebrow: 'MEMBER DATA', title: 'Records matched', body: 'Profiles and access verified' },
    { slot: 'b', delay: '-2.5s', glyph: '{ }', eyebrow: 'HOMEGROWN PLATFORM', title: 'Custom API connected', body: 'Your data model, carefully scoped' },
    { slot: 'b', delay: '-10.5s', glyph: '≡', eyebrow: 'CONTENT', title: 'History preserved', body: 'Posts, authors, and dates checked' },
    { slot: 'b', delay: '-18.5s', glyph: '⌗', eyebrow: 'STRUCTURE', title: 'Spaces rebuilt', body: 'Navigation and permissions validated' },
    { slot: 'c', delay: '-4s', glyph: '□', eyebrow: 'ASSETS', title: 'Files and images verified', body: 'Broken links flagged before launch' },
    { slot: 'c', delay: '-10s', glyph: '↻', eyebrow: 'REHEARSAL', title: 'Full move rehearsed', body: 'Timing and edge cases confirmed' },
    { slot: 'c', delay: '-16s', glyph: '✓', eyebrow: 'LAUNCH', title: 'Member welcome ready', body: 'Communications and support aligned' },
    { slot: 'c', delay: '-22s', glyph: '⇄', eyebrow: 'CONNECTED FROM DAY ONE', title: 'Slack + email activated', body: 'Every participation surface ready' },
  ];

  return (
    <div className="integration-scene core-scene core-scene--soft" aria-label="Synchronize handles the mapping, rehearsal, verification, and launch work required to move an existing community into a fully branded Synchronize Core home">
      <div className="core-soft-halo" aria-hidden="true"></div>
      <div className="scene-status"><i></i> Migration managed</div>

      <div className="core-home-card core-home-card--soft">
        <div className="core-home-head--soft">
          <span><img src="assets/logo-mark.svg" alt="Synchronize"/></span>
          <div><strong>Finance Leaders</strong><small>community.yourbrand.com</small></div>
          <b>READY</b>
        </div>
        <div className="core-home-keeps">
          <span><i>●</i><b>Members</b></span>
          <span><i>≡</i><b>Content</b></span>
          <span><i>⌗</i><b>Spaces</b></span>
          <span><i>◷</i><b>Events</b></span>
          <span><i>✦</i><b>Workflows</b></span>
        </div>
        <div className="core-snapshot-rotator">
          {snapshots.map((snapshot, index) => (
            <div className="core-rotating-snapshot" style={{ '--post-delay': `${-1 + index * -5}s` }} key={snapshot.eyebrow}>
              <small>{snapshot.eyebrow}</small>
              <strong>{snapshot.metric}</strong>
              <p>{snapshot.body}</p>
              <i><b></b></i>
            </div>
          ))}
        </div>
        <div className="core-ready-row">
          <span className="core-ready-avatars"><PortraitAvatar name="Shirin Azadi" size={27}/><PortraitAvatar name="Mateo Silva" size={27}/><PortraitAvatar name="Lea Dubois" size={27}/></span>
          <span><strong>Members ready</strong><small>History intact · access verified</small></span>
        </div>
      </div>

      <div className="core-sync-beacon--soft">
        <img src="assets/logo-mark.svg" alt=""/>
        <span></span><span></span>
      </div>

      <div className="core-moment-layer" aria-hidden="true">
        {moments.map((moment, index) => (
          <div className={`core-moment core-moment--${moment.slot}`} style={{ '--moment-delay': moment.delay }} key={`${moment.eyebrow}-${index}`}>
            <span className="core-moment-glyph">{moment.glyph}</span>
            <span className="core-moment-copy"><small>{moment.eyebrow}</small><strong>{moment.title}</strong><p>{moment.body}</p></span>
          </div>
        ))}
      </div>

      <div className="core-soft-packet core-soft-packet--1" aria-hidden="true"></div>
      <div className="core-soft-packet core-soft-packet--2" aria-hidden="true"></div>
    </div>
  );
}

function CircleProductPage({ go }) {
  useReveal();
  const loved = [
    { title: 'Content and spaces', body: 'Circle gives structured conversations, resources, and member groups a clear, polished home. That structure stays intact.' },
    { title: 'Courses', body: 'Courses belong in a focused learning environment. Circle remains the destination for curriculum, lessons, and progress.' },
    { title: 'Events and payments', body: 'Keep the event experience and commercial foundation you already rely on, without rebuilding either one.' },
  ];
  const process = [
    { title: 'Configuration, handled', body: 'We connect Synchronize to your Circle community and configure the integration around the structure you already use.' },
    { title: 'Spaces and permissions, mapped', body: 'We translate your spaces, audiences, and participation rules into a thoughtful connected experience.' },
    { title: 'Members and flows, tested', body: 'We match member identities, test every connected surface, and verify authorship, delivery, and replies.' },
    { title: 'Launch, fully supported', body: 'We guide the rollout, help communicate what is new, and stay close while members begin participating.' },
  ];
  const features = [
    { iconKind: 'sync', title: 'Two-way conversation sync', body: 'Posts, replies, attachments, and threads move between Circle, Slack, and email without manual reposting.' },
    { iconKind: 'email', title: 'A complete email experience', body: 'Members can receive digests, read full conversations, and reply without opening another app.' },
    { iconKind: 'analytics', title: 'Cross-surface analytics', body: 'Understand participation across Circle, Slack, and email instead of seeing only one part of the community.' },
    { iconKind: 'onboarding', title: 'Applications and onboarding', body: 'Run applications, approvals, welcomes, and activation sequences across email and Slack based on member behavior.' },
    { iconKind: 'ask', title: 'Ask across your knowledge', body: 'Help members find answers and relevant people from the community sources you authorize.' },
    { iconKind: 'controls', title: 'Advanced community controls', body: 'Manage spaces, members, content, permissions, settings, workflows, and automation across the connected community from one powerful operator portal.' },
  ];
  const faqs = [
    { q: 'Does Circle remain our community home?', a: 'Yes. Circle continues to host the content, spaces, courses, events, payments, and structured member experience you already value.' },
    { q: 'Do members have to join Slack?', a: 'No. Members can participate from the surface that works for them. Some can remain entirely in Circle or email.' },
    { q: 'Can we decide which Circle spaces are connected?', a: 'Yes. The integration is configured around your community structure, permissions, and participation goals.' },
    { q: 'Will replies preserve the original author and thread?', a: 'Synchronize is designed to retain attribution and thread context as conversations move between connected surfaces.' },
  ];

  return (
    <main className="product-detail product-detail--circle">
      <DetailHero
        label="Synchronize for Circle"
        title={<>Everything you love about Circle. <em>More ways to take part.</em></>}
        body="Add deep, immediate participation through Slack and email while Circle remains the beautiful, structured home for your community."
        visual={<CircleSystemVisual/>}
        tone="circle" go={go} cta="See it with your Circle community"
      />

      <section className="detail-love section">
        <div className="page">
          <DetailSectionHead eyebrow="We love Circle, too" title={<>Everything you value in Circle, <em>still at the center.</em></>} body="Circle already gives communities a polished, structured home for content, courses, events, and payments. Synchronize extends participation around that foundation."/>
          <DetailCards items={loved}/>
        </div>
      </section>

      <section className="detail-process-section section">
        <div className="page">
          <DetailSectionHead eyebrow="White-glove implementation" title={<>We do the hard work. <em>You get a connected community.</em></>} body="Share how your Circle community works today. We handle configuration, space mapping, identity matching, testing, and launch support. Your team only steps in for the decisions and approvals that matter."/>
          <DetailProcess steps={process} service/>
        </div>
      </section>

      <section className="detail-features-section section">
        <div className="page">
          <DetailSectionHead eyebrow="What Synchronize adds" title={<>More participation. <em>More operating leverage.</em></>} body="Extend Circle with the surfaces members already check and give your team one connected view of the community."/>
          <DetailFeatureGrid items={features}/>
        </div>
      </section>

      <section className="detail-faq-section section">
        <div className="page detail-faq-layout">
          <DetailSectionHead eyebrow="Common questions" title={<>Built to fit the Circle community <em>you already have.</em></>}/>
          <DetailFAQ items={faqs} go={go}/>
        </div>
      </section>

      <DetailFinalCTA kicker="Bring your real Circle setup" title="See exactly how your spaces and members would connect." body="We’ll use your community structure to show what the integrated experience could look like." cta="Book a Circle walkthrough" go={go}/>
    </main>
  );
}

function SlackProductPage({ go }) {
  useReveal();
  const strengths = [
    { title: 'Keep the conversation', body: 'Your workspace, channels, members, habits, and community culture stay exactly where they are.' },
    { title: 'Open another front door', body: 'Give members a branded web experience for discovery, directories, resources, and participation beyond the feed.' },
    { title: 'Include people outside Slack', body: 'Email participation keeps busy, occasional, or Slack-restricted members connected to the same conversations.' },
  ];
  const process = [
    { title: 'Add us to your community', body: 'Add Synchronize to your Slack community and give us access to the channels and information you want connected.' },
    { title: 'We learn how it works', body: 'We review your channels, members, permissions, and community structure to understand how everything works today.' },
    { title: 'You confirm the plan', body: 'We show you how we plan to connect and map everything, then make any changes you need before setup begins.' },
    { title: 'We handle the rest', body: 'We complete the connection, channel and member mapping, testing, launch, and ongoing support for you.' },
  ];
  const features = [
    { iconKind: 'sync', title: 'Two-way conversation sync', body: 'Conversations, replies, attachments, and threads move between Slack, email, and the web without manual reposting.' },
    { iconKind: 'analytics', title: 'Cross-surface analytics', body: 'Understand participation across Slack, email, and the web instead of measuring only message volume.' },
    { iconKind: 'directory', title: 'Profiles and member directory', body: 'Give every member a rich profile and make people, interests, roles, and expertise easy to find.' },
    { iconKind: 'onboarding', title: 'Applications and onboarding', body: 'Run applications, approvals, welcomes, and trigger-based onboarding sequences across email and Slack.' },
    { iconKind: 'messaging', title: 'Messaging and workflows', body: 'Send targeted email and Slack communications, automate follow-up, and coordinate the member journey from one place.' },
    { iconKind: 'controls', title: 'Advanced community controls', body: 'Manage channels, members, content, permissions, settings, workflows, and automation across the connected community from one operator portal.' },
  ];
  const faqs = [
    { q: 'Does our Slack workspace change?', a: 'No. Your workspace, existing channels, and the Slack experience your members know remain in place.' },
    { q: 'Which channels does Synchronize access?', a: 'That depends on the channels you choose, the permissions approved by your workspace, and the capabilities in your plan.' },
    { q: 'Can members participate without using Slack?', a: 'Yes. Connected web and email experiences can give members other ways to discover and join community conversations.' },
    { q: 'Can Ask search everything in our workspace?', a: 'Ask works from the knowledge sources and permissions you authorize. Your team determines what is connected.' },
  ];

  return (
    <main className="product-detail product-detail--slack">
      <DetailHero
        label="Synchronize for Slack"
        title={<>Keep the Slack community. <em>Add everything around it.</em></>}
        body="Give your members a community home, email participation, better discovery, and thoughtful onboarding without disrupting the workspace they already use."
        visual={<SlackSystemVisual/>}
        tone="slack" go={go} cta="See it with your Slack workspace"
      />

      <section className="detail-love section">
        <div className="page">
          <DetailSectionHead eyebrow="Build on what already works" title={<>Everything members value about Slack, <em>with more ways to belong.</em></>} body="Synchronize preserves the immediacy and culture of your workspace while adding the structure, reach, and operating tools that help the community grow."/>
          <DetailCards items={strengths}/>
        </div>
      </section>

      <section className="detail-process-section detail-process-section--dark section">
        <div className="page">
          <DetailSectionHead light eyebrow="White-glove implementation" title={<>We handle the setup. <em>Your workspace keeps moving.</em></>} body="Add Synchronize to your Slack community. We take a close look at how everything works, confirm the plan with you, then handle the connection, channel mapping, member mapping, testing, and launch."/>
          <DetailProcess light steps={process} service/>
        </div>
      </section>

      <section className="detail-features-section section">
        <div className="page">
          <DetailSectionHead eyebrow="What Synchronize adds" title={<>Extend a workspace into a <em>complete community experience.</em></>} body="Preserve what members like about Slack while adding more ways to participate, discover people and knowledge, and operate the community."/>
          <DetailFeatureGrid items={features}/>
        </div>
      </section>

      <section className="detail-faq-section section">
        <div className="page detail-faq-layout">
          <DetailSectionHead eyebrow="Common questions" title={<>Designed around your workspace, <em>channels, and permissions.</em></>}/>
          <DetailFAQ items={faqs} go={go}/>
        </div>
      </section>

      <DetailFinalCTA kicker="Bring your real Slack setup" title="See what your workspace could become." body="We’ll use your channels, member journey, and community goals to demonstrate the connected experience." cta="Book a Slack walkthrough" go={go}/>
    </main>
  );
}

function CoreProductPage({ go }) {
  useReveal();
  const migrationSteps = [
    { title: 'Source and destination, mapped', body: 'We learn how your current platform works, document the supported data, and design Synchronize Core around the community your members already understand.' },
    { title: 'The full move, rehearsed', body: 'We clean mappings, test representative content and member records, and resolve edge cases before the live transition.' },
    { title: 'The switch, coordinated', body: 'We handle the supported data transfer and verification around a carefully planned changeover designed to avoid interruption.' },
    { title: 'Launch and stabilization, supported', body: 'We monitor the new experience, resolve issues quickly, and stay close while your team and members settle in.' },
  ];
  const features = [
    { iconKind: 'designer', title: 'Community designer and branding', body: 'Customize the complete web experience around your brand, colors, visual identity, domain, and the feeling you want members to have.' },
    { iconKind: 'pages', title: 'Pages and resource collections', body: 'Create beautiful static pages, organize resource libraries, and give important knowledge a lasting home beyond the activity feed.' },
    { iconKind: 'spaces', title: 'Spaces and permissions', body: 'Structure discussions, content, audiences, notifications, and access rules around the way your community actually works.' },
    { iconKind: 'surfaces', title: 'Slack and inbox participation', body: 'Let members participate from the branded community, Slack, or email while every conversation stays connected.' },
    { iconKind: 'ask', title: 'Ask and knowledge discovery', body: 'Turn approved conversations and resources into cited answers and recommendations for the members best placed to help.' },
    { iconKind: 'onboarding', title: 'Applications and onboarding', body: 'Run custom applications, approvals, welcomes, and trigger-based onboarding sequences across email and Slack.' },
    { iconKind: 'directory', title: 'Profiles and member directory', body: 'Give every member a rich profile and make people, interests, roles, and expertise easy to find.' },
    { iconKind: 'analytics', title: 'Analytics and segmentation', body: 'Understand participation across every surface and build useful segments from real member behavior.' },
    { iconKind: 'messaging', title: 'Messaging and workflows', body: 'Send targeted email and Slack communications, automate follow-up, and coordinate the member journey from one place.' },
    { iconKind: 'members', title: 'Complete member management', body: 'Add, update, search, support, and export members while keeping one connected record behind every experience.' },
  ];
  const faqs = [
    { q: 'Which platforms can you move communities from?', a: 'We can scope migrations from established community products as well as custom-built systems. The supported data depends on the source platform, its export options, and the quality of the available records.' },
    { q: 'Can you work with a custom or homegrown platform?', a: 'Yes. We start by understanding its data model, export options, APIs, and the community experience that needs to be preserved, then define a supported migration plan.' },
    { q: 'What data can be migrated?', a: 'The answer depends on the source platform and data quality. During discovery we document the supported member, content, structure, and asset scope before the project begins.' },
    { q: 'How do you reduce disruption for members?', a: 'We combine rehearsal, validation, launch communications, onboarding, and hands-on support so members understand what is changing and where to go.' },
    { q: 'Are there any features that Synchronize Core does not offer?', a: 'Yes. Synchronize Core does not currently include courses or native virtual event hosting. If either is central to your community, we can handle a managed migration into a full-featured platform such as Circle and pair it with Synchronize for deep email, Slack, discovery, onboarding, analytics, and member operations.', route: 'product-circle', linkLabel: 'See how Synchronize works with Circle' },
    { q: 'We already use Slack. Do we need to migrate?', a: 'No. Synchronize integrates deeply with your existing Slack workspace, so your channels, conversations, and member habits stay in place. We add email, web, discovery, and community operations around Slack with no migration required.', route: 'product-slack', linkLabel: 'Explore Synchronize for Slack' },
    { q: 'We already use Circle. Do we need to migrate?', a: 'No. Circle remains the home for your content, courses, events, payments, and workflows. Synchronize integrates deeply with Circle and adds participation through Slack and email, so no migration is needed.', route: 'product-circle', linkLabel: 'Explore Synchronize for Circle' },
  ];

  return (
    <main className="product-detail product-detail--core">
      <DetailHero
        label="Synchronize Core"
        title={<>A new community home. <em>A pain-free way to get there.</em></>}
        body="Move from an established or homegrown platform into a best-in-class, fully featured community experience. It is beautifully branded for you, with the migration and launch handled alongside you."
        visual={<CoreSystemVisual/>}
        tone="core" go={go} cta="Launch on Synchronize"
      />

      <section className="detail-process-section detail-process-section--core section">
        <div className="page">
          <DetailSectionHead eyebrow="White-glove migration" title={<>The platform changes. <em>Your members barely notice.</em></>} body="Every community system stores people, content, permissions, and structure differently. We map those realities, rehearse the move, and handle the transition from beginning to end."/>
          <div className="core-migration-note reveal">
            <span>OUR GOAL</span>
            <strong>Zero downtime. No new behavior to learn.</strong>
            <p>We can typically run the migration while members continue using the community as normal, then make a coordinated switch when Synchronize Core is ready. There is no stressful gap and no need to retrain members. They simply find a familiar community with a better experience on the other side.</p>
          </div>
          <DetailProcess steps={migrationSteps} service/>
        </div>
      </section>

      <section className="detail-features-section section">
        <div className="page">
          <DetailSectionHead eyebrow="The complete Synchronize Core platform" title={<>A best-in-class community home, <em>designed to feel entirely yours.</em></>} body="Synchronize Core includes the complete Synchronize feature set inside a beautiful, fully branded web experience. Use the community designer to shape the colors, identity, structure, pages, and resources. Then give members the freedom to participate from the web, Slack, or email."/>
          <DetailFeatureGrid items={features}/>
          <div className="core-feature-bridge reveal">
            <div><strong>Every Synchronize capability is built in.</strong><span>Explore the connected member journey and the complete operator toolkit.</span></div>
            <DetailLink route="how-it-works" go={go}>See everything Synchronize Core includes →</DetailLink>
          </div>
        </div>
      </section>

      <section className="detail-faq-section section">
        <div className="page detail-faq-layout">
          <DetailSectionHead eyebrow="Migration questions" title={<>Clarity before <em>anything moves.</em></>}/>
          <DetailFAQ items={faqs} go={go}/>
        </div>
      </section>

      <DetailFinalCTA kicker="Start with your current platform" title="Let’s map the cleanest path to Synchronize Core." body="Show us your platform, data, and member journey. We’ll help define the destination and a supported transition plan." cta="Plan your migration" go={go}/>
    </main>
  );
}

Object.assign(window, { CircleProductPage, SlackProductPage, CoreProductPage });