/* global React, window */
// =====================================================================
// V4 App Detail — página de detalle de una App (Factura+ / Inteli-Kit)
// Renderiza desde window.IK_APP_DETAILS usando el sistema visual del sitio.
// =====================================================================

const appDetailStyles = {
  back: { display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ink-soft)", marginBottom: 28, fontWeight: 500 },
  heroWrap: { paddingTop: "clamp(96px, 11vw, 140px)", paddingBottom: "clamp(40px, 5vw, 64px)" },
  heroCtas: { display: "flex", gap: 14, flexWrap: "wrap", marginTop: 36 },
  video: { position: "relative", width: "100%", aspectRatio: "16 / 9", borderRadius: 18, overflow: "hidden", border: "1px solid var(--rule)", boxShadow: "0 24px 60px rgba(11,21,37,.14)", background: "#000" },
  videoFrame: { position: "absolute", inset: 0, width: "100%", height: "100%", border: "0" },
  featGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 18, marginTop: 48 },
  featCard: { background: "var(--bg)", border: "1px solid var(--rule)", borderRadius: 16, padding: "30px 28px", display: "flex", flexDirection: "column", gap: 10 },
  featNum: { fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".12em", color: "var(--accent-deep, #009C9C)" },
  featT: { fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18.5, color: "var(--ink)", margin: 0 },
  featD: { fontSize: 15, lineHeight: 1.6, color: "var(--ink-soft)", margin: 0 },
  whyGrid: { display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "clamp(32px, 5vw, 72px)", alignItems: "center" },
  bullets: { listStyle: "none", margin: "28px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 16 },
  bullet: { position: "relative", paddingLeft: 34, fontSize: 16.5, lineHeight: 1.55, color: "var(--ink-soft)" },
  bulletIcn: { position: "absolute", left: 0, top: 1, width: 22, height: 22, borderRadius: "50%", background: "color-mix(in oklab, var(--accent) 18%, transparent)", color: "var(--accent-deep, #009C9C)", display: "grid", placeItems: "center" },
  highlights: { display: "flex", flexDirection: "column", gap: 14, marginTop: 8 },
  highlight: { display: "flex", alignItems: "center", gap: 14, fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(18px, 2vw, 22px)", color: "var(--ink)" },
  stepGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 18, marginTop: 48 },
  stepCard: { background: "var(--bg)", border: "1px solid var(--rule)", borderRadius: 16, padding: "28px 26px", display: "flex", flexDirection: "column", gap: 12 },
  stepN: { width: 34, height: 34, borderRadius: "50%", background: "var(--ink)", color: "#fff", display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600 },
  stepMeta: { display: "inline-flex", alignSelf: "flex-start", gap: 7, alignItems: "center", fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: ".04em", color: "var(--accent-deep, #009C9C)", background: "color-mix(in oklab, var(--accent) 12%, transparent)", padding: "5px 10px", borderRadius: 999, marginTop: 2 },
  audienceGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 18, marginTop: 40 },
  audienceCard: { background: "var(--bg-2)", borderRadius: 16, padding: "28px 26px", fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", borderLeft: "3px solid var(--accent)" },
  faqList: { marginTop: 36, borderTop: "1px solid var(--rule)" },
  ctaBand: { background: "var(--invert-bg)", color: "var(--invert-ink)", borderRadius: 24, padding: "clamp(40px, 6vw, 72px)", textAlign: "left" },
};

