// Shared primitives for Land of Enchantment Law advertising materials
// Logos, photo blocks, QR placeholders, plan data, and small UI atoms.

const PLANS = [
  {
    key: "personal",
    name: "Personal",
    price: 75,
    tagline: "A lawyer in your pocket.",
    calls: "1 × 30-min call / month",
    response: "3 business days",
    pages: "Flat-fee add-ons",
    addons: "Flat-fee add-ons available",
    project: "—",
    bestFor: "Homeowners, renters, anyone who's been avoiding a legal question."
  },
  {
    key: "plus",
    name: "Personal Plus",
    price: 150,
    tagline: "More calls. More work. More you.",
    calls: "Up to 4 × 30-min / month",
    response: "48 hours",
    pages: "$75 / page",
    addons: "Flat-fee add-ons available",
    project: "—",
    bestFor: "Active lives — buying, leasing, signing, drafting."
  },
  {
    key: "premium",
    name: "Personal Premium",
    price: 350,
    tagline: "Concierge legal. On retainer, without the retainer.",
    calls: "Up to 6 × 30-min / month",
    response: "24 hours",
    pages: "$50 / page",
    addons: "Flat-fee add-ons available",
    project: "1 project / 3 months (≤10 pages)",
    bestFor: "Estate planning, real estate, complex personal matters."
  },
  {
    key: "solo",
    name: "Solo Entrepreneur",
    price: 350,
    tagline: "Outside counsel for the one-person shop — aka Micro Business.",
    calls: "6 × 30-min + 1 × 15-min check-in",
    response: "24 hours",
    pages: "$50 / page",
    addons: "Flat-fee add-ons available",
    project: "1 project / 3 months (≤10 pages)",
    bestFor: "Single-member LLCs running real businesses."
  }
];

const MEMBER_BENEFITS = [
  { label: "Direct relationship with your attorney", icon: "user" },
  { label: "Member rates on all flat-fee services", icon: "tag" },
  { label: "Personal scheduling link for every member", icon: "calendar" },
  { label: "Discounted criminal defense representation", icon: "shield" },
  { label: "Secure client portal — your file, your record", icon: "lock" },
  { label: "Discounted civil litigation if we take the case", icon: "scale" }
];

const PRACTICE_AREAS = [
  "Everyday personal & small-business contracts",
  "Discounted criminal defense",
  "Landlord / tenant (non-litigation)",
  "Residential real estate",
  "Simple estate planning"
];

// --- Logo components ----------------------------------------------------
const LogoHorizontal = ({ height = 44, style = {} }) => (
  <img
    src="assets/logo-horizontal.png"
    alt="Law Office of Johnn Osborn, P.C. — Land of Enchantment Law"
    style={{ height, width: "auto", display: "block", ...style }}
  />
);

const LogoSeal = ({ size = 120, style = {} }) => (
  <img
    src="assets/logo-seal.png"
    alt="Land of Enchantment Law seal"
    style={{ width: size, height: size, display: "block", ...style }}
  />
);

// Clean "wordmark" version using brand text only — no image, for places where
// the seal/horizontal mark would be too heavy.
const Wordmark = ({ color = "var(--ink)", size = 18 }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 10, color }}>
    <span style={{
      fontFamily: "var(--serif)",
      fontSize: size * 1.05,
      letterSpacing: "0.04em",
      lineHeight: 1
    }}>Land of Enchantment Law</span>
  </div>
);

// --- Decorative SVGs (geometric, not illustrative) -----------------------
// Minimal mesa silhouette band — used as a section divider.
const MesaBand = ({ height = 60, fill = "var(--ink)", style = {} }) => (
  <svg viewBox="0 0 1200 120" preserveAspectRatio="none"
       style={{ width: "100%", height, display: "block", ...style }}>
    <path d="M0,120 L0,80 L120,80 L160,55 L320,55 L360,30 L520,30 L560,55 L720,55 L760,42 L900,42 L940,68 L1080,68 L1120,50 L1200,50 L1200,120 Z"
          fill={fill}/>
  </svg>
);

// Sun/orb mark — abstract, for IG hero moments.
const SunMark = ({ size = 60, color = "var(--sun)" }) => (
  <svg width={size} height={size} viewBox="0 0 60 60">
    <circle cx="30" cy="30" r="14" fill={color}/>
    {[...Array(12)].map((_, i) => {
      const a = (i / 12) * Math.PI * 2;
      const x1 = 30 + Math.cos(a) * 20;
      const y1 = 30 + Math.sin(a) * 20;
      const x2 = 30 + Math.cos(a) * 26;
      const y2 = 30 + Math.sin(a) * 26;
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
                   stroke={color} strokeWidth="1.5" strokeLinecap="round"/>;
    })}
  </svg>
);

