const { useState, useEffect, useRef } = React;

// ---- Tweak defaults ----
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ededec",
  "density": "comfortable",
  "name": "Mike Roth",
  "tagline": "Shipping the\nAI native era,\none product at\na time.",
  "openFirst": true
} /*EDITMODE-END*/;

// ---- Content ----
const WORK = [
{
  id: "cr3",
  company: "CR3 Labs",
  descriptor: "Product studio building AI native consumer experiences.",
  role: "Cofounder · CEO",
  period: "Jan 2022 to Present",
  duration: "4 yrs 5 mos",
  location: "Boulder, CO",
  tags: ["AI Systems", "Blockchain", "3D / Realtime", "Product Strategy", "Venture"],
  summary: [
  "Founder and CEO of CR3 Labs, a product studio exploring the future of digital interaction through AI agents, blockchain rails, and 3D environments.",
  ],
  sideLabel: "Notable products",
  side: [
  { name: "Skry", meta: "$1.1M raised", desc: "AI + crowdsourced intelligence platform for NFT due diligence. Helped users avoid millions in losses from bad purchases." },
  { name: "OpenPage", meta: "$1.6M+ in grants", desc: "3D social community platform. Enabled creators to earn $500k+ through the platform." },
  { name: "Doppel", meta: "$10M+ trade volume", desc: "AI agent gaming platform blending idle mechanics, autonomous agents, and immersive 3D worlds." }]

},
{
  id: "manyuses",
  company: "ManyUses",
  descriptor: "Digital product studio turning founder ideas into MVPs in 90 days.",
  role: "Partner · Head of Engineering",
  period: "Feb 2020 to Jan 2022",
  duration: "2 yrs",
  location: "Boulder, CO",
  tags: ["MVP Strategy", "Full stack", "Cloud Infrastructure", "Product Design"],
  summary: [
  "Cofounded and led engineering at ManyUses®, a digital product studio focused on helping early stage startups rapidly move from concept to launch ready MVP.",
  "Working closely with founders, I designed and built scalable product architectures, production ready applications, and technical infrastructure across web, mobile, and cloud platforms. We delivered tightly scoped MVPs within 1 to 3 months, combining product design, engineering execution, and brand strategy to help clients validate ideas, secure funding, and accelerate product market fit."],

  sideLabel: "Operating model",
  side: [
  { name: "Cycle length", meta: "1 to 3 months", desc: "Tightly scoped MVPs from concept to in market." },
  { name: "Stack", desc: "Full stack engineering, technical architecture, cloud infrastructure, rapid prototyping." },
  { name: "Outcomes", desc: "Helped clients validate ideas, secure funding, and accelerate product market fit." }]

},
{
  id: "radar",
  company: "Radar Relay",
  descriptor: "One of Ethereum's earliest decentralized exchanges. Acquired in 2021.",
  role: "Cofounder · CTO",
  period: "Aug 2017 to Jan 2019",
  duration: "Acquired",
  location: "Denver, CO",
  tags: ["DeFi", "Smart Contracts", "Distributed Systems", "Security", "Fundraising"],
  summary: [
  "Radar Relay was one of the earliest decentralized exchanges built on Ethereum and a pioneer in noncustodial trading infrastructure during the early growth of Web3 and DeFi. The platform enabled peer to peer digital asset trading directly from user wallets, helped define the emerging decentralized exchange ecosystem, and facilitated nearly $1B in trading volume.",
  "As CTO and cofounder, I led the technical vision, systems architecture, and engineering execution behind the platform while supporting fundraising and investor relations. I built and scaled core exchange infrastructure: smart contract integrations, trading systems, wallet connectivity, liquidity mechanisms, and distributed backend services capable of supporting large scale digital asset trading."],

  sideLabel: "Backed by",
  side: [
  { name: "Blockchain Capital" },
  { name: "Digital Currency Group" },
  { name: "Distributed Global" },
  { name: "Acquired by Core Scientific", meta: "2021" }]

},
{
  id: "highbridge",
  company: "HighBridge Creative",
  descriptor: "Creative agency building digital platforms for high end consumer and enterprise brands.",
  role: "Chief Software Architect",
  period: "Jul 2012 to Sep 2015",
  duration: "3 yrs 3 mos",
  location: "Denver, CO",
  tags: ["Systems Architecture", "Backend", "Payments", "Cloud", "Interactive Media"],
  summary: [
  "Led the design and implementation of large scale digital platforms, interactive campaigns, and web infrastructure for national and international brands. Worked closely with creative, product, and executive teams to transform strategic concepts into scalable software systems and high performance digital experiences.",
  "Responsibilities spanned systems architecture, backend engineering, cloud infrastructure, payment systems, interactive media platforms, scalability engineering, and technical execution across high traffic consumer and enterprise applications."],

  sideLabel: "Selected clients",
  side: [
  { name: "Chive Charities", desc: "Built a real time micro donations platform, with millions raised for underfunded causes." },
  { name: "Resignation Brewery", desc: "Digital brand and interactive media platform." },
  { name: "InterContinental Hotel Group", desc: "High end customer rewards infrastructure." },
  { name: "GE Healthcare", desc: "Contributed to enterprise healthcare initiatives." }]

}];


