/* @jsxRuntime classic */
/* global React */
const { useState, useEffect } = React;

const Icon = ({ name, size = 20, color }) => {
  const paths = {
    arrow:    <><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></>,
    search:   <><circle cx="11" cy="11" r="7"/><path d="m20 20-4.3-4.3"/></>,
    check:    <><path d="M20 6 9 17l-5-5"/></>,
    mail:     <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>,
    shield:   <><path d="M12 2 3 7v6c0 5 3.5 8 9 9 5.5-1 9-4 9-9V7Z"/></>,
    sparkle:  <><path d="M12 3v5M12 16v5M3 12h5M16 12h5M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></>,
    compass:  <><circle cx="12" cy="12" r="9"/><path d="m16 8-5 2-2 5 5-2z"/></>,
    chart:    <><path d="M3 3v18h18"/><path d="m7 15 4-4 4 4 5-7"/></>,
    phone:    <><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2l-1.3 1.3a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2Z"/></>,
    menu:     <><path d="M3 6h18M3 12h18M3 18h18"/></>,
    close:    <><path d="M18 6 6 18M6 6l12 12"/></>,
    quote:    <><path d="M7 7h4v4c0 3-2 4-4 4M15 7h4v4c0 3-2 4-4 4"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color || "currentColor"} strokeWidth="1.5"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name]}
    </svg>
  );
};

const Wordmark = ({ light }) => (
  <span style={{
    fontFamily: "var(--lw-font-serif)",
    fontStyle: "italic", fontWeight: 300,
    fontSize: 26, letterSpacing: "-0.03em",
    color: light ? "var(--lw-paper)" : "var(--lw-ink)",
    lineHeight: 1,
  }}>
    Layerwright<span style={{ color: "var(--lw-terra)" }}>.</span>
  </span>
);

const Button = ({ children, variant = "primary", as: T = "button", className = "", ...p }) => {
  const base = {
    fontFamily: "var(--lw-font-sans)", fontSize: 14, fontWeight: 500,
    padding: "13px 24px", borderRadius: 4, cursor: "pointer",
    transition: "color .14s var(--lw-ease), background .14s var(--lw-ease), border-color .14s var(--lw-ease), transform .14s var(--lw-ease)",
    display: "inline-flex", alignItems: "center", gap: 10,
    textDecoration: "none", border: "1px solid transparent",
    letterSpacing: "0.01em",
  };
  const styles = {
    primary:   { ...base, background: "var(--lw-terra)", color: "var(--lw-paper)", borderColor: "var(--lw-terra)" },
    ink:       { ...base, background: "var(--lw-ink)",   color: "var(--lw-paper)", borderColor: "var(--lw-ink)" },
    outline:   { ...base, background: "transparent",     color: "var(--lw-ink)",   borderColor: "var(--lw-ink)" },
    ghost:     { ...base, background: "transparent",     color: "var(--lw-ink)",   padding: "13px 4px", textDecoration: "underline", textUnderlineOffset: 4, borderColor: "transparent" },
  };
  const extraClass = variant === "primary" ? "lw-btn-primary" : "";
  return <T style={styles[variant]} className={[extraClass, className].filter(Boolean).join(" ")} {...p}>{children}</T>;
};

const LangSwitch = () => {
  const go = (lang) => {
    try { sessionStorage.setItem('lw-lang', lang); } catch (e) {}
    window.location.href = lang === 'bg' ? '/bg/' : '/';
  };
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--lw-font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", marginLeft: 8 }}>
      <a onClick={() => go('en')} style={{ cursor: "pointer", color: "var(--lw-ink-3)", padding: "4px 6px" }}>EN</a>
      <span style={{ color: "var(--lw-ink-4)" }}>·</span>
      <a onClick={() => go('bg')} style={{ cursor: "pointer", color: "var(--lw-ink)", padding: "4px 6px", borderBottom: "1px solid var(--lw-terra)" }}>BG</a>
    </div>
  );
};

const Navbar = ({ onNav, current }) => {
  const link = (key, label) => (
    <a onClick={() => onNav(key)}
       style={{
         cursor: "pointer", fontFamily: "var(--lw-font-sans)", fontSize: 13,
         color: current === key ? "var(--lw-ink)" : "var(--lw-ink-3)",
         textDecoration: "none",
         borderBottom: current === key ? "1px solid var(--lw-terra)" : "1px solid transparent",
         paddingBottom: 2, letterSpacing: "0.02em",
         transition: "color .14s var(--lw-ease)",
       }}
       onMouseEnter={(e) => { if (current !== key) e.currentTarget.style.color = "var(--lw-ink)"; }}
       onMouseLeave={(e) => { if (current !== key) e.currentTarget.style.color = "var(--lw-ink-3)"; }}>{label}</a>
  );
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 20, background: "rgba(245,239,228,0.92)",
      backdropFilter: "saturate(1.2) blur(8px)",
      WebkitBackdropFilter: "saturate(1.2) blur(8px)",
      borderBottom: "1px solid var(--lw-border)",
    }}>
      <div style={{
        maxWidth: 1240, margin: "0 auto", padding: "22px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <a onClick={() => onNav("home")} style={{ cursor: "pointer" }}><Wordmark/></a>
        <nav style={{ display: "flex", gap: 36, alignItems: "center" }}>
          {link("work", "Работа")}
          {link("services", "Услуги")}
          {link("process", "Процес")}
          {link("pricing", "Цени")}
          {link("faq", "Въпроси")}
          <Button variant="ink" onClick={() => onNav("contact")}>Започнете проект</Button>
          <LangSwitch/>
        </nav>
      </div>
    </header>
  );
};

