/* portfolio-sections.jsx — Operational Intelligence edition */

const { useEffect, useState } = React;

// =========================================================
// TOPNAV
// =========================================================
const Topnav = ({ data, theme, setTheme, adminMode, onAdmin }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <nav className={"topnav" + (scrolled ? " scrolled" : "")}>
      <div className="topnav-row">
        <a href="#top" className="brand">
          <span className="brand-mark">LB</span>
          <span>Lakshman Bazarla</span>
        </a>
        <div className="nav-links">
          <a href="#products">Products</a>
          <a href="#frameworks">Frameworks</a>
          <a href="#learning">Learning</a>
          <a href="#cases">Cases</a>
          <a href="#social">Social</a>
          <a href="#evolution">Evolution</a>
          <a href="#resume">Resume</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="nav-right">
          <button className="btn btn-icon btn-ghost" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} title="Toggle theme">
            <Icon name={theme === "dark" ? "sun" : "moon"} size={16} />
          </button>
          <a className="btn btn-sm" href="LAKSHMAN_OPTIMIZED_RESUME_2026.html"><Icon name="download" size={13} /> Resume</a>
        </div>
      </div>
    </nav>
  );
};

// =========================================================
// HERO
// =========================================================
const Hero = ({ data, onEdit }) => {
  const h = data.hero;
  const linkedin = data.contact.channels.find(c => c.type === "linkedin")?.href || "#";
  const github = data.contact.channels.find(c => c.type === "github")?.href || "#";
  const initials = (h.name || "LB").split(" ").map(w => w[0]).slice(0,2).join("").toUpperCase();
  return (
    <header className="hero" id="top">
      <div className="hero-bg"></div>
      <div className="container hero-inner">
        <Editable onEdit={() => onEdit("hero")}>
          <div className="hero-eyebrow fade-up">
            <span className="status-pill"><span className="dot"></span>Open to work</span>
            <span>{h.kicker}</span>
          </div>
          <div className="hero-row">
            <div className="hero-text">
              <h1 className="fade-up" style={{animationDelay:"0.05s"}}>{h.name}</h1>
              <p className="hero-subtitle fade-up" style={{animationDelay:"0.1s"}}>{h.subtitle}</p>
              <p className="hero-intro fade-up" style={{animationDelay:"0.15s"}}>{h.intro}</p>
              <div className="hero-ctas fade-up" style={{animationDelay:"0.2s"}}>
                <a className="btn btn-accent" href="#projects"><Icon name="arrow-right" size={14} /> View projects</a>
                <a className="btn" href={data.resume.file} target="_blank" rel="noreferrer"><Icon name="download" size={14} /> Resume</a>
                <a className="btn btn-ghost" href={linkedin} target="_blank" rel="noreferrer"><Icon name="linkedin" size={14} /> LinkedIn</a>
                <a className="btn btn-ghost" href={github} target="_blank" rel="noreferrer"><Icon name="github" size={14} /> GitHub</a>
                <a className="btn btn-ghost" href="#contact"><Icon name="send" size={14} /> Contact</a>
              </div>
            </div>
            <div className="hero-avatar fade-up" style={{animationDelay:"0.1s"}}>
              {h.avatar
                ? <img src={h.avatar} alt={h.name} />
                : <span className="hero-avatar-fallback">{initials}</span>}
              <span className="hero-avatar-ring"></span>
            </div>
          </div>
          <div className="hero-stats fade-up" style={{animationDelay:"0.25s"}}>
            {h.stats.map((s, i) => (
              <div className="stat" key={i}>
                <div className="num">{s.num}</div>
                <div className="lab">{s.lab}</div>
              </div>
            ))}
          </div>
        </Editable>
      </div>
    </header>
  );
};