const CONSULTING = {
  company: "Roth Technologies",
  tagline: "From AI curious to AI native.",
  description: "I partner with founders and operators to embed AI deeply into product, engineering, and operations, turning AI from a feature into the operating substrate of the business. I bring 17+ years of experience scaling venture backed companies across AI, fintech, blockchain, and immersive platforms.",
  period: "",
  services: [
  { name: "AI Strategy", desc: "Map where AI creates leverage in your product, team, and ops, with a roadmap to get there." },
  { name: "AI Implementation", desc: "Production grade agent systems, RAG pipelines, evals, and ML ops." },
  { name: "Technical Architecture", desc: "Cloud, data, and platform design built to compound with AI capability." },
  { name: "Org & Workflow", desc: "Restructure how teams build so AI is in the loop, not bolted on." }],

  engagements: ["Fractional CTO", "Technical Advisor", "Project based", "Diligence reviews"]
};

const STATS = [
{ v: "17+", k: "Years building" },
{ v: "5", k: "Companies founded" },
{ v: "$12M+", k: "Raised across ventures" },
{ v: "1", k: "Acquisition" }];


// ---- Components ----
function Nav({ name }) {
  return (
    <nav className="top">
      <div className="shell row">
        <a className="logo" href="#top">
          <span className="logo-mark"></span>
          <span>{name}</span>
        </a>
        <div className="nav-links">
          <a href="#about">About</a>
          <a href="#consulting">Consulting</a>
          <a href="#work">Work</a>
          <a href="#contact">Contact</a>
          {/* <span className="availability">
            <span className="dot"></span>
            Open to projects
          </span> */}
        </div>
      </div>
    </nav>);

}

function Hero({ name, tagline }) {
  // tagline supports newlines → <br>
  const lines = tagline.split("\n");
  return (
    <header className="hero" id="top">
      <div className="shell">
        <div className="label">{name} Portfolio · 2026</div>
        <h1 className="display">
          {lines.map((l, i) =>
          <React.Fragment key={i}>
              {l}{i < lines.length - 1 && <br />}
            </React.Fragment>
          )}
        </h1>
        <div className="hero-meta">
          <div className="meta-block">
            <div className="meta-label">Discipline</div>
            <div className="meta-value">Software Architecture · AI · Web3 · Product</div>
          </div>
          <div className="meta-block">
            <div className="meta-label">Currently</div>
            <div className="meta-value">Co-founder & CEO, CR3 Labs</div>
          </div>
          <div className="meta-block">
            <div className="meta-label">Based in</div>
            <div className="meta-value">Boulder, Colorado</div>
          </div>
        </div>
      </div>
    </header>);

}

function pad(n) {return String(n).padStart(3, "0");}

function WorkCard({ entry, index, defaultOpen }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <article className={`work-card ${open ? "open" : ""}`}>
      <div
        className="work-head"
        onClick={() => setOpen((o) => !o)}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();setOpen((o) => !o);}}}
        aria-expanded={open}>
        
        <div>
          <div className="num mono">({pad(index + 1)})</div>
          <h3>{entry.company}</h3>
          {entry.descriptor && <div className="work-descriptor">{entry.descriptor}</div>}
          <div className="work-role">
            <span>{entry.role}</span>
            <span className="sep">/</span>
            <span>{entry.period}</span>
            <span className="sep">/</span>
            <span>{entry.location}</span>
          </div>
          <div className="tags">
            {entry.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
          </div>
        </div>
        <button className="work-toggle" aria-label={open ? "Collapse" : "Expand"}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M7 1V13M1 7H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          </svg>
        </button>
      </div>

      <div className="work-body-wrap">
        <div className="work-body-inner">
          <div className="work-body">
            <div className="work-summary">
              {entry.summary.map((p, i) => <p key={i}>{p}</p>)}
            </div>
            <aside className="work-side">
              <div className="side-label">{entry.sideLabel}</div>
              <div className="collabs">
                {entry.side.map((c, i) =>
                <div className="collab" key={i}>
                    <div className="c-name">{c.name}</div>
                    {c.meta && <div className="c-meta mono">{c.meta}</div>}
                    {c.desc && <div className="c-desc">{c.desc}</div>}
                  </div>
                )}
              </div>
            </aside>
          </div>
        </div>
      </div>
    </article>);

}

