// Octopak website — Contact (/contact)
const { Input, Button, Switch, Badge, Card } = window.OctopakDesignSystem_bc06ed;
const { Flag, ClosingCTA, Icon, WhatsAppGlyph, waLink } = window;
const { FAMILIES } = window;
const { useState } = React;

const QTY_RANGES = ["Not sure yet", "Under 500", "500 – 1,000", "1,000 – 5,000", "5,000 – 10,000", "10,000+"];

// Static-site form delivery via FormSubmit (https://formsubmit.co) — posts
// straight to an inbox, no backend needed. The AJAX endpoint returns JSON
// instead of redirecting, so the existing client-side "Thanks" state still
// works. First-ever submission triggers a one-time confirmation email to
// hello@octopak.com that has to be clicked before delivery turns on.
const FORM_ENDPOINT = "https://formsubmit.co/ajax/hello@octopak.com";

function ContactView({ onNavigate, prefill }) {
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState(false);
  const initial = FAMILIES.find((f) => f.slug === prefill);
  const [picked, setPicked] = useState(initial ? initial.name : FAMILIES[0].name);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setSendError(false);
    setSending(true);
    const formData = new FormData(e.target);
    try {
      const res = await fetch(FORM_ENDPOINT, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: formData,
      });
      if (!res.ok) throw new Error("Form submission failed");
      setSent(true);
    } catch (err) {
      setSendError(true);
    } finally {
      setSending(false);
    }
  };

  if (sent) {
    return (
      <section className="section contact-done">
        <div className="octo-container">
          <Card className="contact-done__card">
            <Badge variant="clay" dot>Message received</Badge>
            <h2 style={{ margin: "14px 0 8px" }}>Thanks, we'll be in touch.</h2>
            <p style={{ color: "var(--text-muted)", margin: "0 0 8px" }}>
              We reply within three business days, usually sooner.
            </p>
            <div style={{ marginTop: "var(--space-4)" }}>
              <Button variant="secondary" onClick={() => setSent(false)}>Send another</Button>
            </div>
          </Card>
        </div>
      </section>
    );
  }

  const waText = initial ? `Hello! I'd like to customise some ${initial.short} for my brand` : "Hello! I'd like to customise some packaging for my brand";

  return (
    <div>
      <section className="page-head">
        <div className="octo-container">
          <p className="octo-eyebrow">Contact</p>
          <h1 className="page-head__title">Talk to us.</h1>
          <p className="page-head__lead">Tell us what you're packaging. We'll reply within three business days, usually sooner.</p>
        </div>
      </section>

      {/* Three ways to reach us */}
      <section className="section section--tight">
        <div className="octo-container">
          <div className="contact-ways">
            <a className="way" href={waLink(waText)} target="_blank" rel="noreferrer" style={{ background: "#25D366", color: "#fff", borderColor: "#25D366" }}>
              <span className="way__icon" style={{ color: "#fff" }}><WhatsAppGlyph size={26} /></span>
              <span className="way__label" style={{ color: "rgba(255,255,255,.85)" }}>WhatsApp</span>
              <span className="way__val" style={{ color: "#fff" }}>Chat now</span>
            </a>
            <a className="way" href="mailto:hello@octopak.com">
              <span className="way__icon"><Icon name="mail" size={24} /></span>
              <span className="way__label">Email</span>
              <span className="way__val">hello@octopak.com</span>
            </a>
            <a className="way" href="https://t.me/octopak" target="_blank" rel="noreferrer">
              <span className="way__icon"><Icon name="message" size={24} /></span>
              <span className="way__label">Telegram</span>
              <span className="way__val">@octopak</span>
            </a>
          </div>
        </div>
      </section>

      {/* Form + aside */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="octo-container contact-grid__inner">
          <form className="quote-form" onSubmit={handleSubmit}>
            {/* FormSubmit config (formsubmit.co/ajax/hello@octopak.com) */}
            <input type="hidden" name="_subject" value="New enquiry from octopak.com" />
            <input type="hidden" name="_template" value="table" />
            <input type="hidden" name="_captcha" value="false" />
            <input type="hidden" name="_cc" value="yida@octopak.com,gail@octopak.com,ellery@octopak.com" />
            {/* Honeypot (spam trap) — FormSubmit silently drops submissions where this is filled */}
            <input type="text" name="_honey" tabIndex={-1} autoComplete="off"
              style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true" />
            <div className="quote-form__row">
              <Input name="name" label="What should we call you?" placeholder="Your name" required />
              <Input name="brand" label="Your brand" placeholder="Brand or company" />
            </div>
            <Input name="contact" label="WhatsApp number or email" placeholder="So we can reach you" required
              hint="We need a way to reach you: WhatsApp or email is fine." />
            <Input name="packaging" label="What are you packaging?" placeholder="e.g. flat whites, cookies, retail boxes" />
            <div>
              <span className="field-label">Which range?</span>
              <div className="chip-row">
                {FAMILIES.map((f) => (
                  <button type="button" key={f.slug} className={`chip ${picked === f.name ? "is-on" : ""}`}
                    onClick={() => setPicked(f.name)}>{f.name}</button>
                ))}
              </div>
              <input type="hidden" name="range" value={picked} />
            </div>
            <div className="octo-field">
              <span className="octo-field__label">Rough quantity (optional)</span>
              <select className="octo-input" name="quantity" defaultValue="Not sure yet">
                {QTY_RANGES.map((q) => <option key={q}>{q}</option>)}
              </select>
            </div>
            <Input name="message" label="Anything else?" placeholder="Deadlines, references, questions" />
            {sendError && (
              <p style={{ color: "var(--terra-600)", fontSize: "var(--fs-sm)" }}>
                Something went wrong sending that. Message us on{" "}
                <a href={waLink(waText)} target="_blank" rel="noreferrer">WhatsApp</a> instead, or try again.
              </p>
            )}
            <Button type="submit" variant="primary" size="lg" disabled={sending}>{sending ? "Sending..." : "Send"}</Button>
          </form>

          <aside className="contact-aside octo-kraft">
            <h3>Where to find us</h3>
            <p className="contact-aside__muted">Customised eco packaging for F&amp;B, made to order.</p>
            <ul className="contact-aside__list">
              <li><span>Singapore</span><span className="val">22 Sin Ming Lane, Singapore 573969</span></li>
              <li><span>Email</span><a href="mailto:hello@octopak.com">hello@octopak.com</a></li>
              <li><span>Telegram</span><a href="https://t.me/octopak" target="_blank" rel="noreferrer">@octopak</a></li>
              <li><span>Instagram</span><a href="https://www.instagram.com/octo.pak/" target="_blank" rel="noreferrer">@octo.pak</a></li>
              <li><span>Facebook</span><a href="https://www.facebook.com/octo.pak/" target="_blank" rel="noreferrer">octo.pak</a></li>
            </ul>
          </aside>
        </div>
      </section>
    </div>
  );
}