// =========================================================
// HYBRID CAPABILITY (Signature Identity — interactive Venn + 3-block legend)
// =========================================================
const SignatureVenn = ({ venn, active }) => {
  // Three circles in a triangle. Container viewBox 480 × 480.
  const cx = 240, cy = 260;
  const r = 130;
  const off = 80;
  const c1 = { x: cx,                  y: cy - off };           // TOP — left key
  const c2 = { x: cx - off * 0.866,    y: cy + off * 0.5 };     // BOTTOM-LEFT — right key
  const c3 = { x: cx + off * 0.866,    y: cy + off * 0.5 };     // BOTTOM-RIGHT — bottom key
  const colors = [venn.left.color || "#1e3a8a", venn.right.color || "#2563eb", venn.bottom.color || "#0c4a6e"];

  const circleProps = (idx, c) => {
    const dim = active !== null && active !== idx;
    return {
      cx: c.x, cy: c.y, r,
      fill: `url(#sv-g${idx})`,
      stroke: colors[idx],
      strokeWidth: active === idx ? 2.4 : 1.4,
      opacity: dim ? 0.32 : 1,
      style: { transition: "opacity 0.25s, stroke-width 0.25s" },
      filter: active === idx ? `url(#sv-glow${idx})` : undefined,
    };
  };

  return (
    <svg viewBox="0 0 480 480" aria-hidden="true">
      <defs>
        {colors.map((col, i) => (
          <radialGradient id={`sv-g${i}`} cx="50%" cy="50%" r="50%" key={i}>
            <stop offset="0%" stopColor={col} stopOpacity="0.22" />
            <stop offset="80%" stopColor={col} stopOpacity="0.03" />
          </radialGradient>
        ))}
        {colors.map((col, i) => (
          <filter id={`sv-glow${i}`} x="-30%" y="-30%" width="160%" height="160%" key={"f" + i}>
            <feGaussianBlur stdDeviation="6" result="b" />
            <feFlood floodColor={col} floodOpacity="0.45" />
            <feComposite in2="b" operator="in" />
            <feMerge>
              <feMergeNode />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        ))}
      </defs>
      {/* Subtle crosshair / reticle for "engineered" feel */}
      <g stroke="currentColor" strokeOpacity="0.08" strokeWidth="1">
        <line x1="40"  y1="240" x2="120" y2="240" />
        <line x1="360" y1="240" x2="440" y2="240" />
        <line x1="240" y1="40"  x2="240" y2="100" />
        <line x1="240" y1="400" x2="240" y2="440" />
      </g>
      <circle {...circleProps(0, c1)} />
      <circle {...circleProps(1, c2)} />
      <circle {...circleProps(2, c3)} />
      {/* Centre node — anchors the synthesis pill */}
      <circle cx={cx} cy={cy + 10} r="2.5" fill="currentColor" opacity="0.4" />
    </svg>
  );
};

