// Product hub: helps visitors choose the right way into Synchronize.

function ProductMark({ src, kind, alt, className = '' }) {
  return (
    <span className={`product-mark ${className}`}>
      {kind ? <PlatformIcon kind={kind} size={24}/> : <img src={src} alt={alt}/>} 
    </span>
  );
}

const PRODUCT_OPTIONS = [
  {
    number: '01',
    name: 'For Circle',
    description: 'Supercharge an existing Circle community with participation through Slack and email—without replacing the home you already built.',
    bestFor: 'Communities already running on Circle',
    highlights: ['Circle remains the home', 'Native Slack and email participation', 'One member and operations layer'],
    route: 'product-circle',
    tone: 'circle',
    action: 'Explore Circle integration',
  },
  {
    number: '02',
    name: 'For Slack',
    description: 'Keep the energy of your Slack workspace while adding a lasting web home, email participation, and stronger community operations.',
    bestFor: 'Communities centered in Slack',
    highlights: ['Slack stays active', 'Web and email participation', 'Directory, search, and analytics'],
    route: 'product-slack',
    tone: 'slack',
    action: 'Explore Slack capabilities',
  },
  {
    number: '03',
    name: 'Synchronize Core',
    description: 'Launch a complete, fully branded community platform with Slack and email built in—and let us handle the move from your current system.',
    bestFor: 'Teams ready for a complete new home',
    highlights: ['Fully branded community platform', 'Managed members and content migration', 'Every participation surface included'],
    route: 'product-core',
    tone: 'core',
    action: 'Explore Synchronize Core',
  },
];

function ProductFlowIcon({ kind }) {
  if (kind === 'circle') return <ProductMark src="assets/circle.png" alt="" className="product-mark--circle"/>;
  if (kind === 'slack') return <ProductMark src="assets/slack.png" alt=""/>;
  if (kind === 'email') return <ProductMark kind="email" alt=""/>;
  if (kind === 'community') return <ProductMark kind="circle" alt=""/>;
  if (kind === 'sync') return <span className="product-flow-sync-mark"><img src="assets/logo-mark.svg" alt=""/></span>;
  return <span className="product-flow-generic" aria-hidden="true">{kind === 'data' ? '≡' : '□'}</span>;
}

function ProductFlowNode({ kind, label, sub }) {
  return (
    <div className="product-flow-node">
      <ProductFlowIcon kind={kind}/>
      <span><strong>{label}</strong>{sub && <small>{sub}</small>}</span>
    </div>
  );
}

function ProductOverviewGraphic({ tone }) {
  const flow = {
    circle: {
      sources: [{ kind: 'circle', label: 'Circle', sub: 'Community home' }],
      outputs: [{ kind: 'slack', label: 'Slack', sub: 'Participation' }, { kind: 'email', label: 'Email', sub: 'Participation' }],
    },
    slack: {
      sources: [{ kind: 'slack', label: 'Slack', sub: 'Community hub' }],
      outputs: [{ kind: 'community', label: 'Web home', sub: 'Permanent' }, { kind: 'email', label: 'Email', sub: 'Accessible' }],
    },
    core: {
      sources: [{ kind: 'platform', label: 'Current platform', sub: 'Members' }, { kind: 'data', label: 'Community history', sub: 'Content' }],
      outputs: [{ kind: 'community', label: 'Branded home', sub: 'Complete' }, { kind: 'slack', label: 'Slack', sub: 'Connected' }, { kind: 'email', label: 'Email', sub: 'Connected' }],
    },
  }[tone];
  return (
    <div className={`product-option-visual product-option-visual--${tone}`} aria-hidden="true">
      <div className="product-flow-map">
        <div className="product-flow-stack product-flow-stack--source">
          {flow.sources.map(item => <ProductFlowNode key={item.label} {...item}/>)}
        </div>
        <span className="product-flow-link"><i/></span>
        <ProductFlowNode kind="sync" label="Synchronize" sub={tone === 'core' ? 'Platform + operations' : 'Operating layer'}/>
        <span className="product-flow-link product-flow-link--out"><i/></span>
        <div className="product-flow-stack product-flow-stack--output">
          {flow.outputs.map(item => <ProductFlowNode key={item.label} {...item}/>)}
        </div>
      </div>
    </div>
  );
}

function SharedFoundationGraphic({ kind }) {
  if (kind === 'surfaces') return <div className="foundation-surfaces"><ProductFlowIcon kind="slack"/><ProductFlowIcon kind="email"/><ProductFlowIcon kind="community"/></div>;
  if (kind === 'operations') return <div className="foundation-controls"><span/><span/><span/><i/></div>;
  return <div className="foundation-launch"><span>Current setup</span><i/><span>Live</span></div>;
}

