/**
 * Mono Grid — a services grid where each card is headed by a single letter in a
 * rounded tile rather than an icon.
 *
 * WHY A LETTER AND NOT AN ICON. Six generic line icons — a tooth, a shield, a
 * heart — are the single fastest way to make a real business look like a
 * template, because they are the same six icons every template ships. A
 * monogram is typography you already own: it inherits the brand's typeface, it
 * never needs an icon library, and it cannot be wrong about what it depicts.
 *
 * Server-renderable: no state, no effects, no client directive needed.
 */

export interface MonoItem {
  /** One character. Two at most — three stops reading as a monogram. */
  mark: string;
  title: string;
  body: string;
}

export interface MonoGridProps {
  kicker?: string;
  headline?: string;
  intro?: string;
  items?: MonoItem[];
  accent?: string;
  ink?: string;
  inkSoft?: string;
  /** Cards per row on a wide screen. */
  columns?: 2 | 3;
}

const DEMO: MonoItem[] = [
  { mark: "P", title: "Preventive", body: "Cleanings, exams and digital imaging that keep small problems from becoming big ones." },
  { mark: "R", title: "Restorative", body: "Implants, crowns and dentures that rebuild function and comfort." },
  { mark: "C", title: "Cosmetic", body: "Veneers and whitening, designed around the result you actually want." },
  { mark: "A", title: "Aligners", body: "Clear aligners with virtual check-ins between appointments." },
  { mark: "S", title: "Sedation", body: "Surgical care with sedation options for anxious patients." },
  { mark: "E", title: "Emergency", body: "Same-day appointments wherever the schedule allows." },
];

export default function MonoGrid({
  kicker = "Healthy smiles",
  headline = "Everyday!",
  intro = "Get your day started with a smile. Check our services to see what we can help you with.",
  items = DEMO,
  accent = "#d26575",
  ink = "#33323e",
  inkSoft = "#7a7683",
  columns = 3,
}: MonoGridProps) {
  const css = `
    .mg { padding: 76px 20px; font-family: 'Archivo', system-ui, sans-serif; }
    @media (min-width: 768px) { .mg { padding: 130px 28px; } }
    .mg, .mg * { box-sizing: border-box; }
    .mg-in { max-width: 1180px; margin: 0 auto; }
    .mg-head { text-align: center; margin-bottom: 56px; }
    @media (min-width: 768px) { .mg-head { margin-bottom: 70px; } }
    .mg-kick { margin: 0; font-size: clamp(24px,3vw,34px); font-weight: 500; color: ${ink};
      text-transform: uppercase; letter-spacing: -.02em; }
    .mg-h { margin: 0 0 18px; font-size: clamp(40px,5.6vw,64px); color: ${accent};
      text-transform: uppercase; letter-spacing: -.02em; font-weight: 700; }
    .mg-intro { margin: 0 auto; max-width: 460px; font-size: 16px; line-height: 1.7;
      color: #5b5866; text-wrap: pretty; }

    .mg-grid { display: grid; gap: 40px; }
    @media (min-width: 640px) { .mg-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1000px) { .mg-grid { grid-template-columns: repeat(${columns}, 1fr); } }

    .mg-card { padding: 26px 22px; text-align: center; background: #fff;
      border: 1px solid color-mix(in srgb, ${accent} 15%, transparent);
      border-radius: 16px;
      transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease; }
    .mg-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(60,25,12,.1); }
    .mg-mark { display: flex; align-items: center; justify-content: center;
      width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 18px;
      background: color-mix(in srgb, ${accent} 12%, transparent); color: ${accent};
      font-size: 24px; text-transform: uppercase; letter-spacing: -.02em; font-weight: 700; }
    .mg-t { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: ${ink}; }
    .mg-p { margin: 0; font-size: 14.5px; line-height: 1.7; color: ${inkSoft}; text-wrap: pretty; }
  `;

  return (
    <section className="mg">
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap" />
      <style>{css}</style>
      <div className="mg-in">
        <div className="mg-head">
          {kicker && <p className="mg-kick">{kicker}</p>}
          {headline && <h2 className="mg-h">{headline}</h2>}
          {intro && <p className="mg-intro">{intro}</p>}
        </div>
        <div className="mg-grid">
          {items.map((it) => (
            <div className="mg-card" key={it.title}>
              <span className="mg-mark" aria-hidden="true">{it.mark}</span>
              <p className="mg-t">{it.title}</p>
              <p className="mg-p">{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}