/* global React */
const { useState, useEffect, useRef } = React;

// =================== PRIMITIVES ===================

const Icon = ({ name, size = 20, stroke = 1.75, style = {}, className, decorative = true, label }) => (
  <i
    data-lucide={name}
    className={className}
    {...(decorative ? { 'aria-hidden': 'true' } : { 'role': 'img', 'aria-label': label || name })}
    style={{ width: size, height: size, strokeWidth: stroke, display: "inline-block", ...style }}
  />
);

const Button = ({ variant = "primary", children, onClick, icon, iconRight, style = {}, ...rest }) => {
  const base = {
    fontFamily: "var(--font-sans)",
    fontSize: 15,
    fontWeight: 500,
    letterSpacing: "-0.01em",
    padding: "12px 20px",
    borderRadius: 8,
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    border: 0,
    transition: "all var(--dur-base) var(--ease-out)",
    lineHeight: 1,
  };
  const variants = {
    primary: {
      background: "var(--gs-charcoal-deep)",
      color: "#fff",
      boxShadow: "var(--shadow-glow-md)",
    },
    secondary: {
      background: "#fff",
      color: "var(--fg-1)",
      border: "1px solid var(--gs-hairline-strong)",
    },
    tertiary: {
      background: "transparent",
      color: "var(--fg-1)",
      padding: "12px 6px",
    },
    ghost: {
      background: "var(--gs-paper-warm)",
      color: "var(--fg-1)",
      border: "1px solid var(--gs-hairline)",
    },
  };
  return (
    <button onClick={onClick} style={{ ...base, ...variants[variant], ...style }} {...rest}>
      {icon && <Icon name={icon} size={16} />}
      {children}
      {iconRight && <Icon name={iconRight} size={16} />}
    </button>
  );
};

const Eyebrow = ({ children, style = {} }) => (
  <div className="eyebrow" style={{
    fontSize: 12, textTransform: "uppercase", letterSpacing: "0.18em",
    fontWeight: 500, color: "var(--fg-3)", ...style,
  }}>{children}</div>
);

const Chip = ({ children, tone = "neutral", dot, style = {} }) => {
  const tones = {
    neutral: { bg: "var(--gs-paper-warm)", fg: "var(--fg-2)", bd: "var(--gs-hairline)" },
    success: { bg: "#E8F5EF", fg: "#1F6D4B", bd: "transparent" },
    warn:    { bg: "#FAF3E4", fg: "#7A5716", bd: "transparent" },
    danger:  { bg: "#FBEDEC", fg: "#8F2E26", bd: "transparent" },
    blue:    { bg: "#E8F2FF", fg: "#1E5DB8", bd: "transparent" },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 500,
      background: t.bg, color: t.fg, border: `1px solid ${t.bd}`,
      borderRadius: 999, padding: "5px 11px", ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#2D9A6A" }} />}
      {children}
    </span>
  );
};

const TierPill = ({ tier }) => {
  const map = {
    Essential: { bg: "var(--gs-paper-warm)", fg: "var(--fg-2)", bd: "var(--gs-hairline)" },
    Standard:  { bg: "#E8F2FF", fg: "#1E5DB8", bd: "transparent" },
    Premium:   { bg: "var(--gs-charcoal-deep)", fg: "#fff", bd: "transparent" },
  };
  const t = map[tier];
  return (
    <span style={{
      fontFamily: "var(--font-sans)", fontSize: 10.5, textTransform: "uppercase",
      letterSpacing: "0.14em", fontWeight: 500,
      background: t.bg, color: t.fg, border: `1px solid ${t.bd}`,
      borderRadius: 999, padding: "4px 10px",
    }}>{tier}</span>
  );
};

const Price = ({ amount, unit }) => (
  <span className="price" style={{
    fontFamily: "var(--font-mono)", fontWeight: 500,
    fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em",
    color: "var(--fg-1)",
  }}>
    from ${amount}
    {unit && <span style={{ color: "var(--fg-3)", fontSize: "0.7em", marginLeft: 4 }}>{unit}</span>}
  </span>
);

