:root {
  color-scheme: dark;
  --bg: #050814;
  --bg-2: #081120;
  --text: #f4fbff;
  --muted: #a9bdd2;
  --line: rgba(66, 169, 255, 0.28);
  --glass: rgba(8, 17, 32, 0.76);
  --electric: #007bff;
  --neon: #27a8ff;
  --card: rgba(8, 18, 35, 0.72);
}

:root.light {
  color-scheme: light;
  --bg: #edf6ff;
  --bg-2: #ffffff;
  --text: #07111f;
  --muted: #52667b;
  --line: rgba(0, 123, 255, 0.24);
  --glass: rgba(255, 255, 255, 0.78);
  --card: rgba(255, 255, 255, 0.86);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 123, 255, 0.28), transparent 28rem),
    radial-gradient(circle at 84% 15%, rgba(39, 168, 255, 0.18), transparent 25rem),
    linear-gradient(180deg, var(--bg) 0%, #03050c 46%, var(--bg) 100%);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
}

:root.light body {
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 123, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 84% 15%, rgba(39, 168, 255, 0.12), transparent 25rem),
    linear-gradient(180deg, #f7fbff 0%, #e8f3ff 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 24px 80px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px);
}

.poster-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    var(--card);
  border: 1px solid rgba(74, 178, 255, 0.28);
  box-shadow:
    0 0 34px rgba(0, 123, 255, 0.14),
    0 28px 70px rgba(0, 0, 0, 0.28);
}

.poster-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(39, 168, 255, 0.26), transparent 18rem),
    linear-gradient(120deg, transparent, rgba(0, 123, 255, 0.2), transparent);
  opacity: 0.7;
}

.poster-card > * {
  position: relative;
  z-index: 1;
}

.poster-card:hover {
  transform: translateY(-8px);
  border-color: rgba(39, 168, 255, 0.78);
  box-shadow:
    0 0 44px rgba(0, 123, 255, 0.28),
    0 34px 90px rgba(0, 0, 0, 0.45);
}

.neon-text {
  color: #f7fcff;
  text-shadow: 0 0 18px rgba(39, 168, 255, 0.56);
}

:root.light .neon-text {
  color: #061225;
  text-shadow: none;
}

.blue-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #8fd2ff 36%, #007bff 74%, #dff4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-primary,
.btn-secondary,
.icon-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  font-weight: 800;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.btn-primary {
  color: white;
  background: linear-gradient(135deg, #007bff, #26bbff);
  box-shadow: 0 0 28px rgba(0, 123, 255, 0.46);
}

.btn-secondary {
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}

.btn-primary:hover,
.btn-secondary:hover,
.icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(39, 168, 255, 0.34);
}

.orbital {
  position: absolute;
  border: 1px solid rgba(79, 184, 255, 0.2);
  background: rgba(5, 13, 27, 0.56);
  box-shadow: 0 0 36px rgba(0, 123, 255, 0.26);
  backdrop-filter: blur(14px);
  animation: float 7s ease-in-out infinite;
}

.orbital:nth-child(2) {
  animation-delay: -2.4s;
}

