// ============ LANDING V2 PRIMITIVES ============
// Small, repeated visual pieces from the "Citrus landing page redesign"
// Claude Design source, extracted once so landing/app.jsx composes
// sections from these instead of hand-rolling the same markup per section.
// All classes are .lv2-* (see shared/styles/21-landing-v2.css).

function Kicker({ label, onDark = false }) {
  return (
    <div className={`lv2-kicker ${onDark ? "lv2-kicker--on-dark" : ""}`}>
      <span className="lv2-kicker-dot" />
      {label}
    </div>
  );
}

function Pill({ children, tone = "default" }) {
  if (tone === "live") return <span className="lv2-pill--live">{children}</span>;
  if (tone === "tag") return <span className="lv2-pill--tag">{children}</span>;
  if (tone === "marquee") return <span className="lv2-pill--marquee">{children}</span>;
  return <span className="lv2-pill">{children}</span>;
}

function StatusDot({ tone = "gray" }) {
  return <span className={`lv2-status-dot lv2-status-dot--${tone}`} />;
}

function FacetList({ items, dark = false }) {
  return (
    <div className={`lv2-facet-list ${dark ? "lv2-facet-list--dark" : ""}`}>
      {items.map((f, i) => (
        <div key={i} className="lv2-facet-row">
          <div className="lv2-facet-row-k">{f.k}</div>
          <div className="lv2-facet-row-v">{f.v}</div>
        </div>
      ))}
    </div>
  );
}

function Checklist({ items }) {
  return (
    <div className="lv2-checklist">
      {items.map((text, i) => (
        <div key={i} className="lv2-check-row">
          <span className="lv2-check-icon">✓</span>
          {text}
        </div>
      ))}
    </div>
  );
}

function StepCard({ num, tag, title, children }) {
  return (
    <div className="lv2-step-card">
      <div className="lv2-step-head">
        <span className="lv2-step-num">{num}</span>
        <span className="lv2-step-tag">{tag}</span>
      </div>
      <h3 className="lv2-step-title">{title}</h3>
      <p className="lv2-step-body">{children}</p>
    </div>
  );
}

function StatusStepCard({ tone, step, title, children }) {
  return (
    <div className="lv2-auth-card">
      <div className="lv2-auth-head">
        <StatusDot tone={tone} />
        <span className="lv2-auth-step">{step}</span>
      </div>
      <h3 className="lv2-auth-title">{title}</h3>
      <p className="lv2-auth-body">{children}</p>
    </div>
  );
}

function Lv2Button({ variant = "solid-dark", href, className = "", children, ...rest }) {
  const cls = `lv2-btn lv2-btn--${variant} ${className}`;
  if (href) {
    return (
      <a href={href} className={cls} {...rest}>
        {children}
      </a>
    );
  }
  return (
    <button type="button" className={cls} {...rest}>
      {children}
    </button>
  );
}

window.Lv2Kicker = Kicker;
window.Lv2Pill = Pill;
window.Lv2StatusDot = StatusDot;
window.Lv2FacetList = FacetList;
window.Lv2Checklist = Checklist;
window.Lv2StepCard = StepCard;
window.Lv2StatusStepCard = StatusStepCard;
window.Lv2Button = Lv2Button;