const { useState } = React;

function IconSheet({ entry }) {
  const { name, tag, desc, Comp, swatches } = entry;
  return (
    <div className="icon-sheet">
      <div className="icon-meta">
        <div>
          <h3>{name}</h3>
          <p>{desc}</p>
        </div>
        <div className="tag">{tag}</div>
      </div>
      <div className="icon-stage">
        <div className="hero-shell"><Comp idSuffix={`-${entry.key}-h`}/></div>
        <div>
          <div className="sizes">
            {[
              { cls: "s-180", lbl: "180" },
              { cls: "s-120", lbl: "120" },
              { cls: "s-80",  lbl: "80"  },
              { cls: "s-60",  lbl: "60"  },
              { cls: "s-40",  lbl: "40"  },
            ].map(s => (
              <div className="size-cell" key={s.lbl}>
                <div className={`chip ${s.cls}`}><Comp idSuffix={`-${entry.key}-${s.lbl}`}/></div>
                <div className="lbl">{s.lbl}px</div>
              </div>
            ))}
          </div>
          <div className="swatches">
            {swatches.map((c,i) => (
              <span key={i} style={{ background: c }} title={c}/>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Springboard({ entry }) {
  const { Comp } = entry;
  const wallpaper = `radial-gradient(120% 80% at 20% 0%, #2a3144 0%, #161922 40%, #0a0c12 100%)`;
  const apps = [
    { name: "Daily Stock Hunter", isUs: true },
    { name: "Mail" }, { name: "Calendar" }, { name: "Photos" },
    { name: "Messages" }, { name: "Maps" }, { name: "Notes" }, { name: "Settings" },
  ];
  return (
    <div style={{ background: wallpaper, padding: "32px 8px 28px", borderRadius: 28 }}>
      <div className="springboard-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        {apps.slice(0,4).map((a,i) => (
          <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            {a.isUs
              ? <div className="ico"><Comp idSuffix={`-sb-${entry.key}-${i}`}/></div>
              : <div className="ph">{a.name.slice(0,4).toLowerCase()}</div>}
            <div className="name">{a.name}</div>
          </div>
        ))}
      </div>
      <div className="springboard-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        {apps.slice(4).map((a,i) => (
          <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            <div className="ph">{a.name.slice(0,4).toLowerCase()}</div>
            <div className="name">{a.name}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function App() {
  return (
    <DesignCanvas
      title="Daily Stock Hunter — App Icon"
      subtitle="Reticle direction, refined. Pure scope — no dot, no bar, no candle in the middle. Three variants of the cross-and-ring."
    >
      <DCSection id="hero" title="Reticle variants" subtitle="Drag artboards to reorder; click any to focus.">
        {ICONS.map(entry => (
          <DCArtboard key={entry.key} id={entry.key} label={entry.name} width={1080} height={520}>
            <IconSheet entry={entry} />
          </DCArtboard>
        ))}
      </DCSection>

      <DCSection id="springboard" title="On the homescreen" subtitle="The icon has to earn its row — check legibility against neighbors.">
        {ICONS.map(entry => (
          <DCArtboard key={entry.key} id={`sb-${entry.key}`} label={`${entry.name} · springboard`} width={420} height={520}>
            <Springboard entry={entry} />
          </DCArtboard>
        ))}
      </DCSection>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);