.orbital:nth-child(3) {
  animation-delay: -4.1s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

.ticker {
  animation: ticker 30s linear infinite;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.form-field {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  padding: 12px 14px;
  outline: none;
}

.form-field:focus {
  border-color: rgba(39, 168, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.16);
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .shell {
    width: min(100% - 22px, 1180px);
  }

  .hero-title {
    font-size: clamp(2.55rem, 13vw, 4.8rem);
    line-height: 0.92;
  }

  .mobile-stack > * {
    width: 100%;
  }
}

const { createElement: h, useEffect, useMemo, useState } = React;
const motionApi = window.Motion || window.framerMotion || {};
const motion = motionApi.motion || new Proxy({}, { get: (_, tag) => tag });

const navItems = ["Home", "About", "Services", "Pricing", "Articles", "Contact"];
const phone = "0726559998";
const whatsapp = `https://wa.me/27${phone.slice(1)}?text=${encodeURIComponent("Hi LM Media Solutions, I would like to book a free consultation.")}`;

function whatsappForPackage(category, name, price, suffix) {
  const message = `Hi LM Media Solutions, I would like to request the ${name} package under ${category} (${price}${suffix || ""}). Please send me the next steps.`;
  return `https://wa.me/27${phone.slice(1)}?text=${encodeURIComponent(message)}`;
}

const icons = {
  design: "✦",
  video: "▶",
  carousel: "▦",
  deck: "▤",
  web: "⌁",
  seo: "⌕",
  social: "#",
  ux: "◎",
  retainer: "↻",
  beauty: "◇",
};

const services = [
  ["Graphic Design", "High-impact social posts, posters, menus, cards, and brand visuals built to convert.", icons.design],
  ["Video Editing", "Cinematic edits, reels, transitions, sound design, grading, and premium motion polish.", icons.video],
  ["Carousel Designs", "Scroll-stopping education and sales carousels for Instagram, LinkedIn, and campaigns.", icons.carousel],
  ["Presentation Design", "Investor-grade decks, business proposals, sales decks, and professional pitch visuals.", icons.deck],
  ["Website Design", "Responsive websites with luxury UI, lead capture, SEO foundations, and WhatsApp flows.", icons.web],
  ["SEO", "Technical optimization, search content, metadata, local SEO, and growth-focused visibility.", icons.seo],
  ["Social Media Management", "Content calendars, posting, community growth, analytics, and campaign direction.", icons.social],
  ["UX/UI Design", "Premium interfaces, conversion paths, dashboards, landing pages, and app-like experiences.", icons.ux],
  ["Monthly Retainers", "Long-term creative, SEO, content, and strategy support for consistent growth.", icons.retainer],
  ["Beauty Growth Packages", "Dedicated growth offers for salons, hairstylists, nail techs, spas, and barbers.", icons.beauty],
];

const pricingGroups = [
  {
    title: "Graphic Design Packages",
    kicker: "Premium poster-ready visual design",
    packages: [
      ["Basic Design", "R800", "/design", ["Social Media Post Design", "Flyer / Poster Design", "Business Card Design", "2 Revisions", "2-3 Days Delivery"]],
      ["Standard Design", "R1,500", "/design", ["Everything in Basic", "Logo Design", "Brochure / Menu Design", "5 Revisions", "3-5 Days Delivery"], true],
      ["Premium Design", "R2,500", "/design", ["Everything in Standard", "Brand Identity Kit", "Packaging Design", "Unlimited Revisions", "2-4 Days Delivery"]],
    ],
  },
  {
    title: "Video Editing Packages",
    kicker: "Cinematic edits for social and campaigns",
    packages: [
      ["Basic Edit", "R1,800", "", ["Up to 60 Seconds", "Basic Cuts & Transitions", "Background Music", "Text/Titles", "Color Correction", "1 Revision"]],
      ["Standard Edit", "R2,800", "", ["Up to 90 Seconds", "Advanced Transitions", "Sound Design", "Color Grading", "Text/Titles & Effects", "2 Revisions"], true],
      ["Premium Edit", "R4,500", "", ["Up to 3 Minutes", "Cinematic Editing", "Motion Graphics", "Advanced Effects", "Unlimited Revisions"]],
    ],
  },
  {
    title: "Carousel Design Packages",
    kicker: "Structured content that sells while educating",
    packages: [
      ["4 Slides", "R2,000", "", ["On-brand design", "Unlimited revisions", "High-quality graphics", "Professional layouts"]],
      ["6 Slides", "R3,000", "", ["On-brand design", "Unlimited revisions", "High-quality graphics", "Professional layouts"], true],
      ["9 Slides", "R4,000", "", ["On-brand design", "Unlimited revisions", "High-quality graphics", "Professional layouts"]],
    ],
  },
  {
    title: "Presentation Design Packages",
    kicker: "Boardroom-grade decks and pitch systems",
    packages: [
      ["Basic Presentation", "R2,000", "", ["Minimum 8 Slides", "Professional Layouts", "Modern Design", "2 Revisions"]],
      ["Standard Presentation", "R3,500-R4,000", "", ["12-15 Slides", "Branded Design", "Infographics", "Premium Graphics"], true],
      ["Premium Presentation", "R5,000+", "", ["Unlimited Slides", "Advanced Animations", "Investor Deck Quality", "Unlimited Revisions"]],
    ],
  },
  {
    title: "Website Design Packages",
    kicker: "Conversion-focused websites for modern brands",
    packages: [
      ["Basic Website", "R3,999", "", ["5 Page Website", "Mobile Responsive", "Basic SEO", "WhatsApp Integration", "Contact Form"]],
      ["Standard Website", "R6,999", "", ["Up to 8 Pages", "Advanced SEO", "Lead Capture Forms", "Social Media Integration", "Blog Setup"], true],
      ["Premium Website", "R9,999", "", ["Up to 12 Pages", "Premium UI/UX", "CRM Integration", "Advanced SEO", "Speed Optimization"]],
    ],
  },
  {
    title: "Monthly Retainer Packages",
    kicker: "Consistent execution for brands ready to grow",
    packages: [
      ["Content Starter", "R4,500", "/month", ["8 Social Media Posts", "2 Carousel Designs", "2 Edited Videos/Reels", "Monthly Content Calendar"]],
      ["Growth Package", "R8,500", "/month", ["12 Social Posts", "4 Carousel Designs", "4 Reels/Videos", "SEO Optimization", "Content Strategy"], true],
      ["Premium Brand Management", "R15,000+", "/month", ["Full Social Media Management", "20+ Designs Monthly", "8 Reels/Videos", "SEO Management", "Paid Ads Management", "Monthly Strategy Calls"]],
    ],
  },
  {
    title: "Beauty Business Growth Packages",
    kicker: "Growth systems for salons, stylists, nail techs, spas, and barbers",
    packages: [
      ["Starter", "R2,999", "/month", ["Social media starter kit", "Beauty-focused content direction", "WhatsApp inquiry support", "Monthly reporting"]],
      ["Growth", "R4,999", "/month", ["Campaign visuals", "Reels and carousel support", "Local visibility guidance", "Conversion-focused booking CTAs"], true],
      ["Premium", "R7,999", "/month", ["Full beauty brand management", "Premium content direction", "Lead generation strategy", "Monthly growth consultation"]],
    ],
  },
];

const posts = [
  {
    category: "Marketing",
    title: "How Strategic Content Turns Attention Into Qualified Leads",
    description: "A practical growth lens for brands that need more than pretty posts.",
    keywords: "digital marketing strategy, lead generation, South African business growth",
    readTime: "4 min read",
    body: [
      "Strong digital marketing is not only about posting often. It is about creating a clear path from awareness to trust, then from trust to action. For South African businesses, strategic content helps potential customers understand what you offer, why it matters, and why your brand is the right choice.",
      "At LM Media Solutions, we see content as a business growth asset. A graphic design post should communicate value. A carousel should educate and move the buyer closer to a decision. A video should build confidence, answer objections, and make the next step feel simple.",
      "The best-performing content usually has three things: a clear audience, a specific problem, and a direct call to action. When your content is planned around customer intent, it can generate higher-quality leads through WhatsApp inquiries, website forms, consultation bookings, and monthly retainer opportunities.",
      "A premium brand needs premium communication. That means consistent visuals, sharp messaging, SEO-friendly website content, and campaigns designed around measurable business outcomes."
    ],
  },
  {
    category: "SEO",
    title: "Local SEO Moves South African Businesses Should Prioritize",
    description: "Visibility compounds when your website, content, and search signals work together.",
    keywords: "local SEO South Africa, Pretoria SEO, SEO optimization services",
    readTime: "5 min read",
    body: [
      "Local SEO helps customers find your business when they search for services near them. Whether you are a salon in Pretoria North, a corporate service provider, or a growing online brand, your search visibility can directly influence the number of qualified inquiries you receive.",
      "The first priority is clarity. Your website should clearly mention your services, your location, and the type of clients you serve. Search engines need structured signals, and customers need immediate confidence that they are in the right place.",
      "The next priority is useful content. Articles about website design, branding, social media management, beauty business growth, and digital marketing strategy help your business rank for relevant searches while proving expertise.",
      "Finally, make conversion easy. SEO traffic is only valuable if visitors can take action. That is why WhatsApp buttons, contact forms, fast-loading pages, and strong service pages matter. LM Media Solutions combines SEO optimization with conversion-focused website design so visibility can become real business growth."
    ],
  },
  {
    category: "Branding",
    title: "Why Premium Visuals Change Buyer Confidence",
    description: "Design is not decoration. It frames value before a customer reads the offer.",
    keywords: "premium branding, graphic design South Africa, brand identity design",
    readTime: "3 min read",
    body: [
      "Your visuals speak before your sales message does. When a potential customer lands on your website or social media profile, they quickly decide whether your business feels credible, professional, and worth contacting.",
      "Premium graphic design creates confidence. It tells customers that your business pays attention to detail, values quality, and understands presentation. This is especially important for service brands, beauty businesses, consultants, and companies competing in crowded digital spaces.",
      "A strong brand identity uses consistent typography, colors, layouts, image direction, and messaging. When everything feels connected, your business becomes easier to recognize and easier to trust.",
      "LM Media Solutions designs brand assets that feel modern, strategic, and conversion-focused. From social media designs to brand identity kits and packaging design, the goal is to make your offer look as valuable as it truly is."
    ],
  },
  {
    category: "Social Media",
    title: "Reels, Carousels, And Campaigns: Choosing The Right Content Format",
    description: "A simple guide to matching content structure to business goals.",
    keywords: "social media management, reels editing, carousel design services",
    readTime: "4 min read",
    body: [
      "Different content formats do different jobs. Reels are powerful for reach and visibility. Carousels are excellent for education, storytelling, and saving. Campaign graphics help create consistency around a launch, promotion, or monthly offer.",
      "The right format depends on the goal. If your business needs awareness, short-form video can help you reach new audiences quickly. If your audience needs more explanation before buying, carousel designs can break down your offer in a clear and persuasive way.",
      "For monthly growth, the best approach is usually a mix: social media posts for consistency, carousels for value, reels for reach, and strategic CTAs for inquiries.",
      "LM Media Solutions builds content systems that connect design, video editing, content calendars, and growth strategy. The result is a social media presence that looks premium and supports real business objectives."
    ],
  },
  {
    category: "Business Growth",
    title: "The Case For Monthly Retainers Over Once-Off Creative Bursts",
    description: "Consistency, measurement, and iteration are where real brand momentum appears.",
    keywords: "monthly marketing retainer, content strategy, business growth packages",
    readTime: "4 min read",
    body: [
      "Once-off designs can help with a single moment, but long-term growth usually needs consistency. A monthly marketing retainer gives your business regular content, strategic direction, and ongoing optimization.",
      "Retainers work because they create rhythm. Your audience sees your brand more often. Your messaging improves over time. Your visuals stay consistent. Your campaigns can be measured, refined, and strengthened month after month.",
      "For businesses that want serious digital growth, a retainer can combine social media management, carousel design, video editing, SEO optimization, paid ads, and monthly strategy calls.",
      "LM Media Solutions offers monthly retainer packages for brands that want a reliable creative and strategic partner. This is how businesses move from random posting to a professional growth system."
    ],
  },
  {
    category: "Website Tips",
    title: "What Every High-Converting Service Website Needs Above The Fold",
    description: "Clarity, proof, offer framing, and frictionless next steps.",
    keywords: "website design South Africa, high converting website, WhatsApp website integration",
    readTime: "5 min read",
    body: [
      "The first screen of your website has one job: make the visitor understand your value quickly and feel confident enough to continue. A high-converting service website should not make people search for what you do.",
      "Above the fold, your website needs a strong headline, a clear service promise, a short explanation, and an obvious call to action. For many South African businesses, WhatsApp integration is essential because it reduces friction and makes inquiries feel immediate.",
      "Your website should also communicate credibility. Premium design, strong typography, fast loading, mobile responsiveness, and clear service sections all help customers trust your business before they speak to you.",
      "LM Media Solutions builds websites with strategy, SEO, lead capture, and conversion flow in mind. The goal is not only to look good. The goal is to turn visitors into inquiries, consultations, and long-term clients."
    ],
  },
];

function cx(...items) {
  return items.filter(Boolean).join(" ");
}

function Section({ id, children, className = "" }) {
  return h("section", { id, className: cx("shell py-16 md:py-24 reveal", className) }, children);
}

function Eyebrow({ children }) {
  return h("div", { className: "mb-4 inline-flex rounded-full border border-blue-400/30 bg-blue-500/10 px-4 py-2 text-xs font-black uppercase tracking-[0.22em] text-sky-200" }, children);
}

function CTAButton({ href, children, secondary }) {
  return h("a", { href, className: cx(secondary ? "btn-secondary" : "btn-primary", "px-5 py-3 text-sm") }, children);
}

function AnimatedCounter({ value, suffix = "" }) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    let frame;
    const start = performance.now();
    const duration = 1200;
    const tick = (now) => {
      const progress = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setCount(Math.round(value * eased));
      if (progress < 1) frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [value]);
  return h(React.Fragment, null, count, suffix);
}

function Navbar({ page, setPage }) {
  const [open, setOpen] = useState(false);
  const [light, setLight] = useState(false);
  useEffect(() => {
    document.documentElement.classList.toggle("light", light);
  }, [light]);

  const link = (item) =>
    h("button", {
      key: item,
      onClick: () => {
        setPage(item);
        setOpen(false);
        window.scrollTo({ top: 0, behavior: "smooth" });
      },
      className: cx("rounded-md px-3 py-2 text-sm font-bold transition", page === item ? "bg-blue-500/18 text-white shadow-[0_0_24px_rgba(0,123,255,.22)]" : "text-slate-300 hover:text-white"),
    }, item);

  return h("header", { className: "fixed inset-x-0 top-0 z-50 border-b border-blue-400/15 bg-[#050814]/78 backdrop-blur-xl" },
    h("nav", { className: "shell flex min-h-[74px] items-center justify-between gap-4" },
      h("button", { onClick: () => setPage("Home"), className: "flex items-center gap-3 text-left" },
        h("span", { className: "grid h-11 w-11 place-items-center rounded-lg bg-blue-500 text-lg font-black text-white shadow-[0_0_28px_rgba(0,123,255,.55)]" }, "LM"),
        h("span", null,
          h("span", { className: "block text-sm font-black uppercase tracking-[0.22em] text-white" }, "LM Media"),
          h("span", { className: "block text-xs font-semibold text-sky-200" }, "Strategize. Optimize. Grow.")
        )
      ),
      h("div", { className: "hidden items-center gap-1 lg:flex" }, navItems.map(link)),
      h("div", { className: "hidden items-center gap-2 lg:flex" },
        h("button", { onClick: () => setLight(!light), className: "icon-btn h-11 w-11 border border-blue-300/25 bg-white/5 text-sm", title: "Toggle theme" }, light ? "◐" : "●"),
        h(CTAButton, { href: whatsapp }, "Book Consultation")
      ),
      h("button", { onClick: () => setOpen(!open), className: "icon-btn h-11 w-11 border border-blue-300/25 bg-white/5 lg:hidden", "aria-label": "Open menu" }, open ? "×" : "☰")
    ),
    open && h("div", { className: "shell mb-4 grid gap-2 rounded-lg border border-blue-300/20 bg-[#07101f] p-3 lg:hidden" }, navItems.map(link), h(CTAButton, { href: whatsapp }, "Book Consultation"))
  );
}

function Hero({ setPage }) {
  return h("section", { className: "relative min-h-screen overflow-hidden pt-28" },
    h("div", { className: "noise" }),
    h("div", { className: "shell grid min-h-[calc(100vh-112px)] items-center gap-10 py-12 lg:grid-cols-[1.03fr_.97fr]" },
      h(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.7 } },
        h(Eyebrow, null, "South African Premium Growth Agency"),
        h("h1", { className: "hero-title max-w-4xl text-6xl font-black uppercase leading-[0.88] tracking-normal md:text-8xl" },
          "Premium Digital ",
          h("span", { className: "blue-gradient" }, "Solutions"),
          " For Modern Businesses"
        ),
        h("p", { className: "mt-7 max-w-2xl text-lg font-medium leading-8 text-slate-300" },
          "LM Media Solutions helps businesses grow through strategic content, websites, branding, SEO, video editing, and digital marketing."
        ),
        h("div", { className: "mobile-stack mt-8 flex flex-wrap gap-3" },
          h(CTAButton, { href: whatsapp }, "Book Free Consultation"),
          h("button", { onClick: () => setPage("Pricing"), className: "btn-secondary px-5 py-3 text-sm" }, "View Packages")
        ),
        h("div", { className: "mt-10 grid max-w-2xl grid-cols-3 gap-3" },
          [[10, "+", "Core Services"], [24, "/7", "WhatsApp Leads"], [100, "%", "Growth Focus"]].map(([n, s, l]) =>
            h("div", { key: l, className: "glass rounded-lg p-4" },
              h("div", { className: "text-2xl font-black text-white md:text-3xl" }, h(AnimatedCounter, { value: n, suffix: s })),
              h("div", { className: "mt-1 text-xs font-bold uppercase tracking-widest text-sky-200" }, l)
            )
          )
        )
      ),
      h("div", { className: "relative min-h-[540px]" },
        h("div", { className: "poster-card absolute left-2 top-8 w-[82%] rounded-lg p-5 md:left-10" },
          h("div", { className: "mb-5 flex items-center justify-between" },
            h("span", { className: "text-xs font-black uppercase tracking-[0.25em] text-sky-200" }, "Growth Dashboard"),
            h("span", { className: "rounded-full bg-blue-500 px-3 py-1 text-xs font-black text-white" }, "LIVE")
          ),
          h("div", { className: "grid grid-cols-3 gap-3" },
            [["Leads", "+62%"], ["Reach", "218K"], ["SEO", "Top 3"]].map(([a, b]) => h("div", { key: a, className: "rounded-lg border border-blue-300/20 bg-black/20 p-3" }, h("p", { className: "text-xs text-slate-400" }, a), h("strong", { className: "text-xl text-white" }, b)))
          ),
          h("div", { className: "mt-5 h-32 rounded-lg border border-blue-300/20 bg-[linear-gradient(135deg,rgba(0,123,255,.28),rgba(255,255,255,.04))] p-4" },
            h("div", { className: "h-full rounded-md bg-[repeating-linear-gradient(90deg,rgba(255,255,255,.1)_0_1px,transparent_1px_38px)]" })
          )
        ),
        h("div", { className: "orbital right-0 top-2 w-48 rounded-lg p-4" }, h("div", { className: "text-xs font-black uppercase text-sky-200" }, "Social Launch"), h("div", { className: "mt-2 text-3xl font-black" }, "R8.5K"), h("p", { className: "mt-1 text-sm text-slate-300" }, "Growth Package")),
        h("div", { className: "orbital bottom-16 left-0 w-56 rounded-lg p-4" }, h("div", { className: "text-xs font-black uppercase text-sky-200" }, "Brand Identity"), h("div", { className: "mt-2 h-3 rounded bg-blue-400" }), h("div", { className: "mt-3 h-3 w-2/3 rounded bg-white/35" })),
        h("div", { className: "orbital bottom-4 right-8 w-64 rounded-lg p-4" }, h("div", { className: "text-xs font-black uppercase text-sky-200" }, "Website Funnel"), h("p", { className: "mt-2 text-sm text-slate-300" }, "SEO, forms, WhatsApp, CRM-ready conversion path."))
      )
    )
  );
}