function ProductPage({ go }) {
  useReveal();

  return (
    <main className="product-page product-hub">
      <section className="product-hero section">
        <div className="page">
            <div className="product-hero-grid">
            <h1 className="display-1">
              Three ways in. <em>One connected community.</em>
            </h1>
            <div className="product-hero-copy">
              <p>
                Choose the setup that matches how your community runs today: extend Circle, add a community layer around Slack, or launch a complete branded home with Synchronize Core. Every option connects participation across Slack, email, and the web, with one place for your team to manage it.
              </p>
            </div>
          </div>

          <div className="product-index" aria-label="Product options">
            {PRODUCT_OPTIONS.map(product => (
              <a
                href={`#/${product.route}`}
                className={`product-index-card product-index-card--${product.tone}`}
                onClick={e => { e.preventDefault(); go(product.route); }}
                key={product.route}
              >
                <span className="product-index-top">
                  <span>{product.number}</span>
                </span>
                <ProductOverviewGraphic tone={product.tone}/>
                <strong>Synchronize<br/>{product.name}</strong>
                <span className="product-index-description">{product.description}</span>
                <span className="product-index-best"><small>Best for</small>{product.bestFor}</span>
                <span className="product-index-highlights">
                  {product.highlights.map(item => <span key={item}><i aria-hidden="true">✓</i>{item}</span>)}
                </span>
                <span className="product-index-action">{product.action} <span aria-hidden="true">→</span></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="product-foundation section">
        <div className="page">
          <div className="product-foundation-head reveal">
            <div className="page-intro-label">Shared foundation</div>
            <div>
              <h2 className="display-2">Choose the starting point. <em>Keep the full system.</em></h2>
              <p>These are not three disconnected products. They are three ways to adopt the same Synchronize operating layer around the platform your community needs.</p>
            </div>
          </div>
          <div className="product-foundation-grid">
            <article className="reveal">
              <SharedFoundationGraphic kind="surfaces"/>
              <span>Connected participation</span>
              <h3>One conversation across every surface</h3>
              <p>Posts, replies, and reactions stay synchronized across Slack, email, and your online community.</p>
            </article>
            <article className="reveal">
              <SharedFoundationGraphic kind="operations"/>
              <span>One operating layer</span>
              <h3>Run the whole community from one place</h3>
              <p>Manage members, spaces, onboarding, messaging, search, and analytics without separate workflows.</p>
            </article>
            <article className="reveal">
              <SharedFoundationGraphic kind="launch"/>
              <span>Supported rollout</span>
              <h3>Move forward without the migration pain</h3>
              <p>We help configure the experience, connect your platforms, and move members and content when a migration is needed.</p>
            </article>
          </div>
        </div>
      </section>

      <section className="product-compare section">
        <div className="page">
          <div className="product-compare-head reveal">
            <div className="page-intro-label">At a glance</div>
            <h2 className="display-2">Different entry. <em>Same connected community.</em></h2>
          </div>
          <div className="product-compare-table reveal">
            <div className="product-compare-row product-compare-row--head"><span></span><strong>For Circle</strong><strong>For Slack</strong><strong>Synchronize Core</strong></div>
            <div className="product-compare-row"><span>Start here when</span><p>Circle is already your community’s home</p><p>Most community activity happens in Slack</p><p>You need a new or replacement platform</p></div>
            <div className="product-compare-row"><span>Primary home</span><p>Your existing Circle community</p><p>Your Slack workspace, plus a connected web home</p><p>A fully branded Synchronize community</p></div>
            <div className="product-compare-row"><span>Member access</span><p>Circle, Slack, and email</p><p>Slack, email, and the web</p><p>Your branded home, Slack, and email</p></div>
            <div className="product-compare-row"><span>What gets added</span><p>Cross-platform participation and the full operations toolkit</p><p>A lasting community layer, email, search, directory, onboarding, and analytics</p><p>The complete platform, operating layer, and connected participation surfaces</p></div>
            <div className="product-compare-row"><span>Launch path</span><p>Native integration and supported setup</p><p>Authorized Slack app and guided configuration</p><p>Managed platform, member, and content migration</p></div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="page">
          <div className="product-final-cta reveal">
            <div>
              <div className="product-kicker">Not sure where you fit?</div>
              <h2>Show us how your community works today.</h2>
            </div>
            <div>
              <p>We’ll recommend the cleanest path and show you what the connected experience could look like for your members.</p>
              <a href="#/get-started" onClick={e=>{e.preventDefault();go('get-started');}} className="btn btn-brand btn-lg">Find your starting point →</a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ProductPage, ProductMark, PRODUCT_OPTIONS });