/* global React, Header, Footer, useRoute, I, Placeholder */
const { useEffect: useEvIntEffect } = React;

/* ─────────────────────────────────────────────────────────────────
   Eleven Views Intelligence, product line.
   Voice: never use the term "AI" on the public site. We speak about
   "instruments", "engines that read", "a system that learns from".
   ───────────────────────────────────────────────────────────────── */
const EV_INTELLIGENCE = [
  {
    key: "playa",
    code: "EVI · 01",
    name: "PLAYA",
    tagline: "Eleven streams in. One number out.",
    blurb: "Music revenue, per stream, per territory, per release. From DSP statements to a forecast you can stand on.",
    icon: "film",
    href: "https://ai.elevenviews.io",
    cta: "Open ai.elevenviews.io",
    external: true,
    facts: [
      ["Reads", "Distributor exports · DSP statements"],
      ["Returns", "Per-platform per-stream rate, by territory"],
      ["Forecasts", "90 days, track-by-track"],
    ],
  },
  {
    key: "atlas",
    code: "EVI · 02",
    name: "ATLAS",
    tagline: "Read once. Reply with shape.",
    blurb: "The studio concierge, a single thread that reads what's in front of you, drafts replies, and keeps the calendar from overlapping itself.",
    icon: "msg",
    cta: "Try a thread",
    facts: [
      ["Inbox",   "Reads · drafts · sends, in your voice"],
      ["Calendar","Holds the week so it doesn't double-book"],
      ["Briefs",  "Returns notes, not boilerplate"],
    ],
  },
  {
    key: "operations",
    code: "EVI · 03",
    name: "OPERATIONS",
    tagline: "The board the studio runs from.",
    blurb: "Artists. Leads. Brand deals. Open applications. Project deliverables, shot, drafted, signed off. Quietly.",
    icon: "monitor",
    cta: "Request a walkthrough",
    facts: [
      ["For",      "Studios with more than one client"],
      ["Cadence",  "A single page, walked every Monday"],
      ["Status",   "Invite-only · waitlist open"],
    ],
  },
  {
    key: "hub",
    code: "EVI · 04",
    name: "HUB",
    tagline: "A desktop, in one shell.",
    blurb: "Inbox · Notes · Files · Voice · Meeting room, under one shell. We run the studio out of it.",
    icon: "spark",
    cta: "Reserve a seat",
    facts: [
      ["Surfaces",   "Inbox · Notes · Files · Meeting · Voice"],
      ["Built on",   "What the studio actually uses each day"],
      ["Status",     "Early bench · waitlist"],
    ],
  },
  {
    key: "views-panel",
    code: "EVI · 05",
    name: "VIEWS PANEL",
    tagline: "Real reach. Real design.",
    blurb: "The studio's social service line — growth, design, and account management bundled for artists, creators, and small brands. Vetted followers, engaged audiences, ad-driven views, and the brand kit that makes any of it stick. Member-only inside the portal.",
    icon: "monitor",
    cta: "Request panel access",
    facts: [
      ["Growth",      "Vetted followers · engaged audiences · ad-driven views"],
      ["Design",      "Profile refresh · content packs · brand kits"],
      ["Management",  "Curated monthly · loyalty credits per order"],
    ],
  },
  {
    key: "malden-promotions",
    code: "EVI · 06",
    name: "MALDEN PROMOTIONS",
    tagline: "Hyperlocal media for one city at a time.",
    blurb: "A virtual brand by the studio that indexes a city — businesses, events, history, demographics — into a single navigable surface. Then uses that surface to drive bookings, sponsorships, and community visibility. Pilot live in Malden. Replicable city-by-city.",
    icon: "pin",
    cta: "See the brief",
    facts: [
      ["Coverage",  "Businesses · Events · History · Demographics"],
      ["Lane",      "Hyperlocal SEO + community media"],
      ["Status",    "Pilot · Malden, MA"],
    ],
  },
];

