/* Type section — full MD3 type scale with live specimens */

const TYPE_SCALE = [
  { role: "Display Large",   family: "Playfair Display", size: 57, line: 64, track: -0.25, weight: 400, sample: "A small thing, beautifully sent.", style: "display" },
  { role: "Display Medium",  family: "Playfair Display", size: 45, line: 52, track: 0,     weight: 400, sample: "Sixty minutes from cart to ribbon.", style: "display" },
  { role: "Display Small",   family: "Playfair Display", size: 36, line: 44, track: 0,     weight: 400, sample: "Curated by Zocane, Mumbai.", style: "display" },
  { role: "Headline Large",  family: "Playfair Display", size: 32, line: 40, track: 0,     weight: 500, sample: "The unboxing moat is the product.", style: "display" },
  { role: "Headline Medium", family: "Playfair Display", size: 28, line: 36, track: 0,     weight: 500, sample: "Choose a ribbon for this gift", style: "display" },
  { role: "Headline Small",  family: "Playfair Display", size: 24, line: 32, track: 0,     weight: 500, sample: "Trusted by 240+ corporate teams", style: "display" },
  { role: "Title Large",     family: "Inter",            size: 22, line: 28, track: 0,     weight: 500, sample: "Quick gifts for tonight", style: "body" },
  { role: "Title Medium",    family: "Inter",            size: 16, line: 24, track: 0.15,  weight: 500, sample: "Birthday · arriving 7:42 PM", style: "body" },
  { role: "Title Small",     family: "Inter",            size: 14, line: 20, track: 0.10,  weight: 500, sample: "Add a handwritten card", style: "body" },
  { role: "Body Large",      family: "Inter",            size: 16, line: 24, track: 0.50,  weight: 400, sample: "Your gift is on its way and will arrive at the address in approximately 47 minutes. The ribbon you chose is being tied right now.", style: "body" },
  { role: "Body Medium",     family: "Inter",            size: 14, line: 20, track: 0.25,  weight: 400, sample: "All gifts ship in our discreet weatherproof bag. The box inside is the surprise.", style: "body" },
  { role: "Body Small",      family: "Inter",            size: 12, line: 16, track: 0.40,  weight: 400, sample: "Free returns within 24 hours of delivery", style: "body" },
  { role: "Label Large",     family: "Inter",            size: 14, line: 20, track: 0.10,  weight: 500, sample: "Continue to checkout", style: "body" },
  { role: "Label Medium",    family: "Inter",            size: 12, line: 16, track: 0.50,  weight: 500, sample: "ADD GREETING", style: "body" },
  { role: "Label Small",     family: "Inter",            size: 11, line: 16, track: 0.50,  weight: 500, sample: "OPTIONAL", style: "body" },
];

function TypeSection({ tweaks }) {
  const displayFont = (tweaks && tweaks.displayFont) || "Bricolage Grotesque";
  const bodyFont    = (tweaks && tweaks.bodyFont)    || "Inter";

  return (
    <section id="type" className="zo-section">
      <div className="zo-section-eyebrow">02 — Typography</div>
      <h2 className="zo-section-title">{displayFont} sets the tone. {bodyFont} does the work.</h2>
      <p className="zo-section-lede">
        Display and headlines run on {displayFont} — restrained, editorial, with subtle italic flourishes for the moment of giving. {bodyFont} handles every UI surface.
      </p>

      <div className="zo-type-pairing">
        <div style={{ fontFamily: "var(--font-display)", fontSize: 88, fontWeight: 400, lineHeight: 1, letterSpacing: -1, color: "var(--md-primary)", marginBottom: 8 }}>
          Aa <span style={{ fontStyle: "italic", color: "var(--md-secondary)" }}>Aa</span>
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 14, color: "var(--md-on-surface-variant)", letterSpacing: 0.5, marginBottom: 24 }}>
          {displayFont} · Regular · Italic
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 88, fontWeight: 400, lineHeight: 1, color: "var(--md-on-surface)", marginBottom: 8 }}>
          Aa <span style={{ fontWeight: 600 }}>Aa</span>
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--md-on-surface-variant)", letterSpacing: 0.5 }}>
          {bodyFont} · Regular · Semibold
        </div>
      </div>

      <h3 className="zo-subsection-title">MD3 type scale</h3>
      <p style={{ color: "var(--md-on-surface-variant)", fontSize: 14, marginBottom: 16, maxWidth: "60ch" }}>
        Fifteen roles across five categories. Sizes in px, tracking in px.
      </p>

      <div style={{ background: "var(--md-surface-container-low)", borderRadius: "var(--shape-xl)", border: "1px solid var(--md-outline-variant)", overflow: "hidden" }}>
        {TYPE_SCALE.map((t, i) => {
          const family = t.style === "display" ? displayFont : bodyFont;
          return (
            <div key={t.role} className="zo-type-specimen" style={{ borderBottom: i === TYPE_SCALE.length - 1 ? "none" : undefined }}>
              <div className="zo-type-meta">
                <div className="zo-type-meta-name">{t.role}</div>
                <div>{family}</div>
                <div>{t.size} / {t.line} · {t.track}px · {t.weight}</div>
              </div>
              <div
                className={`zo-type-sample ${t.style}`}
                style={{
                  fontSize: t.size,
                  lineHeight: `${t.line}px`,
                  letterSpacing: `${t.track}px`,
                  fontWeight: t.weight,
                  ...(t.role.startsWith("Label") ? { textTransform: "uppercase" } : {}),
                }}
              >
                {t.sample}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

window.TypeSection = TypeSection;