function Services() {
  return h(Section, { id: "services" },
    h(Eyebrow, null, "Services"),
    h("div", { className: "mb-10 flex flex-col justify-between gap-5 md:flex-row md:items-end" },
      h("h2", { className: "max-w-3xl text-4xl font-black uppercase leading-none md:text-6xl" }, "Built Like A Poster. Engineered Like A Growth System."),
      h("p", { className: "max-w-md text-slate-300" }, "Each offer is packaged to look premium, sell clearly, and give prospects an obvious next move.")
    ),
    h("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3" },
      services.map(([title, desc, icon]) =>
        h("article", { key: title, className: "poster-card rounded-lg p-5 transition duration-300" },
          h("div", { className: "mb-5 flex items-center justify-between" },
            h("span", { className: "grid h-12 w-12 place-items-center rounded-lg border border-blue-300/30 bg-blue-500/10 text-2xl font-black text-sky-200" }, icon),
            h("span", { className: "text-xs font-black uppercase tracking-[0.22em] text-blue-200" }, "LM")
          ),
          h("h3", { className: "text-2xl font-black text-white" }, title),
          h("p", { className: "mt-3 min-h-20 text-sm leading-6 text-slate-300" }, desc),
          h("a", { href: whatsapp, className: "mt-5 inline-flex text-sm font-black text-sky-200" }, "Request Quote →")
        )
      )
    )
  );
}

