// Apps page — portfolio of products published by AdOpsify LLC.
const AppsHero = () => (
  <PageHero
    eyebrow="Products by AdOpsify"
    title={<>Software we <span style={{ fontStyle: "italic" }} className="brand-grad-text">ship and operate.</span></>}
    lead="AdOpsify isn't just a service shop — we publish our own apps. Each one is a working answer to a question we kept hearing from clients. Here's what's live."
  />
);

const NutriAIFeature = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const els = ref.current.querySelectorAll("[data-r]");
    window.gsap.from(els, {
      scrollTrigger: { trigger: ref.current, start: "top 75%" },
      y: 36, opacity: 0, duration: 0.9, stagger: 0.08, ease: "expo.out",
    });
  }, []);

  return (
    <section ref={ref} style={{
      padding: "120px 48px", background: "var(--ink-50)",
      borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div data-r style={{
          fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
          letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--cobalt-700)", marginBottom: 22,
        }}>Featured app</div>

        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <h2 data-r style={{
              fontFamily: "var(--font-display)", fontWeight: 400,
              fontSize: "clamp(48px, 6vw, 84px)", lineHeight: 1.04,
              letterSpacing: "-0.025em", margin: "0 0 22px",
            }}>
              nutriAI — <span style={{ fontStyle: "italic", color: "var(--brand-violet)" }}>scan a meal,<br/>know your day.</span>
            </h2>
            <p data-r style={{ fontSize: 19, lineHeight: 1.6, color: "var(--fg-muted)", maxWidth: 540, margin: "0 0 28px" }}>
              A camera-first calorie and macro tracker. Point your phone at a plate
              and nutriAI identifies items, estimates portions, and logs the meal
              against a BMR-personalised target — no typing, no database searching.
            </p>

            <div data-r style={{
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
              borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)",
              margin: "12px 0 32px",
            }}>
              {[
                ["1.4s", "Avg. scan latency"],
                ["94%", "Top-1 food accuracy"],
                ["5/day", "Free scans · unlimited on Premium"],
              ].map(([n, l], i) => (
                <div key={l} style={{
                  padding: "22px 18px",
                  borderLeft: i === 0 ? "none" : "1px solid var(--border)",
                }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em" }}>{n}</div>
                  <div style={{ fontSize: 12, color: "var(--fg-muted)", marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>

            <div data-r style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
              <a href="https://play.google.com/store/apps/details?id=io.nutriai.app&pli=1" target="_blank" rel="noopener noreferrer" style={{
                background: "var(--ink-900)", color: "var(--paper)",
                padding: "12px 22px 12px 18px", borderRadius: 12,
                display: "inline-flex", alignItems: "center", gap: 14,
                textDecoration: "none",
              }}>
                <svg width="22" height="24" viewBox="0 0 28 30" aria-hidden="true">
                  <defs>
                    <linearGradient id="apg-a" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#00C3FF"/><stop offset="1" stopColor="#1A73E8"/></linearGradient>
                    <linearGradient id="apg-b" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#FFD43B"/><stop offset="1" stopColor="#FF9800"/></linearGradient>
                    <linearGradient id="apg-c" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#FF5252"/><stop offset="1" stopColor="#C2185B"/></linearGradient>
                    <linearGradient id="apg-d" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#00E676"/><stop offset="1" stopColor="#00B248"/></linearGradient>
                  </defs>
                  <path d="M2.2 1.1C1.5 1.6 1 2.4 1 3.6v22.8c0 1.2.5 2 1.2 2.5L15 15 2.2 1.1z" fill="url(#apg-a)"/>
                  <path d="M19.3 11.3L15 15l4.3 3.7 5.5-3.1c1.6-.9 1.6-3.3 0-4.2l-5.5-3.1z" fill="url(#apg-b)"/>
                  <path d="M2.2 28.9c.9.6 2.2.7 3.6-.1L19.3 18.7 15 15 2.2 28.9z" fill="url(#apg-c)"/>
                  <path d="M5.8 1.2C4.4.4 3.1.5 2.2 1.1L15 15l4.3-3.7L5.8 1.2z" fill="url(#apg-d)"/>
                </svg>
                <span style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1.1, textAlign: "left" }}>
                  <span style={{ fontSize: 10, letterSpacing: "0.04em", opacity: 0.85 }}>GET IT ON</span>
                  <span style={{ fontSize: 16, fontWeight: 500, letterSpacing: "-0.01em" }}>Google Play</span>
                </span>
              </a>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg-muted)" }}>
                Android 8.0+ · iOS coming Q3 2026
              </span>
            </div>
          </div>

          {/* Phone mock with calorie ring */}
          <div data-r style={{ display: "flex", justifyContent: "center" }}>
            <div style={{
              width: 320, height: 640, background: "var(--ink-900)",
              borderRadius: 44, padding: 12, boxShadow: "0 40px 80px rgba(18,20,16,0.18)",
              position: "relative",
            }}>
              <div style={{
                width: "100%", height: "100%", background: "var(--paper)",
                borderRadius: 34, padding: 32,
                display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 28,
              }}>
                <div style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-muted)", fontWeight: 500 }}>Today · Apr 24</div>
                <CalorieRing size={200} pct={0.79} value="1,847" unit="kcal left" />
                <div style={{ textAlign: "center" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)", marginBottom: 4 }}>Logged</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 38, fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1 }}>493</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-muted)", marginTop: 4 }}>of 2,340 kcal target</div>
                </div>
                <div style={{
                  width: "100%", display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
                  gap: 8, marginTop: 8,
                }}>
                  {[["P", "32g", "var(--brand-cobalt)"], ["C", "48g", "var(--brand-violet)"], ["F", "14g", "var(--brand-orange)"]].map(([k, v, c]) => (
                    <div key={k} style={{
                      padding: "10px 8px", borderRadius: 12, background: "var(--bg-sunken)",
                      textAlign: "center",
                    }}>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: c, fontWeight: 600 }}>{k}</div>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600, marginTop: 2 }}>{v}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const OtherApps = () => {
  const apps = [
    {
      tint: "var(--brand-cobalt)",
      status: "In private beta",
      name: "Pacing",
      tag: "Media-buying ops",
      d: "An internal tool we open-sourced. Real-time DSP pacing alerts via Slack + Linear, with budget rebalancing baked in. Free for one seat.",
    },
    {
      tint: "var(--brand-orange)",
      status: "Coming Q3 2026",
      name: "Shelf",
      tag: "Retail analytics",
      d: "Shelf-share scanner for CPG ops teams — point at a retail aisle, get planogram compliance and competitor share-of-shelf in seconds.",
    },
    {
      tint: "var(--brand-violet)",
      status: "Concept",
      name: "Frame",
      tag: "Creative QA",
      d: "Drop a video file, get IAB-VAST validation, frequency-cap recommendations, and brand-safety scoring before you push to a DSP.",
    },
  ];

  return (
    <section style={{ padding: "120px 48px", background: "var(--paper)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ marginBottom: 56, maxWidth: 800 }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--cobalt-700)", marginBottom: 20,
          }}>In the workshop</div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.05,
            letterSpacing: "-0.02em", margin: 0,
          }}>
            What we're <span style={{ fontStyle: "italic" }}>building next.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {apps.map(a => (
            <div key={a.name} data-reveal-scroll style={{
              padding: "28px 28px 32px", border: "1px solid var(--border)",
              borderRadius: 22, background: "var(--paper-raised)",
              minHeight: 280, display: "flex", flexDirection: "column",
            }}>
              <div style={{
                display: "inline-block", alignSelf: "flex-start",
                fontFamily: "var(--font-mono)", fontSize: 10,
                letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600,
                padding: "5px 11px", borderRadius: 9999,
                color: a.tint,
                background: `color-mix(in oklab, ${a.tint} 12%, transparent)`,
                marginBottom: 22,
              }}>{a.status}</div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 400,
                letterSpacing: "-0.02em", lineHeight: 1.1, margin: "0 0 6px",
              }}>{a.name}</h3>
              <div style={{ fontSize: 13, color: "var(--fg-muted)", fontFamily: "var(--font-mono)", marginBottom: 16 }}>{a.tag}</div>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-muted)", margin: 0 }}>{a.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const App = () => {
  useReveal();
  return (
    <>
      <Nav current="Apps"/>
      <AppsHero/>
      <NutriAIFeature/>
      <OtherApps/>
      <CTA
        eyebrow="Build with us"
        title={<>Have an idea that needs <span style={{ fontStyle: "italic", color: "var(--brand-cyan)" }}>shipping?</span></>}
        blurb="We turn napkin sketches into store-ready apps. Mobile, web, and the cloud they live on — under one roof."
        primary={{ label: "Start a project", href: "contact.html" }}
        secondary={{ label: "See engineering services", href: "mobile-development.html" }}
      />
      <Footer/>
    </>
  );
};
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
