/* FlagshipSection, 3 hero SKU cards (Studio 36", Pro 52", Master 72") */

function TrimmerIcon({ size = 280, scale = 1 }) {
  return (
    <svg viewBox="0 0 400 200" width={size} aria-hidden="true">
      <rect x="40" y="130" width={300 * scale + 20} height="24" fill="#FBF8F1" stroke="#1C2A47" strokeWidth="1.2"/>
      <rect x="30" y="116" width={300 * scale + 30} height="22" fill="#FBF8F1" stroke="#1C2A47" strokeWidth="1.2"/>
      <rect x="20" y="100" width={300 * scale + 40} height="22" fill="#FBF8F1" stroke="#1C2A47" strokeWidth="1.2"/>
      <rect x="20" y="80" width={340 * scale + 20} height="14" fill="#E8E1D2" stroke="#1C2A47" strokeWidth="1.2"/>
      <line x1="20" y1="62" x2={360 * scale + 20} y2="62" stroke="#1C2A47" strokeWidth="2"/>
      <line x1="20" y1="76" x2={360 * scale + 20} y2="76" stroke="#1C2A47" strokeWidth="2"/>
      <rect x="10" y="56" width="12" height="42" fill="#1C2A47"/>
      <rect x={356 * scale + 22} y="56" width="12" height="42" fill="#1C2A47"/>
      <g transform={`translate(${190 * scale + 10} 42)`}>
        <rect x="-24" y="14" width="48" height="28" fill="#1C2A47"/>
        <rect x="-20" y="18" width="40" height="4" fill="#D9A6A6"/>
        <circle cx="0" cy="54" r="18" fill="#FBF8F1" stroke="#1C2A47" strokeWidth="1.5"/>
        <circle cx="0" cy="54" r="2.5" fill="#1C2A47"/>
        <line x1="-14" y1="54" x2="14" y2="54" stroke="#1C2A47"/>
      </g>
    </svg>
  );
}

function FlagshipCard({ badge, name, desc, specs, price, iconScale = 1, featured, sku, href }) {
  function handleAddToQuote(e) {
    e.preventDefault();
    if (!window.__scdQuote) return;
    window.__scdQuote.add({
      sku: sku || name,
      name: name,
      eyebrow: badge,
      price: price,
      kind: "trimmer",
    });
  }
  return (
    <article style={{
      background: "var(--scd-cream-50)",
      border: `1px solid ${featured ? "var(--scd-blush-500)" : "rgba(245,239,228,0.12)"}`,
      borderRadius: 4,
      padding: 0,
      display: "flex", flexDirection: "column",
      boxShadow: featured
        ? "0 24px 48px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2)"
        : "0 12px 28px rgba(0,0,0,0.22)",
      position: "relative",
      overflow: "hidden",
      transform: featured ? "translateY(-6px)" : "none",
    }}>
      {featured && (
        <div style={{
          position: "absolute", top: 12, right: 12,
          background: "var(--scd-blush-500)", color: "var(--scd-navy-900)",
          fontSize: 10, fontWeight: 700, letterSpacing: "0.14em",
          textTransform: "uppercase", padding: "4px 10px", borderRadius: 2, zIndex: 2,
        }}>Best seller</div>
      )}
      <div style={{
        background: "var(--scd-cream-200)",
        padding: 24, minHeight: 200,
        display: "flex", alignItems: "center", justifyContent: "center",
        borderBottom: "1px solid var(--border)",
        position: "relative",
        borderTopLeftRadius: 3, borderTopRightRadius: 3,
      }}>
        <TrimmerIcon size={280} scale={iconScale}/>
        <span aria-hidden="true" style={{
          position: "absolute", bottom: 10, left: 14,
          fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--scd-ink-500)", fontWeight: 500,
        }}>Placeholder · product photo</span>
      </div>
      <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14, flex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
          <Eyebrow>{badge}</Eyebrow>
          <Badge variant="stock">
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor" }}/>In stock
          </Badge>
        </div>
        <div>
          <h3 style={{
            fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 28,
            color: "var(--fg-brand)", letterSpacing: "-0.01em", lineHeight: 1.1,
            margin: 0,
          }}>{name}</h3>
          <p style={{
            margin: "8px 0 0", fontSize: 14, lineHeight: 1.55,
            color: "var(--fg-muted)",
          }}>{desc}</p>
        </div>
        <ul style={{
          listStyle: "none", padding: "16px 0", margin: 0,
          borderTop: "1px solid var(--border)",
          borderBottom: "1px solid var(--border)",
          display: "grid", gap: 10,
        }}>
          {specs.map(s => (
            <li key={s.k} style={{
              display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16,
            }}>
              <span style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic", fontWeight: 400,
                fontSize: 14, color: "var(--fg-muted)",
                letterSpacing: "0.005em",
              }}>{s.k}</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, alignSelf: "center",
                borderTop: "1px dotted var(--scd-ink-300)",
                margin: "0 4px",
              }}/>
              <span style={{
                fontFamily: "var(--font-display)", fontWeight: 400,
                fontSize: 15, color: "var(--fg-brand)",
                letterSpacing: "-0.005em",
                fontVariantNumeric: "lining-nums tabular-nums",
              }}>{s.v}</span>
            </li>
          ))}
        </ul>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: "auto" }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg-muted)", fontWeight: 600 }}>From</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--fg-brand)", letterSpacing: "-0.01em", lineHeight: 1 }}>{price}</div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <a href={href || "#"} className="btn btn--secondary btn--sm">View details</a>
            <button type="button" onClick={handleAddToQuote} className="btn btn--primary btn--sm">Add to quote</button>
          </div>
        </div>
      </div>
    </article>
  );
}