window.V4AppDetailPage = function V4AppDetailPage({ appId }) {
  window.useReveal();
  const { lang } = window.useV4();
  const Icon = window.IKIcon;
  const d = window.IK_localizeAppDetail(appId, lang);
  if (!d) return <window.V4Nav active="apps" />;

  const Check = () => (
    <span style={appDetailStyles.bulletIcn}><Icon name="check" size={13} /></span>
  );

  return (
    <React.Fragment>
      <style>{`
        .ad-faq__item { border-bottom: 1px solid var(--rule); }
        .ad-faq__item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 4px; font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.7vw, 20px); color: var(--ink); }
        .ad-faq__item > summary::-webkit-details-marker { display: none; }
        .ad-faq__item > summary .ad-faq__plus { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; transition: transform .25s, background .25s, color .25s; color: var(--ink-soft); }
        .ad-faq__item[open] > summary .ad-faq__plus { transform: rotate(45deg); background: var(--accent); color: #fff; border-color: var(--accent); }
        .ad-faq__a { padding: 0 4px 28px; max-width: 70ch; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
        .ad-feat-card:hover, .ad-step-card:hover { border-color: var(--ink); transition: border-color .2s; }
        @media (max-width: 860px){ .ad-why-grid { grid-template-columns: 1fr !important; } }
      `}</style>

      <window.V4Nav active="apps" />

      {/* HERO */}
      <section className="section" style={appDetailStyles.heroWrap}>
        <div className="wrap">
          <a href="apps.html" style={appDetailStyles.back}><span style={{ display: "inline-flex", transform: "rotate(180deg)" }}><Icon name="arrowRight" size={14} /></span> Apps</a>
          <img src={d.logo} alt={d.hero.title} data-reveal style={{ width: 76, height: 76, borderRadius: 18, display: "block", marginBottom: 24, boxShadow: "0 10px 30px rgba(11,21,37,.18)" }} />
          <div data-reveal style={{ marginBottom: 18 }}>
            <span className="eyebrow">{d.hero.eyebrow}</span>
          </div>
          <h1 className="h-display" data-reveal style={{ maxWidth: "18ch", marginBottom: 26 }}>
            {d.hero.title} <span style={{ color: "var(--accent)" }}>{d.hero.title_em}</span> {d.hero.title_2}
          </h1>
          <p className="lead" data-reveal style={{ maxWidth: "60ch" }}>{d.hero.sub}</p>
          <div style={appDetailStyles.heroCtas} data-reveal>
            <a href={window.IK_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-primary">{d.calendarCta} <span className="arr">→</span></a>
            <a href={d.marketplace.url} target="_blank" rel="noopener" className="btn btn-ghost">{d.marketplace.label}</a>
          </div>
        </div>
      </section>

      {/* VIDEO */}
      {d.videoId &&
        <section className="section section--tight" style={{ paddingTop: 0 }}>
          <div className="wrap" data-reveal style={{ maxWidth: 940 }}>
            <div style={appDetailStyles.video}>
              <iframe
                style={appDetailStyles.videoFrame}
                src={`https://www.youtube.com/embed/${d.videoId}`}
                title={d.hero.title}
                loading="lazy"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen></iframe>
            </div>
          </div>
        </section>
      }

      {/* INTRO (Inteli-Kit) */}
      {d.intro &&
        <section className="section" style={{ background: "var(--bg-2)" }}>
          <div className="wrap" style={{ maxWidth: 820 }}>
            <h2 className="h-section" data-reveal>{d.intro.title}</h2>
            <p data-reveal style={{ color: "var(--ink-soft)", fontSize: 18, lineHeight: 1.6, marginTop: 20, maxWidth: "62ch" }}>{d.intro.lead}</p>
            <div style={appDetailStyles.highlights} data-reveal>
              {d.intro.highlights.map((h, i) => (
                <div key={i} style={appDetailStyles.highlight}><Check /> {h}</div>
              ))}
            </div>
          </div>
        </section>
      }

      {/* FEATURES */}
      <section className="section">
        <div className="wrap">
          <h2 className="h-section" data-reveal style={{ maxWidth: "20ch" }}>{d.features.title}</h2>
          <div style={appDetailStyles.featGrid} data-stagger>
            {d.features.items.map((f, i) => (
              <div key={i} className="ad-feat-card" style={appDetailStyles.featCard}>
                <span style={appDetailStyles.featNum}>{String(i + 1).padStart(2, "0")}</span>
                <h3 style={appDetailStyles.featT}>{f.t}</h3>
                <p style={appDetailStyles.featD}>{f.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHY */}
      <section className="section" style={{ background: "var(--invert-bg)", color: "var(--invert-ink)" }}>
        <div className="wrap">
          <div className="ad-why-grid" style={appDetailStyles.whyGrid}>
            <div data-reveal>
              <h2 className="h-section" style={{ color: "var(--invert-ink)" }}>{d.why.title}</h2>
              <p style={{ color: "rgba(255,255,255,.72)", fontSize: 17.5, lineHeight: 1.6, marginTop: 20 }}>{d.why.lead}</p>
            </div>
            <ul style={appDetailStyles.bullets} data-reveal>
              {d.why.bullets.map((b, i) => (
                <li key={i} style={{ ...appDetailStyles.bullet, color: "rgba(255,255,255,.85)" }}>
                  <span style={{ ...appDetailStyles.bulletIcn, background: "rgba(0,200,200,.22)", color: "var(--accent-soft, #4FDCDC)" }}><Icon name="check" size={13} /></span>
                  {b}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* STEPS / REQUIREMENTS */}
      {d.steps &&
        <section className="section">
          <div className="wrap">
            {d.steps.eyebrow && <span className="eyebrow" data-reveal>{d.steps.eyebrow}</span>}
            <h2 className="h-section" data-reveal style={{ marginTop: 14 }}>{d.steps.title}</h2>
            <div style={appDetailStyles.stepGrid} data-stagger>
              {d.steps.items.map((s, i) => (
                <div key={i} className="ad-step-card" style={appDetailStyles.stepCard}>
                  <span style={appDetailStyles.stepN}>{i + 1}</span>
                  <h3 style={appDetailStyles.featT}>{s.t}</h3>
                  <p style={appDetailStyles.featD}>{s.d}</p>
                  {s.meta && <span style={appDetailStyles.stepMeta}><Icon name="clock" size={12} /> {s.meta}</span>}
                </div>
              ))}
            </div>
          </div>
        </section>
      }

      {/* AUDIENCE (Inteli-Kit) */}
      {d.audience &&
        <section className="section" style={{ background: "var(--bg-2)" }}>
          <div className="wrap">
            <h2 className="h-section" data-reveal>{d.audience.title}</h2>
            <div style={appDetailStyles.audienceGrid} data-stagger>
              {d.audience.items.map((a, i) => (
                <div key={i} style={appDetailStyles.audienceCard}>{a}</div>
              ))}
            </div>
          </div>
        </section>
      }

      {/* FAQ */}
      {d.faq &&
        <section className="section">
          <div className="wrap" style={{ maxWidth: 860 }}>
            <h2 className="h-section" data-reveal>{d.faq.title}</h2>
            {d.faq.sub && <p data-reveal style={{ color: "var(--ink-soft)", fontSize: 17, marginTop: 14, maxWidth: "56ch" }}>{d.faq.sub}</p>}
            <div style={appDetailStyles.faqList} data-reveal>
              {d.faq.items.map((it, i) => (
                <details key={i} className="ad-faq__item">
                  <summary>{it.q}<span className="ad-faq__plus"><Icon name="plus" size={14} /></span></summary>
                  <div className="ad-faq__a">{it.a}</div>
                </details>
              ))}
            </div>
          </div>
        </section>
      }

      {/* CTA BAND */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div style={appDetailStyles.ctaBand} data-reveal>
            <h2 className="h-section" style={{ color: "var(--invert-ink)", maxWidth: "22ch", marginBottom: 16 }}>{d.cta.title}</h2>
            <p style={{ color: "rgba(255,255,255,.7)", fontSize: 17, lineHeight: 1.6, maxWidth: "56ch", marginBottom: 32 }}>{d.cta.sub}</p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <a href={window.IK_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-primary">{d.calendarCta} <span className="arr">→</span></a>
              <a href={d.marketplace.url} target="_blank" rel="noopener" className="btn btn-ghost" style={{ color: "#fff", boxShadow: "inset 0 0 0 1px rgba(255,255,255,.3)" }}>{d.marketplace.label}</a>
            </div>
          </div>
        </div>
      </section>

      <window.V5Contact />
      <window.V4Footer />
    </React.Fragment>
  );
};

window.V4FacturaPlusPage = function () { return <window.V4AppDetailPage appId="factura-plus" />; };
window.V4InteliKitPage = function () { return <window.V4AppDetailPage appId="inteli-kit" />; };