// --- Photo placeholder ---------------------------------------------------
// Subtle layered "landscape" using only flat brand colors (no faux photo).
// The user said photographic placeholders are fine — we use a stylized
// horizon block with a mono caption telling them what to drop in.
const NMPhoto = ({ label = "NM landscape photo", aspect = "3 / 2", variant = "mesa", style = {} }) => {
  const layers = {
    mesa: (
      <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice"
           style={{ width: "100%", height: "100%", display: "block" }}>
        <defs>
          <linearGradient id="sky-g" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#9CCCD9"/>
            <stop offset="100%" stopColor="#E8C9A2"/>
          </linearGradient>
        </defs>
        <rect width="600" height="400" fill="url(#sky-g)"/>
        <circle cx="450" cy="130" r="38" fill="#D8703A" opacity="0.85"/>
        {/* far mesa */}
        <path d="M0,260 L80,260 L100,235 L240,235 L260,250 L380,250 L400,225 L520,225 L540,245 L600,245 L600,400 L0,400 Z" fill="#B08568" opacity="0.7"/>
        {/* near mesa */}
        <path d="M0,310 L60,310 L90,285 L200,285 L230,300 L360,300 L390,278 L500,278 L530,295 L600,295 L600,400 L0,400 Z" fill="#8a5a3e"/>
        {/* foreground */}
        <rect y="345" width="600" height="55" fill="#2D3F2F"/>
      </svg>
    ),
    sky: (
      <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice"
           style={{ width: "100%", height: "100%", display: "block" }}>
        <defs>
          <linearGradient id="sky-g2" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#7FBED1"/>
            <stop offset="60%" stopColor="#E8B27A"/>
            <stop offset="100%" stopColor="#D8703A"/>
          </linearGradient>
        </defs>
        <rect width="600" height="400" fill="url(#sky-g2)"/>
        <circle cx="300" cy="240" r="60" fill="#F5DDB8" opacity="0.6"/>
      </svg>
    ),
    adobe: (
      <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice"
           style={{ width: "100%", height: "100%", display: "block" }}>
        <rect width="600" height="400" fill="#C68C5F"/>
        <rect width="600" height="120" fill="#7FBED1"/>
        <rect x="120" y="160" width="120" height="180" fill="#A56F47" rx="4"/>
        <rect x="280" y="140" width="180" height="200" fill="#8a5a3e" rx="4"/>
        <rect x="160" y="220" width="40" height="60" fill="#1F4945"/>
        <rect x="320" y="200" width="50" height="80" fill="#1F4945"/>
        <rect x="380" y="200" width="50" height="80" fill="#1F4945"/>
      </svg>
    )
  };
  return (
    <div style={{ position: "relative", aspectRatio: aspect, overflow: "hidden", borderRadius: 0, ...style }}>
      {layers[variant]}
      <div className="mono-label" style={{
        position: "absolute", left: 14, bottom: 12,
        fontSize: 10, color: "#FAF6EC",
        background: "rgba(31,73,69,0.55)", padding: "4px 8px",
        backdropFilter: "blur(2px)"
      }}>{label}</div>
    </div>
  );
};

// --- Real QR for https://calendly.com/loelaw/consultation-subscription ----------
// Generated at build time with high error correction. Two color variants.
const QR = ({ size = 96, color = "var(--ink)", bg = "var(--cream)", padding = 8 }) => {
  // Use the dark or light SVG depending on requested color tone.
  // Heuristic: if the requested color is light/cream, use the light variant.
  const isLight = typeof color === "string" && (color.includes("cream") || color.includes("F5EFE3"));
  const src = isLight ? "assets/qr-consultation-light.svg" : "assets/qr-consultation.svg";
  return (
    <div style={{
      background: bg, padding, display: "inline-block",
      borderRadius: 4, lineHeight: 0
    }}>
      <img src={src} alt="Scan to book a free 15-minute intro call"
           style={{ width: size - padding * 2, height: size - padding * 2, display: "block" }}/>
    </div>
  );
};

// --- Plan card primitive (compact) --------------------------------------
const PlanCard = ({ plan, dense = false, dark = false, accent = false }) => {
  const bg = dark ? "var(--ink)" : (accent ? "var(--cream-2)" : "var(--paper)");
  const fg = dark ? "var(--cream)" : "var(--ink)";
  const rule = dark ? "rgba(245,239,227,0.18)" : "var(--rule)";
  return (
    <div style={{
      background: bg, color: fg,
      padding: dense ? "18px 18px" : "26px 22px",
      border: `1px solid ${rule}`,
      display: "flex", flexDirection: "column", gap: dense ? 10 : 14,
      height: "100%"
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span className="mono-label" style={{ fontSize: 10, opacity: 0.7 }}>{plan.key.toUpperCase()}</span>
        <span className="mono-label" style={{ fontSize: 10, opacity: 0.5 }}>NM</span>
      </div>
      <div className="serif" style={{ fontSize: dense ? 22 : 28, lineHeight: 1.05 }}>{plan.name}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
        <span className="numeric" style={{ fontSize: dense ? 38 : 52, fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1 }}>${plan.price}</span>
        <span className="mono-label" style={{ fontSize: 10, opacity: 0.65 }}>/MONTH</span>
      </div>
      <div style={{ fontSize: dense ? 12 : 14, lineHeight: 1.4, opacity: 0.85, fontStyle: "italic", fontFamily: "var(--serif)" }}>
        {plan.tagline}
      </div>
      <div style={{ height: 1, background: rule, margin: "2px 0" }}/>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6, fontSize: dense ? 11 : 12.5 }}>
        <Row dense={dense} k="Calls" v={plan.calls}/>
        <Row dense={dense} k="Response" v={plan.response}/>
        <Row dense={dense} k="Documents" v={plan.pages}/>
        {plan.project !== "—" && <Row dense={dense} k="Projects" v={plan.project}/>}
        <Row dense={dense} k="Add-ons" v="Flat-fee, member rates"/>
      </ul>
    </div>
  );
};

const Row = ({ k, v, dense }) => (
  <li style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline" }}>
    <span className="mono-label" style={{ fontSize: dense ? 9 : 10, opacity: 0.55 }}>{k}</span>
    <span style={{ textAlign: "right", maxWidth: "65%" }}>{v}</span>
  </li>
);

// --- Bullet ---------------------------------------------------------------
const Tick = ({ color = "var(--agave)", size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" style={{ flex: "none", marginTop: 2 }}>
    <path d="M2 7.5 L5.5 11 L12 3.5" stroke={color} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

Object.assign(window, {
  PLANS, MEMBER_BENEFITS, PRACTICE_AREAS,
  LogoHorizontal, LogoSeal, Wordmark,
  MesaBand, SunMark, NMPhoto, QR, PlanCard, Row, Tick
});