// About, Journal, Testimonials, Contact, Tweaks
const { useState: useStateAJ } = React;

function About() {
  const t = window.SABRANA.testimonials;
  return (
    <section className="sbr-about" id="about">
      <div className="sbr-about-head">
        <SectionLabel num="N° 05">About</SectionLabel>
      </div>

      <div className="sbr-about-grid">
        <div className="sbr-about-portrait">
          <img src="assets/jelena-portrait.jpg" alt="Jelena Marinković" />
          <figcaption>
            <span className="sbr-eyebrow">The practitioner</span>
            <div className="sbr-about-name">Jelena Marinković</div>
            <div className="sbr-about-role">Founder · Communications &amp; PR</div>
          </figcaption>
        </div>

        <div className="sbr-about-copy">
          <p className="sbr-about-lede">
            I started in journalism — the Faculty of Political Sciences at the
            University of Belgrade — and moved into communications on the
            other side of the desk. Four and a half years later, the brief
            hasn't changed: say the true thing, say it well, and help someone
            else hear it.
          </p>
          <p>
            Most of those years were spent inside agencies and in-house
            teams — as an account executive at Smart Vision and Represent
            Communications, and as brand manager at Temet Winery — with
            internships earlier at the Faculty of Political Sciences and the
            Yugoslav Drama Theatre. In those roles I worked on accounts for
            Philips, Philip Morris, Miele, Velux, Geberit and the Turkish
            Tourism Office, among others.
          </p>
          <p>
            Sabrana is the next chapter: a small independent practice, with
            Vilotijević Winery and Sanmilend Farm as the first direct clients.
            Remote from Belgrade, in Serbian, English or Turkish, for brands
            who want a communications partner rather than a supplier.
          </p>

          <div className="sbr-about-facts">
            <div>
              <div className="sbr-eyebrow">Education</div>
              <p>Faculty of Political Sciences, Belgrade · Journalism, 2016 – 2023</p>
              <p>London School of Public Relations · 2025 – 2026</p>
            </div>
            <div>
              <div className="sbr-eyebrow">Languages</div>
              <p>Serbian (native) · English · Turkish</p>
            </div>
            <div>
              <div className="sbr-eyebrow">Based in</div>
              <p>Belgrade · working remotely, CET hours</p>
            </div>
            <div>
              <div className="sbr-eyebrow">Recognitions</div>
              <p>Haircare campaign of the quarter, 2025</p>
              <p>Winery brand relaunch — finalist, 2024</p>
            </div>
          </div>
        </div>
      </div>

      <div className="sbr-testimonials">
        {t.map((q, i) => (
          <blockquote key={i} className="sbr-quote">
            <div className="sbr-quote-mark">“</div>
            <p>{q.quote}</p>
            <footer>
              <span className="sbr-quote-name">{q.name}</span>
              <span className="sbr-quote-co">{q.co}</span>
            </footer>
          </blockquote>
        ))}
      </div>
    </section>
  );
}

function Journal() {
  const j = window.SABRANA.journal;
  return (
    <section className="sbr-journal" id="journal">
      <div className="sbr-journal-head">
        <SectionLabel num="N° 06">Journal</SectionLabel>
        <h2 className="sbr-h2">Short <em>notes</em> on the craft.</h2>
        <p className="sbr-lede">
          Occasional essays on public relations, content, and the way small
          brands make big moments.
        </p>
      </div>
      <ul className="sbr-journal-list">
        {j.map((p, i) => (
          <li key={i} className="sbr-journal-item">
            <div className="sbr-journal-meta">
              <span>{p.date}</span>
              <span className="sbr-journal-tag">{p.tag}</span>
            </div>
            <h3 className="sbr-journal-title">{p.title}</h3>
            <p className="sbr-journal-dek">{p.dek}</p>
            <a href="#" className="sbr-journal-link">
              Read the piece <Arrow />
            </a>
          </li>
        ))}
      </ul>
    </section>
  );
}