// Subtle steel gradient placeholder (stand-in for before/after photography)
const SteelPhoto = ({ height = 200, seed = 0, label }) => {
  const tints = [
    ["#E3E8ED", "#B9C4CE", "#8A9BA8"],
    ["#F0F2F5", "#CBD2D9", "#6B7B8A"],
    ["#FAFBFC", "#E3E8ED", "#94A0AD"],
    ["#F4F3EE", "#D9CFC2", "#8A9BA8"],
  ];
  const t = tints[seed % tints.length];
  return (
    <div style={{
      height, width: "100%",
      background: `linear-gradient(135deg, ${t[0]}, ${t[1]} 55%, ${t[2]})`,
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(1200px 300px at 30% 20%, rgba(255,255,255,0.35), transparent 60%)",
      }} />
      {label && (
        <div style={{
          position: "absolute", left: 14, bottom: 12,
          fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gs-charcoal-deep)",
          background: "rgba(255,255,255,0.85)", padding: "3px 8px", borderRadius: 4,
          letterSpacing: 0,
        }}>{label}</div>
      )}
    </div>
  );
};

const Logo = ({ size = 44, showWordmark = false }) => (
  <a href="#home" style={{ display: "inline-flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
    <img src="/assets/grace_logo.jpg" alt="Grace Services" style={{ height: size, width: "auto", display: "block", borderRadius: 8 }} />
    {showWordmark && (
      <span style={{
        fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 600,
        color: "var(--fg-1)", letterSpacing: "-0.01em",
      }}>Grace Services</span>
    )}
  </a>
);

const Stars = ({ n = 5, size = 13 }) => (
  <span aria-label={n + " out of 5 stars"} role="img" style={{ color: "#C78F2E", fontSize: size, letterSpacing: 2 }}>
    <span aria-hidden="true">{"\u2605".repeat(n)}</span>
  </span>
);

const Section = ({ children, bg, pad = "96px 0", style = {} }) => (
  <section style={{ background: bg || "transparent", padding: pad, ...style }}>
    <div style={{
      maxWidth: "var(--container)", margin: "0 auto",
      padding: "0 var(--gutter)",
    }}>{children}</div>
  </section>
);

const ServiceCard = ({ s, onOpen }) => (
  <article
    onClick={() => onOpen && onOpen(s)}
    style={{
      background: "#fff", border: "1px solid var(--gs-hairline)",
      borderRadius: 14, overflow: "hidden", cursor: "pointer",
      boxShadow: "var(--shadow-xs)",
      transition: "all var(--dur-base) var(--ease-out)",
      display: "flex", flexDirection: "column",
    }}
    onMouseEnter={e => {
      e.currentTarget.style.boxShadow = "var(--shadow-md)";
      e.currentTarget.style.borderColor = "var(--gs-steel-light)";
    }}
    onMouseLeave={e => {
      e.currentTarget.style.boxShadow = "var(--shadow-xs)";
      e.currentTarget.style.borderColor = "var(--gs-hairline)";
    }}
  >
    <div style={{ position: "relative" }}>
      <SteelPhoto height={160} seed={s.id.charCodeAt(0)} />
      <div style={{
        position: "absolute", left: 12, bottom: 12,
        width: 36, height: 36, borderRadius: 8,
        background: "rgba(255,255,255,0.9)", backdropFilter: "blur(6px)",
        display: "grid", placeItems: "center", color: "var(--fg-1)",
      }}>
        <Icon name={s.icon} size={18} />
      </div>
    </div>
    <div style={{ padding: "18px 20px 20px", display: "flex", flexDirection: "column", gap: 6, flex: 1 }}>
      <Eyebrow style={{ marginBottom: 2 }}>{s.cat}</Eyebrow>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.15,
        letterSpacing: "-0.01em", color: "var(--fg-1)",
      }}>{s.title}</div>
      <div style={{ fontSize: 14, lineHeight: 1.55, color: "var(--fg-3)", flex: 1 }}>
        {s.blurb}
      </div>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        paddingTop: 12, marginTop: 10, borderTop: "1px solid var(--gs-hairline)",
      }}>
        <Price amount={s.price} unit={s.unit} />
        <span style={{ fontSize: 13, color: "var(--accent)", fontWeight: 500 }}>Book &rarr;</span>
      </div>
      <div style={{ fontSize: 11, color: "var(--fg-3)", marginTop: 2, paddingBottom: 4, fontStyle: "italic" }}>
        Prices do NOT include materials
      </div>
    </div>
  </article>
);

Object.assign(window, { Icon, Button, Eyebrow, Chip, TierPill, Price, SteelPhoto, Logo, Stars, Section, ServiceCard });