/* section-roadmap.jsx — Section 6: Roadmap strip + Footer
   Horizontal pill-strip roadmap, then footer.

   Phases align with the unified 10-phase plan now live on the public repo
   (github.com/dittonetwork/ditto-ccvault): Phase 4 has integration-maturity
   sub-phases 4a/4b/4c (manual → semi-auto → fully autonomous); new product
   surfaces (onramp, marketplace, DVN-external, liquidity) get their own
   top-level phases.
*/

const PHASES = [
  { i: 1,  name: "MVP",                   sub: "CIP-56 tokens · DevNet",        state: "done" },
  { i: 2,  name: "V2 architecture",       sub: "Non-custodial · indexer",       state: "done" },
  { i: 3,  name: "Featured App",          sub: "Coupon Guidance compliance",    state: "active" },
  { i: 4,  name: "dvUSDCx-CORE",          sub: "4a manual · MainNet v1",        state: "active" },
  { i: 5,  name: "DVN (internal)",        sub: "Operator-quorum attestation",   state: "next" },
  { i: 6,  name: "ETH → Canton onramp",   sub: "Solver · inbound only",         state: "next" },
  { i: 7,  name: "Vault expansion",       sub: "LOCK90 · LOCK1Y · dvCC",        state: "future" },
  { i: 8,  name: "Marketplace tier",      sub: "FOBXX · HQLAX · DLR · SPV",     state: "future" },
  { i: 9,  name: "DVN (external)",        sub: "Basis-point licensing",         state: "future" },
  { i: 10, name: "Liquidity",             sub: "Secondary dvToken markets",     state: "future" },
];

function PhasePill({ phase, mobile = false }) {
  const isDone   = phase.state === "done";
  const isActive = phase.state === "active";
  const isNext   = phase.state === "next";
  const color =
    isActive ? "var(--accent)" :
    isDone   ? "var(--text-2)" :
    isNext   ? "var(--text)"   :
               "var(--text-4)";
  return (
    <div className="tile-hover" style={{
      flex:"0 0 auto",
      width: mobile ? 200 : 220,
      border:"1px solid " + (isActive ? "var(--accent-line)" : "var(--line)"),
      background: isActive ? "var(--accent-soft)" : (isDone ? "transparent" : "var(--bg-elev-2)"),
      borderRadius:"var(--r-3)",
      padding: mobile ? "12px 14px" : "14px 16px",
      display:"flex", flexDirection:"column", gap:6,
      opacity: phase.state === "future" ? 0.5 : 1,
    }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
        <span className="mono" style={{ fontSize:10, color, letterSpacing:"0.08em", textTransform:"uppercase" }}>
          Phase {String(phase.i).padStart(2, "0")}
        </span>
        {isDone   && <Icon.check style={{ color:"var(--text-3)" }} />}
        {isActive && <span style={{ width:6, height:6, borderRadius:"50%", background:"var(--accent)", boxShadow:"0 0 6px var(--accent)" }} />}
      </div>
      <div style={{ fontSize:13, fontWeight:600, color: isDone ? "var(--text-2)" : "var(--text)", letterSpacing:"-0.005em", lineHeight:1.25 }}>
        {phase.name}
      </div>
      <div className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.02em" }}>
        {phase.sub}
      </div>
    </div>
  );
}

function RoadmapStrip({ mobile = false }) {
  return (
    <div style={{ display:"flex", flexDirection:"column", gap:18 }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:14 }}>
        <SectionHeader number="06" label="Roadmap" heading="Ten phases. Two done, two shipping, six queued." body={null} headingWidth="100%" />
        <div style={{ display:"flex", gap:14, alignItems:"center" }}>
          <span style={{ display:"inline-flex", alignItems:"center", gap:6 }}>
            <span style={{ width:6, height:6, borderRadius:"50%", background:"var(--text-3)" }} />
            <span className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.06em", textTransform:"uppercase" }}>Done</span>
          </span>
          <span style={{ display:"inline-flex", alignItems:"center", gap:6 }}>
            <span style={{ width:6, height:6, borderRadius:"50%", background:"var(--accent)" }} />
            <span className="mono" style={{ fontSize:10, color:"var(--accent)", letterSpacing:"0.06em", textTransform:"uppercase" }}>Shipping</span>
          </span>
          <span style={{ display:"inline-flex", alignItems:"center", gap:6 }}>
            <span style={{ width:6, height:6, borderRadius:"50%", background:"var(--text-4)" }} />
            <span className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.06em", textTransform:"uppercase" }}>Future</span>
          </span>
        </div>
      </div>
      <div style={{ position:"relative" }}>
        {/* Horizontal scroll-y phase strip */}
        <div style={{ display:"flex", gap:10, overflowX:"auto", paddingBottom:8 }}>
          {PHASES.map((p, i) => <PhasePill key={i} phase={p} mobile={mobile} />)}
        </div>
        {/* Right-edge fade hint */}
        <div style={{ position:"absolute", top:0, bottom:8, right:0, width:80, pointerEvents:"none",
          background:"linear-gradient(to right, transparent, var(--bg))" }} />
      </div>
    </div>
  );
}