function PriceCard({ item, category }) {
  const [name, price, suffix, features, popular] = item;
  return h("article", { className: cx("poster-card rounded-lg p-6 transition duration-300", popular && "border-sky-300/70 shadow-[0_0_46px_rgba(0,123,255,.28)]") },
    popular && h("div", { className: "mb-4 inline-flex rounded-full bg-blue-500 px-3 py-1 text-xs font-black uppercase tracking-widest text-white" }, "Most Popular"),
    h("h3", { className: "text-2xl font-black text-white" }, name),
    h("div", { className: "mt-4 flex items-end gap-1" },
      h("span", { className: "blue-gradient text-4xl font-black md:text-5xl" }, price),
      suffix && h("span", { className: "pb-2 text-sm font-bold text-slate-300" }, suffix)
    ),
    h("ul", { className: "mt-6 grid gap-3" }, features.map((feature) =>
      h("li", { key: feature, className: "flex gap-3 text-sm text-slate-200" },
        h("span", { className: "mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded bg-blue-500/20 text-xs font-black text-sky-200" }, "✓"),
        h("span", null, feature)
      )
    )),
    h("a", { href: whatsappForPackage(category, name, price, suffix), className: "btn-primary mt-7 w-full px-4 py-3 text-sm" }, "Get This Package")
  );
}