function Intelligence() {
  const { goto } = useRoute();
  return (
    <main className="fade">
      {/* Header */}
      <section className="container" style={{ padding: "84px 0 56px" }}>
        <span className="eyebrow eyebrow-gold">§ Eleven Views Intelligence</span>
        <h1 className="serif balance" style={{ fontSize: "clamp(48px, 7vw, 96px)", lineHeight: 0.96, letterSpacing: "-0.02em", margin: "16px 0 28px", maxWidth: 1100 }}>
          Tools we built for the studio.<br/><em style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>Now built</em> for you.
        </h1>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end" }}>
          <p className="pretty" style={{ fontSize: 16, lineHeight: 1.6, color: "var(--text-1)", maxWidth: 580, margin: 0 }}>
            We don't sell software in the usual sense. We sell instruments, quiet, careful systems that read your work and return what it's worth. Each one was first a tool inside the studio: PLAYA tracked our music, Atlas read our inbox, the Operations board watched the leads. They earned the right to ship by working before they had a name.
          </p>
          <ul className="services-stats">
            <li><b>06</b><span>Instruments, all in use</span></li>
            <li><b>01</b><span>Studio they were built for</span></li>
            <li><b>—</b><span>And no, we don't say AI</span></li>
          </ul>
        </div>
      </section>

      <hr className="rule" />

      {/* Four product cards */}
      <section className="container" style={{ padding: "64px 0 96px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {EV_INTELLIGENCE.map((p) => (
            <article key={p.key}
              onClick={() => p.external ? window.open(p.href, "_blank", "noopener,noreferrer") : goto("intelligence-detail", { key: p.key })}
              style={{
                cursor: "pointer",
                border: "1px solid var(--border)", borderRadius: 12, padding: 32,
                background: "linear-gradient(180deg, #0e0e0e, #0a0a0a)",
                display: "flex", flexDirection: "column", gap: 22,
                transition: "border-color 200ms, transform 200ms",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--gold)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.transform = ""; }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                <span className="num">{p.code}</span>
                <I name={p.icon} size={26} stroke="var(--gold)" />
              </div>
              <div>
                <h2 className="serif" style={{ fontSize: 44, margin: "0 0 8px", letterSpacing: "-0.015em", lineHeight: 1 }}>{p.name}</h2>
                <p className="serif-it" style={{ fontSize: 19, color: "var(--text-1)", lineHeight: 1.4, margin: "0 0 16px" }}>{p.tagline}</p>
                <p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--text-2)", margin: 0, maxWidth: 540 }}>{p.blurb}</p>
              </div>
              <ul style={{ margin: "0", padding: "16px 0 0", borderTop: "1px solid var(--border-1)", listStyle: "none", display: "grid", gap: 10 }}>
                {p.facts.map(([k, v]) => (
                  <li key={k} style={{ display: "flex", justifyContent: "space-between", gap: 16, fontSize: 13 }}>
                    <span className="mono" style={{ color: "var(--text-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{k}</span>
                    <span style={{ color: "var(--text-1)", textAlign: "right" }}>{v}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 8 }}>
                <span className="lk" style={{ fontSize: 14 }}>{p.cta}</span>
                <I name={p.external ? "ext" : "arrow"} size={16} stroke="var(--gold)" />
              </div>
            </article>
          ))}
        </div>
      </section>

      <hr className="rule" />

      {/* Closing band */}
      <section className="container" style={{ padding: "80px 0 120px", textAlign: "center", maxWidth: 820, margin: "0 auto" }}>
        <I name="spark" size={20} stroke="var(--gold)" style={{ marginBottom: 22 }} />
        <p className="serif balance" style={{ fontSize: "clamp(26px, 3vw, 40px)", lineHeight: 1.2, fontStyle: "italic", margin: 0 }}>
          We don't make tools that pretend to think for you. We make tools that read carefully, and let you decide.
        </p>
        <p className="mono" style={{ marginTop: 28, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--text-2)" }}>
          Eleven Views · Intelligence · MMXXVI
        </p>
        <div style={{ marginTop: 40, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          <button className="btn btn-gold btn-lg" onClick={() => goto("booking")}>Talk to the studio <I name="arrow" size={16} /></button>
          <button className="btn btn-ghost btn-lg" onClick={() => goto("services")}>Studio services</button>
        </div>
      </section>
    </main>
  );
}

/* ─── Detail page (Atlas / Operations / Hub) ────────────────────── */
function IntelligenceDetail() {
  const { route, goto } = useRoute();
  const key = route.params?.key;
  const product = EV_INTELLIGENCE.find((p) => p.key === key) || EV_INTELLIGENCE[1];

  return (
    <main className="fade">
      {/* Breadcrumb */}
      <div style={{ borderBottom: "1px solid var(--border-1)" }}>
        <div className="container" style={{ padding: "16px 32px", display: "flex", gap: 8, fontSize: 12, color: "var(--text-3)" }}>
          <a className="lk" onClick={() => goto("home")} style={{ cursor: "pointer", fontSize: 12 }}>Home</a>
          <span>/</span>
          <a className="lk" onClick={() => goto("intelligence")} style={{ cursor: "pointer", fontSize: 12 }}>Intelligence</a>
          <span>/</span>
          <span style={{ color: "var(--text-1)" }}>{product.name}</span>
        </div>
      </div>

      {/* Hero */}
      <section className="container" style={{ padding: "72px 0 56px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <span className="eyebrow eyebrow-gold">{product.code}</span>
            <h1 className="serif balance" style={{ fontSize: "clamp(56px, 7vw, 112px)", lineHeight: 0.94, letterSpacing: "-0.02em", margin: "12px 0 24px" }}>
              {product.name}
            </h1>
            <p className="serif-it" style={{ fontSize: 26, color: "var(--text-1)", lineHeight: 1.3, margin: 0, maxWidth: 520 }}>
              {product.tagline}
            </p>
          </div>
          <p className="pretty" style={{ fontSize: 16, lineHeight: 1.65, color: "var(--text-1)", maxWidth: 540, margin: 0 }}>
            {product.blurb}
          </p>
        </div>
      </section>

      <hr className="rule" />

      {/* Three-cell facts */}
      <section className="container" style={{ padding: "64px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {product.facts.map(([k, v], i) => (
            <div key={k} style={{ borderLeft: "1px solid var(--border)", paddingLeft: 24, paddingRight: 12 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--text-3)", textTransform: "uppercase", marginBottom: 14 }}>
                No. {String(i + 1).padStart(2, "0")} · {k}
              </div>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.35, color: "var(--text-1)" }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      <hr className="rule" />

      {/* Body sections, product-specific copy */}
      <section className="container" style={{ padding: "72px 0", maxWidth: 920 }}>
        {key === "playa" && (
          <div style={{ display: "grid", gap: 32 }}>
            <p className="pretty" style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-1)", margin: 0 }}>
              PLAYA reads your distributor exports and DSP statements, normalizes the per-stream rates by platform and territory, and tells you what the next three months will hold, track by track. It also tells you which records to push, which to retire, and where the publishing royalties are sitting unclaimed.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, paddingTop: 12 }}>
              <div>
                <span className="eyebrow eyebrow-gold">What you see</span>
                <ul style={{ marginTop: 14, paddingLeft: 0, listStyle: "none", display: "grid", gap: 10 }}>
                  {["Monthly revenue, actual vs forecast", "Top tracks, top territories", "Publishing (BMI) running totals", "Stream forecast, 90 days out"].map((x) => (
                    <li key={x} style={{ fontSize: 14.5, color: "var(--text-1)", display: "flex", gap: 10 }}>
                      <I name="check" size={14} stroke="var(--gold)" /> {x}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <span className="eyebrow eyebrow-gold">What it learns</span>
                <ul style={{ marginTop: 14, paddingLeft: 0, listStyle: "none", display: "grid", gap: 10 }}>
                  {["Per-platform per-stream rate", "Territory rotation", "Rising vs declining performers", "Scale recommendations per track"].map((x) => (
                    <li key={x} style={{ fontSize: 14.5, color: "var(--text-1)", display: "flex", gap: 10 }}>
                      <I name="check" size={14} stroke="var(--gold)" /> {x}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        )}

        {key === "atlas" && (
          <div style={{ display: "grid", gap: 28 }}>
            <p className="pretty" style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-1)", margin: 0 }}>
              Atlas is the concierge. It reads what's in front of you, emails, briefs, calendar invites, and gives you back the same thing in a shape you can sign. The voice stays yours; the work doesn't pile up.
            </p>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 14 }}>
              {[
                ["Send a brief", "get a response with notes."],
                ["Send a contract", "get the redlines back marked up."],
                ["Send a half-formed idea", "get three sentences that could have started it."],
              ].map(([k, v]) => (
                <li key={k} style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 24, padding: "16px 0", borderTop: "1px solid var(--border-1)" }}>
                  <span className="serif-it" style={{ fontSize: 18, color: "var(--text-1)" }}>{k}</span>
                  <span style={{ fontSize: 15, color: "var(--text-2)", lineHeight: 1.5 }}>{v}</span>
                </li>
              ))}
            </ul>
          </div>
        )}

        {key === "operations" && (
          <div style={{ display: "grid", gap: 28 }}>
            <p className="pretty" style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-1)", margin: 0 }}>
              Artists. Leads. Brand deals. Open applications. Project deliverables, shot, drafted, signed off. Operations is a quiet, single-page dashboard the studio walks through every Monday morning.
            </p>
            <p className="serif-it" style={{ fontSize: 22, color: "var(--text-1)", lineHeight: 1.3, margin: 0, maxWidth: 600 }}>
              It's not for sale yet. It will be.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
              {[
                ["Leads",        "Tracked"],
                ["Deals",        "Pipelined"],
                ["Deliverables", "Status, due"],
                ["Artists",      "On the bench"],
              ].map(([k, v]) => (
                <div key={k} style={{ border: "1px solid var(--border)", borderRadius: 8, padding: "20px 16px" }}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase", marginBottom: 8 }}>{k}</div>
                  <div style={{ fontSize: 14, color: "var(--text-1)" }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {key === "hub" && (
          <div style={{ display: "grid", gap: 28 }}>
            <p className="pretty" style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-1)", margin: 0 }}>
              Inbox. Notes. Files. Voice. A meeting room that recaps itself. We run the studio out of it. Everything we've built lives there. We're not opening the bench yet, but if you want a seat, we'll save you one.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
              {["Inbox", "Notes", "Files", "Voice", "Meeting room", "Atlas concierge"].map((s) => (
                <div key={s} style={{ border: "1px solid var(--border)", padding: "16px 18px", borderRadius: 8, fontFamily: "var(--serif)", fontSize: 17, color: "var(--text-1)", fontStyle: "italic" }}>
                  {s}
                </div>
              ))}
            </div>
          </div>
        )}

        {key === "views-panel" && (
          <div style={{ display: "grid", gap: 32 }}>
            <p className="pretty" style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-1)", margin: 0 }}>
              VIEWS is the studio's social-first service line. Pick a service, set a quantity, drop the link. We handle delivery, design, and the optimization that keeps you growing after. Member-only inside the portal — boutique pricing, loyalty credits per order, saved profiles for one-tap apply.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
              <div>
                <span className="eyebrow eyebrow-gold">Growth</span>
                <ul style={{ marginTop: 14, padding: 0, listStyle: "none", display: "grid", gap: 10 }}>
                  {[
                    ["IG Vetted Followers", "Aged accounts · 90-day refill"],
                    ["IG Engaged Followers", "Niche-matched · will engage 14 days"],
                    ["Reel Views (Ad-Driven)", "Real Meta ad spend · no bot risk"],
                    ["TikTok Followers", "Real users · refill backed"],
                    ["YouTube Subscribers (Real)", "Watch-through verified"],
                    ["Music Video Views", "Geo-targeted · retention-validated"],
                  ].map(([n, d]) => (
                    <li key={n} style={{ borderBottom: "1px solid var(--border-1)", paddingBottom: 10 }}>
                      <div className="serif" style={{ fontSize: 16, color: "var(--text-1)" }}>{n}</div>
                      <div className="mono" style={{ fontSize: 11, color: "var(--text-3)", letterSpacing: "0.06em", marginTop: 4 }}>{d}</div>
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <span className="eyebrow eyebrow-gold">Design & management</span>
                <ul style={{ marginTop: 14, padding: 0, listStyle: "none", display: "grid", gap: 10 }}>
                  {[
                    ["Profile refresh", "Bio, photo, highlight covers"],
                    ["Content pack", "10 custom posts in your brand style"],
                    ["Story template set", "15 reusable branded stories"],
                    ["Logo & brand kit", "Logo · palette · type · usage"],
                    ["Account management", "30-day curated · monthly retainer"],
                    ["Concierge campaigns", "Custom plays · ask the studio"],
                  ].map(([n, d]) => (
                    <li key={n} style={{ borderBottom: "1px solid var(--border-1)", paddingBottom: 10 }}>
                      <div className="serif" style={{ fontSize: 16, color: "var(--text-1)" }}>{n}</div>
                      <div className="mono" style={{ fontSize: 11, color: "var(--text-3)", letterSpacing: "0.06em", marginTop: 4 }}>{d}</div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            <p className="serif-it" style={{ fontSize: 18, color: "var(--text-2)", margin: 0, maxWidth: 700 }}>
              For artists, every order earns loyalty credits and routes through saved profiles. Concierge tier opens a calendar for custom campaigns the panel can't price.
            </p>
          </div>
        )}

        {key === "malden-promotions" && (
          <div style={{ display: "grid", gap: 32 }}>
            <p className="pretty" style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-1)", margin: 0 }}>
              Malden Promotions is a virtual brand built by the studio. We index a city — every business, event, neighborhood, and demographic — into a single navigable surface. Then we use that surface to drive bookings, sponsorships, and community visibility. Pilot live in Malden, MA. Replicable city-by-city.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
              {[
                ["4,156", "Businesses indexed"],
                ["40.9%", "Foreign-born · 2nd in MA"],
                ["3", "Products · directory · media · social"],
                ["1", "City at a time, by design"],
              ].map(([n, l]) => (
                <div key={l} style={{ border: "1px solid var(--border)", borderRadius: 8, padding: "20px 18px" }}>
                  <div className="serif" style={{ fontSize: 36, color: "var(--gold)", lineHeight: 1, fontStyle: "italic" }}>{n}</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-3)", marginTop: 10 }}>{l}</div>
                </div>
              ))}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "start" }}>
              <div>
                <span className="eyebrow eyebrow-gold">What it does</span>
                <ul style={{ marginTop: 14, padding: 0, listStyle: "none", display: "grid", gap: 10 }}>
                  {[
                    "Hyperlocal SEO directory — every business indexed and ranked",
                    "Editorial city media — events, history, demographics, guides",
                    "Social channel — visuals from the city, distributed",
                    "Sponsorship + paid post inventory once the channel scales",
                    "Replicable per city — Medford, Everett, Revere next",
                  ].map((x) => (
                    <li key={x} style={{ fontSize: 14.5, color: "var(--text-1)", display: "flex", gap: 10 }}>
                      <I name="check" size={14} stroke="var(--gold)" /> {x}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <span className="eyebrow eyebrow-gold">Who it's for</span>
                <ul style={{ marginTop: 14, padding: 0, listStyle: "none", display: "grid", gap: 10 }}>
                  {[
                    "Cities outside major metros that need an editorial home online",
                    "Sponsors who want to back community media with real reach",
                    "Investors who see hyperlocal SEO as a moated, replicable asset",
                    "Local operators looking to license the playbook in their city",
                  ].map((x) => (
                    <li key={x} style={{ fontSize: 14.5, color: "var(--text-1)", display: "flex", gap: 10 }}>
                      <I name="check" size={14} stroke="var(--gold)" /> {x}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        )}
      </section>

      <hr className="rule" />

      {/* CTA */}
      <section className="container" style={{ padding: "72px 0 120px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
        <p className="serif-it" style={{ fontSize: 24, color: "var(--text-1)", margin: 0, maxWidth: 560 }}>
          {key === "playa"             && "Connect your distributor. Read the next quarter."}
          {key === "atlas"             && "Hand the inbox to a hand that can read."}
          {key === "operations"        && "Stop running the studio out of three tabs."}
          {key === "hub"               && "One shell. Everything the studio needs in it."}
          {key === "views-panel"       && "Pick a service. Drop the link. We grow it from there."}
          {key === "malden-promotions" && "One city, indexed properly. The model replicates city-by-city."}
        </p>
        <div style={{ display: "flex", gap: 10 }}>
          {key === "playa" ? (
            <a className="btn btn-gold btn-lg" href="https://ai.elevenviews.io" target="_blank" rel="noopener noreferrer">Open ai.elevenviews.io <I name="ext" size={14} /></a>
          ) : (
            <button className="btn btn-gold btn-lg" onClick={() => goto("booking")}>{product.cta} <I name="arrow" size={14} /></button>
          )}
          <button className="btn btn-ghost btn-lg" onClick={() => goto("intelligence")}>All instruments</button>
        </div>
      </section>
    </main>
  );
}

window.Intelligence = Intelligence;
window.IntelligenceDetail = IntelligenceDetail;
window.EV_INTELLIGENCE = EV_INTELLIGENCE;