const HybridCapability = ({ data, onEdit }) => {
  const c = data.capabilities;
  const [active, setActive] = useState(null);
  const blocks = [c.venn.left, c.venn.right, c.venn.bottom];
  const axisLabels = ["DOMAIN", "CRAFT", "LEVERAGE"];
  return (
    <Section
      id="capabilities"
      eyebrow="01 · Signature Identity"
      title="The signature: three disciplines,"
      italic="one practice."
      sub={c.lead}
    >
      <Editable onEdit={() => onEdit("capabilities")}>
        <div className="signature">
          <div className="signature-venn">
            {/* Domain expertise stratum — operating environments the work lives in */}
            {c.domains && c.domains.length > 0 && (
              <div className="venn-domains" aria-label="Domain expertise">
                <span className="venn-domains-axis">
                  <span className="vd-tick"></span>
                  <span className="vd-axis-label">Domain Expertise</span>
                  <span className="vd-tick"></span>
                </span>
                <div className="venn-domains-row">
                  {c.domains.map((d, i) => (
                    <span className="venn-domain-chip" key={i}>
                      <span className="vd-code">{d.code}</span>
                      <span className="vd-label">{d.label}</span>
                    </span>
                  ))}
                </div>
              </div>
            )}

            <div className="signature-venn-stage">
              <SignatureVenn venn={c.venn} active={active} />

              {/* External circle labels */}
              <div className="venn-label venn-label-top" data-color={c.venn.left.color}>
                <span className="vl-axis">{axisLabels[0]}</span>
                <span className="vl-rule"></span>
                <span className="vl-title">{c.venn.left.title}</span>
              </div>
              <div className="venn-label venn-label-left" data-color={c.venn.right.color}>
                <span className="vl-axis">{axisLabels[1]}</span>
                <span className="vl-rule"></span>
                <span className="vl-title">{c.venn.right.title}</span>
              </div>
              <div className="venn-label venn-label-right" data-color={c.venn.bottom.color}>
                <span className="vl-axis">{axisLabels[2]}</span>
                <span className="vl-rule"></span>
                <span className="vl-title">{c.venn.bottom.title}</span>
              </div>

              {/* Centre pill */}
              <div className="venn-center">
                <span className="vc-eyebrow">SYNTHESIS · 00</span>
                <strong>{c.venn.center.title}</strong>
                {c.venn.center.sub && <span className="vc-sub">{c.venn.center.sub}</span>}
              </div>
            </div>
          </div>

          <div className="legend">
            <p style={{margin:"0 0 6px", color:"var(--text-2)", fontSize:"14.5px", lineHeight:1.6}}>
              Hover any block to highlight its disc — the centre is where they overlap.
            </p>
            {blocks.map((b, i) => (
              <div
                className="legend-block"
                key={i}
                data-active={active === i}
                onMouseEnter={() => setActive(i)}
                onMouseLeave={() => setActive(null)}
                onFocus={() => setActive(i)}
                onBlur={() => setActive(null)}
                tabIndex={0}
              >
                <div className="lh">
                  <span className="swatch" style={{
                    background: b.color,
                    boxShadow: `0 0 0 4px ${b.color}22`
                  }}></span>
                  <span className="ttl">{b.title}</span>
                  <span className="ic" style={{color: b.color, background: `${b.color}14`}}>
                    <Icon name={b.icon} size={14} />
                  </span>
                </div>
                <div className="tags">
                  {(b.tags || []).map((t, j) => <span className="tag" key={j}>{t}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// HOW I BUILD SYSTEMS (6-step process chain)
// =========================================================
const HowIBuild = ({ data, onEdit }) => {
  const p = data.process;
  if (!p) return null;
  return (
    <Section
      id="process"
      eyebrow="02 · How I Build Systems"
      title="From workflow conversation"
      italic="to production system."
      sub={p.lead}
    >
      <Editable onEdit={() => onEdit("process")}>
        <div className="flow-chain">
          {p.steps.map((s, i) => (
            <div className="flow-step" key={i}>
              <span className="num">0{i + 1}</span>
              <div className="ic"><Icon name={s.icon} size={16} /></div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              {i < p.steps.length - 1 && (
                <div className="flow-arrow"><Icon name="arrow-right" size={12} /></div>
              )}
            </div>
          ))}
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// PROJECTS (featured first)
// =========================================================
const Projects = ({ data, onEdit, openProject }) => {
  const sorted = [...data.projects].sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));
  return (
    <Section
      id="projects"
      eyebrow="04 · Featured Projects"
      title="Production systems &"
      italic="case studies."
      sub="Operational automation and AI-assisted product work — every project tied to a measurable business outcome."
    >
      <Editable onEdit={() => onEdit("projects")}>
        <div className="projects-grid">
          {sorted.filter(p => p.featured !== false).map((p) => (
            <article className="project-card" key={p.id} onClick={() => openProject(p)}>
              <div className="project-thumb">
                {p.thumb
                  ? (p.thumb.startsWith("data:video") ? <video src={p.thumb} muted autoPlay loop playsInline /> : <img src={p.thumb} alt="" />)
                  : <PlaceholderArt seed={p.id} />}
                {p.status && <span className="project-status">{p.status}</span>}
              </div>
              <div className="project-body">
                <div className="project-cat">{p.category}</div>
                <h3 className="project-name">{p.name}</h3>
                <p className="project-desc">{p.tagline}</p>
                {p.metrics && p.metrics.length > 0 && (
                  <div className="project-metrics">
                    {p.metrics.slice(0,3).map((m, i) => (
                      <div className="m" key={i}>
                        <div className="num">{m.num}</div>
                        <div className="lab">{m.lab}</div>
                      </div>
                    ))}
                  </div>
                )}
                <div className="project-stack">
                  {(p.stack || []).slice(0,5).map((s, i) => <span className="tag" key={i}>{s}</span>)}
                </div>
              </div>
            </article>
          ))}
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// PROJECT MODAL
// =========================================================
const ProjectModal = ({ project, onClose }) => {
  useEffect(() => {
    const k = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", k);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", k); document.body.style.overflow = ""; };
  }, [onClose]);
  if (!project) return null;
  const p = project;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-hero">
          {p.thumb
            ? (p.thumb.startsWith("data:video") ? <video src={p.thumb} controls autoPlay muted loop /> : <img src={p.thumb} alt="" />)
            : <PlaceholderArt seed={p.id} />}
          <button className="modal-close" onClick={onClose}><Icon name="close" size={16} /></button>
          {p.status && <span className="project-status" style={{top:"16px",left:"16px",right:"auto"}}>{p.status}</span>}
        </div>
        <div className="modal-body">
          <div className="modal-cat">{p.category}</div>
          <h2>{p.name}</h2>
          <p style={{color:"var(--text-2)", fontSize:"17px", margin:"10px 0 0", lineHeight:1.5}}>{p.tagline}</p>

          <div className="modal-section">
            <h4>Overview</h4>
            <p>{p.description}</p>
          </div>

          {p.bullets && p.bullets.length > 0 && (
            <div className="modal-section">
              <h4>What I built</h4>
              <ul>{p.bullets.map((b, i) => <li key={i}>{b}</li>)}</ul>
            </div>
          )}

          {p.metrics && p.metrics.length > 0 && (
            <div className="modal-section">
              <h4>Impact</h4>
              <div className="project-metrics" style={{borderTop:"1px solid var(--border)", borderBottom:"1px solid var(--border)", padding:"16px 0"}}>
                {p.metrics.map((m, i) => (
                  <div className="m" key={i}>
                    <div className="num" style={{fontSize:"22px"}}>{m.num}</div>
                    <div className="lab">{m.lab}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {p.stack && (
            <div className="modal-section">
              <h4>Tech Stack</h4>
              <div className="project-stack">{p.stack.map((s, i) => <span className="tag" key={i}>{s}</span>)}</div>
            </div>
          )}

          {(p.links?.github || p.links?.demo || p.links?.video || p.links?.pdf) && (
            <div className="modal-links">
              {p.links.demo && <a className="btn btn-accent" href={p.links.demo} target="_blank" rel="noreferrer"><Icon name="external" size={13} /> Live Demo</a>}
              {p.links.github && <a className="btn" href={p.links.github} target="_blank" rel="noreferrer"><Icon name="github" size={13} /> Source</a>}
              {p.links.video && <a className="btn" href={p.links.video} target="_blank" rel="noreferrer"><Icon name="play" size={13} /> Watch</a>}
              {p.links.pdf && <a className="btn" href={p.links.pdf} target="_blank" rel="noreferrer"><Icon name="file" size={13} /> Case Study</a>}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// =========================================================
// ENGINEERING APPROACH (5 principles, mini diagrams)
// =========================================================
const ApproachDiagram = ({ icon }) => {
  // Render a small geometric diagram per icon key
  const d = (k) => {
    switch (k) {
      case "blueprint": return (
        <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="4" y="4" width="24" height="24" rx="3" />
          <path d="M4 12h24M12 4v24M22 18l4 4M22 22h4v-4" />
        </svg>
      );
      case "shield": return (
        <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M16 28s10-5 10-13V6L16 3 6 6v9c0 8 10 13 10 13z" />
          <path d="M12 16l3 3 6-6" />
        </svg>
      );
      case "layers": return (
        <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5">
          <polygon points="16 3 4 9 16 15 28 9 16 3" />
          <polyline points="4 22 16 28 28 22" />
          <polyline points="4 15.5 16 21.5 28 15.5" />
        </svg>
      );
      case "spark": return (
        <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5">
          <circle cx="16" cy="16" r="3.5" />
          <path d="M16 5v4M16 23v4M5 16h4M23 16h4M8.5 8.5l2.8 2.8M20.7 20.7l2.8 2.8M8.5 23.5l2.8-2.8M20.7 11.3l2.8-2.8" />
        </svg>
      );
      case "check": return (
        <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5">
          <circle cx="16" cy="16" r="12" />
          <path d="M11 16l4 4 7-8" />
        </svg>
      );
      default: return <Icon name={k} size={24} />;
    }
  };
  return <span style={{display:"grid", placeItems:"center", width:32, height:32}}>{d(icon)}</span>;
};

const EngineeringPrinciples = ({ data, onEdit }) => {
  const p = data.principles;
  if (!p) return null;
  return (
    <Section
      id="principles"
      eyebrow="03 · Engineering Principles"
      title="Seven tenets,"
      italic="every system."
      sub={p.lead}
    >
      <Editable onEdit={() => onEdit("principles")}>
        <div className="approach-row">
          {p.items.map((it, i) => (
            <div className="approach-card" key={i}>
              <span className="num">0{i+1}</span>
              <div className="diagram"><ApproachDiagram icon={it.icon} /></div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// FRAMEWORKS (engineering frameworks grid)
// =========================================================
const Frameworks = ({ data, onEdit }) => {
  const f = data.frameworks;
  if (!f) return null;
  return (
    <Section
      id="frameworks"
      eyebrow="05 · Engineering Frameworks"
      title="Reusable shapes,"
      italic="real implementations."
      sub={f.lead}
    >
      <Editable onEdit={() => onEdit("frameworks")}>
        <div className="frameworks-grid">
          {f.items.map((fw) => (
            <article className="framework-card" key={fw.id}>
              <div className="fw-head">
                <span className="fw-ic"><Icon name={fw.icon} size={16} /></span>
                <h3>{fw.name}</h3>
              </div>
              <p className="fw-summary">{fw.summary}</p>
              {fw.poster && (
                <a className="fw-poster" href={fw.poster} target="_blank" rel="noreferrer">
                  <img src={fw.poster} alt={fw.name + " framework poster"} />
                  <span className="fw-poster-cap">
                    <Icon name="external" size={11} />
                    <span>{fw.posterCaption || "View full poster"}</span>
                  </span>
                </a>
              )}
              {fw.pillars && fw.pillars.length > 0 && (
                <ul className="fw-pillars">
                  {fw.pillars.map((p, i) => <li key={i}>{p}</li>)}
                </ul>
              )}
              <div className="fw-foot">
                <div className="fw-tags">
                  {(fw.tags || []).slice(0,4).map((t, i) => <span className="tag" key={i}>{t}</span>)}
                </div>
                {fw.linkedTo && <div className="fw-linked">↳ <strong>Used in</strong> {fw.linkedTo}</div>}
              </div>
            </article>
          ))}
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// LEARNING PORTAL (episode list)
// =========================================================
const Learning = ({ data, onEdit }) => {
  const l = data.learning;
  if (!l) return null;
  return (
    <Section
      id="learning"
      eyebrow="06 · Learning Portal"
      title="Episode-style walkthroughs of"
      italic="real systems."
      sub={l.lead}
    >
      <Editable onEdit={() => onEdit("learning")}>
        <div className="episodes-grid">
          {l.episodes.map((ep) => (
            <article className="episode-card" key={ep.id}>
              <div className="ep-banner">
                {ep.thumb
                  ? <img src={ep.thumb} alt="" />
                  : <PlaceholderArt seed={ep.id} />}
                <span className="ep-num">EP · {ep.number}</span>
              </div>
              <div className="ep-body">
                <div className="ep-meta">
                  <span className="ep-fw">{ep.framework}</span>
                  <span className="ep-dur">{ep.duration}</span>
                </div>
                <h3>{ep.title}</h3>
                <p>{ep.summary}</p>
                <div className="ep-tags">
                  {(ep.tags || []).slice(0,3).map((t, i) => <span className="tag" key={i}>{t}</span>)}
                </div>
              </div>
            </article>
          ))}
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// DOWNLOAD CENTER
// =========================================================
const Downloads = ({ data, onEdit }) => {
  const d = data.downloads;
  if (!d) return null;
  const typeIcon = (t) => ({ "PDF": "file", "Markdown": "file", "Code": "code" })[t] || "download";
  return (
    <Section
      id="downloads"
      eyebrow="10 · Download Center"
      title="Templates, references,"
      italic="and frameworks."
      sub={d.lead}
    >
      <Editable onEdit={() => onEdit("downloads")}>
        <div className="downloads-grid">
          {d.items.map((it) => (
            <a className="download-card" href={it.file || "#"} key={it.id} download>
              <div className="dl-icon"><Icon name={typeIcon(it.type)} size={18} /></div>
              <div className="dl-body">
                <div className="dl-meta">
                  <span className="dl-type">{it.type}</span>
                  {it.size && <span className="dl-size">{it.size}</span>}
                </div>
                <h3>{it.name}</h3>
                <p>{it.description}</p>
                <div className="dl-tags">
                  {(it.tags || []).slice(0,3).map((t, i) => <span className="tag" key={i}>{t}</span>)}
                </div>
              </div>
              <div className="dl-arrow"><Icon name="download" size={16} /></div>
            </a>
          ))}
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// JOURNEY (timeline)
// =========================================================
const Journey = ({ data, onEdit }) => {
  const j = data.journey;
  if (!j) return null;
  return (
    <Section
      id="journey"
      eyebrow="11 · Journey"
      title="From operational reporting"
      italic="to AI-assisted engineering."
      sub={j.lead}
    >
      <Editable onEdit={() => onEdit("journey")}>
        <div className="journey-rail">
          {j.milestones.map((m, i) => (
            <div className="journey-stop" key={i}>
              <div className="js-year">{m.year}</div>
              <div className="js-card">
                <h3>{m.title}</h3>
                {m.where && <div className="js-where">{m.where}</div>}
                <p>{m.summary}</p>
              </div>
            </div>
          ))}
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// APPLICATION SHOWCASE (mockups)
// =========================================================
const MockWindows = ({ item }) => (
  <div className="showcase-mock">
    <div className="mock-win-bar">
      <span className="dot r"></span><span className="dot y"></span><span className="dot g"></span>
      <span className="ttl">{item.title || "AP Console"}</span>
    </div>
    <div className="mock-win-body">
      {(item.lines || []).map((l, i) => (
        <div className="line" key={i}>
          <span className="k">{l.k}</span>
          <span className={"v " + (l.tone || "")}>{l.v}</span>
        </div>
      ))}
    </div>
  </div>
);

const MockPhone = ({ item }) => (
  <div className="showcase-mock mock-phone">
    <div className="phone-frame">
      <div className="phone-screen">
        <div className="label">{item.title}</div>
        <div className="head">{item.head || "This week"}</div>
        {(item.rows || []).map((r, i) => (
          <div className="row" key={i}>
            <div><strong>{r.lab}</strong></div>
            <div className={r.tone === "pos" ? "pos" : r.tone === "neg" ? "neg" : ""}>{r.val}</div>
          </div>
        ))}
        <div className="cta">{item.cta || "Continue"}</div>
      </div>
    </div>
  </div>
);

const MockDashboard = ({ item }) => {
  const max = Math.max(...(item.bars || [1]));
  return (
    <div className="showcase-mock mock-dash">
      {(item.kpis || []).map((k, i) => (
        <div className="kpi" key={i}>
          <div className={"v" + (k.tone === "signal" ? " signal" : "")}>{k.v}</div>
          <div className="l">{k.l}</div>
        </div>
      ))}
      <div className="chart">
        <div className="ttl">{item.chartTitle}</div>
        <div className="bars">
          {(item.bars || []).map((v, i) => {
            const pct = (v / max) * 100;
            const cls = "bar" + (i === item.bars.length - 1 ? " signal" : i >= item.bars.length - 3 ? " hi" : "");
            return <div className={cls} style={{height: pct + "%"}} key={i}></div>;
          })}
        </div>
      </div>
    </div>
  );
};

const MockWorkflow = ({ item }) => {
  const nodes = item.nodes || [];
  const n = nodes.length;
  const w = 600, h = 200;
  const cellW = w / n;
  return (
    <div className="showcase-mock mock-flow">
      <svg viewBox={`0 0 ${w} ${h}`} aria-hidden="true">
        {/* connections */}
        {nodes.slice(0, -1).map((_, i) => (
          <path key={"l" + i}
            d={`M ${cellW * (i + 0.5) + 38} ${h/2} L ${cellW * (i + 1.5) - 38} ${h/2}`}
            stroke="var(--accent)" strokeOpacity="0.5" strokeWidth="1.5" strokeDasharray="4 4" fill="none" />
        ))}
        {nodes.slice(0, -1).map((_, i) => (
          <polygon key={"a" + i}
            points={`${cellW * (i + 1.5) - 38},${h/2 - 4} ${cellW * (i + 1.5) - 30},${h/2} ${cellW * (i + 1.5) - 38},${h/2 + 4}`}
            fill="var(--accent)" />
        ))}
        {/* nodes */}
        {nodes.map((nd, i) => (
          <g key={i}>
            <rect x={cellW * i + 8} y={h/2 - 32} width={cellW - 16} height="64" rx="8"
                  fill="var(--surface)" stroke="var(--accent)" strokeOpacity="0.5" strokeWidth="1.2" />
            <text x={cellW * (i + 0.5)} y={h/2 - 6} fontFamily="var(--sans)" fontSize="14" fontWeight="600"
                  fill="var(--text)" textAnchor="middle">{nd.label}</text>
            <text x={cellW * (i + 0.5)} y={h/2 + 16} fontFamily="var(--mono)" fontSize="10" letterSpacing="0.08em"
                  fill="var(--text-3)" textAnchor="middle" style={{textTransform:"uppercase"}}>{nd.sub}</text>
          </g>
        ))}
      </svg>
    </div>
  );
};

const ShowcaseCard = ({ item }) => (
  <div className="showcase-card">
    <div className="showcase-cat">{item.category}</div>
    <h3>{item.title}</h3>
    <p>{item.description}</p>
    {item.image
      ? <div className="showcase-mock showcase-image"><img src={item.image} alt={item.title} /></div>
      : <>
          {item.type === "windows"   && <MockWindows   item={item} />}
          {item.type === "phone"     && <MockPhone     item={item} />}
          {item.type === "dashboard" && <MockDashboard item={item} />}
          {item.type === "workflow"  && <MockWorkflow  item={item} />}
        </>}
  </div>
);

const AppShowcase = ({ data, onEdit }) => {
  const items = data.showcase || [];
  // Group into pairs for the asymmetric grid look
  const pairs = [];
  for (let i = 0; i < items.length; i += 2) pairs.push(items.slice(i, i + 2));
  return (
    <Section
      id="showcase"
      eyebrow="07 · Product & Application Showcase"
      title="Where the systems"
      italic="actually live."
      sub="Operator-facing consoles, mobile screens, executive dashboards, and the pipeline architecture diagrams that hold them together."
    >
      <Editable onEdit={() => onEdit("showcase")}>
        {pairs.map((row, idx) => (
          <div className={"showcase-grid" + (idx % 2 ? " reverse" : "")} key={idx}>
            {row.map((it) => <ShowcaseCard item={it} key={it.id} />)}
          </div>
        ))}
      </Editable>
    </Section>
  );
};

// =========================================================
// TECH STACK (categorised)
// =========================================================
const TechStack = ({ data, onEdit }) => (
  <Section
    id="stack"
    eyebrow="08 · Tech Stack"
    title="The toolkit"
    italic="behind the systems."
    sub="Organised by job, not by trend. Every category here ships production work on a regular cadence."
  >
    <Editable onEdit={() => onEdit("stack")}>
      <div className="stack-grid">
        {data.techStack.map((s, i) => (
          <div className="stack-card" key={i}>
            <div className="cat">{s.category}</div>
            <div className="items">
              {(s.items || []).map((it, j) => <span className="tag" key={j}>{it}</span>)}
            </div>
          </div>
        ))}
      </div>
    </Editable>
  </Section>
);

// =========================================================
// CASE STUDIES (expandable)
// =========================================================
const CaseStudies = ({ data }) => {
  const cases = data.projects.filter(p => p.caseStudy);
  if (cases.length === 0) return null;
  return (
    <Section
      id="cases"
      eyebrow="09 · Case Studies"
      title="Problem, workflow,"
      italic="architecture, impact."
      sub="Selected projects taken apart end-to-end — the structured detail behind the headline numbers."
    >
      <div className="cases">
        {cases.map((p, i) => (
          <details className="case" key={p.id} open={i === 0}>
            <summary>
              <span className="num">0{i + 1}</span>
              <div className="ttl-row">
                <div className="ttl">{p.name}</div>
                <div className="sub">{p.category}</div>
              </div>
              <span className="chev"><Icon name="arrow-down" size={14} /></span>
            </summary>
            <div className="case-body">
              <div>
                <h4>Problem</h4>
                <p>{p.caseStudy.problem}</p>
              </div>
              <div>
                <h4>Workflow</h4>
                <p>{p.caseStudy.workflow}</p>
              </div>
              <div>
                <h4>Architecture</h4>
                <p>{p.caseStudy.architecture}</p>
              </div>
              <div>
                <h4>Implementation</h4>
                <p>{p.caseStudy.implementation}</p>
              </div>
              <div style={{gridColumn: "1 / -1"}}>
                <h4>Business Impact</h4>
                <div className="case-impact">
                  {(p.caseStudy.impact || []).map((im, j) => (
                    <div className="im" key={j}>
                      <div className="v">{im.num}</div>
                      <div className="l">{im.lab}</div>
                    </div>
                  ))}
                </div>
              </div>
              {p.caseStudy.lessons && p.caseStudy.lessons.length > 0 && (
                <div style={{gridColumn: "1 / -1"}}>
                  <h4>Lessons Learned</h4>
                  <ul>
                    {p.caseStudy.lessons.map((l, j) => <li key={j}>{l}</li>)}
                  </ul>
                </div>
              )}
            </div>
          </details>
        ))}
      </div>
    </Section>
  );
};

// =========================================================
// RESUME
// =========================================================
const Resume = ({ data, onEdit }) => {
  const r = data.resume;
  return (
    <Section
      id="resume"
      eyebrow="12 · Resume"
      title="Always the"
      italic="latest version."
      sub="A two-page resume tuned for both ATS and human readers."
    >
      <Editable onEdit={() => onEdit("resume")}>
        <div className="resume-shell">
          <div>
            <h3>{r.title}</h3>
            <p>{r.subline}</p>
            <div className="resume-meta">
              <span>VERSION · {r.version}</span>
              <span>UPDATED · {r.updated}</span>
              <span>PAGES · {r.pages}</span>
            </div>
          </div>
          <div className="resume-actions">
            <a className="btn" href={r.file} target="_blank" rel="noreferrer"><Icon name="external" size={14} /> Preview</a>
            <a className="btn btn-accent" href={r.file} target="_blank" rel="noreferrer"><Icon name="download" size={14} /> Download</a>
          </div>
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// CONTACT (minimal · direct channels only)
// =========================================================
const Contact = ({ data, onEdit }) => {
  const c = data.contact;
  const iconFor = (t) => ({
    email: "mail", phone: "phone", linkedin: "linkedin",
    github: "github", location: "location",
  })[t] || "external";

  return (
    <Section
      id="contact"
      eyebrow="13 · Get in touch"
      title={c.headline.replace(/\s*operations problem\.?/i, "")}
      italic="operations problem."
      sub={c.subline}
    >
      <Editable onEdit={() => onEdit("contact")}>
        <div className="contact-strip">
          {c.channels.map((ch, i) => (
            <a className="contact-channel" key={i} href={ch.href || "#"}
               target={ch.href?.startsWith("http") ? "_blank" : undefined} rel="noreferrer">
              <span className="icon"><Icon name={iconFor(ch.type)} size={18} /></span>
              <div style={{flex:1, minWidth:0}}>
                <div className="lab">{ch.label}</div>
                <div className="val" style={{overflow:"hidden", textOverflow:"ellipsis"}}>{ch.value}</div>
              </div>
              {ch.href?.startsWith("http") && <Icon name="external" size={14} />}
            </a>
          ))}
        </div>
      </Editable>
    </Section>
  );
};

// =========================================================
// FOOTER
// =========================================================
const Footer = ({ data }) => (
  <footer>
    <div className="container foot-row">
      <div>© {new Date().getFullYear()} · Lakshman Bazarla · Hyderabad, India</div>
      <div style={{display:"flex", gap:14, alignItems:"center"}}>
        <a href="#top">Top</a>
        <a href="#projects">Projects</a>
        <a href="#cases">Cases</a>
        <a href="#contact">Contact</a>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Topnav, Hero, HybridCapability, HowIBuild, EngineeringPrinciples,
  Projects, ProjectModal, Frameworks, Learning,
  AppShowcase, TechStack, CaseStudies,
  Downloads, Journey, Resume, Contact, Footer
});