// ---------------- PRODUCTS ----------------
// LEAPSTAQ in-house products. Custom monogram logos built from brand primitives.

const UDALLogo = ({size = 64}) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" style={{flexShrink:0}}>
    <defs>
      <linearGradient id="udal-g" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="#0B1C3A"/>
        <stop offset="1" stopColor="#1E4FA3"/>
      </linearGradient>
    </defs>
    <rect x="2" y="2" width="60" height="60" rx="14" fill="url(#udal-g)"/>
    <line x1="12" y1="22" x2="52" y2="22" stroke="#1E3A6E" strokeWidth="1"/>
    <line x1="12" y1="32" x2="52" y2="32" stroke="#1E3A6E" strokeWidth="1"/>
    <line x1="12" y1="42" x2="52" y2="42" stroke="#1E3A6E" strokeWidth="1"/>
    <path d="M18 18 L18 38 C18 45, 23 49, 32 49 C41 49, 46 45, 46 38 L46 18"
          stroke="#fff" strokeWidth="4" strokeLinecap="round" fill="none"/>
    <path d="M24 18 L24 38 C24 42, 27 44, 32 44 C37 44, 40 42, 40 38 L40 18"
          stroke="#5FA8F2" strokeWidth="2.5" strokeLinecap="round" fill="none"/>
    <circle cx="32" cy="28" r="2.5" fill="#5FA8F2"/>
  </svg>
);

const FORGELogo = ({size = 64}) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" style={{flexShrink:0}}>
    <defs>
      <linearGradient id="forge-g" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="#0B1C3A"/>
        <stop offset="1" stopColor="#1E4FA3"/>
      </linearGradient>
    </defs>
    <rect x="2" y="2" width="60" height="60" rx="14" fill="url(#forge-g)"/>
    <rect x="17" y="14" width="4" height="36" rx="1" fill="#fff"/>
    <rect x="17" y="14" width="30" height="4" rx="1" fill="#fff"/>
    <rect x="17" y="28" width="22" height="4" rx="1" fill="#5FA8F2"/>
    <line x1="12" y1="50" x2="52" y2="50" stroke="#5FA8F2" strokeWidth="1.5"/>
    <circle cx="17" cy="50" r="2" fill="#5FA8F2"/>
    <circle cx="32" cy="50" r="2" fill="#5FA8F2"/>
    <circle cx="47" cy="50" r="2" fill="#5FA8F2"/>
    <path d="M47 14 L51 14 L49 18 L52 18 L46 26 L48 20 L45 20 Z" fill="#F5B53A"/>
  </svg>
);

const PRODUCTS = [
  {
    key: "udal",
    name: "UDAL",
    tagline: "Universal Data Authorization Layer",
    pitch: "Unified permissions everywhere — one policy surface across data warehouses, lakes, streams, and apps.",
    tags: ["permissions", "policy", "data"],
    logo: UDALLogo,
  },
  {
    key: "forge",
    name: "FORGE",
    tagline: "Build · Run · Grow — one platform",
    pitch: "Remove friction. Increase experience. Let people do what matters. From code to customer — an integrated suite of AI-powered modules that work autonomously, yet stay connected through a shared event bus.",
    tags: ["platform", "agents", "event bus"],
    logo: FORGELogo,
    oss: { label: "Agent Processes", url: "https://github.com/Devleaps/agent-policies-server" },
  },
];