function Pricing() {
  return h(Section, { id: "pricing", className: "space-y-14" },
    h("div", null,
      h(Eyebrow, null, "Pricing"),
      h("h2", { className: "max-w-4xl text-4xl font-black uppercase leading-none md:text-6xl" }, "Premium Packages With Clear, Confident Offers."),
      h("p", { className: "mt-5 max-w-2xl text-slate-300" }, "Poster-inspired pricing sections with bold value hierarchy, glowing cards, and direct WhatsApp conversion paths.")
    ),
    pricingGroups.map((group) =>
      h("div", { key: group.title, className: "scroll-mt-28" },
        h("div", { className: "mb-5 flex flex-col justify-between gap-2 md:flex-row md:items-end" },
          h("div", null,
            h("p", { className: "text-xs font-black uppercase tracking-[0.24em] text-sky-200" }, group.kicker),
            h("h3", { className: "mt-2 text-3xl font-black uppercase text-white md:text-4xl" }, group.title)
          ),
          h("a", { href: whatsapp, className: "text-sm font-black text-sky-200" }, "Discuss custom scope →")
        ),
        h("div", { className: "pricing-grid" }, group.packages.map((pkg) => h(PriceCard, { key: pkg[0], item: pkg, category: group.title })))
      )
    ),
    h("div", { className: "poster-card rounded-lg p-8 md:p-10" },
      h("div", { className: "grid gap-6 md:grid-cols-[1fr_auto] md:items-center" },
        h("div", null,
          h("p", { className: "text-xs font-black uppercase tracking-[0.25em] text-sky-200" }, "Ready To Grow"),
          h("h3", { className: "mt-3 text-3xl font-black uppercase text-white md:text-5xl" }, "Book a free consultation and get a strategic recommendation."),
          h("p", { className: "mt-4 max-w-2xl text-slate-300" }, "Tell us your business goals, budget range, and current digital presence. We will point you to the right package or custom retainer.")
        ),
        h(CTAButton, { href: whatsapp }, "Start On WhatsApp")
      )
    )
  );
}

