/* global React, Icon, APPS, PhoneFrame, PVRScreen, MCCScreen, TTScreen, DCScreen, useReveal */
const { useState: useStateH, useEffect: useEffectH } = React;

const SCREENS = {
  "private-video-recorder": PVRScreen,
  "motion-clock-camera": MCCScreen,
  "truetide": TTScreen,
  "dual-camera": DCScreen,
};

const HERO_IMAGES = {
  "private-video-recorder": "assets/pvr/01.png",
  "motion-clock-camera": "assets/mcc/01.png",
  "truetide": "assets/truetide/01.png",
};

const HomePage = ({ navigate }) => {
  useReveal();
  // Only cycle apps that have real assets (skip coming-soon apps with no screenshots)
  const showcaseApps = APPS.filter(a => !!HERO_IMAGES[a.id]);
  const [activeIdx, setActiveIdx] = useStateH(0);

  // Auto-cycle the showcase
  useEffectH(() => {
    const t = setInterval(() => setActiveIdx(i => (i + 1) % showcaseApps.length), 4200);
    return () => clearInterval(t);
  }, [showcaseApps.length]);

  const active = showcaseApps[activeIdx];

  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="eyebrow reveal in">A SMALL STUDIO · 4 APPS · ENCRYPTED · BUILT IN ALBERTA</div>
              <h1 className="display reveal in">
                Quiet utilities for the <span className="gradient-text">camera in your pocket.</span>
              </h1>
              <p className="lede reveal in">
                Cryptdapp builds focused, single-purpose iOS and Android apps. Your data is encrypted in transit
                and at rest, and we never sell it.
              </p>
              <div className="hero-actions reveal in">
                <button className="btn btn-primary" onClick={() => navigate(active.id)}>
                  See {active.short} <Icon name="arrow-right" size={16}/>
                </button>
                <button className="btn btn-ghost" onClick={() => document.getElementById("apps-grid").scrollIntoView({behavior:"smooth",block:"start"})}>
                  Browse all apps
                </button>
              </div>
              <div className="hero-stats reveal in">
                <div>
                  <div className="hero-stat-num">3</div>
                  <div className="hero-stat-label">Apps shipped</div>
                </div>
                <div>
                  <div className="hero-stat-num">1</div>
                  <div className="hero-stat-label">In development</div>
                </div>
                <div>
                  <div className="hero-stat-num">iOS<span style={{color:"var(--muted)",fontSize:20,margin:"0 8px"}}>+</span>Android</div>
                  <div className="hero-stat-label">Platforms</div>
                </div>
                <div>
                  <div className="hero-stat-num">0</div>
                  <div className="hero-stat-label">Trackers shipped</div>
                </div>
              </div>
            </div>

            {/* Animated showcase — cycles real screenshots */}
            <div className="showcase" style={{height: 620}}>
              <div className="showcase-glow" style={{background: `radial-gradient(circle, ${active.accentGlow}, transparent 65%)`}}></div>
              <div style={{position: "relative", width: "100%", height: "100%", display: "grid", placeItems: "center"}}>
                {showcaseApps.map((a, i) => {
                  const isActive = i === activeIdx;
                  return (
                    <img
                      key={a.id}
                      src={HERO_IMAGES[a.id]}
                      alt={`${a.short} app screenshot`}
                      onClick={() => navigate(a.id)}
                      style={{
                        gridArea: "1 / 1",
                        maxHeight: 600,
                        maxWidth: "100%",
                        borderRadius: 22,
                        cursor: "pointer",
                        opacity: isActive ? 1 : 0,
                        transform: isActive ? "scale(1)" : "scale(0.94)",
                        transition: "opacity 700ms cubic-bezier(0.2,0.6,0.2,1), transform 700ms cubic-bezier(0.2,0.6,0.2,1), filter 700ms",
                        filter: `drop-shadow(0 30px 60px ${a.accent}55)`,
                        zIndex: isActive ? 2 : 0,
                        pointerEvents: isActive ? "auto" : "none",
                      }}
                    />
                  );
                })}
              </div>
              {/* App label */}
              <div style={{
                position: "absolute",
                bottom: 0, left: "50%", transform: "translateX(-50%)",
                background: "rgba(14,14,20,0.85)",
                backdropFilter: "blur(12px)",
                border: "1px solid var(--line-2)",
                padding: "10px 16px",
                borderRadius: 99,
                display: "flex", alignItems: "center", gap: 10,
                whiteSpace: "nowrap",
                zIndex: 3,
              }}>
                <div style={{width:8,height:8,borderRadius:"50%",background:active.accent,boxShadow:`0 0 8px ${active.accent}`}}></div>
                <span style={{fontSize:13.5,fontWeight:600}}>{active.short}</span>
                {/* dots */}
                <div style={{display:"flex",gap:5,marginLeft:8}}>
                  {showcaseApps.map((_,i)=>(
                    <div key={i} onClick={()=>setActiveIdx(i)} style={{
                      width: i===activeIdx?16:5, height: 5, borderRadius:99,
                      background: i===activeIdx ? active.accent : "var(--line-2)",
                      cursor:"pointer", transition: "all 280ms"
                    }}></div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Marquee */}
      <div className="marquee">
        <div className="marquee-track">
          {Array.from({length: 2}).map((_, k) => (
            <React.Fragment key={k}>
              <span>Encrypted in transit <span className="dot">●</span></span>
              <span>Encrypted at rest <span className="dot">●</span></span>
              <span>iOS &amp; Android <span className="dot">●</span></span>
              <span>Built in Alberta <span className="dot">●</span></span>
              <span>4 focused apps <span className="dot">●</span></span>
              <span>No data sold <span className="dot">●</span></span>
              <span>Open privacy policy <span className="dot">●</span></span>
              <span>Single-purpose tools <span className="dot">●</span></span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* APPS GRID */}
      <section className="section" id="apps-grid">
        <div className="container">
          <div className="reveal">
            <div className="eyebrow">THE LINEUP</div>
            <h2 className="section-title">Four apps. Each does <span className="gradient-text">one thing well.</span></h2>
            <p className="section-sub">No bundles, no subscriptions you forget about, no upsells across our catalog. You buy what you need.</p>
          </div>
          <div className="app-grid">
            {APPS.map((a) => {
              const Screen = SCREENS[a.id];
              return (
                <div key={a.id} className="app-card reveal" style={{"--card-accent": a.accent}} onClick={() => navigate(a.id)}>
                  <div className="glow"></div>
                  <div>
                    {a.iconImage ? (
                      <div className="app-card-icon" style={{background: "transparent", boxShadow: `0 6px 20px ${a.accent}40`, padding: 0, overflow: "hidden"}}>
                        <img src={a.iconImage} alt={`${a.short} icon`} style={{width: "100%", height: "100%", objectFit: "cover", borderRadius: 14, display: "block"}}/>
                      </div>
                    ) : (
                      <div className="app-card-icon">
                        <Icon name={a.icon} size={26} stroke={1.6} style={{color:"#0a0a10"}}/>
                      </div>
                    )}
                    <h3 className="app-card-name">
                      {a.name}
                      {a.comingSoon && <span style={{marginLeft: 10, fontSize: 10.5, fontFamily: "var(--font-mono)", fontWeight: 600, letterSpacing: "0.12em", padding: "3px 9px", borderRadius: 99, background: `${a.accent}1f`, border: `1px solid ${a.accent}50`, color: a.accent, verticalAlign: "middle", whiteSpace: "nowrap"}}>COMING SOON</span>}
                    </h3>
                    {a.sub && <div style={{fontSize:13,color:"var(--muted)",fontFamily:"var(--font-mono)",marginTop:-4,marginBottom:6}}>{a.sub}</div>}
                    <p className="app-card-desc">{a.desc}</p>
                  </div>
                  <div className="app-card-cta">
                    {a.comingSoon ? "Preview" : "Learn more"} <Icon name="arrow-right" size={14}/>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA STRIP */}
      <section className="section">
        <div className="container">
          <div className="reveal" style={{
            border: "1px solid var(--line)",
            borderRadius: "var(--radius-lg)",
            padding: "56px 48px",
            background: "linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.08), rgba(236,72,153,0.05))",
            position: "relative",
            overflow: "hidden",
            textAlign: "center",
          }}>
            <div style={{position:"absolute",inset:0,background:"radial-gradient(ellipse at center, rgba(168,85,247,0.15), transparent 60%)",pointerEvents:"none"}}></div>
            <div style={{position:"relative"}}>
              <div className="eyebrow">QUESTIONS · BUG REPORTS · IDEAS</div>
              <h2 style={{fontFamily:"var(--font-display)",fontWeight:600,fontSize:"clamp(28px, 4vw, 40px)",letterSpacing:"-0.02em",margin:"12px 0 16px"}}>
                We actually read every message.
              </h2>
              <p style={{color:"var(--text-2)",maxWidth:520,margin:"0 auto 28px",fontSize:16}}>
                A real human replies — usually within a day, occasionally two if it's a weekend.
              </p>
              <button className="btn btn-primary" onClick={() => navigate("contact")}>
                Get in touch <Icon name="arrow-right" size={16}/>
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.HomePage = HomePage;