// Resources.jsx — 10 자료링크: Drive 자료 + 외부 링크 자료실
const { Card, Tag, IconButton, Button } = window.DesignSystem_7d5e72;

function ResourcesScreen({ data }) {
  const SECTIONS = [
    {
      title: "운영 · 마스터", tone: "rose", items: [
        ["운영 Google Sheet", "실제 입력 · 관리 (SSoT)", "Sheet"],
        ["Drive · 결혼준비 폴더", "보고서 · 계약서 · HTML 저장", "Drive"],
      ],
    },
    {
      title: "계약 · 견적", tone: "gold", items: [
        ["더채플앳청담 견적서", "2027.06.10 수신", "PDF"],
        ["아펠가모 잠실 브로셔", "식대 · 보증 안내", "PDF"],
        ["스드메 계약서 (초안)", "환불조항 검토 필요", "DOC"],
      ],
    },
    {
      title: "리서치 · 참고", tone: "sage", items: [
        ["예식장 심화 리서치", "권역별 후보 30곳 확장안", "Sheet"],
        ["스드메 비교 정리", "원본 · 수정본 · 헬퍼비", "Note"],
      ],
    },
  ];

  const fileRow = {
    display: "flex", alignItems: "center", gap: "14px", padding: "13px 14px",
    borderRadius: "12px", border: "1px solid var(--line)", background: "var(--paper-1)",
    textDecoration: "none",
  };
  const kindChip = {
    width: "44px", height: "44px", borderRadius: "10px", flex: "none",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    background: "var(--paper-3)", border: "1px solid var(--line)",
    fontSize: "10.5px", fontWeight: 700, color: "var(--ink-2)", letterSpacing: "0.02em",
  };

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" }}>
        <p style={{ margin: 0, fontSize: "14px", color: "var(--ink-3)" }}>계약서 · 견적서 · 브로셔 · 보고서 · HTML 링크를 빠르게 찾는 자료실.</p>
        <Button variant="secondary" size="md" iconLeft={<span>＋</span>}>링크 추가</Button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "16px", alignItems: "start" }}>
        {SECTIONS.map((s, si) => (
          <Card key={si} eyebrow={`${s.items.length}개 자료`} title={s.title} accent={si === 0 ? "rose" : null}>
            <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
              {s.items.map((it, i) => (
                <a key={i} href="#" style={fileRow}>
                  <span style={kindChip}>{it[2]}</span>
                  <span style={{ flex: 1, minWidth: 0 }}>
                    <span style={{ display: "block", fontSize: "14px", fontWeight: 600, color: "var(--ink-1)" }}>{it[0]}</span>
                    <span style={{ display: "block", fontSize: "12.5px", color: "var(--ink-3)", marginTop: "2px" }}>{it[1]}</span>
                  </span>
                  <span style={{ color: "var(--ink-4)", flex: "none" }}>↗</span>
                </a>
              ))}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

window.ResourcesScreen = ResourcesScreen;