function About() {
  return h(Section, { id: "about" },
    h(Eyebrow, null, "About LM Media Solutions"),
    h("div", { className: "grid gap-8 lg:grid-cols-[.9fr_1.1fr]" },
      h("div", null,
        h("h2", { className: "text-4xl font-black uppercase leading-none md:text-6xl" }, "Strategic Creative Direction For Businesses That Want Momentum."),
        h("p", { className: "mt-6 text-lg leading-8 text-slate-300" }, "LM Media Solutions blends brand strategy, premium design, content execution, SEO, and conversion-focused websites into one growth partner for South African businesses."),
        h("p", { className: "mt-4 text-slate-300" }, "The mission is simple: make your business look credible, communicate clearly, and convert attention into real inquiries.")
      ),
      h("div", { className: "grid gap-4 md:grid-cols-2" },
        [["Mission", "Build digital assets that help businesses attract better leads and grow with confidence."], ["Vision", "Become a trusted premium growth partner for ambitious South African brands."], ["Positioning", "Corporate luxury, strategic clarity, measurable execution, and premium presentation."], ["Why Choose Us", "Design quality, offer structure, conversion thinking, and long-term growth support in one place."]].map(([title, copy]) =>
          h("div", { key: title, className: "poster-card rounded-lg p-6" }, h("h3", { className: "text-xl font-black text-white" }, title), h("p", { className: "mt-3 text-sm leading-6 text-slate-300" }, copy))
        )
      )
    )
  );
}

function ArticleModal({ post, onClose }) {
  useEffect(() => {
    if (!post) return undefined;
    const closeOnEscape = (event) => {
      if (event.key === "Escape") onClose();
    };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", closeOnEscape);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", closeOnEscape);
    };
  }, [post, onClose]);

  if (!post) return null;

  return h("div", { className: "fixed inset-0 z-[90] overflow-y-auto bg-[#02050c]/88 px-4 py-8 backdrop-blur-xl", role: "dialog", "aria-modal": "true" },
    h("div", { className: "mx-auto max-w-3xl" },
      h("article", { className: "poster-card rounded-lg p-6 md:p-9" },
        h("div", { className: "mb-6 flex items-start justify-between gap-4" },
          h("div", null,
            h("span", { className: "rounded-full border border-blue-300/25 bg-blue-500/10 px-3 py-1 text-xs font-black uppercase tracking-widest text-sky-200" }, post.category),
            h("p", { className: "mt-4 text-xs font-black uppercase tracking-[0.24em] text-slate-400" }, `${post.readTime} | ${post.keywords}`),
            h("h2", { className: "mt-4 text-3xl font-black uppercase leading-tight text-white md:text-5xl" }, post.title)
          ),
          h("button", { onClick: onClose, className: "icon-btn h-11 w-11 shrink-0 border border-blue-300/25 bg-white/5 text-xl", "aria-label": "Close article" }, "×")
        ),
        h("div", { className: "grid gap-5 text-base leading-8 text-slate-200" },
          post.body.map((paragraph) => h("p", { key: paragraph }, paragraph))
        ),
        h("div", { className: "mt-8 flex flex-wrap gap-3 border-t border-blue-300/15 pt-6" },
          h(CTAButton, { href: whatsapp }, "Book Free Consultation"),
          h(CTAButton, { href: "mailto:info@lmmediasolutions.co.za?subject=Website%20Article%20Inquiry", secondary: true }, "Email LM Media")
        )
      )
    )
  );
}