const Products = () => (
  <section id="products" className="lq-section" style={{background:"var(--paper)"}}>
    <div className="lq-container">
      <div className="lq-section-header" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:48,alignItems:"flex-end",marginBottom:48}}>
        <div>
          <Eyebrow>our products</Eyebrow>
          <h2 style={{fontFamily:"var(--font-display)",fontSize:"clamp(44px,5vw,72px)",fontWeight:500,letterSpacing:"-0.03em",lineHeight:1.02,margin:"16px 0 0",maxWidth:"20ch"}}>
            What we build for ourselves,<br/><span style={{fontStyle:"italic",color:"var(--navy-700)"}}>we ship for you.</span>
          </h2>
        </div>
        <p style={{fontFamily:"var(--font-body)",fontSize:16,lineHeight:1.55,color:"var(--fg-2)",margin:0,maxWidth:"46ch",paddingBottom:6}}>
          Platforms forged in real engagements, battle-tested in production, and open where it matters. Built by the network, used by the network.
        </p>
      </div>
      <div className="lq-products-grid" style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:24}}>
        {PRODUCTS.map((p) => {
          const Logo = p.logo;
          return (
            <div key={p.key} style={{
              background:"#fff",border:"1px solid var(--border-1)",borderRadius:12,
              padding:"36px 32px",display:"flex",flexDirection:"column",gap:20,
              transition:"transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)"
            }}
              onMouseEnter={(e)=>{e.currentTarget.style.transform="translateY(-2px)";e.currentTarget.style.boxShadow="0 8px 24px -12px rgba(11,28,58,.18)";}}
              onMouseLeave={(e)=>{e.currentTarget.style.transform="none";e.currentTarget.style.boxShadow="none";}}>
              <div style={{display:"flex",alignItems:"center",gap:16}}>
                <Logo size={56}/>
                <div>
                  <div style={{fontFamily:"var(--font-display)",fontSize:32,fontWeight:700,letterSpacing:"-0.03em",lineHeight:1}}>{p.name}</div>
                  <div style={{fontFamily:"var(--font-body)",fontSize:14,color:"var(--signal-600)",fontStyle:"italic",marginTop:4}}>{p.tagline}</div>
                </div>
              </div>
              <p style={{fontFamily:"var(--font-body)",fontSize:16,lineHeight:1.55,color:"var(--fg-2)",margin:0}}>{p.pitch}</p>
              <div style={{display:"flex",gap:8,flexWrap:"wrap",marginTop:"auto"}}>
                {p.tags.map(t => (
                  <span key={t} style={{fontFamily:"var(--font-mono)",fontSize:11,padding:"4px 10px",borderRadius:999,background:"var(--paper-2)",border:"1px solid var(--border-1)",color:"var(--fg-2)",letterSpacing:".04em"}}>{t}</span>
                ))}
              </div>
              {p.oss && (
                <div style={{paddingTop:16,borderTop:"1px solid var(--border-1)",fontFamily:"var(--font-mono)",fontSize:12,color:"var(--fg-3)",display:"flex",alignItems:"center",gap:10,flexWrap:"wrap"}}>
                  <span style={{color:"var(--signal-600)",letterSpacing:".12em",textTransform:"uppercase",fontSize:10}}>// open source</span>
                  <a href={p.oss.url} target="_blank" rel="noopener noreferrer" style={{color:"var(--fg-1)",textDecoration:"none",display:"inline-flex",alignItems:"center",gap:6,borderBottom:"1px dashed var(--border-2)"}}>
                    <Icon name="git-branch" size={14}/>
                    {p.oss.label}
                    <Icon name="arrow-right" size={12}/>
                  </a>
                </div>
              )}
            </div>
          );
        })}
      </div>
      <div style={{marginTop:40,paddingTop:32,borderTop:"1px solid var(--border-1)",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:20}}>
        <div style={{fontFamily:"var(--font-mono)",fontSize:12,color:"var(--fg-3)",letterSpacing:".08em"}}>
          <span style={{color:"var(--signal-600)"}}>// </span>built in the open · collaboration &gt; consulting · contributions welcome
        </div>
        <a href="https://github.com/Devleaps" target="_blank" rel="noopener noreferrer" className="lq-btn lq-btn-secondary">
          <Icon name="git-branch" size={16}/>
          github.com/Devleaps
          <Icon name="arrow-right" size={14}/>
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, { Products, UDALLogo, FORGELogo });