/* Sanjab Studio website — bottom sections (Portfolio, Offer, Why, About, Contact, Footer). */
const { Button, Eyebrow, Badge, Icon, Card, Tag, TagRow, Field, FieldRow, Input, Select, Textarea } = window.DesignSystem_7abc08;

function Portfolio({ portfolio }) {
  const [filter, setFilter] = React.useState(portfolio.categories[0]);
  const shown = portfolio.projects.filter(p => filter === 'همه' || p.cat === filter);
  return (
    <section id="portfolio">
      <div className="container">
        <window.SectionHead tag={portfolio.tag} title={portfolio.title} sub={portfolio.subtitle} />
        <div className="folio-filters">
          {portfolio.categories.map((c) => (
            <button key={c} className={'folio-filter' + (c === filter ? ' active' : '')} onClick={() => setFilter(c)}>{c}</button>
          ))}
        </div>
        <div className="grid-auto">
          {shown.map((p, i) => {
            const inner = (
              <Card key={p.title} accent={p.color} interactive pad={false} className="folio-card">
                <div className="folio-thumb"><Icon name={p.icon} className="folio-glyph" size={48} strokeWidth={1.5} /><span className="folio-cat">{p.cat}</span></div>
                <div className="folio-body">
                  <h3>{p.title}</h3><p>{p.desc}</p>
                  {p.url && <span className="folio-link"><Icon name="arrow" size={15} />مشاهدهٔ سایت</span>}
                </div>
              </Card>
            );
            return p.url
              ? <a key={p.title} href={p.url} target="_blank" rel="noopener" className="folio-a">{inner}</a>
              : inner;
          })}
        </div>
      </div>
    </section>
  );
}

function Offer({ offer }) {
  return (
    <section style={{ paddingBlock: '0 64px' }}>
      <div className="container">
        <div className="offer">
          <h3>{offer.title}</h3>
          <p>{offer.desc}</p>
          <Button href="#/contact" variant="light" icon="arrow">{offer.cta}</Button>
        </div>
      </div>
    </section>
  );
}

function Why({ why }) {
  return (
    <section style={{ paddingTop: 0 }}>
      <div className="container">
        <window.SectionHead tag={why.tag} title={why.title} sub={why.subtitle} />
        <div className="grid-auto">
          {why.cards.map((c, i) => (
            <Card key={i} className="why-card">
              <div className="why-ic"><Icon name={c.icon} size={28} /></div>
              <h3>{c.title}</h3><p>{c.desc}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function About({ about }) {
  return (
    <section id="about">
      <div className="container about-grid">
        <div className="about-visual">
          <div className="about-shape"></div>
          <div className="about-mark"><Icon name="acorn" size={84} strokeWidth={1.4} /></div>
        </div>
        <div className="about-content">
          <Eyebrow>{about.tag}</Eyebrow>
          <h2>{about.title}</h2>
          {about.paragraphs.map((p, i) => <p key={i}>{p}</p>)}
          <div className="holding-badge">
            <span className="holding-logo"><Icon name="broadcast" size={26} /></span>
            <span>
              <strong>{about.holdingTitle}</strong>
              <span>{about.holdingDesc} — <a href="https://webcasting.ir" onClick={(e)=>e.preventDefault()}>webcasting.ir</a></span>
            </span>
          </div>
          <div className="about-feats">
            {about.features.map((f, i) => (
              <div className="about-feat" key={i}><strong>{f.value}</strong><span>{f.label}</span></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact({ contact, leadform }) {
  const [sent, setSent] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
    e.target.reset();
  };
  return (
    <section id="contact">
      <div className="container">
        <window.SectionHead tag={contact.tag} title={contact.title} sub={contact.subtitle} />
        <div className="contact-grid">
          <div className="contact-info">
            <h3>{contact.infoTitle}</h3>
            <p>{contact.infoDesc}</p>
            <div className="channels">
              {contact.channels.map((c, i) => (
                <a className="channel" href={c.href} data-ic={c.icon} key={i} target="_blank" rel="noopener" onClick={(e)=>{ if(c.href.startsWith('#')) e.preventDefault(); }}>
                  <span className="channel-ic"><Icon name={c.icon} /></span>
                  <span className="channel-txt"><strong>{c.title}</strong><span>{c.sub}</span></span>
                </a>
              ))}
            </div>
          </div>
          <form className="contact-form" onSubmit={onSubmit}>
            <FieldRow>
              <Field label="نام و نام خانوادگی" required htmlFor="lf-name"><Input id="lf-name" type="text" required /></Field>
              <Field label="شمارهٔ تماس" required htmlFor="lf-phone"><Input id="lf-phone" type="tel" required /></Field>
            </FieldRow>
            <FieldRow>
              <Field label="ایمیل" htmlFor="lf-email"><Input id="lf-email" type="email" /></Field>
              <Field label="نوع خدمت موردنیاز" htmlFor="lf-service"><Select id="lf-service" placeholder="انتخاب کنید…" options={leadform.services} /></Field>
            </FieldRow>
            <Field label="بودجهٔ تقریبی پروژه" htmlFor="lf-budget"><Select id="lf-budget" placeholder="انتخاب کنید…" options={leadform.budgets} /></Field>
            <Field label="توضیحات پروژه"><Textarea placeholder="کوتاه دربارهٔ پروژه‌تان بنویسید…" /></Field>
            <Button block type="submit" icon="arrow">ارسال درخواست مشاورهٔ رایگان</Button>
            <div className="form-note"><Icon name="check" size={16} /><span>درخواست شما در پنل وبکستینگ ثبت می‌شود و کمتر از ۲۴ ساعت پاسخ می‌گیرید.</span></div>
            {sent && <div className="form-success show">{leadform.successMsg}</div>}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer({ footer }) {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <window.Logo sub={false} />
            <p>{footer.brandDesc}</p>
          </div>
          {footer.cols.map((col, i) => (
            <div className="footer-col" key={i}>
              <h5>{col.title}</h5>
              <ul>{col.links.map((l, j) => <li key={j}><a href={l.href} onClick={(e)=>{ if(l.href.startsWith('#')) e.preventDefault(); }}>{l.label}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div>
            <span>{footer.copyright}</span>
            <div className="footer-made">{footer.note}</div>
          </div>
          <div className="social">
            <a href="#" onClick={(e)=>e.preventDefault()} aria-label="Instagram"><Icon name="instagram" size={19} /></a>
            <a href="#" onClick={(e)=>e.preventDefault()} aria-label="Telegram"><Icon name="telegram" size={19} /></a>
            <a href="#" onClick={(e)=>e.preventDefault()} aria-label="YouTube"><Icon name="youtube" size={19} /></a>
            <a href="#" onClick={(e)=>e.preventDefault()} aria-label="WhatsApp"><Icon name="whatsapp" size={19} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Portfolio, Offer, Why, About, Contact, Footer });