function Contact() {
  const c = window.SABRANA.contact;
  const [form, setForm] = useStateAJ({
    name: "",
    co: "",
    email: "",
    budget: "",
    brief: "",
    kind: "PR & brand",
  });
  const [sent, setSent] = useStateAJ(false);

  const kinds = [
    "PR & brand",
    "Social & content",
    "Influencer & partners",
    "Events & moderation",
    "Retainer — all of the above",
  ];
  const budgets = ["< 3k €", "3 – 8k €", "8 – 20k €", "20k €+", "Retainer"];

  function submit(e) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <section className="sbr-contact" id="contact">
      <div className="sbr-contact-head">
        <SectionLabel num="N° 07">Contact</SectionLabel>
        <h2 className="sbr-h2-xl">
          <em>Tell</em> me about <br/>your brand.
        </h2>
      </div>

      <div className="sbr-contact-grid">
        <aside className="sbr-contact-aside">
          <div className="sbr-contact-block">
            <div className="sbr-eyebrow">Direct</div>
            <a href={`mailto:${c.email}`} className="sbr-contact-email">
              {c.email}
            </a>
            <a href={`tel:${c.phone.replace(/\s/g, "")}`} className="sbr-contact-phone">
              {c.phone}
            </a>
          </div>
          <div className="sbr-contact-block">
            <div className="sbr-eyebrow">Studio</div>
            <p>{c.city}</p>
            <p>{c.hours}</p>
          </div>
          <div className="sbr-contact-block">
            <div className="sbr-eyebrow">Availability</div>
            <p>Accepting 2 new briefs for Q3 · 2026.</p>
            <p>Typical response within one working day.</p>
          </div>
          <div className="sbr-contact-block">
            <div className="sbr-eyebrow">Elsewhere</div>
            <p><a href="#">Instagram — {c.ig}</a></p>
            <p><a href="#">LinkedIn — {c.li}</a></p>
          </div>
        </aside>

        <form className="sbr-form" onSubmit={submit}>
          {sent ? (
            <div className="sbr-form-sent">
              <div className="sbr-eyebrow">Received</div>
              <h3>Thank you, {form.name || "friend"}.</h3>
              <p>
                Your note is on its way to <em>{c.email}</em>. I'll read it
                carefully and reply within a working day — usually sooner.
              </p>
              <button
                type="button"
                className="sbr-btn sbr-btn-link"
                onClick={() => {
                  setSent(false);
                  setForm({ name: "", co: "", email: "", budget: "", brief: "", kind: "PR & brand" });
                }}
              >
                Send another <Arrow />
              </button>
            </div>
          ) : (
            <>
              <div className="sbr-form-row">
                <label>
                  <span className="sbr-eyebrow">01 · Your name</span>
                  <input
                    required
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    placeholder="Jelena Marinković"
                  />
                </label>
                <label>
                  <span className="sbr-eyebrow">02 · Company</span>
                  <input
                    value={form.co}
                    onChange={(e) => setForm({ ...form, co: e.target.value })}
                    placeholder="Atelier or brand"
                  />
                </label>
              </div>
              <label>
                <span className="sbr-eyebrow">03 · Email</span>
                <input
                  type="email"
                  required
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  placeholder="you@domain.co"
                />
              </label>

              <div>
                <span className="sbr-eyebrow">04 · What do you need?</span>
                <div className="sbr-chips">
                  {kinds.map((k) => (
                    <button
                      type="button"
                      key={k}
                      className={"sbr-chip" + (form.kind === k ? " is-on" : "")}
                      onClick={() => setForm({ ...form, kind: k })}
                    >
                      {k}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <span className="sbr-eyebrow">05 · Indicative budget</span>
                <div className="sbr-chips">
                  {budgets.map((b) => (
                    <button
                      type="button"
                      key={b}
                      className={"sbr-chip" + (form.budget === b ? " is-on" : "")}
                      onClick={() => setForm({ ...form, budget: b })}
                    >
                      {b}
                    </button>
                  ))}
                </div>
              </div>

              <label>
                <span className="sbr-eyebrow">06 · The brief, in your words</span>
                <textarea
                  required
                  rows="5"
                  value={form.brief}
                  onChange={(e) => setForm({ ...form, brief: e.target.value })}
                  placeholder="A paragraph or two is plenty. What you make, who it's for, and what you'd like people to know about it."
                />
              </label>

              <div className="sbr-form-foot">
                <p className="sbr-form-note">
                  I read every enquiry personally. No auto-responders, no
                  account managers.
                </p>
                <button type="submit" className="sbr-btn sbr-btn-solid">
                  Send the brief <Arrow />
                </button>
              </div>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

Object.assign(window, { About, Journal, Contact });