/* submit.jsx — Add a listing (links out to appropriate Google Form) */

/* Google Form URLs — fill these in once the forms are created */
const FORM_URLS = {
  event:     window.FF_FORM_EVENTS      || '',
  sale:      window.FF_FORM_GARAGE      || '/garagesales.html',
  foodtruck: window.FF_FORM_FOODTRUCKS  || '',
  farmstand: window.FF_FORM_FARMSTANDS  || '',
};

const SUBMIT_TYPES = [
  { key:'event',     label:'Community Event',  blurb:'A festival, market, concert or community gathering.',  Icon:IconCalendar, tint:'#cf9521' },
  { key:'sale',      label:'Garage Sale',      blurb:'List your driveway sale on the community map.',        Icon:IconTag,      tint:'#9a3b4f' },
  { key:'foodtruck', label:'Food Truck',        blurb:'Put your truck on the map — where you\'ll be this week.', Icon:IconTruck,   tint:'#b3603f' },
  { key:'farmstand', label:'Farm Stand',        blurb:'Share your stand: what you sell and when you\'re open.', Icon:IconSprout,  tint:'#5c7461' },
];

function Submit() {
  const { go } = useFF();
  const [type, setType] = React.useState('event');
  const meta = SUBMIT_TYPES.find(s => s.key === type);
  const formUrl = FORM_URLS[type];

  const handleSubmit = () => {
    if (formUrl) window.open(formUrl, '_blank', 'noopener');
  };

  return (
    <div>
      <PageBanner eyebrow="Made by neighbours" title="Add a Listing"
        sub="See something the rest of us should know about? Pop it on the board." />

      <div className="page-wrap" style={{ padding:'36px 28px 0', maxWidth:680, margin:'0 auto' }}>
        <div style={{ fontWeight:600, fontSize:14, marginBottom:14 }}>What are you adding?</div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:12, marginBottom:32 }}>
          {SUBMIT_TYPES.map(s => {
            const on = type === s.key;
            return (
              <button type="button" key={s.key} onClick={() => setType(s.key)} className="card"
                style={{ padding:'18px', display:'flex', flexDirection:'column', gap:10, cursor:'pointer', textAlign:'left',
                  borderColor: on ? s.tint : 'var(--line)', background: on ? `${s.tint}12` : '#fffdf6',
                  boxShadow: on ? `0 0 0 2px ${s.tint} inset` : undefined, border:'1.5px solid' }}>
                <span style={{ color:s.tint }}><s.Icon size={26}/></span>
                <div>
                  <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:17 }}>{s.label}</div>
                  <div style={{ color:'var(--ink-soft)', fontSize:13.5, marginTop:4 }}>{s.blurb}</div>
                </div>
              </button>
            );
          })}
        </div>

        {/* CTA */}
        <div className="card" style={{ padding:'28px 32px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, flexWrap:'wrap' }}>
          <div>
            <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:20, marginBottom:6 }}>
              Add a {meta.label}
            </div>
            {formUrl
                ? <p style={{ color:'var(--ink-soft)', margin:0, fontSize:15 }}>You'll be taken to a short Google Form — takes about 2 minutes.</p>
                : <p style={{ color:'var(--ink-faint)', margin:0, fontSize:15, fontFamily:'var(--serif)', fontStyle:'italic' }}>This form is coming soon — check back shortly!</p>}
          </div>
          <button onClick={handleSubmit} className="btn btn-primary"
            style={{ fontSize:16, padding:'14px 22px', opacity: (!formUrl && type !== 'sale') ? .45 : 1 }}
            disabled={!formUrl}>
            <IconArrow size={18}/> Open the form
          </button>
        </div>

        <div style={{ display:'flex', gap:10, marginTop:20, padding:'16px 18px', background:'var(--paper-2)', borderRadius:12, border:'1.5px solid var(--line)' }}>
          <span style={{ color:'var(--spruce-soft)', flexShrink:0 }}><IconHeart size={20}/></span>
          <p style={{ margin:0, fontSize:13.5, color:'var(--ink-soft)' }}>
            Listings are reviewed before they go live. Thanks for helping keep FraserFinds trustworthy and useful.
          </p>
        </div>
        <div style={{ height:60 }}/>
      </div>
    </div>
  );
}

window.Pages = window.Pages || {};
window.Pages.Submit = Submit;