# Contact page — the form posts to contact-submit.php (PHP + MySQL on the
# Namecheap host). Submissions are stored in the database, emailed to the
# address in inc/config.php, and the sender gets an automatic thank-you.
# Admin view of the submissions: /admin/ (not linked from any menu).

CATEGORIES = [
    "Student",
    "Teacher / Educator",
    "Researcher / Scientist",
    "Interested person",
    "Donor / Sponsor",
    "Volunteer",
    "Press / Media",
    "Partner organization",
    "Youth HERO applicant",
    "Sailor / Hannig Cup participant",
    "Other",
]

_options = "\n".join(f'      <option value="{c}">{c}</option>' for c in CATEGORIES)

CONTACT_PAGE = dict(
    path="contact/", title="Contact HERO — Hannig Environmental Research Organization",
    desc="Write to HERO — students, teachers, researchers, press, donors and anyone curious about the work. We reply within 48 hours.",
    head='<meta name="robots" content="index,follow">',
    body=f'''
<div class="page-hero teal"><div class="wrap">
  <div class="crumbs"><a href="{{R}}">Home</a> › Contact</div>
  <div class="eyebrow">Contact</div>
  <h1>Write to us</h1>
  <p>Whether you are a student with a question, a teacher looking for materials, a scientist who wants to collaborate, or simply someone who cares about the water — we want to hear from you. We answer every message within 48 hours.</p>
</div></div>
<section class="band"><div class="wrap">
  <div class="contact-grid">
    <div>
      <form class="contact-form" id="contact-form" action="contact-submit.php" method="post" novalidate>
        <div class="form-status" id="form-status" role="status" aria-live="polite" hidden></div>

        <div class="field-row">
          <div class="field">
            <label for="cf-name">Your name <span class="req">*</span></label>
            <input type="text" id="cf-name" name="name" required maxlength="120" autocomplete="name">
          </div>
          <div class="field">
            <label for="cf-email">Email <span class="req">*</span></label>
            <input type="email" id="cf-email" name="email" required maxlength="190" autocomplete="email" inputmode="email">
          </div>
        </div>

        <div class="field-row">
          <div class="field">
            <label for="cf-category">I am a… <span class="req">*</span></label>
            <select id="cf-category" name="category" required>
              <option value="" selected disabled>Choose one</option>
{_options}
            </select>
          </div>
          <div class="field">
            <label for="cf-org">School or organization <span class="opt">(optional)</span></label>
            <input type="text" id="cf-org" name="organization" maxlength="160" autocomplete="organization">
          </div>
        </div>

        <div class="field">
          <label for="cf-message">Your question or message <span class="req">*</span></label>
          <textarea id="cf-message" name="message" required rows="7" maxlength="5000" placeholder="Tell us what you're curious about, what you're working on, or how we can help."></textarea>
          <div class="hint"><span id="cf-count">0</span> / 5000</div>
        </div>

        <!-- spam traps: hidden from people, filled in by bots -->
        <div class="hp" aria-hidden="true"><label for="cf-website">Website</label><input type="text" id="cf-website" name="website" tabindex="-1" autocomplete="off"></div>
        <input type="hidden" name="ts" id="cf-ts" value="">

        <p class="small consent">By sending this form you agree that HERO may store your message and reply to you by email. We never sell or share your information — see our <a href="{{R}}about/#privacy">privacy note</a>.</p>
        <button class="btn primary" type="submit" id="cf-submit">Send message</button>
      </form>
    </div>

    <aside class="contact-aside">
      <div class="card link-card">
        <h3>Other ways to reach us</h3>
        <p><strong>Email</strong><br><a data-cfg-mailto="org.email" href="mailto:info@heroonline.org">info@heroonline.org</a></p>
        <p><strong>Mail</strong><br><span data-cfg="org.address"><em>[add mailing address]</em></span></p>
        <p class="small">Press and partnership inquiries: choose “Press / Media” or “Partner organization” above and we will route you to the right person.</p>
      </div>
      <div class="card link-card">
        <h3>Looking for something specific?</h3>
        <ul class="plain">
          <li><a href="{{R}}student-hub/#resources">Educational resources for students &amp; teachers</a></li>
          <li><a href="{{R}}student-hub/">Student Hub &amp; the Climate Challenge Scholarship</a></li>
          <li><a href="{{R}}hero-hub/">HERO Hub — news &amp; articles</a></li>
          <li><a href="{{R}}donate/">Make a donation</a></li>
        </ul>
      </div>
    </aside>
  </div>
</div></section>

<script>
(function(){{
  var form=document.getElementById('contact-form'), status=document.getElementById('form-status');
  var msg=document.getElementById('cf-message'), count=document.getElementById('cf-count');
  document.getElementById('cf-ts').value=Math.floor(Date.now()/1000);
  msg.addEventListener('input',function(){{count.textContent=msg.value.length;}});
  function show(kind,text){{status.hidden=false;status.className='form-status '+kind;status.innerHTML=text;status.scrollIntoView({{behavior:'smooth',block:'center'}});}}
  var q=new URLSearchParams(location.search);
  if(q.get('sent')==='1'){{form.reset();show('ok','<strong>Thank you — your message is on its way.</strong> We have emailed you a confirmation and will respond within 48 hours.');}}
  else if(q.get('error')){{show('err',decodeURIComponent(q.get('error')));}}
  form.addEventListener('submit',function(e){{
    e.preventDefault();
    if(!form.checkValidity()){{form.reportValidity();return;}}
    var btn=document.getElementById('cf-submit');btn.disabled=true;btn.textContent='Sending…';
    fetch(form.action,{{method:'POST',body:new FormData(form),headers:{{'Accept':'application/json'}}}})
      .then(function(r){{return r.json();}})
      .then(function(d){{
        if(d.ok){{form.reset();count.textContent='0';document.getElementById('cf-ts').value=Math.floor(Date.now()/1000);show('ok','<strong>Thank you — your message is on its way.</strong> We have emailed you a confirmation and will respond within 48 hours.');}}
        else{{show('err',d.error||'Something went wrong. Please try again or email us directly.');}}
      }})
      .catch(function(){{show('err','We could not reach the server. Please try again in a moment or email us directly.');}})
      .finally(function(){{btn.disabled=false;btn.textContent='Send message';}});
  }});
}})();
</script>
''')

PAGES = [CONTACT_PAGE]