import { MetricStrip } from "../../components/MetricStrip";
import type { AllData } from "../../types/data";
import type { DerivedMetrics } from "../../lib/deriveMetrics";

interface Props {
  data: AllData;
  derived: DerivedMetrics;
}

export function HeroSection({ data, derived }: Props) {
  const p = data.c01_developer_profile.profile;
  const fmtUsd = (n: number) => `$${n.toFixed(2)}`;
  const costPerSession = p.total_cost_usd / p.session_count;
  const activeDays = Math.round(p.session_count / p.sessions_per_active_day);

  return (
    <section id="hero" className="scroll-mt-16">
      <div className="mb-6">
        <h1 className="text-[28px] font-bold text-slate-900 tracking-tight">
          {p.session_count} sessions &middot; {fmtUsd(p.total_cost_usd)} total cost
        </h1>
        <p className="text-[13px] text-slate-400 mt-1">
          AI coding assistant usage across {activeDays} active days
        </p>
      </div>

      <MetricStrip metrics={[
        { label: "Sessions", value: p.session_count.toLocaleString(), accent: "blue", hint: "Total AI chat sessions" },
        { label: "Total Cost", value: fmtUsd(p.total_cost_usd), accent: "green", hint: "Sum of all API token costs" },
        { label: "Cost / Session", value: fmtUsd(costPerSession), accent: "red", hint: "Average spend per session" },
        { label: "Edit Rate", value: `${(p.edit_session_pct * 100).toFixed(0)}%`, accent: "amber", hint: "Sessions that produced file edits" },
        { label: "Zero-Edit", value: `${(derived.zeroEditPct * 100).toFixed(0)}%`, accent: "red", hint: "Sessions with no code changes" },
        { label: "Primary Source", value: p.preferred_source.replace(/_/g, " "), accent: "purple", hint: "Most-used AI coding tool" },
      ]} />
    </section>
  );
}
