const { useState, useEffect, useRef, useMemo } = React;

const STYLES = [
  { id:'watercolor', name:'水彩', emo:'🎨', img:'assets/shirt-watercolor.webp', color:'#8fb8ff', desc:'暈染柔邊、夢幻漸層' },
  { id:'sketch',     name:'素描', emo:'✏️', img:'assets/shirt-sketch.webp',     color:'#2a2a2a', desc:'鉛筆質感、細膩線條' },
  { id:'floral',     name:'花草', emo:'🌸', img:'assets/shirt-floral.webp',     color:'#ffb3c7', desc:'植物插畫、春日氣息' },
  { id:'abstract',   name:'流體', emo:'💧', img:'assets/shirt-abstract.webp',   color:'#ff5b3d', desc:'飽和色塊、流動抽象' },
  { id:'geometric',  name:'幾何', emo:'🔺', img:'assets/shirt-geometric.webp',  color:'#d4a373', desc:'極簡形狀、低彩度' },
  { id:'popart',     name:'普普', emo:'💥', img:'assets/shirt-popart.webp',     color:'#ff0066', desc:'高對比印刷、懷舊 pop' },
];

const SHIRT_COLORS = [
  { id:'white', hex:'#ffffff', name:'經典白' },
  { id:'black', hex:'#111111', name:'午夜黑' },
  { id:'navy',  hex:'#1e2a4a', name:'深海藍' },
  { id:'cream', hex:'#f1e9d2', name:'奶油黃' },
  { id:'sage',  hex:'#b8c9a5', name:'鼠尾草' },
  { id:'pink',  hex:'#f4b8c8', name:'櫻花粉' },
];

