Split Editorial Hero

"use client";

import * as React from "react";
import SplitEditorialHero from "@/components/ui/split-editorial-hero";

const defaultServices = [
  {
    id: "strategy",
    label: "Strategy",
    description: "Align your leadership and product teams around the problem worth solving.",
    deliverables: [
      "Opportunity mapping & user research",
      "Core product architecture principles",
      "A measurable, phased delivery roadmap",
    ],
  },
  {
    id: "design",
    label: "Design",
    description: "Make every interaction feel intentional, intuitive, and unmistakable.",
    deliverables: [
      "Visual & interface art direction",
      "Accessible multi-brand design systems",
      "High-fidelity interactive prototypes",
    ],
  },
  {
    id: "build",
    label: "Build",
    description: "Bring refined details into production without losing the original craft.",
    deliverables: [
      "Typed React & Tailwind component libraries",
      "Fluid motion & micro-interaction engineering",
      "Performance & accessibility audits",
    ],
  },
];

export default function SplitEditorialHeroDemo() {
  const [selection, setSelection] = React.useState("");

  return (
    <div className="w-full bg-background min-h-[540px] flex flex-col items-center justify-center p-4 sm:p-6">
      <SplitEditorialHero
        eyebrow="An independent digital practice"
        title="Clarity is a competitive advantage."
        description="We partner with ambitious teams to turn complex workflows into interfaces people genuinely enjoy using."
        services={defaultServices}
        media={
          <svg
            viewBox="0 0 320 340"
            role="img"
            aria-label="Architectural grid study in monochrome"
            className="w-full h-auto block text-foreground bg-muted/40"
          >
            {Array.from({ length: 12 }, (_, i) => (
              <React.Fragment key={i}>
                <path
                  d={`M${40 + i * 20} 30V310`}
                  stroke="currentColor"
                  strokeOpacity={0.08 + i * 0.015}
                />
                <path
                  d={`M30 ${50 + i * 22}H290`}
                  stroke="currentColor"
                  strokeOpacity="0.12"
                />
              </React.Fragment>
            ))}
            <rect
              x="75"
              y="85"
              width="170"
              height="170"
              fill="none"
              stroke="currentColor"
              strokeOpacity="0.35"
              strokeWidth="1.5"
            />
            <circle
              cx="160"
              cy="170"
              r="55"
              fill="none"
              stroke="currentColor"
              strokeOpacity="0.25"
              strokeWidth="1.2"
            />
            <path
              d="M75 255 245 85"
              stroke="currentColor"
              strokeOpacity="0.5"
              strokeWidth="1.5"
            />
          </svg>
        }
        onExplore={(id) => setSelection(id)}
      />
      {selection && (
        <p role="status" className="text-xs text-muted-foreground mt-2">
          Exploring {selection} discipline.
        </p>
      )}
    </div>
  );
}