import React, { useState } from 'react';

export const REQUIRED_DATABASES = [];

const C = {
  canvas: '#F5F5F5',
  surface: '#FFFFFF',
  text: '#353D42',
  muted: '#666666',
  border: '#D9DEE1',
  irc: '#353D42',
  market: '#63C5B5',
  setup: '#374E8E',
  hatch: '#D9DEE1',
  hatchBg: '#FFFFFF',
};

type SegmentKey = 'irc' | 'market' | 'removed';
type HoverState = { projectId: string; segment: SegmentKey };

type SegmentCopy = {
  title: string;
  amountLabel: string;
  pct: number;
  explanation: string;
  examples?: string;
};

type Project = {
  id: string;
  title: string;
  description: string;
  oldCostLabel: string;
  newCostLabel: string;
  newPct: number;
  ircPct: number;
  marketPct: number;
  segments: Record<SegmentKey, SegmentCopy>;
};

const PROJECTS: Project[] = [
  {
    id: 'cttc',
    title: 'Closer than the Clinic',
    description: 'Uses existing drug shops to solve access and reach a lower-cost model immediately.',
    oldCostLabel: '$42',
    newCostLabel: '~$20',
    newPct: 48,
    ircPct: 12,
    marketPct: 36,
    segments: {
      irc: {
        title: 'IRC still carries',
        amountLabel: '~$5',
        pct: 12,
        explanation: 'Thin catalytic costs remain with IRC: identifying the right shops, removing the first inventory risk, and proving that demand is real.',
        examples: 'Examples: shop mapping · initial stock de-risking · demand proof',
      },
      market: {
        title: 'System / market carries',
        amountLabel: '~$15',
        pct: 36,
        explanation: 'Ongoing delivery shifts to actors already positioned to sustain it: shopkeepers and commercial distributors.',
        examples: 'Examples: working capital · restocking · retail · commercial distribution',
      },
      removed: {
        title: 'Cost removed',
        amountLabel: '~$22',
        pct: 52,
        explanation: 'The new model avoids expensive NGO architecture instead of trying to optimize it.',
        examples: 'Examples: standing clinic delivery · parallel supply chain · ongoing program machinery',
      },
    },
  },
  {
    id: 'f2f',
    title: 'From Factory to Family',
    description: 'Rebuilds the production system so therapeutic nutrition can be made locally at far lower cost.',
    oldCostLabel: '$160',
    newCostLabel: '$40',
    newPct: 25,
    ircPct: 10,
    marketPct: 15,
    segments: {
      irc: {
        title: 'IRC still carries',
        amountLabel: '$16',
        pct: 10,
        explanation: 'IRC remains the catalyst while the product is proven and the bridge to market is assembled.',
        examples: 'Examples: product proof · convening · standards · market pathway',
      },
      market: {
        title: 'System / market carries',
        amountLabel: '$24',
        pct: 15,
        explanation: 'The intended steady state is a domestic production-and-procurement system with real incentives to keep running.',
        examples: 'Examples: factory production · buyer procurement · commercial margin',
      },
      removed: {
        title: 'Cost removed',
        amountLabel: '$120',
        pct: 75,
        explanation: 'The step-change comes from stripping out expensive architecture rather than squeezing the existing model harder.',
        examples: 'Examples: import logistics · community-scale preparation · heavy supervision',
      },
    },
  },
];

const removedPattern = `repeating-linear-gradient(45deg, ${C.hatchBg} 0px, ${C.hatchBg} 7px, ${C.hatch} 7px, ${C.hatch} 9px)`;
const mutedRemovedPattern = `repeating-linear-gradient(45deg, rgba(255,255,255,0.92) 0px, rgba(255,255,255,0.92) 8px, rgba(217,222,225,0.65) 8px, rgba(217,222,225,0.65) 10px)`;

function swatchStyle(key: SegmentKey): React.CSSProperties {
  if (key === 'irc') return { background: C.irc };
  if (key === 'market') return { background: C.market };
  return { background: removedPattern, border: `1px solid ${C.hatch}` };
}

function explainerStyle(key: SegmentKey): React.CSSProperties {
  if (key === 'irc') {
    return { background: 'rgba(53,61,66,0.07)', border: '1px solid rgba(53,61,66,0.16)' };
  }
  if (key === 'market') {
    return { background: 'rgba(99,197,181,0.12)', border: '1px solid rgba(99,197,181,0.28)' };
  }
  return { background: C.surface, border: `1px solid ${C.border}` };
}

function explainerStripeStyle(key: SegmentKey): React.CSSProperties {
  if (key === 'irc') return { background: 'rgba(53,61,66,0.48)' };
  if (key === 'market') return { background: 'rgba(99,197,181,0.58)' };
  return { background: '#C9CED2' };
}

function Legend() {
  const items: { key: SegmentKey; label: string }[] = [
    { key: 'irc', label: 'IRC still carries' },
    { key: 'market', label: 'System / market carries' },
    { key: 'removed', label: 'Cost removed' },
  ];

  return (
    <div className="flex flex-wrap gap-x-5 gap-y-2">
      {items.map((item) => (
        <div key={item.key} className="flex items-center gap-2 text-xs" style={{ color: C.muted }}>
          <span style={{ width: 13, height: 13, display: 'inline-block', boxSizing: 'border-box', ...swatchStyle(item.key) }} />
          <span>{item.label}</span>
        </div>
      ))}
    </div>
  );
}

