// Simsalabim Solutions — landing page (single long scroll)
// All text lives in content.json — edit that file to change copy.

// ─── Title with accent helper ──────────────────────────────────────────────
function AccentTitle({ pre, accent, post }) {
  return (
    <>
      {pre}
      <span className="accent">{accent}</span>
      {post || ""}
    </>
  );
}

// ─── Top nav ───────────────────────────────────────────────────────────────
function Nav({ content }) {
  return (
    <header className="nav">
      <a href="#top" className="nav-brand" aria-label="Simsalabim Solutions">
        <BracketMark size={28}/>
        <span className="nav-wordmark">
          simsalabim<span className="dot">.</span>solutions
        </span>
      </a>
      <nav className="nav-links">
        {content.links.map((n) => (
          <a key={n.href} href={n.href}>{n.label}</a>
        ))}
      </nav>
      <div className="nav-cta">
        <a href="#contact" className="link-quiet">{content.ctaQuiet}</a>
        <a href="#contact" className="btn-primary">{content.ctaPrimary}</a>
      </div>
    </header>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────────
function Hero({ content }) {
  return (
    <section className="hero" id="top">
      <div className="hero-grid" aria-hidden="true"/>
      <div className="hero-inner">
        <div className="eyebrow">
          <span className="dot-led"/> {content.eyebrow}
        </div>
        <h1 className="hero-title">
          {content.titlePre.replace(/ $/, " ")}
          <span className="accent">{content.titleAccent}</span>
        </h1>
        <p className="hero-sub">{content.sub}</p>
        <div className="hero-actions">
          <a href="#contact" className="btn-primary lg">{content.ctaPrimary}</a>
          <a href="#work" className="btn-ghost lg">{content.ctaGhost}</a>
        </div>
        <div className="hero-meta">
          {content.meta.map((m, i) => (
            <div key={i}><strong>{m.strong}</strong><span>{m.label}</span></div>
          ))}
        </div>
      </div>

      {/* code panel decoration */}
      <aside className="hero-code">
        <div className="code-chrome">
          <div className="dots"><i/><i/><i/></div>
          <div className="tab">{content.code.tab}</div>
        </div>
        <pre className="code-body">
          {content.code.import}
          <span className="cm-c">{content.code.comment}</span>
          {content.code.body}
        </pre>
        <div className="code-stamp">
          <BracketMark size={20}/> simsalabim<span className="dot">.</span>solutions
        </div>
      </aside>
    </section>
  );
}

// ─── Logo cloud ────────────────────────────────────────────────────────────
function Logos({ content }) {
  return (
    <section className="logos">
      <div className="logos-label">{content.label}</div>
      <div className="logos-row">
        {content.items.map((n) => (
          <span key={n} className="logo-chip">{n}</span>
        ))}
      </div>
    </section>
  );
}

// ─── Services ──────────────────────────────────────────────────────────────
function Services({ content }) {
  return (
    <section className="services" id="services">
      <SectionHead
        eyebrow={content.eyebrow}
        title={<AccentTitle pre={content.titlePre} accent={content.titleAccent} post={content.titlePost}/>}
      />
      <div className="services-grid">
        {content.items.map((s) => (
          <article key={s.tag} className="service">
            <div className="service-head">
              <span className="service-tag">{s.tag}</span>
              <h3>{s.title}</h3>
            </div>
            <p>{s.body}</p>
            <ul>
              {s.bullets.map((b) => (
                <li key={b}><span className="check">✦</span>{b}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </section>
  );
}

// ─── Featured work / cases ─────────────────────────────────────────────────
// Visual styling for each case is keyed by index — text comes from content.json.
const CASE_VISUALS = [
  { bg: "linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #312E81 100%)", accent: "#A5B4FC", vis: "graph" },
  { bg: "linear-gradient(135deg, #064E3B 0%, #065F46 50%, #047857 100%)", accent: "#6EE7B7", vis: "pulse" },
  { bg: "linear-gradient(135deg, #1F1B16 0%, #292524 50%, #57534E 100%)", accent: "#FBBF24", vis: "terminal" },
];

function Work({ content }) {
  return (
    <section className="work" id="work">
      <SectionHead
        eyebrow={content.eyebrow}
        title={<AccentTitle pre={content.titlePre} accent={content.titleAccent}/>}
        action={<a href="#" className="link-quiet">{content.action}</a>}
      />
      <div className="work-grid">
        {content.cases.map((c, i) => {
          const v = CASE_VISUALS[i] || CASE_VISUALS[0];
          return (
            <article key={i} className="case" style={{ background: v.bg }}>
              <div className="case-meta">
                <span>{c.client}</span>
                <span className="dot-sep">·</span>
                <span>{c.meta}</span>
              </div>
              <h3 className="case-title">{c.title}</h3>
              <div className="case-vis" aria-hidden="true">
                {v.vis === "graph" && <CaseGraph accent={v.accent}/>}
                {v.vis === "pulse" && <CasePulse accent={v.accent}/>}
                {v.vis === "terminal" && <CaseTerminal accent={v.accent}/>}
              </div>
              <a href="#" className="case-link" style={{ color: v.accent }}>
                {content.linkLabel} <span>→</span>
              </a>
            </article>
          );
        })}
      </div>
    </section>
  );
}

// Decorative visuals for cases
function CaseGraph({ accent }) {
  return (
    <svg viewBox="0 0 320 140" width="100%" height="140">
      <defs>
        <linearGradient id="cg-1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={accent} stopOpacity="0.35"/>
          <stop offset="100%" stopColor={accent} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d="M0 110 L40 90 L80 95 L120 70 L160 78 L200 50 L240 58 L280 30 L320 38 L320 140 L0 140 Z" fill="url(#cg-1)"/>
      <path d="M0 110 L40 90 L80 95 L120 70 L160 78 L200 50 L240 58 L280 30 L320 38" fill="none" stroke={accent} strokeWidth="2"/>
      {[40, 120, 200, 280].map((x, i) => (
        <circle key={i} cx={x} cy={[90, 70, 50, 30][i]} r="3" fill={accent}/>
      ))}
    </svg>
  );
}
function CasePulse({ accent }) {
  return (
    <svg viewBox="0 0 320 140" width="100%" height="140">
      <path d="M0 70 L60 70 L75 30 L95 110 L115 50 L135 80 L155 70 L320 70" fill="none" stroke={accent} strokeWidth="2.5" strokeLinejoin="round"/>
      <circle cx="200" cy="70" r="3" fill={accent}/>
      <circle cx="200" cy="70" r="14" fill="none" stroke={accent} strokeOpacity="0.4"/>
    </svg>
  );
}
function CaseTerminal({ accent }) {
  return (
    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "rgba(255,255,255,0.85)", lineHeight: 1.7, padding: "12px 0" }}>
      <div><span style={{ color: accent }}>›</span> simsalabim eval --suite notema</div>
      <div style={{ color: "rgba(255,255,255,0.5)" }}>  running 412 cases…</div>
      <div><span style={{ color: accent }}>✦</span> 408/412 passed <span style={{ color: "rgba(255,255,255,0.5)" }}>(99.0%)</span></div>
      <div style={{ color: accent }}>  ready to ship.</div>
    </div>
  );
}

// ─── Process ───────────────────────────────────────────────────────────────
function Process({ content }) {
  return (
    <section className="process" id="process">
      <SectionHead
        eyebrow={content.eyebrow}
        title={<AccentTitle pre={content.titlePre} accent={content.titleAccent}/>}
      />
      <ol className="process-list">
        {content.steps.map((s, i) => (
          <li key={s.n} className="step">
            <div className="step-n">{s.n}</div>
            <div className="step-content">
              <h4>{s.t}</h4>
              <p>{s.b}</p>
            </div>
            {i < content.steps.length - 1 && <div className="step-line" aria-hidden="true"/>}
          </li>
        ))}
      </ol>
    </section>
  );
}

// ─── Tech stack ────────────────────────────────────────────────────────────
function Stack({ content }) {
  return (
    <section className="stack" id="stack">
      <SectionHead
        eyebrow={content.eyebrow}
        title={<AccentTitle pre={content.titlePre} accent={content.titleAccent}/>}
        sub={content.sub}
      />
      <div className="stack-grid">
        {content.categories.map((c) => (
          <div key={c.t} className="stack-col">
            <div className="stack-h">{c.t}</div>
            <ul>
              {c.items.map((i) => (
                <li key={i}>{i}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Customers ─────────────────────────────────────────────────────────────
// Logo box renders an <img> when a logo path is set, otherwise a placeholder
// that leaves room for the logotype. Each card links to a detail page (#kund/<slug>).
function CustomerLogo({ customer }) {
  return (
    <div className="customer-logo">
      {customer.logo
        ? <img src={customer.logo} alt={customer.name}/>
        : <span className="customer-logo-ph">{customer.name}</span>}
    </div>
  );
}

function Customers({ content }) {
  return (
    <section className="customers" id="customers">
      <SectionHead
        eyebrow={content.eyebrow}
        title={<AccentTitle pre={content.titlePre} accent={content.titleAccent}/>}
        sub={content.sub}
      />
      <div className="customers-grid">
        {content.items.map((c) => (
          <a key={c.slug} href={`#kund/${c.slug}`} className="customer-card">
            <CustomerLogo customer={c}/>
            <div className="customer-card-body">
              <h3>{c.name}</h3>
              <p>{c.summary}</p>
              <span className="customer-link">Läs mer <span>→</span></span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ─── Customer detail page (hash route: #kund/<slug>) ─────────────────────────
function CustomerDetail({ customer, content }) {
  return (
    <section className="customer-detail">
      <a href="#customers" className="customer-back">← Tillbaka till kunder</a>
      <div className="customer-detail-head">
        <CustomerLogo customer={customer}/>
        <div className="customer-detail-head-text">
          {content.eyebrow && <div className="section-eyebrow">{content.eyebrow}</div>}
          <h1 className="customer-detail-title">{customer.name}</h1>
          {customer.intro && <p className="customer-detail-intro">{customer.intro}</p>}
        </div>
      </div>
      {customer.body && customer.body.length > 0 && (
        <div className="customer-detail-body">
          {customer.body.map((p, i) => <p key={i}>{p}</p>)}
        </div>
      )}
      {customer.images && customer.images.length > 0 && (
        <div className="customer-gallery">
          {customer.images.map((img, i) => (
            <img key={i} src={img.src || img} alt={img.alt || customer.name}/>
          ))}
        </div>
      )}
    </section>
  );
}

// ─── About / team ──────────────────────────────────────────────────────────
// Avatar gradients keyed by index — text comes from content.json.
const TEAM_GRADIENTS = [
  { c1: "#4F46E5", c2: "#EC4899" },
  { c1: "#059669", c2: "#06B6D4" },
  { c1: "#F59E0B", c2: "#EF4444" },
  { c1: "#7C3AED", c2: "#3B82F6" },
];

function About({ content }) {
  return (
    <section className="about" id="about">
      <SectionHead
        eyebrow={content.eyebrow}
        title={<AccentTitle pre={content.titlePre} accent={content.titleAccent}/>}
        sub={content.sub}
      />
      <div className="team-grid">
        {content.team.map((m, i) => {
          const g = TEAM_GRADIENTS[i % TEAM_GRADIENTS.length];
          return (
            <article key={m.name} className="member">
              <div className="avatar" style={{ background: `linear-gradient(135deg, ${g.c1}, ${g.c2})` }}>
                <span>{m.name.split(" ").map((p) => p[0]).join("")}</span>
              </div>
              <div className="member-name">{m.name}</div>
              <div className="member-role">{m.role}</div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

// ─── Pull quote ────────────────────────────────────────────────────────────
function Quote({ content }) {
  return (
    <section className="quote">
      <div className="quote-mark" aria-hidden="true">"</div>
      <blockquote>{content.text}</blockquote>
      <div className="quote-by">
        <div className="quote-avatar" style={{ background: "linear-gradient(135deg, #4F46E5, #EC4899)" }}>{content.initials}</div>
        <div>
          <div className="quote-name">{content.name}</div>
          <div className="quote-role">{content.role}</div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA / Contact ─────────────────────────────────────────────────────────
function CTA({ content }) {
  return (
    <section className="cta" id="contact">
      <div className="cta-inner">
        <div className="cta-spark"><BracketMark size={56} dark/></div>
        <h2>
          {content.titlePre}
          <span className="accent-l">{content.titleAccent}</span>
        </h2>
        <p>{content.body}</p>
        <div className="cta-actions">
          <a href={`mailto:${content.email}`} className="btn-primary lg light">{content.email}</a>
          <a href="#" className="btn-ghost lg dark">{content.ctaGhost}</a>
        </div>
        <div className="cta-meta">
          <span>{content.location}</span>
          <span className="dot-sep">·</span>
          <span>{content.responseTime}</span>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ────────────────────────────────────────────────────────────────
function Footer({ content }) {
  return (
    <footer className="footer">
      <div className="footer-top">
        <a href="#top" className="nav-brand">
          <BracketMark size={26}/>
          <span className="nav-wordmark">simsalabim<span className="dot">.</span>solutions</span>
        </a>
        <div className="footer-cols">
          {content.columns.map((col) => (
            <div key={col.heading}>
              <div className="footer-h">{col.heading}</div>
              {col.links.map((l) => (
                <a key={l.label} href={l.href}>{l.label}</a>
              ))}
            </div>
          ))}
        </div>
      </div>
      <div className="footer-bot">
        <span>{content.copyright}</span>
        <span className="mono">{content.commitLine}</span>
      </div>
    </footer>
  );
}

// ─── Shared section header ─────────────────────────────────────────────────
function SectionHead({ eyebrow, title, sub, action }) {
  return (
    <div className="section-head">
      <div className="section-head-text">
        {eyebrow && <div className="section-eyebrow">{eyebrow}</div>}
        {title && <h2 className="section-title">{title}</h2>}
        {sub && <p className="section-sub">{sub}</p>}
      </div>
      {action && <div className="section-head-action">{action}</div>}
    </div>
  );
}

// ─── App ───────────────────────────────────────────────────────────────────
function Site({ content }) {
  return (
    <div className="site">
      <Nav content={content.nav}/>
      <Hero content={content.hero}/>
      {/* <Logos content={content.logos}/> dolt — "Team från och kunder som" */}
      <Services content={content.services}/>
      <Work content={content.work}/>
      <Quote content={content.quote}/>
      <Process content={content.process}/>
      {/* <Stack content={content.stack}/> dolt */}
      <Customers content={content.customers}/>
      <About content={content.about}/>
      <CTA content={content.cta}/>
      <Footer content={content.footer}/>
    </div>
  );
}

function LoadError({ message }) {
  return (
    <div style={{ padding: 40, fontFamily: "system-ui, sans-serif", color: "#7f1d1d" }}>
      <h1 style={{ fontSize: 20, marginBottom: 8 }}>Kunde inte ladda content.json</h1>
      <p style={{ fontSize: 14, color: "#991b1b" }}>{message}</p>
      <p style={{ fontSize: 13, color: "#6b7280", marginTop: 12 }}>
        Servera sidan via en lokal webbserver (t.ex. <code>python3 -m http.server</code>) — <code>fetch</code> fungerar inte över <code>file://</code>.
      </p>
    </div>
  );
}

// ─── Hash routing ────────────────────────────────────────────────────────
// Single-document app: #kund/<slug> shows a customer detail page, everything
// else renders the main scroll page (nav anchors like #services still work).
function Root({ content }) {
  const [hash, setHash] = React.useState(window.location.hash);
  React.useEffect(() => {
    const onChange = () => setHash(window.location.hash);
    window.addEventListener("hashchange", onChange);
    return () => window.removeEventListener("hashchange", onChange);
  }, []);

  const match = hash.match(/^#kund\/(.+)$/);
  const slug = match ? match[1] : null;
  React.useEffect(() => { if (slug) window.scrollTo(0, 0); }, [slug]);

  if (slug) {
    const items = (content.customers && content.customers.items) || [];
    const customer = items.find((c) => c.slug === slug);
    if (customer) {
      return (
        <div className="site">
          <Nav content={content.nav}/>
          <CustomerDetail customer={customer} content={content.customers}/>
          <Footer content={content.footer}/>
        </div>
      );
    }
  }
  return <Site content={content}/>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));

fetch("content.json", { cache: "no-cache" })
  .then((r) => {
    if (!r.ok) throw new Error(`HTTP ${r.status}`);
    return r.json();
  })
  .then((content) => root.render(<Root content={content}/>))
  .catch((err) => root.render(<LoadError message={String(err)}/>));