function Blog() {
  const [activePost, setActivePost] = useState(null);

  return h(Section, { id: "blog" },
    h(Eyebrow, null, "Articles"),
    h("h2", { className: "max-w-4xl text-4xl font-black uppercase leading-none md:text-6xl" }, "Marketing Intelligence For Modern Businesses."),
    h("p", { className: "mt-5 max-w-2xl text-slate-300" }, "Read practical articles on digital marketing, SEO, branding, website design, social media management, and business growth for South African brands."),
    h("div", { className: "mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-3" },
      posts.map((post, index) =>
        h("article", { key: post.title, className: cx("poster-card rounded-lg p-5 transition duration-300", index === 0 && "md:col-span-2 lg:col-span-2") },
          h("div", { className: "flex flex-wrap items-center gap-2" },
            h("span", { className: "rounded-full border border-blue-300/25 bg-blue-500/10 px-3 py-1 text-xs font-black uppercase tracking-widest text-sky-200" }, post.category),
            h("span", { className: "text-xs font-bold uppercase tracking-widest text-slate-400" }, post.readTime)
          ),
          h("h3", { className: "mt-5 text-2xl font-black text-white" }, post.title),
          h("p", { className: "mt-3 text-sm leading-6 text-slate-300" }, post.description),
          h("p", { className: "mt-4 text-xs font-bold uppercase tracking-[0.18em] text-sky-200/80" }, post.keywords),
          h("button", { onClick: () => setActivePost(post), className: "mt-6 text-sm font-black text-sky-200" }, "Read Article →")
        )
      )
    ),
    h(ArticleModal, { post: activePost, onClose: () => setActivePost(null) })
  );
}