function Footer({ mobile = false }) {
  return (
    <div style={{
      borderTop:"1px solid var(--line)",
      padding: mobile ? "48px var(--gutter-mobile) 32px" : "80px var(--gutter-desktop) 40px",
      display:"flex", flexDirection:"column", gap: mobile ? 32 : 56,
      background:"var(--bg)",
      position:"relative",
    }}>
      {/* — Big Ditto Network back-link, doubles as the brand block — */}
      <div style={{ display:"grid", gridTemplateColumns: mobile ? "1fr" : "minmax(0, 1fr) auto", gap: mobile ? 32 : 56, alignItems:"end" }}>
        <div style={{ display:"flex", flexDirection:"column", gap:18, maxWidth:520 }}>
          <a href="https://dittonetwork.io" target="_blank" rel="noopener noreferrer" className="nav-brand" aria-label="Ditto Network">
            <DittoMark height={mobile ? 28 : 36} />
          </a>
          <div className="footer-eyebrow">Vaults · Marketplace · Onramp · DVN</div>
          <a href="https://dittonetwork.io" target="_blank" rel="noopener noreferrer" className="footer-back">
            <span>Visit Ditto Network</span>
            <span className="arrow"><Icon.arrowR /></span>
          </a>
          <div style={{ fontSize:14, color:"var(--text-3)", lineHeight:1.6, maxWidth:"52ch", marginTop:4 }}>
            Ditto Vault is built and operated by Ditto Network: a restaking-secured node operator running on Eigenlayer and Symbiotic, with 16 nodes securing $200M+ in TVL.
          </div>
          <div style={{ display:"flex", gap:10, alignItems:"center", marginTop:8 }}>
            <a href="https://github.com/dittonetwork" target="_blank" rel="noopener noreferrer" className="nav-link-icon" aria-label="GitHub"><Icon.github /></a>
            <a href="https://x.com/Ditto_Network" target="_blank" rel="noopener noreferrer" className="nav-link-icon" aria-label="X / Twitter"><Icon.x /></a>
            <button className="btn btn-secondary" style={{ height:36, fontSize:13, marginLeft:8 }} onClick={() => window.openWaitlist && window.openWaitlist()}>
              Get early access <Icon.arrow />
            </button>
          </div>
        </div>

        <div style={{ display:"grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(3, minmax(120px, auto))", gap: mobile ? 24 : 56 }}>
          {[
            { h: "Product",   ls: [
              {label:"Vault",       href:"#vault"},
              {label:"Onramp",      href:"#onramp"},
              {label:"Marketplace", href:"#marketplace"},
              {label:"DVN",         href:"#dvn"},
              {label:"Roadmap",     href:"#roadmap"},
            ]},
            { h: "Docs",      ls: [
              {label:"Proposal",       href:"https://github.com/dittonetwork/ditto-ccvault/blob/main/README.md", external:true},
              {label:"Architecture",   href:"https://github.com/dittonetwork/ditto-ccvault/blob/main/ARCHITECTURE.md", external:true},
              {label:"Strategy paper", href:"https://github.com/dittonetwork/ditto-ccvault/blob/main/STRATEGIES.md", external:true},
              {label:"GitHub repo",    href:"https://github.com/dittonetwork/ditto-ccvault", external:true},
            ]},
            { h: "Network",   ls: [
              {label:"dittonetwork.io",  href:"https://dittonetwork.io", external:true},
              {label:"X / Twitter",      href:"https://x.com/Ditto_Network", external:true},
              {label:"GitHub org",       href:"https://github.com/dittonetwork", external:true},
              {label:"Contact",          href:"mailto:contact@dittonetwork.io"},
            ]},
          ].map((col, i) => (
            <div key={i} style={{ display:"flex", flexDirection:"column", gap:10, minWidth:120 }}>
              <div className="footer-eyebrow" style={{ marginBottom:4 }}>{col.h}</div>
              {col.ls.map((l, j) => (
                <a
                  key={j}
                  href={l.href}
                  target={l.external ? "_blank" : undefined}
                  rel={l.external ? "noopener noreferrer" : undefined}
                  style={{ fontSize:13, color:"var(--text-2)", textDecoration:"none", transition:"color 200ms var(--ease-out)" }}
                  onMouseEnter={(e) => e.currentTarget.style.color = "var(--text)"}
                  onMouseLeave={(e) => e.currentTarget.style.color = "var(--text-2)"}
                >{l.label}</a>
              ))}
            </div>
          ))}
        </div>
      </div>

      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:24, paddingTop:24, borderTop:"1px solid var(--line)", flexWrap:"wrap" }}>
        <div className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.04em", lineHeight:1.6, maxWidth:"60ch" }}>
          © 2026 Ditto Labs. Not an offer to sell securities. Marketplace tier subject to KYC and accreditation. dvFundX shares are not registered under the Securities Act and may be sold only to accredited investors in compliance with applicable exemptions.
        </div>
        <div style={{ display:"flex", gap:14, alignItems:"center" }}>
          <span className="badge"><Icon.dot /> Built on Canton</span>
          <span className="badge">Eigenlayer + Symbiotic</span>
        </div>
      </div>
    </div>
  );
}

function SectionRoadmap({ mobile = false }) {
  if (mobile) {
    return (
      <>
        <div id="roadmap" style={{ padding:"40px var(--gutter-mobile) 32px", display:"flex", flexDirection:"column", gap:20, background:"var(--bg-elev-1)" }}>
          <RoadmapStrip mobile />
        </div>
        <Footer mobile />
      </>
    );
  }
  return (
    <>
      <section id="roadmap">
        <SectionFrame bg="var(--bg-elev-1)" style={{ padding:"96px var(--gutter-desktop) 80px" }}>
          <RoadmapStrip />
        </SectionFrame>
      </section>
      <Footer />
    </>
  );
}

Object.assign(window, { SectionRoadmap, RoadmapStrip, Footer });