function FlagshipSection() {
  return (
    <section id="trimmers" style={{ background: "var(--scd-navy-900)", color: "var(--scd-cream-50)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <Eyebrow style={{ color: "var(--scd-blush-300)" }}>Flagship, rotary trimmers</Eyebrow>
            <h2 style={{ marginTop: 14, color: "var(--scd-cream-50)" }}>Long-bed, twin-rail. Built for the shop floor.</h2>
          </div>
          <p className="lead" style={{ color: "var(--scd-cream-200)", opacity: 0.85 }}>
            Precision-ground blades, serviceable heads, and a parts shelf we&rsquo;ve kept
            stocked for four decades. Three bed-lengths cover most production work.
          </p>
        </div>
        <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          <FlagshipCard
            badge="Studio · 36&quot;"
            sku="RT-STUDIO-36"
            name="Studio 36"
            desc="The small-format workhorse. Trim up to 36″ wide on a single twin-rail carriage."
            specs={[
              { k: "Bed length", v: "36 × 24 in" },
              { k: "Cut capacity", v: "0.75 in stack" },
              { k: "Blade life", v: "25,000 cuts" },
              { k: "Weight", v: "42 lb" },
            ]}
            price="$848"
            iconScale={0.7}
          />
          <FlagshipCard
            badge="Pro · 52&quot;"
            sku="RT-PRO-52"
            name="Pro 52"
            desc="The daily-driver for sign shops and photo labs, the bed length FedEx Office reorders."
            specs={[
              { k: "Bed length", v: "52 × 30 in" },
              { k: "Cut capacity", v: "1.0 in stack" },
              { k: "Blade life", v: "40,000 cuts" },
              { k: "Weight", v: "68 lb" },
            ]}
            price="$1,248"
            iconScale={1}
            featured
          />
          <FlagshipCard
            badge="Master · 72&quot;"
            sku="RT-MASTER-72"
            name="Master 72"
            desc="Large-format architecture and trade-show work, stainless twin-rail, lifetime frame."
            specs={[
              { k: "Bed length", v: "72 × 36 in" },
              { k: "Cut capacity", v: "1.25 in stack" },
              { k: "Blade life", v: "60,000 cuts" },
              { k: "Weight", v: "94 lb" },
            ]}
            price="$1,768"
            iconScale={1.3}
          />
        </div>
        <div style={{ marginTop: 48, textAlign: "center" }}>
          <a href="collection-rotary-trimmers-v1.html" style={{
            fontSize: 14, fontWeight: 500,
            color: "var(--scd-cream-50)",
            textDecoration: "none",
            borderBottom: "1px solid var(--scd-blush-500)",
            paddingBottom: 2,
          }}>
            Compare all 14 trimmer models <Arrow/>
          </a>
        </div>
      </div>
    </section>
  );
}

window.FlagshipSection = FlagshipSection;