import { DeesElement, html, customElement, css } from '@design.estate/dees-element';
import { shxElementStyles } from './tokens.js';
import './shx-badge.js';
import './shx-button.js';
import './shx-icon.js';

declare global {
  interface HTMLElementTagNameMap {
    'shx-landing-page': ShxLandingPage;
  }
}

@customElement('shx-landing-page')
export class ShxLandingPage extends DeesElement {
  public static demo = () => html`<shx-landing-page></shx-landing-page>`;
  public static demoGroups = ['smarthome.exchange full pages'];

  public static styles = [
    ...shxElementStyles,
    css`
      :host {
        display: block;
        min-height: 100vh;
        background: radial-gradient(circle at 80% 10%, rgba(59,130,246,0.18), transparent 30%), var(--shx-bg);
        color: var(--shx-fg);
      }
      .wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 28px;
      }
      nav {
        display: flex;
        align-items: center;
        gap: 18px;
        min-height: 64px;
        border-bottom: 1px solid var(--shx-border-soft);
      }
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font: 800 15px/1 var(--shx-display);
        letter-spacing: -0.02em;
      }
      .links {
        display: flex;
        gap: 14px;
        margin-left: auto;
        color: var(--shx-fg-3);
        font-size: 13px;
      }
      .hero {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 44px;
        align-items: center;
        padding: 88px 0 72px;
      }
      h1 {
        margin: 18px 0 18px;
        max-width: 720px;
        font: 800 clamp(44px, 7vw, 78px)/0.95 var(--shx-display);
        letter-spacing: -0.06em;
      }
      h1 em, h2 em {
        color: var(--shx-accent);
        font-style: normal;
      }
      .lede {
        max-width: 680px;
        color: var(--shx-fg-2);
        font-size: 18px;
        line-height: 1.55;
      }
      .cta {
        display: flex;
        gap: 10px;
        margin-top: 28px;
      }
      .panel {
        border: 1px solid var(--shx-border);
        border-radius: 16px;
        background: color-mix(in srgb, var(--shx-card), transparent 4%);
        box-shadow: 0 24px 70px rgba(0,0,0,0.34);
        overflow: hidden;
      }
      .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid var(--shx-border-soft);
        color: var(--shx-fg-3);
        font: 500 11px/1 var(--shx-mono);
      }
      .panel-body {
        display: grid;
        gap: 10px;
        padding: 16px;
      }
      .tool-row {
        display: grid;
        grid-template-columns: 12px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 10px;
        border: 1px solid var(--shx-border-soft);
        border-radius: 9px;
        background: var(--shx-card-2);
        font-size: 13px;
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--shx-green);
        box-shadow: 0 0 12px var(--shx-green);
      }
      section {
        padding: 64px 0;
        border-top: 1px solid var(--shx-border-soft);
      }
      h2 {
        margin: 0 0 16px;
        max-width: 760px;
        font: 800 40px/1.05 var(--shx-display);
        letter-spacing: -0.04em;
      }
      .grid3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 28px;
      }
      .mini {
        min-height: 220px;
        padding: 24px;
        border: 1px solid var(--shx-border);
        border-radius: 14px;
        background: var(--shx-card);
      }
      .mini strong {
        display: block;
        margin-bottom: 10px;
        font: 800 20px/1.1 var(--shx-display);
      }
      .mini p {
        color: var(--shx-fg-3);
        line-height: 1.55;
      }
      @media (max-width: 860px) {
        .hero, .grid3 {
          grid-template-columns: 1fr;
        }
        .links {
          display: none;
        }
      }
    `,
  ];

  public render() {
    return html`
      <div class="wrap">
        <nav>
          <div class="brand"><shx-icon></shx-icon> smarthome.exchange</div>
          <div class="links">
            <span>Tools</span>
            <span>Agents</span>
            <span>Automations</span>
            <span>Open source</span>
          </div>
        </nav>
        <div class="hero">
          <div>
            <shx-badge>local-first home OS</shx-badge>
            <h1>An open home OS, <em>spoken in the language of agents.</em></h1>
            <p class="lede">Every device, sensor, and routine becomes a typed tool: discoverable, permission-scoped, audit-logged, and callable by Claude, a local model, or your own TypeScript agent.</p>
            <div class="cta">
              <shx-button>Open console</shx-button>
              <shx-badge>BYO LLM</shx-badge>
              <shx-badge>MCP-native</shx-badge>
            </div>
          </div>
          <div class="panel">
            <div class="panel-head"><span>birch-lane.local/mcp</span><span>live</span></div>
            <div class="panel-body">
              <div class="tool-row"><span class="dot"></span><span>devices.climate.office.hold</span><shx-badge>auto</shx-badge></div>
              <div class="tool-row"><span class="dot"></span><span>agents.watt.decide</span><shx-badge>ask</shx-badge></div>
              <div class="tool-row"><span class="dot"></span><span>devices.lock.front.set</span><shx-badge>approval</shx-badge></div>
              <div class="tool-row"><span class="dot"></span><span>audit.receipts.append</span><shx-badge>signed</shx-badge></div>
            </div>
          </div>
        </div>
        <section>
          <h2>Three primitives. <em>That is the whole platform.</em></h2>
          <div class="grid3">
            <div class="mini"><strong>Typed devices</strong><p>Matter, Zigbee, Z-Wave, Thread, MQTT, HomeKit, ESPHome, and Home Assistant devices become callable tools.</p></div>
            <div class="mini"><strong>Scoped agents</strong><p>Agents receive revocable scopes and explicit modes: auto, ask, or suggest. No ambient access.</p></div>
            <div class="mini"><strong>Audit receipts</strong><p>Every effectful call creates a receipt with caller, scope, input summary, output summary, and undo intent.</p></div>
          </div>
        </section>
      </div>
    `;
  }
}