function ProjectRow({ project, hovered, onHover }: { project: Project; hovered: HoverState; onHover: (segment: SegmentKey) => void }) {
  const removedPct = 100 - project.newPct;
  const activeSegment = hovered.projectId === project.id ? hovered.segment : null;
  const reductionMultiple = (100 / project.newPct).toFixed(1);

  const segmentBase: React.CSSProperties = {
    height: 38,
    transition: 'height 120ms ease, filter 120ms ease',
    cursor: 'default',
    boxSizing: 'border-box',
    position: 'relative',
  };

  const centerLabel: React.CSSProperties = {
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -50%)',
    fontSize: 10.5,
    fontWeight: 700,
    lineHeight: 1,
    whiteSpace: 'nowrap',
    pointerEvents: 'none',
  };

  return (
    <div className="py-4" style={{ borderTop: `1px solid ${C.border}` }}>
      <div>
        <div className="text-lg font-semibold" style={{ color: C.text }}>{project.title}</div>
        <div className="text-sm mt-1" style={{ color: C.muted, maxWidth: 760 }}>{project.description}</div>
      </div>

      <div className="relative mt-4" style={{ paddingTop: 38 }}>
        <div
          style={{
            position: 'absolute',
            left: `${project.newPct}%`,
            top: 0,
            transform: 'translateX(-50%)',
            textAlign: 'center',
            whiteSpace: 'nowrap',
            pointerEvents: 'none',
          }}
        >
          <div style={{ color: C.text, fontSize: 11, fontWeight: 700, lineHeight: 1.1 }}>
            {project.oldCostLabel} → {project.newCostLabel}
          </div>
          <div style={{ color: C.muted, fontSize: 10.5, marginTop: 3, lineHeight: 1.1 }}>
            ({reductionMultiple}× reduction in cost)
          </div>
        </div>

        <div className="flex w-full items-end" style={{ height: 42 }} aria-label={`${project.title} cost composition`}>
          <div
            onMouseEnter={() => onHover('irc')}
            aria-label={`${project.title}, IRC still carries, ${project.segments.irc.amountLabel}, ${project.segments.irc.pct}%`}
            style={{
              ...segmentBase,
              width: `${project.ircPct}%`,
              height: activeSegment === 'irc' ? 42 : 38,
              background: C.irc,
              filter: activeSegment && activeSegment !== 'irc' ? 'opacity(0.72)' : 'none',
            }}
          >
            <div style={{ ...centerLabel, color: '#FFFFFF' }}>
              {project.segments.irc.amountLabel} · {project.segments.irc.pct}%
            </div>
          </div>
          <div
            onMouseEnter={() => onHover('market')}
            aria-label={`${project.title}, System / market carries, ${project.segments.market.amountLabel}, ${project.segments.market.pct}%`}
            style={{
              ...segmentBase,
              width: `${project.marketPct}%`,
              height: activeSegment === 'market' ? 42 : 38,
              background: C.market,
              filter: activeSegment && activeSegment !== 'market' ? 'opacity(0.72)' : 'none',
            }}
          >
            <div style={{ ...centerLabel, color: C.text }}>
              {project.segments.market.amountLabel} · {project.segments.market.pct}%
            </div>
          </div>
          <div
            onMouseEnter={() => onHover('removed')}
            aria-label={`${project.title}, Cost removed, ${project.segments.removed.amountLabel}, ${project.segments.removed.pct}%`}
            style={{
              ...segmentBase,
              width: `${removedPct}%`,
              height: activeSegment === 'removed' ? 42 : 38,
              background: removedPattern,
              border: `1px solid ${C.hatch}`,
              filter: activeSegment && activeSegment !== 'removed' ? 'opacity(0.72)' : 'none',
            }}
          >
            <div style={{ ...centerLabel, color: C.text }}>
              {project.segments.removed.amountLabel} · {project.segments.removed.pct}%
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function BuildersRoomCostArchitecture() {
  const [hovered, setHovered] = useState<HoverState>({ projectId: 'cttc', segment: 'irc' });
  const hoveredProject = PROJECTS.find((project) => project.id === hovered.projectId) || PROJECTS[0];
  const hoveredSegment = hoveredProject.segments[hovered.segment];

  return (
    <main className="p-4 md:p-6" style={{ background: C.canvas, color: C.text, minHeight: '100%' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-4">
          <h1 className="text-2xl font-semibold" style={{ color: C.text }}>Builders Room — Cost Architecture</h1>
          <Legend />
        </div>

        <section className="px-4 md:px-5" style={{ background: C.surface, border: `1px solid ${C.border}` }}>
          {PROJECTS.map((project) => (
            <ProjectRow
              key={project.id}
              project={project}
              hovered={hovered}
              onHover={(segment) => setHovered({ projectId: project.id, segment })}
            />
          ))}

          <div className="pb-5">
            <div className="overflow-hidden" style={{ ...explainerStyle(hovered.segment) }}>
              <div style={{ height: 6, width: '100%', ...explainerStripeStyle(hovered.segment) }} />
              <div className="p-4">
                <div className="text-sm font-semibold" style={{ color: C.text }}>
                  {hoveredProject.title} — {hoveredSegment.title} — {hoveredSegment.amountLabel} · {hoveredSegment.pct}%
                </div>
                <div className="text-sm mt-2" style={{ color: C.text, maxWidth: 820 }}>{hoveredSegment.explanation}</div>
                {hoveredSegment.examples ? (
                  <div className="text-xs mt-2" style={{ color: C.muted }}>{hoveredSegment.examples}</div>
                ) : null}
              </div>
            </div>
            <div className="text-xs mt-2" style={{ color: C.muted }}>
              IRC / system-market splits are illustrative placeholders, not audited cost allocations.
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}


Single grouped comparison of Closer than the Clinic and From Factory to Family showing IRC-carried cost, system/market-carried cost, and cost removed. Hover-only shared segment explainer; no project drill-down or click interaction.

Builders Room — Cost Architecture

Comments