const Footer = () => (
  <footer style={{
    background: "var(--lw-ink)", color: "var(--lw-paper)",
    padding: "88px 32px 40px", marginTop: 120, position: "relative", overflow: "hidden",
  }}>
    <div style={{ position: "absolute", top: 0, right: -60, width: 360, height: 360, borderRadius: "50%", background: "radial-gradient(circle, rgba(198,93,58,0.22), transparent 70%)", pointerEvents: "none" }}/>
    <div style={{ maxWidth: 1240, margin: "0 auto", position: "relative" }}>
      <div className="lw-swash" style={{
        fontFamily: "var(--lw-font-serif)", fontStyle: "italic",
        fontWeight: 300, fontSize: "clamp(80px, 13vw, 180px)", lineHeight: 0.95, letterSpacing: "-0.05em",
        marginBottom: 64,
      }}>Layerwright<span style={{ color: "var(--lw-terra)" }}>.</span></div>
      <div style={{
        display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
        gap: 32, paddingTop: 40, borderTop: "1px solid rgba(245,239,228,0.18)",
      }}>
        <div style={{ fontFamily: "var(--lw-font-serif)", fontStyle: "italic", fontSize: 20, color: "var(--lw-paper-3)", maxWidth: 320, lineHeight: 1.5 }}>
          Малко студио, което изгражда внимателни уебсайтове за независими бизнеси.
        </div>
        <FooterCol title="Студио" items={["Работа", "Услуги", "Журнал", "За нас"]}/>
        <FooterCol title="Услуги" items={["Уеб дизайн", "Изработка", "Поддръжка", "Локално SEO"]}/>
        <FooterCol title="Здравейте" items={["hello@layerwright.co"]}/>
      </div>
      <div style={{
        marginTop: 64, paddingTop: 24, borderTop: "1px solid rgba(245,239,228,0.12)",
        display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap",
        color: "var(--lw-ink-4)", fontSize: 11, fontFamily: "var(--lw-font-mono)",
        letterSpacing: "0.08em", textTransform: "uppercase",
      }}>
        <span>© {new Date().getFullYear()} Layerwright · Всички права запазени</span>
        <span>Шрифт Fraunces &amp; Inter</span>
        <span>Последно обновено · Април 2026</span>
      </div>
    </div>
  </footer>
);
const FooterCol = ({ title, items }) => (
  <div>
    <div style={{
      fontFamily: "var(--lw-font-sans)", fontSize: 11, textTransform: "uppercase",
      letterSpacing: "0.22em", color: "var(--lw-ink-4)", marginBottom: 16,
    }}>{title}</div>
    <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 8 }}>
      {items.map(i => <li key={i} style={{ fontSize: 14, color: "var(--lw-paper)" }}>{i}</li>)}
    </ul>
  </div>
);

const SectionHeader = ({ num, eyebrow, title, note }) => (
  <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 40, marginBottom: 72, alignItems: "start" }}>
    <div className="lw-numeral" style={{ fontSize: 72, lineHeight: 1, color: "var(--lw-ink-4)", fontVariationSettings: '"opsz" 144' }}>{num}</div>
    <div>
      <div className="lw-rule" style={{ marginBottom: 18 }}/>
      <div style={{ fontFamily: "var(--lw-font-sans)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.22em", color: "var(--lw-ink-3)", marginBottom: 14 }}>{eyebrow}</div>
      <div className="lw-swash" style={{ fontFamily: "var(--lw-font-serif)", fontStyle: "italic", fontWeight: 300, fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1.08, letterSpacing: "-0.035em", color: "var(--lw-ink)", maxWidth: 720 }}>{title}</div>
      {note && <p style={{ marginTop: 20, maxWidth: "52ch", fontSize: 16, lineHeight: 1.7, color: "var(--lw-ink-3)" }}>{note}</p>}
    </div>
  </div>
);

Object.assign(window, { Icon, Wordmark, Button, Navbar, Footer, SectionHeader });