function Hero(){
  const [style, setStyle] = useState(STYLES[0]);
  const [prevStyle, setPrevStyle] = useState(null);
  const [transitioning, setTransitioning] = useState(false);

  function pick(s){
    if(s.id===style.id) return;
    setPrevStyle(style);
    setTransitioning(true);
    setTimeout(()=>{ setStyle(s); setTransitioning(false); setTimeout(()=>setPrevStyle(null),500); }, 200);
  }

  return (
    <section className="hero">
      <svg className="scribble" style={{top:'10%',right:'6%',width:90}} viewBox="0 0 100 100" aria-hidden>
        <path d="M5,50 Q25,10 45,50 T85,50" fill="none" stroke="var(--ink)" strokeWidth="3" strokeLinecap="round"/>
      </svg>
      <svg className="scribble" style={{bottom:'18%',left:'8%',width:70}} viewBox="0 0 100 100" aria-hidden>
        <circle cx="50" cy="50" r="22" fill="none" stroke="var(--pop-pink)" strokeWidth="4" strokeDasharray="6 6"/>
      </svg>
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <div className="eyebrow"><span className="dot"/> AI 秒變 6 種風格 · 72 小時到貨</div>
          <h1 className="hero-title">
            <span className="row">把你的 <span className="chip">腦洞</span></span>
            <span className="row"><span className="wiggle">穿</span>出<span className="under">門外</span>。</span>
          </h1>
          <p className="hero-sub">
            上傳一張照片 —— 寵物、旅行、一團模糊的塗鴉都行。我們的 AI 幫你套上 6 種質感風格，
            預覽 T-shirt 效果，一鍵下單，<b>72 小時</b>送到家。
          </p>
          <div className="hero-ctas">
            <a href="#playground" className="btn btn-primary btn-big">開始設計 →</a>
            <a href="#gallery" className="btn btn-big btn-outline">看作品牆</a>
          </div>
          <div className="proof">
            <div className="avatars">
              <div className="av" style={{background:'linear-gradient(135deg,#ff3d3d,#ffd21f)'}}/>
              <div className="av" style={{background:'linear-gradient(135deg,#1ec8ff,#5ee671)'}}/>
              <div className="av" style={{background:'linear-gradient(135deg,#ff4fae,#9b6bff)'}}/>
              <div className="av" style={{background:'linear-gradient(135deg,#ffd21f,#ff4fae)'}}/>
            </div>
            <div className="proof-text">
              <b>12,430 件</b>已穿出門 · 4.9★ 平均評分
            </div>
          </div>
        </div>

        <div className="hero-stage">
          <div className="stage-bg"/>
          <div className="style-picker" role="tablist" aria-label="選擇風格">
            {STYLES.map(s=>(
              <button key={s.id} className={s.id===style.id?'on':''} onClick={()=>pick(s)} title={s.name}>
                <span className="sp-swatch" style={{background:s.color}}/>
                <span className="sp-label"><span>{s.emo} {s.name}</span></span>
              </button>
            ))}
          </div>

          <div className="shirt-frame">
            {prevStyle && (
              <img src={prevStyle.img} alt="" className="out" style={{position:'absolute',inset:0}}/>
            )}
            <img src={style.img} alt={style.name + ' T-shirt'} className={transitioning?'out':''} />
            <div className="shirt-label"><span className="lab-dot" style={{background:style.color}}/>{style.name}風格 · {style.desc}</div>
          </div>

          <div className="sticker s1">AI ✨ 30 秒出圖</div>
          <div className="sticker s2">印壞包退!</div>
          <div className="sticker s3">100% 純棉</div>
          <div className="sticker s4">台灣印製 🇹🇼</div>

          <div className="badge-stamp" style={{top:'-10%',left:'-8%',background:'var(--pop-green)'}}>
            <span className="in">會員首件<br/>$299 起 ✦</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Trust(){
  return (
    <div className="trust">
      <div className="wrap trust-row">
        <span className="kw">看過 inif 的媒體</span>
        <span>TechOrange</span>
        <span>數位時代</span>
        <span>Shoppertise</span>
        <span>INSIDE</span>
        <span>Yahoo 奇摩</span>
        <span>PopDaily</span>
      </div>
    </div>
  );
}

function Playground(){
  const [style, setStyle] = useState(STYLES[3]);
  const [shirtColor, setShirtColor] = useState(SHIRT_COLORS[0]);
  const [step, setStep] = useState(2);
  const [fade, setFade] = useState(false);

  function pickStyle(s){
    setFade(true);
    setStep(2);
    setTimeout(()=>{ setStyle(s); setFade(false); setTimeout(()=>setStep(3),400);},220);
  }

  return (
    <section id="playground" className="playground">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="kicker">風格實驗室 · Style Lab</div>
            <h2 className="h2">點一點，<em>試穿 AI 風格</em></h2>
          </div>
          <p className="sec-sub">這不是影片，是真的互動。挑風格、換衣色、立刻預覽 —— 三十秒找到你的一件。</p>
        </div>

        <div className="pg-grid">
          <div className="pg-preview">
            <div className="pg-steps">
              <div className={'pg-step '+(step>=1?'active':'')}><span className="n">1</span>上傳</div>
              <div className={'pg-step '+(step>=2?'active':'')}><span className="n">2</span>選風格</div>
              <div className={'pg-step '+(step>=3?'active':'')}><span className="n">3</span>預覽 & 下單</div>
            </div>
            <div className="pg-canvas" style={{background:shirtColor.hex}}>
              <img src={style.img} alt="" className={fade?'fade':''} style={{mixBlendMode: shirtColor.id==='white' ? 'normal':'normal'}}/>
              <div className="pg-shirt-overlay"/>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:12,flexWrap:'wrap'}}>
              <div style={{fontFamily:'var(--serif)',fontWeight:900,fontSize:22}}>
                {style.emo} {style.name}風格 · {shirtColor.name}
              </div>
              <div style={{fontFamily:'var(--hand)',fontSize:22,color:'var(--accent)'}}>→ NT$ 590</div>
            </div>
          </div>

          <div className="pg-panel">
            <h3>設計你的一件</h3>
            <div>
              <span className="lbl">1. 靈感來源</span>
              <div className="upload-zone">
                <div className="u-icon">↑</div>
                <div>
                  <b>拖拉照片到這 / 點擊上傳</b>
                  <div className="ld">支援 JPG · PNG · WebP · 最大 20MB</div>
                </div>
              </div>
            </div>

            <div>
              <span className="lbl">2. 風格</span>
              <div className="style-grid">
                {STYLES.map(s=>(
                  <div key={s.id} className={'style-chip '+(s.id===style.id?'on':'')} onClick={()=>pickStyle(s)}>
                    <span className="emo">{s.emo}</span>
                    {s.name}
                  </div>
                ))}
              </div>
            </div>

            <div>
              <span className="lbl">3. T-shirt 顏色</span>
              <div className="color-row">
                {SHIRT_COLORS.map(c=>(
                  <button key={c.id} className={c.id===shirtColor.id?'on':''} style={{background:c.hex}} onClick={()=>setShirtColor(c)} title={c.name}/>
                ))}
              </div>
            </div>

            <div className="pg-actions">
              <a className="btn btn-primary" href="#" style={{flex:1}}>加入購物車 · NT$ 590</a>
              <a className="btn btn-outline" href="#" style={{color:'var(--ink)'}}>儲存草稿</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function How(){
  const cards = [
    { n:'01', t:'丟進一張圖', d:'寵物、旅行照、塗鴉、甚至一張手寫字。沒有靈感？從我們的 prompt 罐頭抽一張。', illus:'linear-gradient(135deg, #1ec8ff, #5ee671)' },
    { n:'02', t:'AI 30 秒變身', d:'6 種風格同時產出，左右滑動挑你愛的那張。不滿意？重新生成不用錢。', illus:'linear-gradient(135deg, #ffd21f, #ff3d3d)' },
    { n:'03', t:'穿上它出門', d:'6 色 T-shirt、帽 T、托特包任選，72 小時寄到家。印壞？整件退給你。', illus:'linear-gradient(135deg, #ff4fae, #9b6bff)' },
  ];
  return (
    <section id="how" className="how">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="kicker">三步驟, 不囉唆</div>
            <h2 className="h2">從靈感到<em>真的穿在身上</em>。</h2>
          </div>
          <p className="sec-sub">沒有設計技能？不用。沒有基本下單量？也不用。你只需要一個腦洞。</p>
        </div>
        <div className="how-grid">
          {cards.map(c=>(
            <div className="how-card" key={c.n}>
              <div className="num">{c.n}</div>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
              <div className="illus" style={{background:c.illus}}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery(){
  const items = [...STYLES, ...STYLES]; // duplicate for marquee
  const tags = ['#毛孩日常','#旅行攝影','#手寫語錄','#樂團周邊','#自拍變英雄','#小孩畫作','#婚禮回禮','#員工制服'];
  return (
    <section id="gallery" className="gallery">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="kicker">作品牆 · Wall of inif</div>
            <h2 className="h2">真的有人這樣<em>穿出門</em>。</h2>
          </div>
          <p className="sec-sub">每天 300+ 件新作品上架。點一張，看看原圖 + 風格套用流程。</p>
        </div>
      </div>
      <div className="gal-marquee">
        {items.map((s,i)=>(
          <div className="gal-card" key={i}>
            <img src={s.img} alt={s.name}/>
            <div className="gc-meta">{tags[i % tags.length]} · {s.name}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Testimonials(){
  const t = [
    { q:'我把貓畫成水彩風，朋友看到下訂三件。以後過年送禮有救了。', n:'Mika', r:'Instagrammer · 新竹', av:'linear-gradient(135deg,#ff3d3d,#ffd21f)' },
    { q:'之前用別家要等兩週還印歪。這家 72 小時到，線條清晰到我想再印一件。', n:'Chen-yu', r:'平面設計師 · 台北', av:'linear-gradient(135deg,#1ec8ff,#5ee671)' },
    { q:'樂團周邊小量下單最痛的就是門檻。inif 五件起印、六種風格,我們終於有得玩。', n:'凌晨三點', r:'獨立樂團', av:'linear-gradient(135deg,#ff4fae,#9b6bff)' },
  ];
  return (
    <section className="testi">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="kicker">用過的人這樣說</div>
            <h2 className="h2">不是我們自己說<em>好看</em>。</h2>
          </div>
        </div>
        <div className="testi-grid">
          {t.map((x,i)=>(
            <div className="testi-card" key={i}>
              <div className="stars">★★★★★</div>
              <blockquote>「{x.q}」</blockquote>
              <div className="who">
                <div className="av" style={{background:x.av}}/>
                <div><b>{x.n}</b><span style={{opacity:.7}}>{x.r}</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing(){
  const plans = [
    { name:'隨便試試', price:'299', unit:'/ 首件', feats:['單件下單','6 種 AI 風格','6 色 T-shirt','72 小時到貨','印壞包退'] },
    { name:'朋友一起', price:'590', unit:'/ 件 × 5+', feats:['5 件起更划算','獨立包裝','免運','AI 生成無限次','私訊客服協助'], featured:true },
    { name:'品牌 / 社團', price:'客製', unit:'報價', feats:['50 件以上團購','吊牌客製','設計師陪跑','版型 + 面料諮詢','月結開發票'] },
  ];
  return (
    <section id="pricing" className="pricing">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="kicker">價格 · 簡單到一眼看懂</div>
            <h2 className="h2">沒有隱藏費用, <em>沒有最低下單</em>。</h2>
          </div>
          <p className="sec-sub">任何一件都含 AI 生成、面料、印製、包裝、運費。不合適整件退。</p>
        </div>
        <div className="price-grid">
          {plans.map(p=>(
            <div key={p.name} className={'price-card '+(p.featured?'featured':'')}>
              {p.featured && <div className="featured-pill">★ 最熱門</div>}
              <div className="p-name">{p.name}</div>
              <div className="p-price">
                {p.price.startsWith('客')?'':'NT$'} {p.price} <small>{p.unit}</small>
              </div>
              <ul>{p.feats.map(f=><li key={f}>{f}</li>)}</ul>
              <a className={'btn '+(p.featured?'btn-primary':'btn-outline')} href="#" style={{alignSelf:'stretch',justifyContent:'center'}}>
                {p.featured?'開始設計':'了解更多'}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ(){
  const qs = [
    { q:'AI 風格化會很久嗎?', a:'平均 30 秒出 6 張。如果流量高的時候可能到 1 分鐘,我們會先寄信提醒你。' },
    { q:'版權怎麼算? 我的圖會拿去做別的嗎?', a:'你上傳的原圖與生成結果 100% 歸你所有。我們不會拿去做訓練、也不會出現在別人的設計裡。' },
    { q:'最低下單幾件?', a:'一件就能印。沒有起訂量、沒有版費、沒有開版費。' },
    { q:'印壞了怎麼辦?', a:'拍張照寄給我們,整件免費重做或全額退款。你選。' },
    { q:'可以印自己的 logo 嗎?', a:'當然。上傳後選「保留原圖」模式, AI 只會做清潔與去背,不做風格化。' },
    { q:'有實體店可以看嗎?', a:'台北赤峰街有一間小小的 showroom,每週五、六開。預約制,線上先選款再來試穿。' },
  ];
  return (
    <section id="faq" className="faq">
      <div className="wrap">
        <div className="faq-grid">
          <div>
            <div className="kicker">常見問題</div>
            <h2 className="h2">你想問的,<em>這裡都有</em>。</h2>
            <p className="sec-sub" style={{marginTop:16}}>
              沒找到答案? 官方 LINE 24 小時內回覆 —— 不是機器人,是真的人。
            </p>
            <a className="btn btn-black btn-big" href="#" style={{marginTop:20}}>加官方 LINE →</a>
          </div>
          <div className="faq-list">
            {qs.map((x,i)=>(
              <details className="faq-item" key={i} {...(i===0?{open:true}:{})}>
                <summary>{x.q}<span className="plus">+</span></summary>
                <p>{x.a}</p>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CTABand(){
  return (
    <section className="ctaband">
      <div className="wrap">
        <h2 className="h2" style={{fontSize:'clamp(44px,6vw,84px)'}}>
          所以,今天想<em>穿點什麼?</em>
        </h2>
        <div className="cta-ctas">
          <a className="btn btn-black btn-big" href="#playground">立刻開始設計 →</a>
          <a className="btn btn-outline btn-big" href="#gallery" style={{background:'#fff'}}>先看作品牆</a>
        </div>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <div className="brand-wordmark">
              <span className="bw-en">inif</span>
              <span className="bw-zh" style={{color:'#FFF8EE99'}}>印衣服</span>
            </div>
            <p>用 AI 幫你把任何靈感變成一件能穿出門的衣服。台北設計、台灣印製。</p>
          </div>
          <div className="foot-col">
            <h4>商品</h4>
            <a href="#">T-shirt</a>
            <a href="#">帽 T</a>
            <a href="#">托特包</a>
            <a href="#">Baby 系列</a>
          </div>
          <div className="foot-col">
            <h4>幫助</h4>
            <a href="#">運送 & 退貨</a>
            <a href="#">尺寸指南</a>
            <a href="#">團購諮詢</a>
            <a href="#">聯絡我們</a>
          </div>
          <div className="foot-col">
            <h4>跟著我們</h4>
            <a href="#">Instagram</a>
            <a href="#">Threads</a>
            <a href="#">LINE 官方</a>
            <a href="#">Email 電子報</a>
          </div>
        </div>
        <div className="foot-bot">
          <div>© 2026 inif Studio · 愛穿什麼就穿什麼</div>
          <div>Made with ❤️ in 台北</div>
        </div>
      </div>
    </footer>
  );
}

function App(){
  return (
    <>
      <Hero/>
      <Trust/>
      <Playground/>
      <How/>
      <Gallery/>
      <Testimonials/>
      <Pricing/>
      <FAQ/>
      <CTABand/>
      <Footer/>
    </>
  );
}

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