// Portfolio + Reviews + SVG icon set (used by FAQInquiry)

const RingSVG = () => (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinejoin="round"><circle cx="24" cy="30" r="12"/><path d="M18 18 L24 8 L30 18 Z"/></svg>);
const NecklaceSVG = () => (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"><path d="M8 8 Q24 28 40 8"/><path d="M24 28 L20 36 L24 40 L28 36 Z"/></svg>);
const EarringSVG = () => (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round"><circle cx="24" cy="14" r="3"/><path d="M24 17 L24 28"/><circle cx="24" cy="34" r="6"/></svg>);
const BraceletSVG = () => (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.25"><ellipse cx="24" cy="24" rx="18" ry="10"/><ellipse cx="24" cy="24" rx="14" ry="7"/></svg>);
const WatchSVG = () => (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinejoin="round" strokeLinecap="round"><rect x="14" y="14" width="20" height="20" rx="2"/><circle cx="24" cy="24" r="6"/><path d="M24 20 L24 24 L27 26"/></svg>);
const GemSVG = () => (<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinejoin="round"><path d="M24 8 L34 16 L30 36 L18 36 L14 16 Z"/><path d="M14 16 L34 16"/><path d="M20 22 L24 30 L28 22"/></svg>);

// ============ Portfolio ============
const PORTFOLIO_CATS = [
  { key: "C",    label: "C" },
  { key: "B",    label: "B" },
  { key: "T&CO", label: "T&CO" },
  { key: "VCA",  label: "VCA" },
  { key: "D",    label: "D" },
  { key: "H",    label: "H" },
  { key: "BO",   label: "BO" },
  { key: "CM",   label: "CM" },
  { key: "C&H",  label: "C&H" },
  { key: "CL",   label: "CL" },
  { key: "P",    label: "P" },
  { key: "F",    label: "F" },
  { key: "ETC",  label: "ETC" },
];


function Portfolio() {
  const [filter, setFilter] = React.useState("C");
  const [all, setAll] = React.useState([]);
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    fetch("/api/portfolio")
      .then(r => r.json())
      .then(d => { setAll(Array.isArray(d.list) ? d.list : []); setLoaded(true); })
      .catch(() => setLoaded(true));
  }, []);

  const filtered = all.filter(p => p.cat === filter);

  return (
    <section className="section-tight" id="portfolio">
      <div className="container">
        <div className="eyebrow-row">
          <span className="lbl">— PORTFOLIO</span>
          <span className="rule"></span>
          <span className="lbl" style={{ color: "var(--fg-3)" }}>WORKS BY VELOEN</span>
        </div>
        <h2 className="serif" style={{ margin: "0 0 32px", fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: "clamp(36px, 4.4vw, 64px)", letterSpacing: "0.02em", lineHeight: 1.1 }}>
          포트폴리오 <em style={{ fontStyle: "italic", color: "var(--gold)" }}>작품집.</em>
        </h2>
        <div className="portfolio-filters">
          {PORTFOLIO_CATS.map(c => (
            <button key={c.key} className={filter === c.key ? "active" : ""} onClick={() => setFilter(c.key)}>{c.label}</button>
          ))}
        </div>
        <div className="portfolio-grid" style={{ display: "flex", gap: "20px", overflowX: "auto", overflowY: "hidden", padding: "8px 4px 24px 4px", scrollbarWidth: "thin" }}>
          {filtered.map((p, i) => (
            <div className="portfolio-card" key={i}>
              <div className="ph">
                <img src={p.img} alt={p.title} loading="lazy"
                  style={{width:"100%",height:"100%",objectFit:"cover"}}
                  onError={(e) => { e.target.style.display = "none"; }}/>
              </div>
              <div className="body">
                <span className="eyebrow">VELOEN · CASE {p.caseNo || ""}</span>
                <h4>{p.title}</h4>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


function Reviews() {
  const [reviews, setReviews] = React.useState([]);
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    fetch("/api/reviews")
      .then(r => r.json())
      .then(d => { setReviews(Array.isArray(d.list) ? d.list : []); setLoaded(true); })
      .catch(() => setLoaded(true));
  }, []);

  // Don't render the whole section if there are no reviews
  if (loaded && reviews.length === 0) return null;

  return (
    <section className="section-tight" id="reviews">
      <div className="container">
        <div className="eyebrow-row">
          <span className="lbl">09 — VOICES</span>
          <span className="rule"></span>
          <span className="lbl" style={{ color: "var(--fg-3)" }}>CUSTOMER REVIEWS</span>
        </div>
        <h2 className="serif" style={{ margin: "0 0 12px", fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: "clamp(36px, 4.4vw, 64px)", letterSpacing: "0.02em", lineHeight: 1.1 }}>
          고객 <em style={{ fontStyle: "italic", color: "var(--gold)" }}>후기.</em>
        </h2>
        <p style={{ color: "var(--fg-3)", fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.12em", marginBottom: 40 }}>
          벨로엔과 함께한 분들의 한 마디.
        </p>
        <div className="reviews-grid" style={{ display: "flex", gap: "20px", overflowX: "auto", overflowY: "hidden", padding: "8px 4px 24px 4px", scrollbarWidth: "thin" }}>
          {reviews.map((r) => {
            const stars = "★★★★★☆☆☆☆☆".slice(5 - (r.stars || 5), 5 - (r.stars || 5) + 5);
            const meta = [r.author, r.product].filter(Boolean).join(" · ");
            return (
              <div className="review" key={r.id}>
                {r.img && <img src={r.img} alt="" style={{width:"100%",aspectRatio:"4/5",objectFit:"cover",marginBottom:"16px",border:"1px solid rgba(201,163,90,0.2)"}} onError={(e) => { e.target.style.display = "none"; }}/>}
                <div className="stars">{stars}</div>
                {r.quote && <div className="quote">{r.quote}</div>}
                {r.body && <p className="body">{r.body}</p>}
                {meta && <div className="meta">{meta}</div>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Portfolio = Portfolio;
window.Reviews = Reviews;
window.RingSVG = RingSVG;
window.NecklaceSVG = NecklaceSVG;
window.EarringSVG = EarringSVG;
window.BraceletSVG = BraceletSVG;
window.WatchSVG = WatchSVG;
window.GemSVG = GemSVG;