const { SectionHead } = window;

// Baseline generic terms/privacy copy, accurate to what this site actually does
// (enquiry form, no checkout, no analytics or cookies at time of writing).
// Flagged for a lawyer's review before relying on it — see LEGAL_NOTE below.
const LEGAL_UPDATED = "23 August 2026";

const TERMS_SECTIONS = [
  { h: "Enquiries and quotes", b: "Submitting the contact form or messaging us on WhatsApp, Telegram, or email is an enquiry, not an order. Quotes are estimates based on the information you give us, and may change once we've confirmed final artwork, quantity, and specification." },
  { h: "Orders", b: "An order is confirmed only once you've approved a written quote and signed off on the mockup. Production begins after that sign-off, not before." },
  { h: "Artwork and intellectual property", b: "You confirm that any logo, artwork, or brand assets you send us are yours to use, or that you have permission to use them. Octopak does not create brands or logos from scratch and does not verify your rights to third-party designs on your behalf." },
  { h: "Pricing and payment", b: "Pricing, payment terms, and any deposit required are confirmed in your quote before production starts." },
  { h: "Lead times", b: "Typical lead time is six to eight weeks from mockup sign-off, all in. This can vary by product and quantity, as stated in your quote." },
  { h: "Changes and cancellations", b: "Small changes are sometimes possible after mockup sign-off. Anything affecting the print plate, dieline, or substrate restarts parts of the process and may affect price and timeline. We'll tell you what's feasible before you commit to a change." },
  { h: "Limitation of liability", b: "We work to produce your order to the specification you sign off on. To the extent permitted by law, Octopak's liability for any claim relating to an order is limited to the value of that order." },
  { h: "Governing law", b: "These terms are governed by the laws of Singapore." },
];

const PRIVACY_SECTIONS = [
  { h: "What we collect", b: "When you use our enquiry form, we ask for your name, brand or company name, a way to reach you (WhatsApp number or email), what you're packaging, and any other details you choose to share. We don't collect payment information through this site." },
  { h: "How we use it", b: "We use this information only to respond to your enquiry: to understand what you need, provide a quote, and follow up about your order. We don't sell or rent your information to third parties." },
  { h: "Form delivery", b: "The enquiry form is delivered to us using FormSubmit, a third-party form-to-email service. Submitting the form sends your information through FormSubmit's servers to the Octopak team's inboxes; it isn't stored on our own systems beyond those emails." },
  { h: "Third-party contact channels", b: "If you reach us via WhatsApp, Telegram, or email, that conversation is also subject to the privacy practices of that platform, not just this policy." },
  { h: "Cookies and tracking", b: "This site does not use cookies or analytics tracking of its own. The form-delivery service may use technical cookies to process submissions." },
  { h: "Data retention", b: "We keep enquiry information for as long as needed to respond to you and, if you become a customer, to fulfil and support your order." },
  { h: "Your rights", b: "You can ask us to delete or correct your information at any time by contacting us at hello@octopak.com." },
  { h: "Changes to this policy", b: "We may update this policy from time to time. Continued use of the site after a change means you accept the update." },
];

function LegalView({ onNavigate, kind }) {
  const title = kind === "terms" ? "Terms" : "Privacy policy";
  const sections = kind === "terms" ? TERMS_SECTIONS : PRIVACY_SECTIONS;
  return (
    <div>
      <section className="page-head">
        <div className="octo-container octo-container--narrow">
          <p className="octo-eyebrow">Legal</p>
          <h1 className="page-head__title">{title}</h1>
          <p className="page-head__lead" style={{ fontSize: "var(--fs-sm)" }}>Last updated {LEGAL_UPDATED}.</p>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="octo-container octo-container--narrow legal">
          {sections.map((s) => (
            <React.Fragment key={s.h}>
              <h2>{s.h}</h2>
              <p>{s.b}</p>
            </React.Fragment>
          ))}
          <h2>Contact</h2>
          <p>Questions about this {title.toLowerCase()}: hello@octopak.com.</p>
          <p className="ph-block" style={{ marginTop: "var(--space-6)" }}>
            <Flag block>General starting-point copy, not a substitute for legal review</Flag> This
            page describes what the site actually does today. Have it reviewed by a lawyer before
            relying on it, and update it if the business changes (adding checkout, analytics,
            or new data collection, for example).
          </p>
        </div>
      </section>
      <ClosingCTA onNavigate={onNavigate} title="Questions?"
        sub="Message us on WhatsApp or email hello@octopak.com. We reply within three business days, usually sooner." />
    </div>
  );
}

Object.assign(window, { ContactView, LegalView });