function Consulting() {
  return (
    <section className="consulting" id="consulting">
      <div className="shell">
        <div className="section-head">
          <div className="section-label">Independent advisory practice. </div>
          <h2 className="section-title">{CONSULTING.tagline}</h2>
          <p className="section-sub">{CONSULTING.description}</p>
        </div>

        <div className="consulting-grid">
          {CONSULTING.services.map((s, i) =>
          <div className="service-card" key={s.name}>
              <div className="num mono">{String(i + 1).padStart(2, "0")}</div>
              <div className="s-name">{s.name}</div>
              <div className="s-desc">{s.desc}</div>
            </div>
          )}
        </div>

        <div className="consulting-foot">
          <div className="cf-label mono">Engagement formats</div>
          <div className="cf-list">
            {CONSULTING.engagements.map((e) => <span className="tag" key={e}>{e}</span>)}
            <span className="cf-period">{CONSULTING.period}</span>
          </div>
        </div>

        <div className="consulting-cta">
          <a className="cta" href="mailto:mikeharrisonroth@gmail.com?subject=AI%20native%20consulting">
            <span>Start a conversation</span>
            <svg className="arr" width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7H11M11 7L7 3M11 7L7 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <a className="cta ghost" href="#work">
            <span>View ventures</span>
          </a>
          <span className="meta">Boulder, CO · remote friendly</span>
        </div>
      </div>
    </section>);

}

function Work({ openFirst }) {
  return (
    <section className="work" id="work">
      <div className="shell">
        <div className="section-head">
          <div className="section-label">Previous Ventures</div>
          <h2 className="section-title">Companies I've built.</h2>
        </div>
        <div className="work-list">
          {WORK.map((w, i) =>
          <WorkCard key={w.id} entry={w} index={i} defaultOpen={openFirst && i === 0} />
          )}
        </div>
      </div>
    </section>);

}

function About({ asHero }) {
  return (
    <section className={`about${asHero ? " as-hero" : ""}`} id="about">
      <div className="shell">
        <div className="section-head">
          <div className="section-label">About</div>
          <h2 className="section-title">Builder, architect,<br />operator.</h2>
        </div>
        <div className="about-grid">
          <div></div>
          <div>
            <p>I’m an engineer and founder with 17+ years architecting consumer scale software, noncustodial financial rails, and AI native products. My work sits where systems design meets product instinct.
            </p>
            <p>I’ve cofounded an early DeFi exchange acquired in 2021, built multiple profitable creative agencies, and currently lead CR3 Labs, building consumer products at the intersection of AI, blockchain, and 3D experiences.



            </p>
          </div>
        </div>
        <div className="about-stats">
          {STATS.map((s) =>
          <div className="stat" key={s.k}>
              <div className="v">{s.v}</div>
              <div className="k">{s.k}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Contact() {
  return (
    <section className="contact" id="contact">
      <div className="shell">
        <div className="section-label">Contact</div>
        <div className="contact-row">
          <h2 className="contact-title">
            Have a problem<br />worth solving?<br />
            <a href="mailto:mikeharrisonroth@gmail.com">Reach out →</a>
          </h2>
        </div>
      </div>
    </section>);

}

function FooterBar({ name }) {
  return (
    <footer>
      <div className="shell footer-inner">
        <span>© 2026 {name}</span>
        <span className="footer-links">
          <a href="https://www.linkedin.com/in/michaelharrisonroth/" target="_blank" rel="noreferrer">LinkedIn</a>
          <a href="https://x.com/0xm1kr" target="_blank" rel="noreferrer">X</a>
        </span>
      </div>
    </footer>);

}

// ---- Tweaks ----
function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Identity">
        <TweakText label="Name" value={t.name} onChange={(v) => setTweak("name", v)} />
        <TweakText label="Tagline" value={t.tagline} onChange={(v) => setTweak("tagline", v)} multiline rows={3} />
      </TweakSection>
      <TweakSection title="Look">
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#ededec", "#f4d35e", "#7dd3fc", "#a78bfa", "#fb7185"]}
          onChange={(v) => setTweak("accent", v)} />
        
        <TweakRadio
          label="Density"
          value={t.density}
          options={[{ label: "Comfortable", value: "comfortable" }, { label: "Compact", value: "compact" }]}
          onChange={(v) => setTweak("density", v)} />
        
        <TweakToggle label="First entry open" value={t.openFirst} onChange={(v) => setTweak("openFirst", v)} />
      </TweakSection>
    </TweaksPanel>);

}

// ---- App ----
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.body.setAttribute("data-density", t.density);
  }, [t.accent, t.density]);

  return (
    <>
      <div id="top"></div>
      <Nav name={t.name} />
      <About asHero />
      <Consulting />
      <Work openFirst={t.openFirst} />
      <Contact />
      <FooterBar name={t.name} />
      <Tweaks t={t} setTweak={setTweak} />
    </>);

}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);