function Contact() {
  const sendInquiry = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const name = data.get("name") || "";
    const business = data.get("business") || "";
    const email = data.get("email") || "";
    const phoneNumber = data.get("phone") || "";
    const service = data.get("service") || "";
    const message = data.get("message") || "";
    const subject = `Website Inquiry - ${service || "LM Media Solutions"}`;
    const body = [
      "Hi LM Media Solutions,",
      "",
      "I would like to send an inquiry from the website.",
      "",
      `Full name: ${name}`,
      `Business name: ${business}`,
      `Email address: ${email}`,
      `Phone number: ${phoneNumber}`,
      `Interested service: ${service}`,
      "",
      "Message:",
      message,
    ].join("\n");

    window.location.href = `mailto:info@lmmediasolutions.co.za?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  };

  return h(Section, { id: "contact" },
    h(Eyebrow, null, "Contact"),
    h("div", { className: "grid gap-6 lg:grid-cols-[1fr_.85fr]" },
      h("div", null,
        h("h2", { className: "text-4xl font-black uppercase leading-none md:text-6xl" }, "Let’s Build Your Next Growth Move."),
        h("p", { className: "mt-5 max-w-2xl text-slate-300" }, "Send your goals, preferred package, and timeline. LM Media Solutions will respond with the best next step for your business."),
        h("form", { className: "mt-8 grid gap-4", onSubmit: sendInquiry },
          h("div", { className: "grid gap-4 md:grid-cols-2" },
            h("input", { className: "form-field", name: "name", placeholder: "Full name", "aria-label": "Full name", required: true }),
            h("input", { className: "form-field", name: "business", placeholder: "Business name", "aria-label": "Business name" })
          ),
          h("div", { className: "grid gap-4 md:grid-cols-2" },
            h("input", { className: "form-field", name: "email", placeholder: "Email address", type: "email", "aria-label": "Email address", required: true }),
            h("input", { className: "form-field", name: "phone", placeholder: "Phone number", type: "tel", "aria-label": "Phone number" })
          ),
          h("select", { className: "form-field", name: "service", "aria-label": "Interested service" },
            ["Website Design", "Social Media Management", "Graphic Design", "Video Editing", "SEO", "Monthly Retainer", "Beauty Growth Package", "Custom Strategy"].map((x) => h("option", { key: x }, x))
          ),
          h("textarea", { className: "form-field min-h-36", name: "message", placeholder: "Tell us what you want to grow.", "aria-label": "Message", required: true }),
          h("div", { className: "mobile-stack flex flex-wrap gap-3" },
            h("button", { className: "btn-primary px-5 py-3 text-sm", type: "submit" }, "Send Inquiry"),
            h(CTAButton, { href: whatsapp, secondary: true }, "Chat On WhatsApp")
          )
        )
      ),
      h("aside", { className: "poster-card rounded-lg p-6" },
        h("h3", { className: "text-2xl font-black text-white" }, "Contact Info"),
        h("div", { className: "mt-5 grid gap-4 text-sm text-slate-300" },
          h("p", null, h("strong", { className: "text-white" }, "Phone: "), phone),
          h("p", null, h("strong", { className: "text-white" }, "Email: "), "info@lmmediasolutions.co.za"),
          h("p", null, h("strong", { className: "text-white" }, "Email: "), "lehlohonolomaishoane@gmail.com"),
          h("p", null, h("strong", { className: "text-white" }, "Website: "), "lmmediasolutions.co.za")
        ),
        h("div", { className: "mt-6 overflow-hidden rounded-lg border border-blue-300/20" },
          h("iframe", {
            title: "Pretoria North, South Africa map",
            src: "https://www.google.com/maps?q=Pretoria%20North%2C%20South%20Africa&output=embed",
            className: "h-64 w-full",
            loading: "lazy",
          })
        ),
        h("div", { className: "mt-6 flex gap-3" }, ["IG", "FB", "IN", "TT"].map((s) => h("a", { key: s, href: "#", className: "grid h-11 w-11 place-items-center rounded-lg border border-blue-300/20 bg-blue-500/10 text-sm font-black text-sky-200" }, s)))
      )
    )
  );
}

function Marquee() {
  const words = ["Brand Strategy", "SEO", "Websites", "Video Editing", "Social Media", "UX/UI", "Retainers", "Presentations"];
  return h("div", { className: "overflow-hidden border-y border-blue-300/15 bg-blue-500/5 py-4" },
    h("div", { className: "ticker flex w-max gap-10 text-sm font-black uppercase tracking-[0.25em] text-sky-200" },
      [...words, ...words, ...words, ...words].map((word, index) => h("span", { key: `${word}-${index}` }, word))
    )
  );
}

function Footer({ setPage }) {
  return h("footer", { className: "border-t border-blue-300/15 py-10" },
    h("div", { className: "shell flex flex-col justify-between gap-6 md:flex-row md:items-center" },
      h("div", null,
        h("div", { className: "text-lg font-black uppercase tracking-[0.18em] text-white" }, "LM Media Solutions"),
        h("p", { className: "mt-2 text-sm text-slate-400" }, "Strategize. Optimize. Grow.")
      ),
      h("div", { className: "flex flex-wrap gap-2" }, navItems.map((item) => h("button", { key: item, onClick: () => setPage(item), className: "rounded px-3 py-2 text-sm font-bold text-slate-300 hover:text-white" }, item)))
    )
  );
}

function FloatingCTA() {
  return h("div", { className: "fixed bottom-5 right-5 z-50 flex flex-col gap-3" },
    h("a", { href: whatsapp, className: "btn-primary h-14 w-14 rounded-full text-xl", "aria-label": "WhatsApp" }, "WA"),
    h("a", { href: "#top", className: "btn-secondary h-12 w-12 rounded-full text-lg", "aria-label": "Back to top" }, "↑")
  );
}

function HomePage({ setPage }) {
  return h(React.Fragment, null,
    h(Hero, { setPage }),
    h(Marquee),
    h(Services),
    h(About),
    h(Pricing),
    h(Blog),
    h(Contact)
  );
}

function Page({ page, setPage }) {
  if (page === "Home") return h(HomePage, { setPage });
  if (page === "About") return h(React.Fragment, null, h("div", { className: "pt-24" }), h(About), h(Services), h(Contact));
  if (page === "Services") return h(React.Fragment, null, h("div", { className: "pt-24" }), h(Services), h(Pricing), h(Contact));
  if (page === "Pricing") return h(React.Fragment, null, h("div", { className: "pt-24" }), h(Pricing), h(Contact));
  if (page === "Articles") return h(React.Fragment, null, h("div", { className: "pt-24" }), h(Blog), h(Contact));
  return h(React.Fragment, null, h("div", { className: "pt-24" }), h(Contact));
}

function App() {
  const [page, setPage] = useState("Home");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 850);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) entry.target.classList.add("visible");
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, [page]);

  useEffect(() => {
    document.title = page === "Home" ? "LM Media Solutions | Strategize. Optimize. Grow." : `${page} | LM Media Solutions`;
  }, [page]);

  return h("div", { id: "top" },
    loading && h("div", { className: "fixed inset-0 z-[80] grid place-items-center bg-[#03050c]" },
      h("div", { className: "text-center" },
        h("div", { className: "mx-auto grid h-20 w-20 place-items-center rounded-lg bg-blue-500 text-2xl font-black text-white shadow-[0_0_48px_rgba(0,123,255,.7)]" }, "LM"),
        h("div", { className: "mt-5 text-xs font-black uppercase tracking-[0.35em] text-sky-200" }, "Loading Growth System")
      )
    ),
    h(Navbar, { page, setPage }),
    h(Page, { page, setPage }),
    h(Footer, { setPage }),
    h(FloatingCTA)
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(h(App));